:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: barra del prototipo arriba; debajo, el sistema con su menú lateral
   (Panel, las tres entradas del Día D y Configuración) y el área de trabajo. */
:root {
  --base: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --canvas: #f5f5f7; --surface: #ffffff; --subtle: #f0f1f3; --ink: #202124; --muted: #5f6368;
  --line: #e3e5e8; --control-line: #767b84; --accent: #0067c7; --accent-ink: #0067c7; --accent-hover: #0056a8;
  --on-accent: #ffffff; --selected: #eaf2fb; --proto: #fff7e0; --proto-line: #e6c772; --proto-ink: #5c4400;
  --map-bg: #eef1f4; --map-edge: #ffffff; --halo: #ffffff; --label: #121a24; --hatch: #8a9099; --hatch-bg: #dfe3e8;
  --av-1: #c8452e; --av-2: #df961c; --av-3: #7fb2ec; --av-4: #1f5ea8;
  --estado-gris: #9aa0a6; --estado-azul: #7fb2ec; --estado-ok: #1f5ea8; --estado-rojo: #c8452e; --estado-fin: #3c4043;
  --warn-ink: #8a5300; --crit-ink: #a8361f; --good-ink: #1f5ea8;
  --shadow: 0 8px 28px rgb(20 28 40 / 12%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #151618; --surface: #202226; --subtle: #292c31; --ink: #f0f1f3; --muted: #adb2b9;
    --line: #35383e; --control-line: #8d939c; --accent: #0067c7; --accent-ink: #8bbdff; --accent-hover: #1a78d4;
    --on-accent: #ffffff; --selected: #26384c; --proto: #2c2615; --proto-line: #6b5a26; --proto-ink: #f1dca0;
    --map-bg: #1c1f23; --map-edge: #15171a; --halo: #15171a; --label: #f4f6f8; --hatch: #7d848d; --hatch-bg: #2b3036;
    --av-1: #c4432f; --av-2: #bc861c; --av-3: #5891da; --av-4: #2f5cb8;
    --estado-gris: #6f757d; --estado-azul: #5891da; --estado-ok: #2f5cb8; --estado-rojo: #c4432f; --estado-fin: #c9ccd1;
    --warn-ink: #f0bf63; --crit-ink: #f08f7c; --good-ink: #8bbdff;
    --shadow: 0 8px 28px rgb(0 0 0 / 40%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #151618; --surface: #202226; --subtle: #292c31; --ink: #f0f1f3; --muted: #adb2b9;
  --line: #35383e; --control-line: #8d939c; --accent: #0067c7; --accent-ink: #8bbdff; --accent-hover: #1a78d4;
  --on-accent: #ffffff; --selected: #26384c; --proto: #2c2615; --proto-line: #6b5a26; --proto-ink: #f1dca0;
  --map-bg: #1c1f23; --map-edge: #15171a; --halo: #15171a; --label: #f4f6f8; --hatch: #7d848d; --hatch-bg: #2b3036;
  --av-1: #c4432f; --av-2: #bc861c; --av-3: #5891da; --av-4: #2f5cb8;
  --estado-gris: #6f757d; --estado-azul: #5891da; --estado-ok: #2f5cb8; --estado-rojo: #c4432f; --estado-fin: #c9ccd1;
  --warn-ink: #f0bf63; --crit-ink: #f08f7c; --good-ink: #8bbdff;
  --shadow: 0 8px 28px rgb(0 0 0 / 40%);
  color-scheme: dark;
}
html { font-size: var(--base); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.5;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 16px 40px;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
p { margin: 0; }
.num, td.n, th.n { font-variant-numeric: tabular-nums; }
.oculto-visual { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.envoltura { max-width: 1440px; margin: 0 auto; display: grid; gap: 14px; }

/* ── Barra del prototipo ── */
.proto { display: grid; gap: 10px; padding: 12px 14px; border: 1px dashed var(--proto-line); background: var(--proto); color: var(--proto-ink); border-radius: 12px; font-size: .93rem; }
.proto-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.proto-fila .txt { flex: 1 1 320px; min-width: 0; }
.proto strong { letter-spacing: .1em; font-size: .78rem; }
.proto label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.proto select, .proto input[type="range"] { min-height: 36px; }
.proto select { border-radius: 8px; border: 1px solid var(--proto-line); background: var(--surface); padding: 0 8px; color: var(--ink); }
.proto input[type="range"] { width: min(260px, 60vw); accent-color: var(--accent); }
.btn-proto { min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--proto-line); background: var(--surface); color: var(--ink); font-weight: 600; }
.btn-proto:hover { border-color: var(--proto-ink); }
.hora-txt { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 4.5ch; display: inline-block; }

/* ── Marco del sistema ── */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: clip; min-height: 640px; }
.app.sin-menu { grid-template-columns: minmax(0, 1fr); }
.lateral { border-right: 1px solid var(--line); padding: 18px 12px; display: grid; align-content: start; gap: 4px; background: var(--surface); }
.marca { display: flex; align-items: center; gap: 10px; padding: 0 8px 14px; }
.marca-logo { width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 800; }
.marca b { display: block; font-size: .95rem; line-height: 1.2; }
.marca small { color: var(--muted); font-size: .8rem; }
.grupo { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 14px 10px 4px; }
.nav { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 9px; background: none; text-align: left; font-weight: 550; color: var(--ink); }
.nav:hover { background: var(--subtle); }
.nav[aria-current="page"] { background: var(--selected); color: var(--accent-ink); font-weight: 700; }
.nav svg { width: 18px; height: 18px; flex: none; }
.nav .nuevo { margin-left: auto; font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: var(--accent-ink); border: 1px solid currentColor; border-radius: 6px; padding: 0 5px; }
.nav-nota { font-size: .8rem; color: var(--muted); padding: 10px 10px 0; line-height: 1.4; }
.cuenta { margin-top: 14px; padding: 10px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.cuenta b { color: var(--ink); display: block; }

.area { min-width: 0; padding: 22px 24px 28px; display: grid; align-content: start; gap: 18px; }
.cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.ceja { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cabeza h2 { font-size: 1.85rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.15; margin-top: 2px; }
.cabeza p { color: var(--muted); max-width: 70ch; margin-top: 4px; }

/* Pestañas */
.pestanas { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; background: var(--subtle); border: 1px solid var(--line); border-radius: 11px; }
.pestanas button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 8px; background: none; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.pestanas button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }
.cnt { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--av-1); color: #fff; font-size: .75rem; font-weight: 700; display: inline-grid; place-items: center; }
.sub-pestanas { display: flex; flex-wrap: wrap; gap: 8px; }
.sub-pestanas button { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: .9rem; }
.sub-pestanas button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* Indicadores */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.tile { display: grid; align-content: start; gap: 6px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.tile-et { font-size: .82rem; color: var(--muted); font-weight: 650; }
.tile-valor { font-size: 1.7rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile-valor small { font-size: .95rem; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.tile-sub { font-size: .86rem; color: var(--muted); }
.tile.destacado { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.medidor { height: 8px; border-radius: 6px; background: var(--subtle); overflow: hidden; border: 1px solid var(--line); }
.medidor i { display: block; height: 100%; border-radius: 6px; }

/* Niveles: el mismo juego en todas las pantallas */
.nivel { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 650; white-space: nowrap; }
.nivel::before { content: ""; width: 11px; height: 11px; border-radius: 3px; background: var(--c, var(--hatch)); flex: none; border: 1px solid rgb(0 0 0 / 15%); }
.n-critico { --c: var(--av-1); } .n-bajo { --c: var(--av-2); } .n-camino { --c: var(--av-3); } .n-cumplida { --c: var(--av-4); }
.n-sin::before { background: repeating-linear-gradient(45deg, var(--hatch) 0 2px, var(--hatch-bg) 2px 5px); }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .84rem; color: var(--muted); }

/* Tarjetas, tablas, botones */
.tarjeta { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); min-width: 0; }
.tarjeta-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.tarjeta-cab h3 { font-size: 1.05rem; font-weight: 700; }
.tarjeta-cuerpo { padding: 14px 16px; display: grid; gap: 12px; }
.marco-tabla { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: .78rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; background: var(--surface); }
td.n, th.n { text-align: right; }
tr.clic { cursor: pointer; }
tr.clic:hover td { background: var(--subtle); }
tr.total td { font-weight: 700; border-bottom: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 13px; border-radius: 9px; border: 1px solid var(--control-line); background: var(--surface); color: var(--ink); font-size: .92rem; font-weight: 600; white-space: nowrap; }
.btn:hover { background: var(--subtle); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn-primario { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn-primario:hover { background: var(--accent-hover); }
.btn-chico { min-height: 32px; padding: 0 10px; font-size: .86rem; }
.btn-texto { border: 0; background: none; color: var(--accent-ink); font-weight: 600; padding: 0; min-height: 32px; }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.crece { flex: 1 1 auto; }
.nota { font-size: .88rem; color: var(--muted); line-height: 1.5; max-width: 75ch; }
.aviso { padding: 12px 14px; border-radius: 10px; background: var(--subtle); border: 1px solid var(--line); font-size: .92rem; }
.aviso b { color: var(--ink); }
input[type="number"], input[type="search"], input[type="text"], select.campo-sel, textarea { min-height: 38px; border-radius: 8px; border: 1px solid var(--control-line); background: var(--surface); padding: 0 10px; color: var(--ink); max-width: 100%; }
textarea { padding: 8px 10px; width: 100%; min-height: 76px; resize: vertical; }
input[type="number"] { width: 9ch; font-variant-numeric: tabular-nums; }
.etiqueta { font-size: .8rem; font-weight: 650; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); font-size: .78rem; font-weight: 650; color: var(--muted); white-space: nowrap; }

/* ── Mapa ── */
.mapa-zona { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.lienzo { position: relative; background: var(--map-bg); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.lienzo svg.mapa { display: block; width: 100%; height: auto; max-height: 620px; }
.sec path { stroke: var(--map-edge); stroke-width: 1.4; vector-effect: non-scaling-stroke; transition: opacity .15s; }
.sec { cursor: pointer; outline: none; }
.sec:focus-visible path, .sec.sel path { stroke: var(--ink); stroke-width: 3; }
.etq { font-weight: 750; fill: var(--label); paint-order: stroke; stroke: var(--halo); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; font-variant-numeric: tabular-nums; }
.etq tspan.v { font-weight: 600; }
.lupa { position: absolute; top: 12px; right: 12px; width: 150px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }
.lupa p { font-size: .72rem; color: var(--muted); padding: 4px 8px; border-bottom: 1px solid var(--line); }
.lupa svg { display: block; width: 100%; height: auto; }
.pie-mapa { padding: 8px 12px; font-size: .78rem; color: var(--muted); border-top: 1px solid var(--line); background: var(--surface); }
.ficha { position: sticky; top: 12px; }
.ficha h3 { font-size: 1.35rem; font-weight: 750; }
.cifra-grande { font-size: 1.6rem; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.desglose { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.desglose div { padding: 8px 10px; border-radius: 9px; background: var(--subtle); min-width: 0; }
.desglose b { display: block; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.desglose span { font-size: .78rem; color: var(--muted); }
.meta-caja { border: 1px solid var(--accent); border-radius: 12px; padding: 12px; display: grid; gap: 10px; background: var(--selected); }
.meta-caja h4 { font-size: .95rem; }
.sugerencia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: .9rem; }
.lista-mini { display: grid; gap: 4px; font-size: .88rem; }
.lista-mini div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.lista-mini div:last-child { border-bottom: 0; }

/* ── Jornada ── */
.vivo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px; align-items: start; }
.rejilla-casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.casilla { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; display: grid; gap: 4px; background: var(--surface); border-left: 5px solid var(--e, var(--estado-gris)); min-width: 0; }
.casilla b { font-size: .9rem; }
.casilla small { color: var(--muted); font-size: .8rem; }
.e-sin_instalar { --e: var(--estado-gris); } .e-instalada { --e: var(--estado-azul); } .e-abierta { --e: var(--estado-ok); } .e-incidencia { --e: var(--estado-rojo); } .e-cerrada { --e: var(--estado-fin); }
.estado-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--muted); }
.estado-leyenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; background: var(--e); vertical-align: -1px; }
svg.grafica { display: block; width: 100%; height: auto; }
svg.grafica text { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.alerta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-left: 5px solid var(--sev, var(--av-2)); border-radius: 10px; }
.alerta.alta { --sev: var(--av-1); } .alerta.media { --sev: var(--av-2); }
.alerta time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9rem; }
.alerta p { font-size: .92rem; }
.alerta small { display: block; color: var(--muted); font-size: .8rem; }
.historial { display: grid; gap: 0; }
.historial div { display: grid; grid-template-columns: 4.5ch minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.historial time { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 650; }
details.sec-falta { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
details.sec-falta > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) auto; gap: 12px; align-items: center; padding: 12px 14px; cursor: pointer; }
details.sec-falta > summary::-webkit-details-marker { display: none; }
details.sec-falta[open] > summary { border-bottom: 1px solid var(--line); }
.falta-cuerpo { padding: 10px 14px 14px; display: grid; gap: 12px; }
.casilla-falta { display: grid; gap: 8px; }
.personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.persona { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 10px; border: 1px solid var(--line); border-radius: 9px; font-size: .9rem; min-width: 0; }
.persona span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Modo Campo ── */
.campo-marco { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 24px; align-items: start; }
.telefono { border: 10px solid var(--ink); border-radius: 34px; background: var(--canvas); overflow: hidden; max-width: 400px; width: 100%; }
.tel-cab { background: var(--surface); padding: 14px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.tel-cuerpo { padding: 12px; display: grid; gap: 10px; max-height: 640px; overflow-y: auto; }
.tel-pie { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface); border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
.btn-grande { min-height: 48px; font-size: 1rem; width: 100%; }

/* ── Diálogo «Qué cambia» y avisos ── */
dialog { border: 1px solid var(--line); border-radius: 16px; padding: 0; width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
dialog::backdrop { background: rgb(10 14 20 / 45%); }
.dlg-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.dlg-cab h2 { font-size: 1.35rem; }
.dlg-cuerpo { padding: 16px 20px 20px; display: grid; gap: 14px; }
.comparacion td:first-child { font-weight: 700; }
.comparacion td { vertical-align: top; }
.hoy { color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: 10px; font-size: .92rem; box-shadow: var(--shadow); z-index: 60; max-width: calc(100vw - 32px); }

@media (max-width: 1100px) {
  .mapa-zona, .vivo { grid-template-columns: minmax(0, 1fr); }
  .ficha { position: static; }
}
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; display: flex; gap: 6px; overflow-x: auto; align-items: center; }
  .lateral .marca, .lateral .nav-nota, .lateral .cuenta { display: none; }
  .grupo { padding: 0 4px 0 8px; white-space: nowrap; }
  .nav { width: auto; white-space: nowrap; flex: none; }
  .area { padding: 16px 14px 22px; }
  .cabeza h2 { font-size: 1.5rem; }
  .campo-marco { grid-template-columns: minmax(0, 1fr); }
  .telefono { border-width: 0; border-radius: 0; max-width: none; }
  details.sec-falta > summary { grid-template-columns: minmax(0, 1fr) auto; }
  details.sec-falta > summary .med-falta { grid-column: 1 / -1; }
  .lupa { width: 110px; }
  .alerta { grid-template-columns: auto minmax(0, 1fr); }
  .alerta .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Nodo Cero: identidad independiente y portable, sin fuentes ni CDNs. */
:root { --base:14px; --accent:#0078c1; --accent-ink:#0065a4; --accent-hover:#0062a0; --selected:#e9f5fc; --canvas:#edf2f6; --ink:#102b43; --muted:#52667a; --line:#dce4ec; --subtle:#f3f6f9; --proto:#fff; --proto-line:#d4e1eb; --proto-ink:#102b43; --shadow:0 12px 36px rgb(0 26 51 / 10%); color-scheme:light; }
:root[data-theme="dark"] { --canvas:#071522; --surface:#102437; --subtle:#183044; --ink:#edf5fc; --muted:#b5c6d6; --line:#2b4358; --control-line:#8cabc5; --accent:#0078c1; --accent-ink:#62d8fc; --accent-hover:#0069aa; --selected:#173e56; --proto:#102437; --proto-line:#2b4a61; --proto-ink:#edf5fc; }
body {padding:0 0 28px;}
.nc-header {background:#001a33; color:#fff; display:flex; align-items:center; gap:28px; padding:22px max(24px,calc((100vw - 1504px)/2)); min-height:112px; border-bottom:3px solid #00b6ed;}
.nc-identidad {display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;flex:none;}
.nc-identidad img {border-radius:12px;flex:none;}
.nc-identidad b {display:block;font-size:23px;letter-spacing:.13em;line-height:1.3;}
.nc-identidad b span {color:#34d2fa;}
.nc-identidad small {display:block;font-size:12px;color:#b6cde0;margin-top:3px;}
.nc-producto {padding-left:28px;border-left:1px solid #35506b;min-width:0;}
.nc-kicker {font-size:12px;letter-spacing:.14em;color:#8bb9d8;font-weight:700;}
.nc-producto h1 {font-size:24px;font-weight:650;letter-spacing:-.03em;line-height:1.4;}
.nc-producto h1 span {font-weight:400;color:#c0d3e3;font-size:18px;}
.nc-header-acciones {margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.nc-demo {color:#75e2ff;border:1px solid #37617d;border-radius:6px;font-size:12px;letter-spacing:.06em;padding:5px 8px;font-weight:700;white-space:nowrap;}
.nc-tema {border:1px solid #7c99b1;border-radius:7px;background:transparent;color:#dbeaf6;padding:8px 10px;min-height:40px;font-size:12px;}
.nc-tema:hover {background:#10334e;}
.nc-header :focus-visible {outline-color:#34d2fa;}
.envoltura {max-width:1504px;margin:22px auto 0;padding:0 24px;gap:18px;}
.proto {border-style:solid;border-radius:12px;padding:16px 18px;box-shadow:0 3px 12px rgb(0 26 51 / 3%);gap:14px;}
.proto strong {font-size:12px;letter-spacing:.1em;color:var(--accent-ink);}
.nc-controles-summary {display:none;list-style:none;cursor:pointer;min-height:44px;align-items:center;justify-content:space-between;gap:16px;font-size:14px;font-weight:650;}
.nc-controles-summary::-webkit-details-marker {display:none;}
.nc-controles-summary small {display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:2px;}
.nc-expandir {font-size:25px;font-weight:400;color:var(--accent-ink);}
.proto[open] .nc-expandir {font-size:0;}
.proto[open] .nc-expandir::after {content:'−';font-size:25px;}
.proto .txt p {color:var(--muted);margin-top:5px;max-width:78ch;font-size:13px;}
.proto .proto-fila:last-child {border-top:1px solid var(--line);padding-top:12px;}
.proto select {border-color:var(--control-line);min-height:40px;}
.btn-proto {border-color:var(--control-line);min-height:40px;font-size:12px;}
#btn-guardar {background:var(--accent);color:white;border-color:var(--accent);}
.aviso-guardado {flex:1 1 260px;font-size:12px;color:var(--muted);margin-left:auto;}
.aviso-guardado::before {content:'';display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--accent-ink);}
.app {grid-template-columns:232px minmax(0,1fr);border-radius:13px;box-shadow:0 6px 24px rgb(0 26 51 / 4%);min-height:690px;}
.lateral {background:#06182a;border-color:#18354e;padding:24px 12px;}
.marca {padding-bottom:23px;gap:10px;color:#e9f3fc;}
.marca-logo {border-radius:8px;object-fit:cover;background:transparent;}
.marca b {font-size:14px;letter-spacing:.08em;}
.marca small {font-size:12px;color:#a6bdd1;}
.lateral .grupo {color:#92b2cc;font-size:12px;letter-spacing:.1em;margin-top:12px;}
.lateral .nav {color:#c5d7e6;min-height:46px;border-radius:7px;font-weight:500;}
.lateral .nav:hover {background:#102e47;}
.lateral .nav[aria-current="page"] {color:#fff;background:#123d5b;box-shadow:inset 3px 0 #00b6ed;font-weight:650;}
.lateral .nav[aria-current="page"] svg {color:#34d2fa;}
.lateral .nav-nota {color:#9db8ce;font-size:12px;line-height:1.65;margin-top:28px;}
.lateral .cuenta {border-color:#294359;color:#a6bdd1;font-size:12px;margin-top:28px;}
.lateral .cuenta b {color:#e3edf7;font-weight:600;}
.lateral :focus-visible {outline-color:#34d2fa;}
.area {padding:28px;min-width:0;}
.cabeza {margin-bottom:24px;gap:20px;}
.cabeza h2 {font-size:27px;letter-spacing:-.035em;font-weight:720;}
.ceja {font-size:12px;letter-spacing:.12em;color:var(--accent-ink);}
.cabeza p:not(.ceja) {font-size:13px;line-height:1.65;max-width:80ch;}
.tiles {gap:14px;}
.tile {padding:18px;border-radius:10px;gap:12px;}
.tile-et {font-size:12px;letter-spacing:.025em;}
.tile-valor {font-size:31px;letter-spacing:-.04em;font-weight:680;}
.tile-sub {font-size:12px;line-height:1.6;}
.tile.destacado {background:#001a33;color:#fff;border-color:#001a33;box-shadow:none;}
.tile.destacado .tile-et,.tile.destacado .tile-sub {color:#c2d7e9;}
.tarjeta {border-radius:10px;}
.tarjeta-cab {padding:17px 18px;}
.tarjeta-cab h3 {font-size:15px;}
.tarjeta-cuerpo {padding:18px;gap:14px;}
table {font-size:13px;}
th {font-size:12px;letter-spacing:.035em;background:var(--subtle);}
th,td {padding:12px 14px;}
td:first-child {font-size:14px;}
.etiqueta,.nota,.leyenda,.nivel,.chip,.grupo,.marca small,.nav-nota,.cuenta,.tile-sub,.alerta small,.persona,.btn-chico,.pestanas button,.sub-pestanas button {font-size:max(12px,.86rem);}
svg.grafica text {font-size:12px;}
.btn,.btn-chico,.btn-texto {min-height:40px;}
input[type="number"],input[type="search"],select.campo-sel,textarea {min-height:40px;}
.pestanas {gap:4px;flex-wrap:wrap;}
.pestanas button {min-height:40px;}
.telefono {border-color:#06182a;}
.tel-pie {font-size:12px;}
.nc-footer {max-width:1504px;padding:20px 24px 0;margin:auto;display:flex;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;font-size:12px;color:var(--muted);}
.nc-footer > span:first-child {font-weight:650;letter-spacing:.025em;}
.nc-footer > span:first-child span {margin:0 7px;}
.saltar {position:fixed;z-index:100;top:8px;left:8px;transform:translateY(-160%);background:var(--surface);color:var(--ink);padding:12px 16px;border:2px solid var(--accent-ink);border-radius:8px;}
.saltar:focus {transform:translateY(0);}
.dlg-cuerpo p {line-height:1.8;}
#dlg-info,#dlg-reset {max-width:640px;}
button {transition:background 160ms ease,border-color 160ms ease;}
@media(min-width:821px) {.lateral {position:sticky;top:0;align-self:stretch;}.lateral .nav {font-size:13px;}}
@media(max-width:1180px) {.nc-header {gap:18px;padding:20px 24px;}.nc-producto {padding-left:18px;}.nc-header-acciones {max-width:270px;}.nc-producto h1 span {display:block;font-size:15px;}.tiles {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:820px) {.nc-header {flex-wrap:wrap;gap:16px;padding:18px 20px;}.nc-identidad img {width:48px;height:48px;}.nc-identidad b {font-size:20px;}.nc-identidad small {display:none;}.nc-producto {margin-left:auto;border:0;padding:0;}.nc-producto h1 {font-size:21px;}.nc-header-acciones {max-width:none;flex-basis:100%;justify-content:flex-start;margin-left:0;}.nc-kicker {font-size:12px;}.envoltura {padding:0 16px;margin-top:16px;gap:14px;}.app {grid-template-columns:minmax(0,1fr);}.lateral {padding:8px;gap:5px;border-bottom:1px solid #294359;position:static;}.lateral .grupo {display:none;}.lateral .nav {min-height:44px;padding:0 12px;}.area {padding:22px 18px;}.cabeza h2 {font-size:25px;}.cabeza {margin-bottom:20px;}.proto {padding:15px;}.proto-fila {gap:13px;}.proto-fila>.fila {gap:8px;}.aviso-guardado {flex-basis:100%;}.nc-footer {padding:18px 16px 0;}.persona .btn {flex:none;}}
@media(max-width:480px) {.nc-header {padding:16px;}.nc-producto h1 span {font-size:13px;}.nc-identidad {gap:8px;}.nc-identidad b {font-size:17px;}.nc-identidad img {width:42px;height:42px;}.nc-producto h1 {font-size:20px;}.nc-header-acciones {gap:7px;}.nc-demo {margin-right:auto;}.nc-tema {padding:7px 8px;}.envoltura {padding:0 10px;}.area {padding:20px 13px;}.tiles {grid-template-columns:minmax(0,1fr);}.tile-valor {font-size:29px;}.proto .fila {width:100%;}.proto .btn-proto {flex:1 1 auto;}.proto select {max-width:100%;}.proto label {font-size:12px;}.proto .proto-fila:last-child {gap:10px;}.proto .proto-fila:last-child>.fila {justify-content:space-between;}.proto input[type="range"] {flex:1;min-width:80px;width:40vw;}.cabeza .pestanas {margin-top:6px;}.tarjeta-cuerpo {padding:14px;}.tarjeta-cab {padding:14px;}.nc-footer {display:grid;gap:7px;}.ficha {padding:13px;}.personas {grid-template-columns:minmax(0,1fr);}}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto;}* {animation:none!important;transition:none!important;}}
@media(max-width:820px) {.nc-controles-summary {display:flex;}.proto[open] .nc-controles-summary {border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px;}}