/* ═══════════════════════════════════════════════════════════════════════════
   Horapy — hoja de estilos única.
   Tokens de la plantilla base, con los colores del brief (A14).
   Móvil primero, maquetado desde 375 px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tipografía autoalojada. Sin llamadas a Google Fonts. ─────────────────── */
@font-face {
  font-family: 'Poppins';
  src: url('../fuentes/poppins-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Solo el subconjunto latino: cubre el espanol entero. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fuentes/poppins-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  /* Solo el subconjunto latino: cubre el espanol entero. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fuentes/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  /* Solo el subconjunto latino: cubre el espanol entero. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {
  /* Color — paleta de marca. Los cuatro tonos oficiales son fondo,
     principal, apoyo y acento; el resto se deriva de ellos. Contraste
     medido, minimo 4.5:1 del estandar:
       texto sobre fondo ............ 11.7:1
       principal sobre fondo ......... 7.7:1
       texto-suave sobre fondo ....... 5.7:1
       blanco sobre acento ........... 5.2:1
       blanco sobre principal ....... 10.2:1
       acento-fuerte sobre fondo ..... 4.6:1   ← enlaces
       acento sobre fondo ............ 3.9:1   → SOLO bordes, superficies
                                                 y texto grande. Nunca
                                                 texto pequeno. */
  --color-fondo:        #E6E0CA;   /* marca */
  --color-principal:    #484123;   /* marca — el color del logo */
  --color-apoyo:        #C8CDBC;   /* marca */
  --color-acento:       #7A6C3E;   /* marca */

  --color-acento-fuerte:#6F6238;   /* acento oscurecido hasta 4.5:1 */
  --color-superficie:   #FDFBF6;
  --color-superficie-2: #F2EDDE;
  --color-texto:        #2A2415;
  --color-texto-suave:  #5C5340;
  --color-borde:        #D5CCB3;
  --color-borde-suave:  #E1D8C2;

  --color-exito:        #2C6130;
  --color-error:        #A62A1F;
  --color-aviso:        #7A5A05;

  /* Escala tipográfica del estándar */
  --texto-xs:  0.875rem;  /* 14 — solo apoyos, nunca cuerpo */
  --texto-sm:  1rem;      /* 16 — mínimo en móvil */
  --texto-md:  1.125rem;  /* 18 */
  --texto-lg:  1.25rem;   /* 20 */
  --texto-xl:  1.5rem;    /* 24 */
  --texto-2xl: 1.875rem;  /* 30 */
  --texto-3xl: 2.25rem;   /* 36 */
  --texto-4xl: 3rem;      /* 48 */

  --linea-texto:  1.5;
  --linea-titulo: 1.2;

  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-6: 1.5rem;
  --espacio-8: 2rem;
  --espacio-12: 3rem;
  --espacio-16: 4rem;
  --espacio-24: 6rem;

  --radio-sm: 4px;
  --radio-md: 8px;
  --radio-lg: 14px;

  --sombra-sm: 0 1px 2px rgba(42, 36, 21, .06);
  --sombra-md: 0 2px 4px rgba(42, 36, 21, .06), 0 12px 28px -16px rgba(42, 36, 21, .22);

  --ancho-contenido: 1120px;
  --ancho-lectura: 68ch;

  /* Área táctil mínima del estándar */
  --tactil: 44px;
}

*, *::before, *::after { box-sizing: border-box; }

/* El atributo hidden tiene que ganarle a cualquier display de una clase: el
   panel de reserva lo usa para mostrar u ocultar el desglose, y sin esto un
   display:flex de la propia clase lo dejaria visible. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--texto-sm);          /* 16 px mínimo: menos hace que iOS
                                          amplíe al tocar un campo */
  line-height: var(--linea-texto);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: var(--linea-titulo);
  color: var(--color-principal);
  margin: 0 0 var(--espacio-4);
  text-wrap: balance;
}
h1 { font-size: var(--texto-2xl); }
h2 { font-size: var(--texto-xl); }
h3 { font-size: var(--texto-lg); }
h4 { font-size: var(--texto-md); }

p { margin: 0 0 var(--espacio-4); max-width: var(--ancho-lectura); }

a { color: var(--color-acento-fuerte); text-underline-offset: 3px; }
a:hover { color: var(--color-principal); }

/* Foco visible siempre: la navegación por teclado no es opcional. */
:focus-visible {
  outline: 3px solid var(--color-acento);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

img, picture, video { max-width: 100%; height: auto; }

/* Aire sobre cualquier destino de ancla: llegar con el titulo pegado al
   borde de la pantalla se lee como si la pagina estuviera cortada. */
[id] { scroll-margin-top: var(--espacio-6); }

/* ── Utilidades ──────────────────────────────────────────────────────────── */
/* Existen por una razon concreta: la politica de seguridad de contenido
   prohibe unsafe-inline, y el nonce cubre las etiquetas <style> pero NO el
   atributo style="". Un margen escrito en linea no se bloquea con un aviso
   visible: simplemente no se aplica. Estas clases son el reemplazo.
   Deliberadamente pocas; lo que se repita con nombre propio va a su bloque. */
.mt-4  { margin-top: var(--espacio-4); }
.mt-6  { margin-top: var(--espacio-6); }
.mt-8  { margin-top: var(--espacio-8); }
.mt-12 { margin-top: var(--espacio-12); }
.mb-4  { margin-bottom: var(--espacio-4); }
.sin-margen { margin: 0; }

/* Campo trampa para robots. Fuera de la pantalla, no display:none: hay
   robots que ignoran lo que esta oculto con display. */
.trampa { position: absolute; left: -9999px; }

.monoespaciado { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Compartidas por los tres layouts, por eso viven aqui y no en panel.css:
   las pantallas de cuenta cargan app.css + sitio.css, sin panel.css. */
.boton--menudo { font-size: var(--texto-xs); }
.cuenta__salir { margin-left: auto; }   /* el formulario, no el boton */
.sitio__pie-fino--suelto { margin-top: 0; border-top: 0; padding-top: 0; }

/* Los avisos que llevan un parrafo entero se leen alineados a la izquierda. */
.estado--texto { text-align: left; }

/* Cifras que son el dato principal de la pantalla: el total a pagar, las
   horas que quedan a favor. */
.cifra-destacada { font-size: var(--texto-lg); color: var(--color-principal); }
.cifra-enorme    { font-size: var(--texto-3xl); color: var(--color-principal); margin: 0; }

/* ── Contenedor ──────────────────────────────────────────────────────────── */
.contenedor {
  width: 100%;
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding-inline: var(--espacio-4);
}

.seccion { padding-block: var(--espacio-12); }

/* Anchos de las pantallas de formulario. Van DESPUES de .contenedor a
   proposito: las dos reglas tienen la misma especificidad y se aplican al
   mismo elemento, asi que gana la ultima. Puestas antes, .contenedor las
   pisaba y el formulario de entrar salia a 1120 px. */
.caja-estrecha { max-width: 32rem; }
.caja-media    { max-width: 34rem; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--tactil);
  padding: var(--espacio-3) var(--espacio-6);
  border: 1px solid transparent;
  border-radius: var(--radio-md);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  /* Solo transform y color: animar tamaños arruina el INP. */
  transition: background-color 160ms ease, transform 160ms ease, color 160ms ease;
}
.boton:active { transform: translateY(1px); }

.boton--principal {
  background: var(--color-acento);
  color: #FFFFFF;                       /* 5.1:1 sobre el acento */
}
.boton--principal:hover { background: var(--color-acento-fuerte); color: #FFFFFF; }

.boton--secundario {
  background: transparent;
  border-color: var(--color-acento);
  color: var(--color-principal);
}
.boton--secundario:hover { background: var(--color-superficie-2); }

/* Para la accion principal de una pantalla: reservar, pagar, confirmar. */
.boton--grande {
  font-size: var(--texto-md);
  padding: var(--espacio-4) var(--espacio-8);
}

.boton[disabled], .boton[aria-disabled='true'] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* ── Formularios: una columna, etiqueta arriba, error en línea ───────────── */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--espacio-4); }
.campo > label { font-size: var(--texto-xs); font-weight: 500; color: var(--color-principal); }
.campo > .ayuda { font-size: var(--texto-xs); color: var(--color-texto-suave); }

.campo input[type='text'],
.campo input[type='email'],
.campo input[type='tel'],
.campo input[type='password'],
.campo input[type='date'],
.campo select,
.campo textarea {
  /* 48 px de alto: por encima de los 44 del area tactil minima y sin el
     aspecto de campo gigante que deja un padding de 12 por los cuatro lados.
     El tamano de letra se queda en 16 px --no baja-- porque por debajo iOS
     amplia la pagina al tocar el campo. */
  min-height: 48px;
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background: var(--color-superficie);
  color: var(--color-texto);
  font: inherit;
  font-size: var(--texto-sm);
  width: 100%;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* El foco se ve sin mover nada de sitio: borde mas oscuro y un halo. */
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--color-principal);
  box-shadow: 0 0 0 3px rgba(72, 65, 35, .12);
}
.campo textarea { min-height: 8rem; resize: vertical; }

.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--color-error); }
.campo .error { color: var(--color-error); font-size: var(--texto-xs); font-weight: 500; }

/* Casilla de aceptación: nunca premarcada, con área táctil suficiente. */
.casilla { display: flex; gap: var(--espacio-3); align-items: flex-start; }
.casilla input[type='checkbox'] { width: 22px; height: 22px; margin-top: 2px; flex: none; }

/* ── Los cuatro estados de cada pantalla ─────────────────────────────────── */
.estado {
  padding: var(--espacio-6);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background: var(--color-superficie);
  text-align: center;
}
.estado--exito { border-left: 4px solid var(--color-exito); text-align: left; }
.estado--error { border-left: 4px solid var(--color-error); text-align: left; }
.estado--aviso { border-left: 4px solid var(--color-aviso); text-align: left; }
.estado--vacio { color: var(--color-texto-suave); }
.estado--carga { color: var(--color-texto-suave); }

/* ── Tarjetas ────────────────────────────────────────────────────────────── */
.tarjeta {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-lg);
  padding: var(--espacio-6);
  box-shadow: var(--sombra-sm);
}

/* ── Utilidades ──────────────────────────────────────────────────────────── */
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.saltar-al-contenido {
  position: absolute; left: var(--espacio-4); top: -100px;
  background: var(--color-superficie); color: var(--color-principal);
  padding: var(--espacio-3) var(--espacio-4); border-radius: var(--radio-md);
  z-index: 100;
}
.saltar-al-contenido:focus { top: var(--espacio-4); }

/* ── Movimiento ──────────────────────────────────────────────────────────── */
/* Todo el contenido está en el HTML desde el inicio. La animación cambia
   cómo se ve, nunca si existe: sin JavaScript, .aparece queda visible. */
.aparece { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* Los saltos a un ancla van con desplazamiento suave. Se hace en CSS y no
     en JavaScript para que funcione siempre, incluso con los scripts caidos.
     El bloque de reduced-motion de abajo lo desactiva con !important para
     quien pidio menos movimiento. */
  html { scroll-behavior: smooth; }

  .js .aparece {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 500ms ease, transform 500ms ease;
  }
  .js .aparece.visible { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── A partir de tableta ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
  :root { --texto-sm: 1.0625rem; }
  h1 { font-size: var(--texto-3xl); }
  h2 { font-size: var(--texto-2xl); }
  .contenedor { padding-inline: var(--espacio-8); }
  .seccion { padding-block: var(--espacio-16); }
}

@media (min-width: 1024px) {
  h1 { font-size: var(--texto-4xl); }
}