/* =====================================================================
   TORRE DE CONTROL · tokens
   Muestreados de la demo. Nombres semánticos en español: en el código
   nunca se escribe un color literal, siempre var(--…).
   ===================================================================== */

:root {
  /* --- Tipografía -------------------------------------------------- */
  --letra-titulo:  'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --letra-texto:   'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --letra-dato:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Los títulos de sección van en itálica: es la firma visual de la
     interfaz. "Panorama de la agencia", "Carga por persona", etc. */
  --titulo-seccion-estilo: italic;

  --escala-1: 0.6875rem;  /* 11px · etiquetas en versalitas */
  --escala-2: 0.8125rem;  /* 13px · texto de tabla */
  --escala-3: 0.9375rem;  /* 15px · texto base */
  --escala-4: 1.0625rem;  /* 17px · título de tarjeta */
  --escala-5: 1.5rem;     /* 24px · cifra de KPI */
  /* El título de pantalla es fluido: nunca un salto por breakpoint. */
  --escala-6: clamp(1.6rem, 1.1rem + 1.6vw, 2.25rem);

  /* --- Superficies -------------------------------------------------- */
  --fondo:            #F2F0EB;   /* crema de la zona de trabajo */
  --superficie:       #FFFFFF;   /* tarjetas y tablas */
  --superficie-sutil: #FAF9F6;
  --borde:            #E3DFD5;
  --borde-fuerte:     #D2CCBE;

  /* --- Barra lateral (siempre oscura) ------------------------------- */
  --lateral-fondo:      #16301E;
  --lateral-elevado:    #1E3D28;   /* tarjeta "Sesión activa" */
  --lateral-borde:      #2C5138;
  --lateral-texto:      #EDEDE6;
  --lateral-texto-tenue:#9FB0A3;
  --lateral-activo:     #A85416;   /* píldora "Vista global" */

  /* --- Tinta -------------------------------------------------------- */
  --tinta:        #23241F;
  --tinta-suave:  #5C6058;
  --tinta-tenue:  #8A8D83;

  /* --- Marca -------------------------------------------------------- */
  --marca:          #2E5F3A;   /* verde de los títulos serif */
  --marca-fuerte:   #1F5130;   /* botón activo "Vista actual" */
  --marca-suave:    #E4EDE4;
  --acento:         #A85416;   /* naranja quemado */

  /* --- Estados de urgencia ------------------------------------------
     Mapean 1:1 con la columna `urgencia` de v_entregables_detalle.
     Cambiar aquí cambia lista, kanban y calendario a la vez.         */
  --urgencia-vencida:    #A93226;
  --urgencia-vence-hoy:  #A93226;
  --urgencia-por-vencer: #B07A1F;
  --urgencia-a-tiempo:   #2E6B3F;
  --urgencia-sin-fecha:  #8A8D83;
  --urgencia-entregado:  #6F7A72;

  /* --- Estados del entregable (columnas del kanban) ------------------ */
  --estado-pendiente:   #8A8D83;
  --estado-en-proceso:  #B07A1F;
  --estado-en-revision: #4A6FA5;
  --estado-entregado:   #2E6B3F;

  /* --- Geometría ---------------------------------------------------- */
  /* Lo interactivo va redondo del todo; las superficies, con esquina suave.
     Es la regla que separa "esto se toca" de "esto contiene". */
  --radio-control: 999px;
  --radio-chico:   6px;
  --radio:         10px;
  --radio-grande:  16px;
  --barra-lateral-ancho: 232px;

  --sombra-carta: 0 1px 2px rgb(35 36 31 / .05);
  --sombra-flotante: 0 8px 24px rgb(35 36 31 / .12);

  /* --- Ritmo --------------------------------------------------------
     Toda medida sale de esta serie. Cuando el espaciado se inventa caso
     por caso, la pantalla se siente descuadrada sin que se sepa por qué. */
  --gota:   4px;
  --hueco-1: 8px;
  --hueco-2: 14px;
  --hueco-3: 22px;
  --hueco-4: 34px;
}

/* Tipografía de apoyo -------------------------------------------------- */
.titulo-pantalla {
  font-family: var(--letra-titulo);
  font-size: var(--escala-6);
  color: var(--marca);
  font-weight: 400;
}
.titulo-seccion {
  font-family: var(--letra-titulo);
  font-style: var(--titulo-seccion-estilo);
  font-size: var(--escala-4);
  color: var(--marca);
  font-weight: 400;
}
.etiqueta {
  font-size: var(--escala-1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
/* Cifras, montos, usuarios y fechas: siempre monoespaciada. Es lo que
   hace que las columnas de dinero se lean alineadas. */
.dato { font-family: var(--letra-dato); font-variant-numeric: tabular-nums; }

/* La franja de color a la izquierda de cada tarjeta de entregable es
   la única señal de urgencia que se lee sin leer. */
.tarjeta-entregable { border-left: 3px solid var(--urgencia-sin-fecha); }
.tarjeta-entregable[data-urgencia="vencida"]    { border-left-color: var(--urgencia-vencida); }
.tarjeta-entregable[data-urgencia="vence_hoy"]  { border-left-color: var(--urgencia-vence-hoy); }
.tarjeta-entregable[data-urgencia="por_vencer"] { border-left-color: var(--urgencia-por-vencer); }
.tarjeta-entregable[data-urgencia="a_tiempo"]   { border-left-color: var(--urgencia-a-tiempo); }
.tarjeta-entregable[data-urgencia="entregado"]  { border-left-color: var(--urgencia-entregado); }

/* Modo sin conexión: la PWA baja la saturación y bloquea los controles
   que no se pueden encolar, para que nadie crea que guardó y no. */
[data-conexion="offline"] .requiere-red { opacity: .45; pointer-events: none; }