/* ============================================================
   CPN · Capa de aplicación — el hilo conductor
   ------------------------------------------------------------
   Componentes-firma IDÉNTICOS en toda aplicación (brief,
   one-pager, dashboard, memo…). Estos son los INVARIANTES;
   el cuerpo de cada formato varía dentro de ellos.
   Un sistema, dos superficies: resuelve acento y filete según
   [data-surface]. Enlazar DESPUÉS de styles.css.
   ============================================================ */

:root{
  --app-accent:var(--teal);
  --app-rule:var(--line);
  --app-fg:var(--fg);
  --app-meta:var(--fg-meta);
  --app-dim:var(--fg-dim);
}
[data-surface="light"]{
  --app-accent:var(--oficial);
  --app-rule:var(--paper-line);
  --app-fg:var(--paper-fg);
  --app-meta:var(--paper-meta);
  --app-dim:var(--paper-meta);
}

/* ---- 1 · MASTHEAD — CPN. (el punto = el dot, en acento) + título · regla ---- */
.cpn-mast{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding-bottom:12px;border-bottom:1px solid var(--app-rule)}
[data-surface="light"] .cpn-mast{border-bottom-width:2px;border-bottom-color:var(--paper-fg)}
.cpn-mast .brand{font-family:var(--font-sans);font-weight:600;font-size:18px;
  letter-spacing:-0.02em;color:var(--app-fg);white-space:nowrap;display:inline-flex;align-items:baseline}
.cpn-mast .brand b{color:var(--app-accent);font-weight:600}
.cpn-mast .ttl{font-family:var(--font-mono);font-weight:400;font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--app-dim);margin-left:14px}
.cpn-mast .meta{font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--app-dim);text-align:right;white-space:nowrap}
/* Subline opcional (documentos): fecha · clasificación en su propia fila */
.cpn-subline{display:flex;justify-content:space-between;font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--app-meta);padding-top:7px}

/* ---- 2 · KICKER — mono, acento (caret solo en contexto «vivo») ---- */
.cpn-kicker{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--app-accent);font-weight:500}
.cpn-caret{color:var(--app-accent);animation:cpn-blink 1.1s steps(1) infinite}
@keyframes cpn-blink{50%{opacity:0}}

/* ---- 3 · VALORIZACIÓN — instrumento canónico de dos cuadros ----
   Fuente A–F · Exactitud 1–6. Cada eje se colorea por su propia
   banda (hi/mid/lo); son independientes. Forma única de la firma. */
.cpn-vscore{display:inline-flex;gap:7px;vertical-align:middle}
.cpn-vscore .sq{width:52px;height:52px;border-radius:4px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:#fff}
.cpn-vscore .sq .c{font-family:var(--font-mono);font-size:23px;line-height:1;font-weight:500}
.cpn-vscore .sq .l{font-family:var(--font-mono);font-size:7.5px;letter-spacing:0.12em;
  text-transform:uppercase;margin-top:5px;opacity:0.88}
.cpn-vscore.sm .sq{width:40px;height:40px;border-radius:3px}
.cpn-vscore.sm .sq .c{font-size:17px}
.cpn-vscore.sm .sq .l{font-size:6.5px;margin-top:3px}
/* Escala deck (proyección 1920×1080) — paralela a .sm */
.cpn-vscore.lg{gap:10px}
.cpn-vscore.lg .sq{width:78px;height:78px;border-radius:6px}
.cpn-vscore.lg .sq .c{font-size:34px}
.cpn-vscore.lg .sq .l{font-size:11px;margin-top:7px}
.cpn-vscore .sq.hi{background:var(--sem-hi)}
.cpn-vscore .sq.mid{background:var(--sem-mid)}
.cpn-vscore .sq.lo{background:var(--sem-lo)}
[data-surface="light"] .cpn-vscore .sq.hi{background:var(--sem-hi-l)}
[data-surface="light"] .cpn-vscore .sq.mid{background:var(--sem-mid-l)}
[data-surface="light"] .cpn-vscore .sq.lo{background:var(--sem-lo-l)}
.cpn-vnote{font-family:var(--font-sans);font-size:11px;line-height:1.5;color:var(--app-meta);margin-top:9px}
.cpn-vnote b{font-family:var(--font-mono);color:var(--app-fg);font-weight:500}

/* Forma compacta inline (solo tablas / alertas / prosa): [B·2] mono, coloreada por banda */
.cpn-vinline{font-family:var(--font-mono);font-size:0.9em;white-space:nowrap;color:var(--app-dim);letter-spacing:0.02em}
.cpn-vinline .hi{color:var(--sem-hi)}
.cpn-vinline .mid{color:var(--sem-mid)}
.cpn-vinline .lo{color:var(--sem-lo)}
[data-surface="light"] .cpn-vinline .hi{color:var(--sem-hi-l)}
[data-surface="light"] .cpn-vinline .mid{color:var(--sem-mid-l)}
[data-surface="light"] .cpn-vinline .lo{color:var(--sem-lo-l)}

/* ---- 4 · FIRMA DE CIERRE — regla + ID · versión · [valorización] · revisión ---- */
.cpn-sig{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding-top:12px;border-top:1px solid var(--app-rule)}
[data-surface="light"] .cpn-sig{border-top-width:2px;border-top-color:var(--paper-fg)}
.cpn-sig .note{font-family:var(--font-serif);font-style:italic;font-size:13px;color:var(--app-meta)}
.cpn-sig .id{font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;color:var(--app-dim);white-space:nowrap}
.cpn-sig .id b{color:var(--app-accent);font-weight:400}

/* ---- 5 · APP BAR — áreas de miembros (informes, admin, internas) ----
   Barra fija superior + encabezado editorial de pantalla. La ficha de
   cuenta (avatar + iniciales) la inyecta /auth.js dentro de .acct.
   La barra permanece oscura también en superficie papel. */
.abar{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line);
  background:color-mix(in oklab,var(--ink-0) 82%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.abar .in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px}
.abar .brand{font-family:var(--font-sans);font-weight:600;font-size:18px;letter-spacing:-0.02em;color:var(--fg)}
.abar .brand b{color:var(--teal)}
.abar nav{display:flex;align-items:center;gap:28px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:0.16em;text-transform:uppercase}
.abar nav a{color:var(--fg-dim);padding:6px 0;position:relative;transition:color .15s}
.abar nav a:hover{color:var(--fg-meta)}
.abar nav a.on{color:var(--fg)}
.abar nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-21px;height:2px;background:var(--teal)}
.abar .rgt{display:flex;align-items:center;gap:16px}
.abar .acct{display:flex;align-items:center;gap:11px;min-height:26px}
/* La ficha de cuenta llega recién con la sesión (Firebase → /api/me) y la foto un rato después.
   El hueco se dibuja desde el primer pintado —el mismo círculo, el mismo trazo— así nada de la
   barra se corre entre el estado vacío, las iniciales y el avatar cargado.
   El box-sizing va explícito: el reset `*{box-sizing:border-box}` de las fichas no alcanza a los
   pseudoelementos, y con content-box el círculo medía 2px de más y corría la barra entera. */
.abar .acct:empty::after{content:"";box-sizing:border-box;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--fg-dim);opacity:.4;flex:0 0 auto}
@media(max-width:640px){.abar nav{display:none}}

/* toggle oscuro / papel */
.modetgl{position:relative;width:48px;height:26px;border-radius:13px;border:1px solid var(--fg-dim);
  background:var(--ink-2);cursor:pointer;padding:0;flex:0 0 auto;transition:background .18s,border-color .18s}
.modetgl:hover{border-color:var(--fg-meta)}
.modetgl .knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--teal);transition:transform .2s cubic-bezier(.2,.7,.3,1),background .18s;
  display:flex;align-items:center;justify-content:center}
.modetgl .knob svg{width:12px;height:12px}
.modetgl .ic-moon{fill:var(--ink-0)}
.modetgl .ic-sun{display:none;fill:none;stroke:var(--ink-0);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.modetgl.lit .ic-moon{display:none}
.modetgl.lit .ic-sun{display:block}
.modetgl.lit{background:var(--ink-1)}
.modetgl.lit .knob{transform:translateX(22px);background:var(--sol)}

/* compartir el informe — círculo del mismo trazo que el toggle y que el avatar.
   El slot vacío ocupa su lugar desde el arranque; /share.js lo llena recién cuando
   hay un informe en pantalla, y sin ese llenado el botón simplemente no existe. */
.shr-slot{width:26px;height:26px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.shr{position:relative;width:26px;height:26px;border-radius:50%;border:1px solid var(--fg-dim);
  background:var(--ink-2);display:flex;align-items:center;justify-content:center;padding:0;
  cursor:pointer;flex:0 0 auto;transition:border-color .15s,opacity .18s}
.shr:hover{border-color:var(--fg-meta)}
.shr svg{width:13px;height:13px;fill:none;stroke:var(--fg-meta);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s}
.shr:hover svg{stroke:var(--teal)}
.shr[data-busy]{opacity:.55;cursor:progress}
.shr .tip{position:absolute;top:calc(100% + 9px);right:0;z-index:80;white-space:nowrap;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--fg-meta);background:var(--ink-2);border:1px solid var(--line);border-radius:5px;
  padding:6px 9px;pointer-events:none}
.shr .tip:empty{display:none}

/* encabezado editorial de pantalla */
.ehead{padding-top:clamp(48px,7vh,88px);padding-bottom:clamp(30px,4vh,44px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.ehead .eyebrow{display:flex;align-items:center;gap:16px;font-family:var(--font-mono);
  font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:16px}
.ehead .eyebrow::before{content:"";width:38px;height:1px;background:var(--teal);flex:0 0 auto}
.ehead .lead{font-weight:200;font-size:clamp(28px,3.6vw,46px);line-height:1.12;letter-spacing:-0.03em;
  max-width:24ch;margin-top:0}
.ehead .lead em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--teal)}

/* superficie papel — la barra sigue oscura; el encabezado invierte */
body[data-surface="light"] .abar{background:var(--ink-0)}
body[data-surface="light"] .ehead .lead{color:var(--paper-fg)}
body[data-surface="light"] .ehead .lead em{color:var(--oficial)}

/* ---- Sticky footer: el pie pegado al borde inferior sin importar el alto del contenido ---- */
html{min-height:100%}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body>footer{margin-top:auto}

/* ---- Escala de lectura global: sube un poco todo (sobre todo cuerpos) ---- */
body{zoom:1.10}

/* ---- 6 · LOADER — preload por defecto (verificación de acceso, carga de ficha…) ----
   Anillo teal girando, rápido y sobrio. Reemplaza a los textos "Verificando…". */
.cpn-loader{width:26px;height:26px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--teal);
  animation:cpn-spin .6s linear infinite}
@keyframes cpn-spin{to{transform:rotate(360deg)}}
[data-surface="light"] .cpn-loader{border-color:var(--paper-line);border-top-color:var(--oficial)}
@media(prefers-reduced-motion:reduce){.cpn-loader{animation-duration:1.6s}}
/* Contenedor de estado a pantalla: centra el loader (o cualquier mensaje). */
.cpn-loading{min-height:56vh;display:flex;align-items:center;justify-content:center}
.cpn-loading[hidden]{display:none}