/* Puente de la caseta (caseta.proher.app) con la línea de proher.app. Fuente: plataforma-phn/tema/puentes/caseta.css.
   Se carga DESPUÉS de style.css: sus variables (también las de su modo oscuro) pasan a leer los tokens --phn-*
   del tema elegido en Personalizar. Siempre en claro (Aron, 2026-11-04). Aquí --verde es el de RELLENO. */
:root:root {
  color-scheme: light;
  --verde: var(--phn-accent);
  --verde-texto: var(--phn-accent-text);
  --verde-sobre: var(--phn-on-accent);
  --verde-tinte: var(--phn-accent-soft);
  --verde-tinte-texto: var(--phn-accent-soft-text);
  --foco: var(--phn-focus);
  --blanco: var(--phn-surface);
  --fondo: var(--phn-bg);
  --fondo-2: var(--phn-surface-nav);
  --campo: var(--phn-neutral-bg);
  --tinta: var(--phn-text);
  --tinta-3: var(--phn-text-2);
  --linea: var(--phn-border);
  --oscuro: var(--phn-text);
  --oscuro-sobre: var(--phn-surface);
  --ambar: var(--phn-warn-bg);
  --ambar-texto: var(--phn-warn-fg);
  --azul: var(--phn-info-bg);
  --azul-texto: var(--phn-info-fg);
  --rojo: var(--phn-danger-fg);
  --rojo-fondo: var(--phn-danger-bg);
  --radio-xl: var(--phn-radius-card);
  --radio: calc(var(--phn-radius-card) - 6px);
  --radio-sm: var(--phn-radius-field);
  --sombra: var(--phn-shadow-card);
  /* Lo que su modo oscuro también cambiaba: se fija al claro de style.css */
  --tinta-2: #424245;
  --linea-2: #C7C7CC;
  --inactivo: var(--phn-border);
  --inactivo-texto: #58585C;
  --verde-suave: var(--phn-accent-soft);
  --toast-fondo: #1D1D1F;
  --toast-texto: #FFFFFF;
  --velo: rgba(29, 29, 31, .55);
  --sombra-barra: 0 -1px 0 var(--linea), 0 -10px 28px rgba(0, 0, 0, .06);
}
.btn--peligro, .toast.is-error { color: #FFFFFF; }
.persona__inicial { color: #FFFFFF; }
.persona.is-selected .persona__inicial { color: var(--verde-sobre); }

/* ── Espacio (2026-11-04): solo aire sobrante; objetivos táctiles >= 44 px y letra sin cambios ── */
:root:root { --alto-barra: 132px; }
.main.sin-barra { padding-bottom: calc(16px * var(--phn-space,1) + var(--seguro-b)); }
.hoy__resumen { min-height: 52px; }
.foto__boton { min-height: 88px; }
.visor__marco { min-height: 200px; }
.hoja__caja { padding-top: calc(20px * var(--phn-space,1)); }
@media (min-width: 700px) { .main { padding-top: calc(16px * var(--phn-space,1)); } }
@media (min-width: 820px) { :root:root { --ancho-main: 960px; } }
@media (min-width: 1024px) {
  :root:root { --ancho-main: 1180px; }
  .invitados { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}
@media (min-width: 1500px) { :root:root { --ancho-main: 1320px; } }
@media (orientation: landscape) and (max-height: 520px) { :root:root { --alto-barra: 104px; } }

/* ══ Modo oscuro (2026-11-04): estilos Oscuro y Grafito. Deshace lo que el bloque claro fijó ══ */
:root:root[data-modo="oscuro"] {
  color-scheme: dark;
  --verde-fuerte: color-mix(in srgb, var(--phn-accent) 85%, #000);
  --tinta-2: color-mix(in srgb, var(--phn-text) 55%, var(--phn-text-2));
  --linea-2: var(--phn-border-strong);
  --inactivo: var(--phn-neutral-bg);
  --inactivo-texto: var(--phn-text-3);
  --verde-suave: var(--phn-accent-soft);
  --toast-fondo: var(--phn-text);
  --toast-texto: var(--phn-surface);
  --velo: rgba(0, 0, 0, .7);
  --sombra-barra: 0 -1px 0 var(--linea);
}
[data-modo="oscuro"] .btn--peligro,
[data-modo="oscuro"] .toast.is-error { background: var(--phn-danger-solid); color: var(--phn-on-danger); }
[data-modo="oscuro"] .persona__inicial { color: var(--phn-surface); }
[data-modo="oscuro"] .persona.is-selected .persona__inicial { color: var(--verde-sobre); }

/* ══ Unificación con el portal (2026-11-04): misma fuente, círculo de perfil y Salida sin negro ══ */
:root:root { --fuente: var(--phn-font); }
.topbar__menu { background: transparent; padding: 0; }
.topbar__menu .ap-avatar { width: 44px; height: 44px; font-size: 1.05rem; }
.persona__inicial { background: var(--phn-accent-soft); color: var(--phn-accent-soft-text); }
/* Salida se distingue de Entrada (verde) con borde marcado en vez de negro */
.btn--salida, .btn--invitado.btn--salida { background: var(--phn-surface); color: var(--phn-text); box-shadow: inset 0 0 0 2px var(--phn-border-strong); }
[data-modo="oscuro"] .persona__inicial { color: var(--phn-accent-soft-text); }