/* ============================================================================
   B4B × Innovanalisis · SKIN v3 — Etapa 0 del rediseño visual
   Fuente de verdad: B4B_Rediseño_v3 (mockup standalone, jul-2026)
   ----------------------------------------------------------------------------
   Este archivo se carga DESPUÉS de tokens.css y app.css y gana la cascada.
   Es aditivo: no se toca ninguna línea de los CSS existentes.
   ROLLBACK: eliminar (o comentar) su <link> en index.php. Nada más.
   ----------------------------------------------------------------------------
   Lenguaje v3 en una frase: tipografía editorial Creato con cifras en DM Mono,
   bloques de color planos sin sombras ni esquinas, y la "forma hoja"
   (border-radius: 100% 0 100% 0) como firma en bullets y avatares.
   ============================================================================ */

/* ═══════════════════════ 1 · TOKENS (overrides) ═══════════════════════ */
:root {
  /* Neutros y líneas del mockup */
  --c-line:         #E4EAEE;
  --c-muted:        #5A6C78;
  --c-subtle:       #8FA3B0;
  --c-surface-alt:  #FBFDFE;
  --c-surface-soft: #F4F7F9;

  /* Tintes de fondo por semántica (tarjetas del mockup) */
  --c-tint-verde:   #F3F8EC;   /* fortalezas / en rango       */
  --c-tint-ambar:   #FDF6E8;   /* atención / advertencia      */
  --c-tint-rojo:    #FBF0EE;   /* riesgos / crítico           */
  --c-tint-gris:    #F4F7F9;   /* neutro / contexto           */
  --c-tint-azul:    #E4F3F8;   /* dato informativo            */

  /* Semáforo v3 (estado + su tinta de texto accesible) */
  --c-ok:       #4E8F35;  --c-ok-ink:   #31691F;
  --c-warn:     #D68A0C;  --c-warn-ink: #8A5A00;
  --c-bad:      #C0392B;  --c-bad-ink:  #8E2A1F;
  --c-ctx:      #8FA3B0;  --c-ctx-ink:  #5A6C78;
  --c-danger:   #C0392B;  /* reemplaza el terracota v1 (#C24A2D) */

  /* La forma hoja — firma del rediseño */
  --r-leaf: 100% 0 100% 0;

  /* Plano: sin sombras, sin esquinas (excepto marcos de gráfica, --r-md) */
  --sh-1: none;  --sh-2: none;  --sh-3: none;
  --r-xs: 0;  --r-sm: 0;  --r-lg: 0;  --r-xl: 0;
  /* --r-md se conserva en 10px: marcos de gráficas del mockup */
  /* --r-pill se conserva: toggles y switches lo necesitan     */

  /* Tipografía: Creato para TODO el texto; DM Mono solo cifras */
  --ff-ui: var(--ff-body);
}

/* ═══════════════════════ 2 · BASE ═══════════════════════ */
h1, h2, h3, h4, h5 {
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
}
h1 { letter-spacing: -0.04em; line-height: 0.94; }
h2 { letter-spacing: -0.035em; }

a { color: var(--c-azul-oscuro); }
a:hover { color: var(--c-azul-claro); text-decoration: none; }

/* ═══════════════════════ 3 · PRIMITIVAS (re-estilo) ═══════════════════════ */

/* Botones: rectos, tipografía de marca en bold */
.btn {
  border-radius: 0;
  font-family: var(--ff-body);
  font-weight: var(--fw-bold);
  font-size: 15px;
  letter-spacing: -0.01em;
  padding: 14px 26px;
}
.btn--ghost { border: 1px solid #D9E1E6; }
.btn--ghost:hover { background: transparent; border-color: var(--c-azul-oscuro); }
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(77, 173, 206, 0.35); }

/* Chips: rectos, sin borde fantasma */
.chip { border-radius: 0; font-family: var(--ff-body); }
.chip--danger { background: #FAE9E7; color: var(--c-bad-ink); }
.chip--amber  { background: #FCF2DC; color: var(--c-warn-ink); }
.chip--green  { background: #EDF5E4; color: var(--c-ok-ink); }
.chip .dot    { border-radius: var(--r-leaf); }

/* Tarjetas: bloques planos */
.card { border-radius: 0; }
.card--amber { background: var(--c-tint-ambar); border-color: transparent; }
.card--elev  { box-shadow: none; border: 1px solid var(--c-line); }

/* Formularios */
.input, .select, .textarea {
  border-radius: 0;
  font-family: var(--ff-body);
  font-size: 15px;
  padding: 12px 14px;
  border-color: #D9E1E6;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--c-azul-oscuro);
  box-shadow: 0 0 0 3px rgba(77, 173, 206, 0.28);
}
.label {
  font-family: var(--ff-body);
  font-weight: var(--fw-bold);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #707070;
}

/* Eyebrow editorial */
.eyebrow {
  font-family: var(--ff-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
}

/* Semáforo heredado: luces en forma hoja */
.semaforo { border-radius: 0; }
.semaforo .light { border-radius: var(--r-leaf); }
.semaforo--rojo { border-left-color: var(--c-bad); }
.semaforo--rojo .light { background: var(--c-bad); }

/* ═══════════════════════ 4 · UTILIDADES v3 (nuevas) ═══════════════════════
   Vocabulario para las etapas 1+ del rediseño. No las usa nada todavía;
   existir aquí permite que los parches de pantalla sean mínimos. */

/* Bullet hoja — reemplazo universal del círculo */
.v3-leaf {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: var(--r-leaf);
  background: var(--c-azul-oscuro);
  flex: none;
}
.v3-leaf--verde   { background: var(--c-verde); }
.v3-leaf--azul    { background: var(--c-azul-claro); }
.v3-leaf--naranja { background: var(--c-naranja); }
.v3-leaf--ok      { background: var(--c-ok); }
.v3-leaf--warn    { background: var(--c-warn); }
.v3-leaf--bad     { background: var(--c-bad); }
.v3-leaf--sm      { width: 11px; height: 11px; }

/* Cifra editorial — SIEMPRE para números */
.v3-num {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Barrita de estado (34×3) del mockup */
.v3-bar {
  display: block;
  width: 34px; height: 3px;
  background: var(--c-ctx);
}
.v3-bar--ok   { background: var(--c-ok); }
.v3-bar--warn { background: var(--c-warn); }
.v3-bar--bad  { background: var(--c-bad); }

/* Etiqueta de estado rectangular (Cuadra / Redondeo / Alerta…) */
.v3-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
}
.v3-tag--ok   { background: #EDF5E4; color: var(--c-ok-ink); }
.v3-tag--warn { background: #FCF2DC; color: var(--c-warn-ink); }
.v3-tag--bad  { background: #FAE9E7; color: var(--c-bad-ink); }
.v3-tag--ctx  { background: #F0F4F6; color: var(--c-ctx-ink); }

/* Encabezado de sección editorial: hoja + título + meta a la derecha */
.v3-sec {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 22px;
}
.v3-sec > h2 { margin: 0; font-size: clamp(24px, 2.5vw, 32px); }
.v3-sec__meta {
  margin-left: auto;
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: #707070;
}

/* Hero partido: texto + bloque de color pleno */
.v3-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
}
.v3-hero__color {
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.v3-hero__color--navy    { background: var(--mod-1-sip);        color: #FFFFFF; }
.v3-hero__color--verde   { background: var(--mod-2-monitoreo);  color: #1B2E06; }
.v3-hero__color--azul    { background: var(--mod-3-casos);      color: #052734; }
.v3-hero__color--naranja { background: var(--mod-4-innovacion); color: #3D2B00; }
@media (max-width: 760px) { .v3-hero { grid-template-columns: 1fr; } }

/* Fila de tabla editorial: borde superior grueso navy, filas de 1px */
.v3-tabla-head { border-bottom: 2px solid var(--c-azul-oscuro); }
.v3-tabla-row  { border-top: 1px solid var(--c-line); }

/* ═══════════════════ 5 · TOPBAR (remate Etapa 0) ═══════════════════ */
.lang-switch, .lang-switch button { border-radius: 0; }
.user-chip { border-radius: 0; }
.user-chip__avatar { border-radius: var(--r-leaf); }
.wizard-step { border-radius: 0; }
.wizard-step.available::before { border-radius: var(--r-leaf); }