/* Capital N — base.css : reset + variables de marca.
   Estética: minimalista, prolija, fondos cremita, serif gris oscuro,
   acento rojo y detalles de color puntuales. */

:root {
  /* paleta — corporativa moderna (blanco/gris + bordó como acento) */
  --cn-bg:        #F6F7F9;   /* gris muy claro */
  --cn-bg-soft:   #EEF0F3;   /* hover / fondos suaves */
  --cn-surface:   #FFFFFF;
  --cn-ink:       #1F2530;   /* carbón slate (texto principal) */
  --cn-ink-soft:  #5A6472;
  --cn-muted:     #6B7280;   /* gris terciario (labels, hints, meta). Oscurecido para cumplir contraste WCAG AA */
  --cn-red:       #8E1B23;   /* acento bordó (la "N" del logo) */
  --cn-red-dark:  #71151B;
  --cn-red-rgb:   142, 27, 35;   /* = --cn-red en rgb → anillos de foco / overlays: rgba(var(--cn-red-rgb), α) */
  --cn-border:    #E6E8EC;
  --cn-border-2:  #D6DAE0;

  /* estados — badges suaves: fondo tenue + texto/borde */
  --cn-pendiente:    #9A6A00;  --cn-pendiente-bg:  #FBF1DC;
  --cn-en_proceso:   #1F5FB8;  --cn-en_proceso-bg: #E5EEFB;
  --cn-ejecutada:    #1A7A47;  --cn-ejecutada-bg:  #E2F3E9;
  --cn-rechazada:    #A12631;  --cn-rechazada-bg:  #FBE7E9;
  --cn-expirada:     #8A6D00;  --cn-expirada-bg:   #F7E9A0;
  --cn-manual:       #9A3412;  --cn-manual-bg:     #FFEDD5;   /* costo editado a mano (override) */
  /* aviso "días anteriores sin resolver" (amarillo) */
  --cn-warn:         #D99A00;  --cn-warn-bg:       #FFF8E6;
  --cn-warn-bd:      #F0D98C;  --cn-warn-ink:      #8A6D00;

  /* categorías de tarjetas (Gestión) — antes hex crudos fuera del sistema de tokens */
  --cn-cat-idea:      #B7791F;
  --cn-cat-encuentro: #7C3AED;
  --cn-cat-neutral:   #9AA3AF;
  /* WhatsApp (botón de envío del mensaje al cliente) */
  --cn-wa-ink:      #128C45;  --cn-wa-bd:       #25D366;
  --cn-wa-bg:       #EFFBF3;  --cn-wa-bd-hover: #1FB457;

  /* tipografía: Inter para toda la UI */
  --cn-sans:  "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;

  /* Escala tipográfica (U1) — 8 pasos deliberados. El "workhorse" (~13px, .9rem) se PRESERVA;
     las micro-etiquetas suben de ~9px a 11px (legibilidad). Reemplaza 25+ tamaños sueltos. */
  --cn-text-xs:   11px;    /* micro-etiquetas: badges de rol, sb buy/sell, tags, separadores */
  --cn-text-sm:   12px;    /* labels chicos, hints, meta */
  --cn-text-md:   12.5px;  /* labels, encabezados de tabla, foot de tarjetas */
  --cn-text-base: 13px;    /* tamaño de TRABAJO: botones, nav, celdas, la mayoría del texto */
  --cn-text-lg:   14.5px;  /* cuerpo / valores destacados */
  --cn-text-xl:   16px;    /* subtítulos, títulos de tarjeta grandes */
  --cn-text-2xl:  19px;    /* títulos de sección */
  --cn-text-3xl:  22px;    /* título de página */

  /* Escala de radios (U3) — sm/md/lg/full. Reemplaza 5/6/7/9/11/12px sueltos. */
  --cn-radius:      8px;    /* md (default; ya existía) */
  --cn-radius-sm:   6px;    /* pills, chips, tags, badges */
  --cn-radius-lg:   12px;   /* tarjetas grandes, modal, drawer, gate */
  --cn-radius-full: 999px;  /* chips redondeados / badges circulares */
  /* color base de sombras/overlays (slate 900). Se usa como rgba(var(--cn-shadow-rgb), alfa). */
  --cn-shadow-rgb: 16, 24, 40;
  --cn-shadow: 0 1px 2px rgba(var(--cn-shadow-rgb),.04), 0 1px 3px rgba(var(--cn-shadow-rgb),.06);   /* sm — reposo */
  /* Escala de elevación (U3 · sombras): sm(=--cn-shadow, reposo) / md(hover) / lg(dropdowns/menús) /
     xl(overlays: modal, drawer, buscador). Reemplaza las sombras one-off con distinta "dirección de luz". */
  --cn-shadow-md: 0 6px 18px rgba(var(--cn-shadow-rgb), .10);
  --cn-shadow-lg: 0 10px 24px rgba(var(--cn-shadow-rgb), .14);
  --cn-shadow-xl: 0 20px 60px rgba(var(--cn-shadow-rgb), .28);
  --cn-tooltip-bg: #1f2430;   /* fondo del tooltip de ayuda (ⓘ) */
}

*, *::before, *::after { box-sizing: border-box; }

/* La app es de tema claro. Lo declaramos para que los navegadores en MODO OSCURO no inviertan los
   controles nativos (inputs/selects/date) y se vean siempre con la estética clara y consistente. */
html { color-scheme: light; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cn-bg);
  color: var(--cn-ink);
  font-family: var(--cn-sans);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Candado: nunca permitir scroll horizontal (si algo se pasara de ancho, se recorta en vez de
     dejar correr la página de costado y "cortar" el borde izquierdo). La app no usa position:sticky,
     así que es seguro. */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--cn-sans);
  font-weight: 600;
  color: var(--cn-ink);
  margin: 0 0 .4em;
  letter-spacing: -.01em;
}

a { color: var(--cn-red); text-decoration: none; }
a:hover { text-decoration: underline; }

[hidden] { display: none !important; }

main#app {
  max-width: 1500px;
  margin: 0 auto;
  padding: 26px 32px 40px;   /* menos aire arriba/abajo → menos scroll en desktop */
}

.cn-page-title {
  font-size: var(--cn-text-3xl);
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 2px;
}
.cn-page-title .cn-dim { color: var(--cn-muted); font-weight: 400; }
.cn-page-sub {
  font-style: italic;
  font-size: var(--cn-text-md);
  color: var(--cn-muted);
  margin: 0 0 16px;
}

/* ===== Logo de marca (wordmark blanco apaisado) en header y login. Ancho automático por aspecto.
   (El logo de TEXTO —clases .cn-logo__*— se removió: la marca se renderiza siempre como imagen.) ===== */
.cn-logo-img { display: block; height: 60px; width: auto; max-width: 100%; }
.cn-logo-img--sm { height: 32px; }                 /* versión compacta para la barra superior */
.cn-gate__card .cn-logo-img { margin: 0 auto 26px; }   /* centrado + aire en la tarjeta de login */