/* =====================================================================
   turismo-design.css · Implementación de DESIGN_TURISMO.md v1 (caleturismo/app/docs/DESIGN_TURISMO.md)
   Va DESPUÉS de cale-design.css (copia exacta de DESIGN.md). Aquí solo se agrega o ajusta:
   tokens nuevos (§3), modo Día (.t-dia, §4.0) y componentes de página en turismo.css.
   ===================================================================== */

/* ---------- §3 Tokens ---------- */
:root {
  --papel-2: #efe5dc; --blanco: #ffffff;
  --tinta: #1b1c38; --tinta-tenue: #616072;
  --tinta-linea: rgba(35, 36, 77, .12); --tinta-linea-fuerte: rgba(35, 36, 77, .24);
  --rojo-tinta: #c41622;
  --mar: #3fd0c4; --mar-oscuro: #0b6f6b; --sol: #ffb547; --sol-oscuro: #8a5a00;
  --sombra-dia-1: 0 8px 22px -10px rgba(35, 36, 77, .22);
  --sombra-dia-2: 0 26px 60px -24px rgba(35, 36, 77, .32);
}

/* ---------- Modo Día ---------- */
.t-dia {
  --texto: var(--tinta); --tenue: var(--tinta-tenue); --apagado: rgba(27, 28, 56, .2);
  --linea: var(--tinta-linea); --linea-fuerte: var(--tinta-linea-fuerte);
  --panel: var(--blanco); --panel-2: #fffaf6;
  --rojo-2: var(--rojo-tinta);
  background: var(--papel); color: var(--texto); color-scheme: light;
}
.t-dia--alt { background: var(--papel-2); }
/* Noche dentro de Día: devuelve los tokens de DESIGN.md (bloques oscuros, modales, paneles flotantes) */
.t-noche, .t-dia .c-modal, .t-dia .t-personas__panel, .t-dia .t-auto__lista {
  --texto: #f4f4f7; --tenue: rgba(244, 244, 247, .64); --apagado: rgba(244, 244, 247, .16);
  --linea: rgba(255, 255, 255, .1); --linea-fuerte: rgba(255, 255, 255, .22);
  --panel: #161624; --panel-2: #1c1c2d; --rojo-2: #ff4653;
  color: var(--texto); color-scheme: dark;
}
.t-noche { background: var(--negro-2); }
.t-dia .t-noche .c-titulo { color: var(--texto); }
.t-dia .t-noche .c-campo input, .t-dia .t-noche .c-campo select, .t-dia .t-noche .c-campo textarea { background-color: rgba(11, 11, 20, .72); color: var(--texto); }
.t-dia .t-noche .c-campo input::placeholder { color: rgba(244, 244, 247, .4); }
.t-dia .t-noche .c-btn--sec { background: rgba(255, 255, 255, .06); color: var(--texto); }
.t-dia .t-noche .c-accion { color: rgba(255, 255, 255, .78); }
.t-dia .t-noche .c-accion:hover { color: #fff; }
.t-dia .t-noche .c-chip { background: rgba(255, 255, 255, .05); }
.t-dia .t-noche .c-chip[aria-checked="true"] { background: #fff; color: var(--azul); border-color: #fff; }
.t-dia .t-noche .c-chip--accion[aria-checked="true"] { background: var(--rojo); color: #fff; border-color: var(--rojo); }
.t-dia .t-noche .c-aviso { background: rgba(11, 11, 20, .9); }
.t-dia .t-noche .c-aviso--aviso { color: var(--aviso); }
.t-dia .t-noche .c-aviso b { color: #fff; }
.t-dia .t-noche .c-insignia--aviso { color: var(--aviso); }
.t-dia .t-noche .c-insignia--exito { color: var(--exito); }

/* §4.0 Componentes heredados con colores oscuros fijos */
.t-dia .c-titulo { color: var(--azul); }
.t-dia .c-campo input, .t-dia .c-campo select, .t-dia .c-campo textarea { background-color: var(--blanco); color: var(--tinta); }
.t-dia .c-campo input::placeholder, .t-dia .c-campo textarea::placeholder { color: rgba(27, 28, 56, .4); }
.t-dia .c-btn--sec { background: rgba(35, 36, 77, .05); color: var(--tinta); }
.t-dia .c-btn--sec:hover { background: rgba(35, 36, 77, .1); }
.t-dia .c-btn:disabled, .t-dia .c-btn[aria-disabled="true"] { background: rgba(35, 36, 77, .1); color: rgba(27, 28, 56, .5); }
.t-dia .c-accion { color: var(--tinta-tenue); }
.t-dia .c-accion:hover, .t-dia .c-accion:focus-visible { color: var(--tinta); }
.t-dia .c-chip { background: var(--blanco); }
.t-dia .c-chip:hover { border-color: var(--azul); }
.t-dia .c-chip[aria-checked="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.t-dia .c-chip--accion[aria-checked="true"] { background: var(--rojo); border-color: var(--rojo); }
.t-dia .c-tarjeta { background: var(--blanco); border-color: transparent; box-shadow: var(--sombra-dia-1); }
.t-dia .c-tarjeta--clic:hover { box-shadow: var(--sombra-dia-2); border-color: transparent; }
.t-dia .c-aviso { background: var(--blanco); }
.t-dia .c-aviso--aviso, .t-dia .c-aviso:not([class*="c-aviso--"]) { color: var(--sol-oscuro); }
.t-dia .c-aviso--exito { color: #4f7300; }
.t-dia .c-aviso b { color: var(--tinta); }
.t-dia .c-insignia--aviso { color: var(--sol-oscuro); }

/* Transición noche ↔ Día (§2.3): curva SVG del color de la sección que sigue */
.t-curva { display: block; width: 100%; height: clamp(40px, 6vw, 90px); margin: -1px 0; }
.t-curva path { fill: var(--papel); stroke: none; }
.t-curva--alt path { fill: var(--papel-2); }
.t-curva--noche path { fill: var(--negro); }
.t-curva--noche2 path { fill: var(--negro-2); }