/* ═══════════════════════════════════════════════════════════════════════════
   INFORME:CHILE · Sistema de diseño de control.informechile.cl  (v1 · 12 oct 2026)
   Una sola hoja para las páginas comunes (inicio, ingreso, usuarios, calendario).
   Los paneles de cada programa la adoptan de a uno: los nombres de variables
   (--surface, --line, --ink, --ink-dim, --ink-mute, --mono, --red, --green, --r)
   son los mismos de panel-mdt.php, así no hay que reescribirlos.
   Marca madre: tinta #0e0e0e · marfil #fff3ea · rojo #ac0e24 · Work Sans + JetBrains Mono.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tanda 199: los botones y campos usan la letra de la página (sin esto, algunos salían en Arial). :where() no le gana a ninguna otra regla */
:where(button,input,select,textarea){font-family:inherit}
:root{
  --tinta:#0e0e0e; --grafito:#1f1f1f; --marfil:#fff3ea; --rojo:#ac0e24; --rojo-p:#7a0a19;
  --red:var(--rojo); --red-bright:#d11a30; --green:#038d61; --green-deep:#026a48; --blue:#023661; --amber:#d97706;
  /* Colores de programa (los de ic-marca.css) */
  --p-ic:#ac0e24; --p-mdt:#036c49; --p-mdd:#1e6b78; --p-mdn:#2c4f86; --p-mda:#ac0e24;
  --p-rv:#2251ba; --p-baci:#694693; --p-qai:#f5a300; --p-yt:#e02424;
  --p-ig:#d62976; --p-fb:#1877f2; --p-x:#8b8b8b; --p-th:#9a9a9a; --p-tt:#25c2c9;
  /* Redes */
  --r-ig:#c13584; --r-fb:#1877f2; --r-x:#6b6b6b; --r-tt:#25c2c9; --r-yt:#e02424; --r-li:#0a66c2; --r-th:#7b7b7b; --r-wa:#25a244;
  --font:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:8px; --r-s:6px; --r-l:14px; --tap:44px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ancho:1180px;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0e0e0e; --surface:#171615; --surface-2:#1f1d1b; --inset:#0a0a0a;
  --line:#2c2a27; --line-strong:#3d3a35; --ink:#fff3ea; --ink-dim:#a39a8e; --ink-mute:#6e665b;
  --shadow:0 18px 40px -24px rgba(0,0,0,.9); --green-ink:#5fe0a8; --red-ink:#ff8a95; --amber-ink:#ffb65c;
  --logo-tinta:none; --logo-marfil:inline-block;
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f4eadf; --surface:#fffaf5; --surface-2:#f8eee3; --inset:#ffffff;
  --line:#e2d4c3; --line-strong:#cbb9a3; --ink:#0e0e0e; --ink-dim:#5f574d; --ink-mute:#9b8f80;
  --shadow:0 18px 40px -26px rgba(60,40,20,.45); --green-ink:#046b4a; --red-ink:#ac0e24; --amber-ink:#9a5200;
  --logo-tinta:inline-block; --logo-marfil:none;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:400 15px/1.5 var(--font);background:var(--bg);color:var(--ink);min-height:100vh;min-height:100dvh;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Logo (siempre el archivo, nunca compuesto con teclado) ─────────────── */
.logo-ic{display:inline-flex;align-items:center;line-height:0}
.logo-ic img{height:18px;width:auto}
.logo-ic .l-tinta{display:var(--logo-tinta)}
.logo-ic .l-marfil{display:var(--logo-marfil)}

/* ── Cabecera común (la de CABECERA_SALA_DE_CONTROL.md) ─────────────────── */
:root{--sala:var(--rojo)}
.cab{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.cab-in{max-width:var(--ancho);margin:0 auto;padding:12px 24px;display:flex;flex-direction:column;gap:10px}
.cab-top{display:flex;align-items:center;gap:14px;min-height:40px}
.marca{display:flex;align-items:center;gap:12px;min-width:0;flex:0 1 auto;text-decoration:none}
.marca-dot{width:10px;height:10px;border-radius:50%;background:var(--sala);box-shadow:0 0 0 4px color-mix(in srgb,var(--sala) 22%,transparent);flex-shrink:0}
.marca h1{margin:0;font-size:18px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;line-height:1.15}
.marca .ed{font-family:var(--mono);font-size:11px;color:var(--ink-dim);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cab-der{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;row-gap:8px}
.acc-link{font:600 13px/1 var(--font);padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);color:inherit;background:transparent;text-decoration:none;cursor:pointer;white-space:nowrap}
.acc-link:hover{border-color:var(--line-strong);background:var(--surface-2)}
.acc-vivo{background:var(--sala);border-color:var(--sala);color:#fff}
.acc-vivo:hover{background:var(--sala);filter:brightness(1.1)}
.estado{font-family:var(--mono);font-size:11px;font-weight:600;padding:6px 11px;border-radius:99px;border:1px solid var(--line);color:var(--ink-mute);white-space:nowrap;transition:.2s}
.estado.ok{color:var(--green-ink);border-color:color-mix(in srgb,var(--green) 45%,var(--line))}
.estado.error{color:#fff;background:var(--red);border-color:var(--red)}
.icon-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:transparent;border-radius:var(--r);cursor:pointer;color:var(--ink-dim);font-size:16px;flex-shrink:0}
.icon-btn:hover{color:var(--ink);border-color:var(--line-strong)}
@media (max-width:900px){.cab-der .acc-link:not(.acc-vivo):not(.siempre){display:none}}
@media (max-width:760px){.marca .ed{display:none}.cab-in{padding:10px 16px}}

/* ── Página ────────────────────────────────────────────────────────────── */
.pag{max-width:var(--ancho);margin:0 auto;padding:28px 24px 64px}
@media (max-width:760px){.pag{padding:18px 16px 56px}}
.sec{margin-bottom:36px}
.sec-t{display:flex;align-items:baseline;gap:12px;margin:0 0 12px;font-size:15px;font-weight:700;letter-spacing:-.005em}
.sec-t small{font-weight:400;color:var(--ink-mute);font-size:13px}
.sec-t::after{content:"";flex:1;height:1px;background:var(--line);transform:translateY(-4px)}
.dim{color:var(--ink-dim)} .mute{color:var(--ink-mute)}
.mono{font-family:var(--mono)}

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 16px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 14px/1 var(--font);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,filter .15s}
.btn:hover{border-color:var(--line-strong);background:var(--surface-2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-pri{background:var(--rojo);border-color:var(--rojo);color:#fff}
.btn-pri:hover{background:var(--rojo);border-color:var(--rojo);filter:brightness(1.12)}
.btn-ok{background:var(--green);border-color:var(--green);color:#fff}
.btn-ok:hover{background:var(--green);filter:brightness(1.1)}
.btn-tinta{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn-tinta:hover{background:var(--ink);filter:brightness(1.15)}
.btn-ghost{background:transparent;border-color:transparent}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--line)}
.btn-peligro{color:var(--red-ink)}
.btn-peligro:hover{border-color:var(--red)}
.btn-s{min-height:34px;padding:0 11px;font-size:13px}
.btn-bloque{width:100%}

/* Segmentado (vistas, filtros) */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);padding:3px;background:var(--surface);gap:2px}
.seg button{border:0;background:transparent;color:var(--ink-dim);font:600 13px/1 var(--font);padding:9px 12px;border-radius:5px;cursor:pointer;min-height:34px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

/* ── Formularios ───────────────────────────────────────────────────────── */
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo>label,.lbl{font-size:13px;font-weight:600;color:var(--ink-dim)}
.campo .ayuda{font-size:12px;color:var(--ink-mute)}
.inp,.campo input:not([type=checkbox]):not([type=radio]):not([type=file]),.campo select,.campo textarea{width:100%;min-height:var(--tap);padding:10px 12px;background:var(--inset);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);font:400 16px/1.4 var(--font);outline:none;-webkit-appearance:none;appearance:none}
.campo textarea{min-height:120px;resize:vertical;line-height:1.5}
.campo select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-dim) 50%),linear-gradient(135deg,var(--ink-dim) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.inp:focus,.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--ink-dim);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 10%,transparent)}
.fila{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.check{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;min-height:var(--tap)}
.check input{width:20px;height:20px;accent-color:var(--rojo)}

/* Chips (toggle) */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--ink-dim);font:600 13px/1 var(--font);cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--line-strong);color:var(--ink)}
.chip[aria-pressed="true"]{background:color-mix(in srgb,var(--c,var(--ink)) 16%,transparent);border-color:var(--c,var(--ink));color:var(--ink)}
.chip .pt{width:8px;height:8px;border-radius:50%;background:var(--c,var(--ink-mute))}

/* Pastillas de estado */
.pill{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--font);padding:5px 9px;border-radius:99px;border:1px solid var(--line);white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.borrador{color:var(--ink-dim);border-style:dashed}
.pill.aprobado{color:var(--green-ink);border-color:color-mix(in srgb,var(--green) 50%,var(--line))}
.pill.publicado{color:var(--ink-mute)}
.pill.atrasado{color:var(--red-ink);border-color:color-mix(in srgb,var(--red) 55%,var(--line))}

/* ── Tarjetas del inicio ───────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.card{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 18px 16px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s;min-height:84px}
.card::before{content:"";position:absolute;left:-1px;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--c,var(--line-strong))}
.card:hover{border-color:var(--line-strong);background:var(--surface-2)}
.card-t{font-size:15px;font-weight:700;line-height:1.3}
.card-d{font-size:13px;color:var(--ink-dim);line-height:1.45}
.card.off{opacity:.5;pointer-events:none}
.card .tag{position:absolute;top:14px;right:14px;font:600 11px/1 var(--font);padding:4px 7px;border-radius:99px;background:var(--surface-2);color:var(--ink-dim);border:1px solid var(--line)}
.card .tag.nuevo{background:var(--rojo);border-color:var(--rojo);color:#fff}
.card.destacada{grid-column:span 2;flex-direction:row;align-items:center;gap:18px;padding:20px 22px 20px 24px}
.card.destacada .card-t{font-size:18px}
@media (max-width:620px){.card.destacada{grid-column:auto}}

/* ── Panel / caja ──────────────────────────────────────────────────────── */
.caja{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.aviso{padding:11px 14px;border-radius:var(--r);border:1px solid var(--line);font-size:14px}
.aviso.ok{border-color:color-mix(in srgb,var(--green) 50%,var(--line));background:color-mix(in srgb,var(--green) 10%,var(--surface))}
.aviso.err{border-color:color-mix(in srgb,var(--red) 55%,var(--line));background:color-mix(in srgb,var(--red) 10%,var(--surface))}

/* ── Diálogos: hoja inferior en el teléfono, ventana en escritorio ─────── */
dialog.dlg{border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0;border-radius:var(--r-l);width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - 48px);box-shadow:var(--shadow);overflow:hidden}
dialog.dlg[open]{display:flex;flex-direction:column;animation:dlg-in .22s var(--ease)}
dialog.dlg::backdrop{background:rgba(8,6,4,.62);backdrop-filter:blur(2px)}
@keyframes dlg-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.dlg-cab{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);flex-shrink:0}
.dlg-cab h2{margin:0;font-size:17px;font-weight:800;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlg-cuerpo{padding:18px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:16px;overscroll-behavior:contain}
.dlg-pie{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line);flex-shrink:0;background:var(--surface)}
.dlg-pie .esp{flex:1}
@media (max-width:640px){
  dialog.dlg{width:100vw;max-width:100vw;max-height:94dvh;margin:auto 0 0;border-radius:var(--r-l) var(--r-l) 0 0;border-bottom:0}
  dialog.dlg[open]{animation:sheet-in .26s var(--ease)}
  .dlg-pie{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}
@keyframes sheet-in{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}

/* ── Aviso flotante ────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);font:600 14px/1.3 var(--font);padding:12px 16px;border-radius:var(--r);opacity:0;pointer-events:none;transition:.25s var(--ease);z-index:100;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--red);color:#fff}

/* ── Pie ───────────────────────────────────────────────────────────────── */
.pie{max-width:var(--ancho);margin:0 auto;padding:22px 24px 36px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--ink-mute);font-size:13px;border-top:1px solid var(--line)}
.pie .esp{flex:1}

/* Utilidades finales (al final para que ganen) */
[hidden]{display:none!important}
.dlg-cuerpo>*{flex-shrink:0}

/* 28 oct · el indicador de estado (Guardado, Guardando…) no se ve cuando está vacío: antes quedaba una píldora vacía en la cabecera */
.estado:empty{display:none}