/* ============================================================ */
/* PUNTO · Design Tokens v0.5 (rediseño B4)                      */
/* Fuente de valores: docs/GUIA_REDISENO_B4.md                   */
/* Contrato de nombres: docs/B4_TOKENS.md                        */
/*                                                              */
/* Apariencia: core/apariencia.js pone <html data-apariencia>.   */
/* - Claro es :root y cualquier [data-apariencia="claro"]: un    */
/*   contenedor «papel» dentro del oscuro vuelve a claro.        */
/* - Oscuro solo existe en @media screen: impresión y PDF salen  */
/*   siempre claros.                                             */
/* Este es el ÚNICO archivo con colores en hexadecimal.          */
/* ============================================================ */

:root,
[data-apariencia="claro"] {
  color-scheme: light;

  /* ============ TEXTO ============ */
  --ink: #0F1D18;            /* texto principal */
  --ink-soft: #2A3A33;       /* etiquetas fuertes; intermedio entre principal y secundario (no viene en la guía) */
  --ink-muted: #5A6B64;      /* texto secundario */
  --ink-faint: #A9B5B0;      /* tenue: placeholder, deshabilitado, separadores. NO llega a 4.5:1: no para texto que se deba leer */
  --texto-sobre-relleno: #FFFFFF; /* texto sobre --accent-boton, --campana-fondo y rellenos de color */

  /* ============ LÍNEAS ============ */
  --line: #E3E8E6;           /* línea normal (bordes de control, tablas) */
  --line-soft: #EDF1EF;      /* línea suave (separadores internos) */

  /* ============ SUPERFICIES ============ */
  --bg: #F4F6F5;             /* fondo de página (antes blanco) */
  --bg-soft: #F6F8F7;        /* relleno suave: encabezado de tabla, pastilla neutra, hover genérico */
  --bg-card: #FFFFFF;        /* tarjeta, modal, menú desplegable, control */
  --bg-menu: #EEF1F0;        /* menú lateral */
  --bg-hover: #F6F8F7;       /* renglón al pasar */
  --bg-seleccionado: #F6F8F7; /* renglón o elemento seleccionado (la guía da un solo valor en claro) */
  --header-fondo: rgba(244, 246, 245, 0.86); /* encabezado fijo translúcido (= --bg con alfa) */
  --velo: rgba(15, 29, 24, 0.40);            /* fondo detrás de modales */

  /* ============ TARJETA ============ */
  --tarjeta-linea: transparent;              /* en claro, sin borde */
  --tarjeta-borde: 1px solid transparent;    /* mismo grosor en ambos modos: no mueve el layout */
  --tarjeta-sombra: 0 1px 2px rgba(15, 29, 24, 0.04), 0 2px 10px rgba(15, 29, 24, 0.05);

  /* ============ ACENTO (teal de Punto) ============ */
  --accent: #0B6E5A;         /* relleno de barras, bordes y marcas */
  --accent-boton: #0B6E5A;   /* relleno del botón principal (blanco encima 6.19:1) */
  --accent-boton-hover: #085444;
  --accent-texto: #0B6E5A;   /* acento usado como texto (sobre tarjeta o --accent-soft) */
  --accent-deep: #08574A;    /* histórico: texto de acento y hover. En oscuro es TEXTO claro: no usar como relleno */
  --accent-soft: #DCEFE9;    /* fondo suave del acento */
  --accent-glow: #BFE3D8;    /* anillo de foco y borde de realce */

  /* ============ ESTADOS (base = texto; -soft = fondo) ============ */
  --success: #0B6E5A;        /* = acento; como texto usa --accent-texto */
  --warning: #8A5210;        /* aviso (ámbar) */
  --warning-texto: #8A5210;
  --warning-soft: #FDF0DC;
  --danger: #B5452A;         /* peligro */
  --danger-texto: #B5452A;
  --danger-soft: #FBE9E4;
  --info: #245A85;           /* información */
  --info-texto: #245A85;
  --info-soft: #E4EEF7;

  /* Contador de la campana. La guía pide #D4572F, pero el blanco encima da 4.04:1;
     #CA4F28 es el más cercano que llega a 4.51:1. */
  --campana-fondo: #CA4F28;

  /* ============ DIFF / COMPARATIVA (Proforma · Comparar) ============ */
  --diff-up: #B5452A;        /* costo subió → peligro */
  --diff-up-soft: #FBE9E4;
  --diff-down: #0B6E5A;      /* costo bajó → acento */
  --diff-down-soft: #DCEFE9;
  --diff-new: #0B6E5A;
  --diff-new-soft: #DCEFE9;
  --diff-mod: #8A5210;       /* modificada → aviso */
  --diff-mod-soft: #FDF0DC;
  --diff-del: #B5452A;       /* eliminado → peligro */
  --diff-del-soft: #FBE9E4;

  /* ============ GANTT / TABLERO (c1..c8) ============ */
  /* --gantt-cN = color de la categoría (borde, barra); --gantt-cN-fondo = relleno pastel.
     Igual a PALETA de lib/programa-tareas.js. */
  --gantt-c1: #E08CC0; --gantt-c1-fondo: #FDE3F1;
  --gantt-c2: #6FA3E6; --gantt-c2-fondo: #D5E6FB;
  --gantt-c3: #7CC15A; --gantt-c3-fondo: #DDF5D0;
  --gantt-c4: #5CC4A4; --gantt-c4-fondo: #D6F5EC;
  --gantt-c5: #A585DA; --gantt-c5-fondo: #E6DAF6;
  --gantt-c6: #E2C044; --gantt-c6-fondo: #FFF6CF;
  --gantt-c7: #E27A84; --gantt-c7-fondo: #FBD7DA;
  --gantt-c8: #9AA7B0; --gantt-c8-fondo: #E4E8EB;

  /* ============ TIPOGRAFÍA ============ */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-marca: Georgia, "Times New Roman", serif; /* SOLO logo «Punto» y nombre de la obra, con --font-marca-estilo */
  --font-marca-estilo: italic;
  --font-mono: "SF Mono", Menlo, Consolas, monospace; /* montos, folios, claves */
  /* Alias temporales: el barrido B4 los retira. */
  --font-body: var(--font-ui);
  --font-display: var(--font-ui);

  /* ============ LAYOUT ============ */
  --header-h: 52px;
  --sidebar-w: 256px;
  --sidebar-w-cerrado: 64px;

  /* ============ FORMA ============ */
  --radio-tarjeta: 14px;
  --radio-control: 10px;
  --radio-pastilla: 999px;
  --radio-circulo: 50%;
  --radius: var(--radio-control);     /* alias histórico */
  --radius-lg: var(--radio-tarjeta);  /* alias histórico */

  /* ============ SOMBRAS ============ */
  --shadow-sm: 0 1px 2px rgba(15, 29, 24, 0.05);
  --shadow-md: 0 4px 14px rgba(15, 29, 24, 0.07);
  --shadow-lg: 0 14px 32px rgba(15, 29, 24, 0.10);

  /* ============ TRANSICIONES ============ */
  --transition-fast: 0.12s ease;
  --transition: 0.2s ease;
  --transition-slow: 0.4s ease;
}

/* Oscuro: solo en pantalla. Tipografía, layout, radios y transiciones no cambian. */
@media screen {
  [data-apariencia="oscuro"] {
    color-scheme: dark;

    --ink: #E8EEEB;
    --ink-soft: #C9D4CF;
    --ink-muted: #9AABA4;
    --ink-faint: #6B7B74;      /* tenue: 3.73:1 sobre tarjeta; mismo uso restringido que en claro */
    --texto-sobre-relleno: #FFFFFF;

    --line: #2C3733;
    --line-soft: #26302C;

    --bg: #0F1513;
    --bg-soft: #1F2925;
    --bg-card: #18201D;
    --bg-menu: #0B100E;
    --bg-hover: #1F2925;
    --bg-seleccionado: #232D29;
    --header-fondo: rgba(15, 21, 19, 0.86);
    --velo: rgba(0, 0, 0, 0.60);

    /* En oscuro la tarjeta no lleva sombra: lleva línea de 1px. */
    --tarjeta-linea: #222B28;
    --tarjeta-borde: 1px solid #222B28;
    --tarjeta-sombra: none;

    --accent: #14876E;         /* relleno de barras: el de la guía */
    /* La guía pide #14876E; el blanco encima da 4.45:1. #13866D es el más cercano con 4.51:1. */
    --accent-boton: #13866D;
    --accent-boton-hover: #107A63;
    --accent-texto: #5FD3B1;
    --accent-deep: #5FD3B1;
    --accent-soft: #143A31;
    --accent-glow: #24705D;

    --success: #14876E;
    --warning: #F0B35B;
    --warning-texto: #F0B35B;
    --warning-soft: #3A2A12;
    --danger: #F0907A;
    --danger-texto: #F0907A;
    --danger-soft: #3A1D16;
    --info: #8CBCF0;
    --info-texto: #8CBCF0;
    --info-soft: #16283A;

    /* La guía pide #E0603A; el blanco encima da 3.56:1. #CB4E2A es el más cercano con 4.50:1. */
    --campana-fondo: #CB4E2A;

    --diff-up: #F0907A;
    --diff-up-soft: #3A1D16;
    --diff-down: #5FD3B1;
    --diff-down-soft: #143A31;
    --diff-new: #5FD3B1;
    --diff-new-soft: #143A31;
    --diff-mod: #F0B35B;
    --diff-mod-soft: #3A2A12;
    --diff-del: #F0907A;
    --diff-del-soft: #3A1D16;

    /* Gantt: el color de la categoría se queda; el fondo es 22 % del color sobre la tarjeta
       (texto principal encima ≥ 8.6:1). */
    --gantt-c1-fondo: #443841;
    --gantt-c2-fondo: #2B3D49;
    --gantt-c3-fondo: #2E432A;
    --gantt-c4-fondo: #27443B;
    --gantt-c5-fondo: #373647;
    --gantt-c6-fondo: #444326;
    --gantt-c7-fondo: #443434;
    --gantt-c8-fondo: #353E3D;

    --shadow-sm: none;
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);   /* capas flotantes (menús, popovers) */
    --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.55);
  }
}