/* ==========================================================================
   Vivac Aventura · Gestión de reservas y planificación
   tokens.css — ÚNICA fuente de valores de diseño (contrato de exportación)
   Todo lo que no sea :root referencia estos tokens con var(--token).
   Excepción documentada: las @media no admiten var(); los breakpoints
   se escriben en estilos.css con el mismo valor que --bp-*.
   ========================================================================== */
:root {
  /* ---------- Color · marca (solo decorativo: nunca texto ni borde de control) ---------- */
  --color-marca-amarillo: #f8c000;        /* 1,7:1 sobre blanco */
  --color-marca-naranja: #f08810;         /* 2,6:1 sobre blanco */
  --color-marca-verde: #185830;           /* 8,5:1 sobre blanco */
  --color-marca-azul: #0078c0;            /* 4,7:1 sobre blanco */

  /* ---------- Color · primario (azul «AVENTURA» oscurecido para margen de contraste) ---------- */
  --color-primario: #005f99;              /* 6,8:1 sobre blanco */
  --color-primario-hover: #004d7d;
  --color-primario-activo: #003a60;
  --color-primario-suave: #e6f1f8;        /* fondo suave: texto primario encima 6,1:1 */
  --color-sobre-primario: #ffffff;

  /* ---------- Color · neutros ---------- */
  --color-fondo: #f3f5f7;                 /* fondo de página */
  --color-superficie: #ffffff;
  --color-superficie-elevada: #ffffff;
  --color-superficie-hover: #eef2f6;
  --color-superficie-seleccion: #e6f1f8;
  --color-borde: #c9d2dc;                 /* 1,9:1: solo bordes no esenciales */
  --color-borde-fuerte: #6b7a89;          /* 4,6:1 sobre blanco: bordes de controles */
  --color-texto: #1f2933;                 /* 15,6:1 */
  --color-texto-secundario: #52606d;      /* 7,0:1 */
  --color-texto-deshabilitado: #7b8794;   /* 4,5:1 */
  --color-texto-inverso: #ffffff;
  --color-sombra: rgba(31, 41, 51, 0.12);
  --color-velo: rgba(31, 41, 51, 0.5);     /* fondo tras los diálogos modales */

  /* ---------- Color · semánticos (distintos del amarillo/naranja de marca) ---------- */
  --color-exito: #1b7a3d;                 /* 5,4:1 */
  --color-exito-suave: #dff3e6;
  --color-aviso: #8a5a00;                 /* 6,3:1 */
  --color-aviso-suave: #fff3d1;
  --color-error: #b42318;                 /* 6,6:1 */
  --color-error-suave: #fde7e5;
  --color-info: #1d5f8a;                  /* 6,4:1 */
  --color-info-suave: #e3eef7;

  /* ---------- Color · foco (anillo ≥ 3:1 sobre cualquier fondo de la app) ---------- */
  --color-foco: #0b3d66;
  --color-foco-interior: #ffffff;
  --foco-grosor: 3px;
  --foco-desplazamiento: 2px;

  /* ---------- Color · estados de reserva (fondo + texto; siempre con icono y texto) ---------- */
  --color-reserva-solicitud: #e4e9ef;        --color-reserva-solicitud-texto: #243b53;
  --color-reserva-prerreserva: #fff1c2;      --color-reserva-prerreserva-texto: #6b4a00;
  --color-reserva-fianza: #d6e9f8;           --color-reserva-fianza-texto: #0b4f7a;
  --color-reserva-pagada: #d4efe0;           --color-reserva-pagada-texto: #14532d;
  --color-reserva-terminada: #e7e7ea;        --color-reserva-terminada-texto: #3d3d46;
  --color-reserva-cancelada: #fbe0e0;        --color-reserva-cancelada-texto: #7f1d1d;
  --color-reserva-devuelta: #e0f2f1;         --color-reserva-devuelta-texto: #0f4c47;   /* pasada 4: fianza devuelta (total o parcial) */
  --color-reserva-retenida: #ede9e3;         --color-reserva-retenida-texto: #5a3e1b;   /* pasada 4: fianza retenida (se factura en Contasol) */

  /* ---------- Color · tramos de ocupación (0 % · ≤20 · ≤40 · ≤60 · ≤80 · 100 %) ---------- */
  --color-ocupacion-0: #ffffff;   --color-ocupacion-0-texto: #52606d;
  --color-ocupacion-1: #e8f2fa;   --color-ocupacion-1-texto: #1f2933;
  --color-ocupacion-2: #c6def2;   --color-ocupacion-2-texto: #1f2933;
  --color-ocupacion-3: #97c2e4;   --color-ocupacion-3-texto: #0b2740;
  --color-ocupacion-4: #1f6ea6;   --color-ocupacion-4-texto: #ffffff;   /* 5,5:1 */
  --color-ocupacion-5: #0b3d66;   --color-ocupacion-5-texto: #ffffff;   /* 11,8:1 */

  /* ---------- Color · tipo de cliente (E escolar · C colectivo · P particular) ---------- */
  --color-cliente-e: #e3eef7;  --color-cliente-e-texto: #1d5f8a;
  --color-cliente-c: #e9e3f7;  --color-cliente-c-texto: #4c2a8a;
  --color-cliente-p: #e2f3ec;  --color-cliente-p-texto: #14532d;

  /* ---------- Color · cuadrante ---------- */
  /* El RELLENO de una sesión es el color de su grupo (abajo); estos son los valores sin grupo y los estados */
  --color-sesion: #e6f1f8;           --color-sesion-borde: #005f99;      /* sesión de reserva sin color de grupo */
  --color-sesion-externa: #e2f3ec;   --color-sesion-externa-borde: #1b7a3d; /* servicio externo sin grupo */
  --color-sesion-interna: #eeeef2;   --color-sesion-interna-borde: #52606d; /* tarea interna (nunca lleva grupo) */
  --color-sesion-conflicto: #fde7e5; --color-sesion-conflicto-borde: #b42318; /* estado: pisa al color de grupo */
  --color-turno: #fff3d1;            --color-turno-texto: #8a5a00;       /* casilla TURNO (responsable de la pernocta); 5,4:1 */

  /* ---------- Color · grupos del cuadrante (pasada 3 · identidad por reserva) ----------
     Mismo color en el panel de reservas, en las sesiones del cuadrante y en el calendario.
     Siempre acompañado de la abreviatura del grupo en texto. Texto ≥ 4,5:1 sobre su fondo.
     Los pares se alternan en luminancia y los pares (2, 4, 6, 8) llevan además --patron-grupo
     para distinguirse en escala de grises. 4 = amarillo claro y 5 = lila claro: reservados a
     los dos clientes con color fijo. */
  --grupo-1-fondo: #d6e8fb;  --grupo-1-texto: #173a5e;   /* azul */
  --grupo-2-fondo: #d2f0dc;  --grupo-2-texto: #124a2a;   /* verde */
  --grupo-3-fondo: #fde0cc;  --grupo-3-texto: #6f2a0c;   /* melocotón */
  --grupo-4-fondo: #fff3c4;  --grupo-4-texto: #5c4300;   /* amarillo claro (cliente con color fijo) */
  --grupo-5-fondo: #ebe3f8;  --grupo-5-texto: #3d2a70;   /* lila claro (cliente con color fijo) */
  --grupo-6-fondo: #fbdde9;  --grupo-6-texto: #7a1a45;   /* rosa */
  --grupo-7-fondo: #d2f1ef;  --grupo-7-texto: #0f4a46;   /* turquesa */
  --grupo-8-fondo: #ece6d8;  --grupo-8-texto: #4a3b22;   /* arena */
  --patron-grupo: repeating-linear-gradient(135deg, transparent 0 7px, rgba(255, 255, 255, 0.42) 7px 10px);

  /* ---------- Tipografía ---------- */
  --fuente-titulo: "Montserrat", system-ui, Arial, sans-serif;
  --fuente-texto: "Montserrat", system-ui, Arial, sans-serif;
  --fuente-mono-cifras: "Montserrat", system-ui, Arial, sans-serif; /* con font-variant-numeric: tabular-nums */
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semibold: 600;
  --tamano-texto-xs: 0.75rem;    /* 12 px: solo etiquetas secundarias en escritorio */
  --tamano-texto-s: 0.875rem;    /* 14 px: mínimo en escritorio */
  --tamano-texto-m: 1rem;        /* 16 px: base y mínimo en móvil */
  --tamano-texto-l: 1.125rem;    /* 18 px */
  --tamano-texto-xl: 1.375rem;   /* 22 px */
  --tamano-texto-2xl: 1.75rem;   /* 28 px */
  --tamano-texto-3xl: 2.25rem;   /* 36 px */
  --altura-linea-compacta: 1.25;
  --altura-linea-texto: 1.5;
  --altura-linea-titulo: 1.2;

  /* ---------- Espaciado (base 4 px) ---------- */
  --espacio-1: 0.25rem;   /* 4 */
  --espacio-2: 0.5rem;    /* 8 */
  --espacio-3: 0.75rem;   /* 12 */
  --espacio-4: 1rem;      /* 16 */
  --espacio-5: 1.25rem;   /* 20 */
  --espacio-6: 1.5rem;    /* 24 */
  --espacio-8: 2rem;      /* 32 */
  --espacio-10: 2.5rem;   /* 40 */
  --espacio-12: 3rem;     /* 48 */

  /* ---------- Radios ---------- */
  --radio-s: 0.25rem;     /* chips, celdas */
  --radio-m: 0.5rem;      /* controles, botones */
  --radio-l: 0.75rem;     /* tarjetas, diálogos */
  --radio-redondo: 999px;

  /* ---------- Sombras ---------- */
  --sombra-1: 0 1px 2px var(--color-sombra);
  --sombra-2: 0 2px 8px var(--color-sombra);
  --sombra-3: 0 8px 24px var(--color-sombra);

  /* ---------- Bordes y medidas ---------- */
  --borde-grosor: 1px;
  --borde-grosor-fuerte: 2px;
  --borde-grosor-acento: 4px;
  --target-min: 24px;              /* WCAG 2.2 AA 2.5.8 */
  --control-alto-escritorio: 40px;
  --control-alto-movil: 44px;
  --icono-s: 16px;
  --icono-m: 20px;
  --icono-l: 24px;
  --avatar: 32px;
  --logo-alto: 32px;               /* logo alargado en cabeceras (barra de 56 px) */
  --logo-alto-grande: 120px;       /* logo cuadrado (principal) en acceso, índice y documentos */
  --barra-lateral-ancho: 256px;
  --barra-lateral-plegada: 64px;
  --cabecera-alto: 56px;
  --barra-inferior-alto: 64px;
  --contenido-ancho-max: 1600px;
  --formulario-ancho-max: 720px;
  --tarjeta-min: 280px;
  --celda-calendario-min: 112px;
  --columna-dia-min: 168px;        /* cuadrante: ancho mínimo de la columna de un día (las franjas van en filas) */
  --franja-etiqueta-ancho: 1.25rem; /* cuadrante: columna de la etiqueta M / T / N dentro de cada franja */
  --columna-monitor-ancho: 160px;
  --patron-no-disponible: repeating-linear-gradient(135deg, transparent 0 3px, var(--color-borde) 3px 4px); /* celdas «no disponible» del mes */
  --patron-rayas: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, 0.22) 6px 10px);

  /* ---------- Breakpoints (también escritos en las @media de estilos.css) ---------- */
  --bp-tableta: 768px;
  --bp-escritorio: 1024px;
  --bp-ancho: 1280px;

  /* ---------- Transiciones ---------- */
  --transicion: 120ms ease-out;
}