/* Equipo de prueba. Los colores y el loto salen del logo del Hotel Mirador Papagayo.
   Sin fuentes externas. Un solo gesto fuerte: la barra oscura. Lo demás, tranquilo y legible. */

:root {
  color-scheme: light;

  /* Colores del logo */
  --picon: #1D1D1B;
  --vino: #8C0452;
  --oro: #DCC07A;
  --turquesa: #2ED9C3;

  /* Base */
  --fondo: #F3F3EF;
  --superficie: #FFFFFF;
  --sobre-color: #FFFFFF; /* Texto sobre lo oscuro y sobre los colores llenos */
  --texto: #1D1D1B;
  --primario: #8C0452;
  --acento: #B08A2E;
  --correcto: #0E8A70;
  --aviso: #9A6700;
  --error: #C2351B;
  --info: #2F6C99;

  /* Derivados, con contraste AA para texto */
  --texto-suave: #55564F;
  --borde: #DEDED7;
  --borde-fuerte: #8B8B82;
  --primario-oscuro: #6B033F;
  --primario-suave: #F7E8F0;
  --acento-oscuro: #6F5410;
  --correcto-oscuro: #0A5F4F;
  --correcto-suave: #DDF4EF;
  --aviso-oscuro: #6B4800;
  --aviso-suave: #FBF0D9;
  --error-oscuro: #92260F;
  --error-suave: #FCE8E3;
  --info-oscuro: #1F4E71;
  --info-suave: #E3EEF6;
  --neutro-suave: #EAEAE4;
  --franja-fondo: #DCC07A;
  --franja-texto: #1D1D1B;

  /* Sobre la barra oscura */
  --picon-capa: #2A2A27;
  --picon-borde: #46463F;
  --picon-texto: #C9C9BF;

  --letra: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --letra-titulos: "Sitka Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", serif;
  --radio: 12px;
  --radio-pequeno: 8px;
  --sombra-alta: 0 10px 30px rgba(29, 29, 27, 0.22);
  --velo: rgba(29, 29, 27, 0.55);
  --alto-toque: 48px;
  --alto-tablet: 72px;
  --espacio: 16px;
  --ancho-barra: 248px;
  --alto-franja: 30px;
  --margen: var(--espacio); /* Margen lateral del contenido */
}

@media (min-width: 1024px) {
  :root { --margen: 32px; }
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 44px; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--letra);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* La letra de los títulos trae cifras antiguas, que bajan de la línea: aquí se quieren alineadas */
h1, h2, h3 { margin: 0; line-height: 1.15; font-family: var(--letra-titulos); font-variant-numeric: lining-nums; font-weight: 500; }
h1 { font-size: 2.125rem; letter-spacing: -0.01em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.1875rem; }
p { margin: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--primario); text-underline-offset: 2px; }
a:hover { color: var(--primario-oscuro); }

:focus-visible {
  outline: 3px solid var(--primario);
  outline-offset: 2px;
  border-radius: 4px;
}

[hidden] { display: none !important; }

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 16px;
  background: var(--superficie);
}
.saltar:focus { left: 8px; top: 8px; }

.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Franja del modo prueba */
.franja-prueba {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--alto-franja);
  padding: 4px var(--espacio);
  background: var(--franja-fondo);
  color: var(--franja-texto);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}

/* Barra superior. En pantalla ancha, con pestañas, pasa a ser la barra lateral */
.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px var(--espacio);
  padding: 8px var(--espacio);
  background: var(--picon);
  color: var(--sobre-color);
}
.barra a { color: var(--sobre-color); }
.barra :focus-visible { outline-color: var(--oro); }
.barra__marca {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--alto-toque);
  text-decoration: none;
}
.barra__logo { display: block; width: auto; height: 58px; }
.barra__producto { color: var(--oro); font-family: var(--letra-titulos); font-size: 1.125rem; }
.barra__persona {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--espacio);
}
.barra__quien { display: flex; flex-direction: column; line-height: 1.25; }
.barra__papel { color: var(--picon-texto); font-size: 0.875rem; }
.barra__cambiar { display: inline-flex; align-items: center; min-height: var(--alto-toque); font-size: 0.9375rem; }
.barra .boton--fantasma { color: var(--sobre-color); }
.barra .boton--fantasma:hover { background: var(--picon-capa); }

.campana {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--alto-toque);
  height: var(--alto-toque);
  border-radius: 50%;
  transition: background-color 0.15s ease;
}
.campana:hover { background: var(--picon-capa); }
.campana__icono { width: 26px; height: 26px; fill: var(--oro); }
.campana__numero {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--error);
  color: var(--sobre-color);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

/* Pestañas de cada zona */
.pestanas {
  display: flex;
  gap: 2px;
  width: 100%;
  overflow-x: auto;
  scrollbar-color: var(--picon-borde) transparent;
  scrollbar-width: thin;
}

@media (max-width: 1023px) {
  .pestanas { scrollbar-width: none; }
}

/* En el teléfono, logo y persona en una sola línea: el sitio es para el contenido */
@media (max-width: 560px) {
  .barra { column-gap: 8px; padding: 6px var(--espacio) 0; }
  .barra:not(:has(.pestanas)) { padding-bottom: 6px; }
  .barra__logo { height: 46px; }
  .barra__producto { display: none; }
  .barra__persona { flex: 1 1 0; flex-wrap: nowrap; justify-content: flex-end; gap: 0 6px; min-width: 0; }
  .barra__quien { min-width: 0; }
  .barra__quien strong { font-size: 0.9375rem; }
  .barra__papel, .barra__cambiar { font-size: 0.8125rem; }
  .barra__cambiar { flex: none; max-width: 76px; line-height: 1.2; text-align: right; }
  .campana { flex: none; margin: -4px; }
}
.barra .pestanas__enlace { color: var(--picon-texto); }
.pestanas__enlace {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: var(--alto-toque);
  padding: 0 12px;
  border-bottom: 3px solid transparent;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.barra .pestanas__enlace:hover { color: var(--sobre-color); }
/* La lista de pestañas recorta lo que se sale: el foco se dibuja por dentro */
.pestanas__enlace:focus-visible, .barra__marca:focus-visible { outline-offset: -3px; }
.barra .pestanas__enlace[aria-current="page"] {
  border-bottom-color: var(--oro);
  color: var(--sobre-color);
  font-weight: 600;
}

@media (min-width: 1024px) {
  body:has(> .barra .pestanas) {
    display: grid;
    grid-template-columns: var(--ancho-barra) minmax(0, 1fr);
    grid-template-rows: auto minmax(100dvh, 1fr);
  }
  body:has(> .barra .pestanas) .franja-prueba { grid-column: 1 / -1; }
  body:has(> .franja-prueba) { --arriba: var(--alto-franja); }
  body:has(> .barra .pestanas) > .barra {
    position: sticky;
    top: var(--arriba, 0px);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    height: calc(100dvh - var(--arriba, 0px));
    padding: 10px 0;
    overflow: hidden;
  }
  body:has(> .barra .pestanas) .barra__marca {
    order: 0;
    flex: none;
    flex-direction: column;
    gap: 4px;
    padding: 0 16px;
  }
  body:has(> .barra .pestanas) .barra__logo { width: 100%; max-width: 196px; height: auto; }
  body:has(> .barra .pestanas) .barra__producto { font-size: 0.9375rem; }
  body:has(> .barra .pestanas) .pestanas {
    order: 1;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border-top: 1px solid var(--picon-borde);
    padding: 4px 0;
  }
  body:has(> .barra .pestanas) .pestanas__enlace {
    flex: none;
    min-height: var(--alto-toque);
    padding: 0 16px 0 13px;
    border-bottom: 0;
    border-left: 3px solid transparent;
  }
  body:has(> .barra .pestanas) .barra .pestanas__enlace:hover { background: var(--picon-capa); }
  body:has(> .barra .pestanas) .barra .pestanas__enlace[aria-current="page"] {
    border-left-color: var(--oro);
    background: var(--picon-capa);
  }
  body:has(> .barra .pestanas) .barra__persona {
    order: 2;
    flex: none;
    flex-wrap: wrap;
    gap: 0 6px;
    padding: 6px 16px 0;
    border-top: 1px solid var(--picon-borde);
  }
  body:has(> .barra .pestanas) .barra__quien { flex: 1 1 130px; min-width: 0; }
  /* Con ratón caben más pestañas sin mover la barra. Con el dedo siguen siendo de 48 px. */
  @media (hover: hover) and (pointer: fine) {
    body:has(> .barra .pestanas) .pestanas__enlace { min-height: 36px; }
    body:has(> .barra .pestanas) .barra__cambiar { min-height: 28px; font-size: 0.8125rem; }
    body:has(> .barra .pestanas) .campana { width: 40px; height: 40px; }
  }
  /* Con el dedo y poca altura, como una tablet tumbada, el logo cede sitio a las pestañas */
  @media (hover: none) and (max-height: 820px) {
    body:has(> .barra .pestanas) .barra__logo { max-width: 148px; }
  }
  /* El reloj de pruebas se queda en el pie de la barra */
  body:has(> .barra .pestanas):has(.reloj-panel) > .barra { padding-bottom: 72px; }
  body:has(> .barra .pestanas) .reloj-panel { width: calc(var(--ancho-barra) - 24px); }
  body:has(> .barra .pestanas) .reloj-panel[open] { width: min(330px, calc(100vw - 24px)); }
}

/* Maquetación */
.contenedor {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px var(--margen) 96px;
}
.contenedor--estrecho { max-width: 520px; }
.contenedor--ancho { max-width: 1440px; }
.pagina-simple { max-width: 560px; margin: 48px auto; padding: 0 var(--espacio); }
.pagina-simple h1 { margin-bottom: 12px; }

.pila { display: flex; flex-direction: column; gap: 20px; }
.pila--corta { gap: 10px; }
.seccion { margin-top: 40px; }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fila--fin { justify-content: flex-end; }
.fila--entre { justify-content: space-between; }

.rejilla {
  display: grid;
  gap: var(--espacio);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.rejilla--anchas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); }

.entradilla { font-size: 1.125rem; color: var(--texto-suave); }
.entradilla::first-letter { text-transform: uppercase; } /* Muchas empiezan por una fecha */
.texto-suave { color: var(--texto-suave); font-size: 0.9375rem; }
.enlace-fuerte { font-weight: 700; }

/* Tarjetas: planas, con un filo y sin sombra gris */
.tarjeta {
  padding: 20px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.tarjeta__titulo { font-size: 1.1875rem; }

/* Portada: lo primero que ve el hotel */
.cuerpo-portada { --margen-barra: max(var(--margen), calc(50% - 528px)); --arriba-reloj: 22px; }
.cuerpo-portada .barra { padding-top: 12px; padding-right: var(--margen-barra); padding-left: var(--margen-barra); }
@media (min-width: 561px) {
  .cuerpo-portada .barra__logo { height: 72px; }
}
.cuerpo-portada .barra__producto { display: none; }
.cuerpo-portada main > .alerta { margin: 0; border-radius: 0; }
.portada {
  position: relative;
  display: grid;
  gap: 18px;
  overflow: hidden;
  padding: 36px var(--margen-barra) 56px;
  background: var(--picon);
  color: var(--sobre-color);
}
.portada__loto {
  position: absolute;
  top: 50%;
  right: -6%;
  width: min(560px, 74%);
  max-width: none;
  opacity: 0.2;
  transform: translateY(-50%);
  pointer-events: none;
}
@media (max-width: 560px) {
  .portada__loto { right: -34%; width: 90%; opacity: 0.16; } /* Que no se cruce con el texto */
}
.portada__titulo { position: relative; font-size: clamp(2.5rem, 7vw, 4.25rem); letter-spacing: -0.015em; }
.portada__texto { position: relative; max-width: 34em; color: var(--picon-texto); font-size: 1.1875rem; }
.portada__pulso {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  align-self: start;
  justify-self: start;
  gap: 10px;
  font-size: 1.0625rem;
}
.portada__pulso strong { color: var(--turquesa); font-size: 2rem; font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1; }

/* Punto de lo que está en directo */
.punto-vivo {
  position: relative;
  align-self: center;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--turquesa);
}
.punto-vivo::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--turquesa);
  content: "";
  animation: latido 2.4s ease-out infinite;
}
@keyframes latido {
  from { opacity: 0.7; transform: scale(1); }
  to { opacity: 0; transform: scale(3); }
}

/* Entradas de la portada */
.entradas {
  display: grid;
  gap: var(--espacio);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.entradas form { display: flex; }
@media (max-width: 899px) {
  .entradas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
  .entradas { grid-template-columns: minmax(0, 1fr); }
}
.entradas--destacadas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.entrada {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-height: 124px;
  padding: 20px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.entrada:hover { background: var(--picon); border-color: var(--picon); color: var(--sobre-color); }
.entrada--guia { background: var(--primario); border-color: var(--primario); color: var(--sobre-color); }
.entrada--guia:hover { background: var(--primario-oscuro); border-color: var(--primario-oscuro); color: var(--sobre-color); }
.entrada__titulo { font-family: var(--letra-titulos); font-size: 1.375rem; line-height: 1.15; }
.entrada__texto { color: var(--texto-suave); transition: color 0.18s ease; }
.entrada:hover .entrada__texto, .entrada--guia .entrada__texto { color: inherit; }

.datos-prueba {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 4px 10px;
  background: var(--neutro-suave);
  border-radius: var(--radio-pequeno);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

/* Personas sugeridas: una lista, con las cifras y los botones en columna */
.sugeridas {
  margin: 0;
  padding: 0;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  list-style: none;
}
.sugerida {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 212px 216px;
  align-items: center;
  gap: 8px 20px;
  padding: 12px 20px;
}
.sugerida + .sugerida { border-top: 1px solid var(--borde); }
.sugerida .datos-prueba { flex-wrap: nowrap; justify-self: start; white-space: nowrap; }
@media (max-width: 899px) {
  .sugerida { grid-template-columns: minmax(0, 1fr) 216px; }
  .sugerida__nota { order: 1; }
  .sugerida__entrar { order: 2; }
}
@media (max-width: 560px) {
  .sugerida { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
}

/* Botones: 48 px como mínimo, 72 px en la tablet */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--alto-toque);
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
}
.boton:active:not(:disabled) { transform: scale(0.98); }
.boton--primario { background: var(--primario); color: var(--sobre-color); }
.boton--primario:hover { background: var(--primario-oscuro); color: var(--sobre-color); }
.boton--secundario {
  background: var(--superficie);
  border-color: var(--primario);
  color: var(--primario);
}
.boton--secundario:hover { background: var(--primario-suave); color: var(--primario-oscuro); }
.boton--peligro { background: var(--error); color: var(--sobre-color); }
.boton--peligro:hover { background: var(--error-oscuro); color: var(--sobre-color); }
.boton--fantasma { background: transparent; color: var(--primario); text-decoration: underline; }
.boton--fantasma:hover { background: var(--primario-suave); color: var(--primario-oscuro); }
.boton--bloque { width: 100%; }
.boton--pegado { padding-right: 0; padding-left: 0; }
.boton--pegado:hover { background: transparent; }
/* Cuando un botón se repite fila tras fila, se calla: que mande el dato */
.boton--callado {
  background: var(--superficie);
  border-width: 1px;
  border-color: var(--borde-fuerte);
  color: var(--texto);
  font-weight: 500;
}
.boton--callado:hover {
  background: var(--primario-suave);
  border-color: var(--primario);
  color: var(--primario-oscuro);
}
.boton--tablet { min-height: var(--alto-tablet); padding: 16px 28px; font-size: 1.375rem; }
.boton:disabled { opacity: 0.55; cursor: not-allowed; }

/* Formularios */
.formulario { display: flex; flex-direction: column; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.etiqueta { font-weight: 600; }
.campo__ayuda { color: var(--texto-suave); font-size: 0.9375rem; }
.campo__error { color: var(--error-oscuro); font-size: 0.9375rem; font-weight: 600; }

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
input:not([type]),
select,
textarea {
  width: 100%;
  min-height: var(--alto-toque);
  padding: 10px 12px;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-pequeno);
  color: var(--texto);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* En los campos de fecha y hora el foco cae en una parte interna: ahí solo vale :focus */
input:focus-visible, select:focus-visible, textarea:focus-visible,
input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus {
  border-color: var(--primario);
  outline: 0;
  box-shadow: 0 0 0 2px var(--primario);
}
input[type="file"] { width: 100%; min-height: var(--alto-toque); font: inherit; }
input[type="file"]::file-selector-button {
  min-height: var(--alto-toque);
  margin-right: 12px;
  padding: 10px 20px;
  background: var(--superficie);
  border: 2px solid var(--primario);
  border-radius: 10px;
  color: var(--primario);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease;
}
input[type="file"]::file-selector-button:hover { background: var(--primario-suave); color: var(--primario-oscuro); }
/* En el teléfono no cabe al lado: el navegador cortaría el nombre del archivo por la mitad */
@media (max-width: 480px) {
  input[type="file"]::file-selector-button { display: block; margin: 0 0 6px; }
}
textarea { resize: vertical; }

.casilla {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--alto-toque);
  cursor: pointer;
}
.casilla input { width: 24px; height: 24px; accent-color: var(--primario); }

/* Tablas: las anchas tienen scroll propio */
.tabla-scroll {
  position: relative; /* Para que lo absoluto de dentro no se salga del recorte */
  overflow-x: auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
  text-align: left;
  vertical-align: top;
}
.tabla thead th {
  background: var(--superficie);
  border-bottom: 2px solid var(--picon);
  color: var(--texto);
  font-size: 0.875rem;
  white-space: nowrap;
}
.tabla tbody tr { transition: background-color 0.12s ease; }
.tabla tbody tr:hover { background: var(--fondo); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .numero { text-align: right; font-variant-numeric: tabular-nums; }
.tabla tfoot td, .tabla .fila-total td { background: var(--neutro-suave); font-weight: 700; }
/* «TOTAL» llega en mayúsculas, como en el Excel. En pantalla se lee como una palabra más. */
.tabla .fila-total td:first-child { text-transform: lowercase; }
.tabla .fila-total td:first-child::first-letter { text-transform: uppercase; }

/* Personas de prueba: en el móvil cada fila es un bloque, con Entrar siempre a la vista */
.tabla--personas td { vertical-align: middle; }
@media (max-width: 700px) {
  .tabla--personas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla--personas, .tabla--personas tbody { display: block; }
  .tabla--personas tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2px 14px;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--borde);
  }
  .tabla--personas tbody tr:last-child { border-bottom: 0; }
  .tabla--personas td { grid-column: 1 / 3; padding: 0; border-bottom: 0; }
  .tabla--personas td:first-child { font-weight: 600; }
  .tabla--personas td[data-etiqueta] { grid-column: auto; }
  .tabla--personas td[data-etiqueta]::before { color: var(--texto-suave); content: attr(data-etiqueta) " "; }
  .tabla--personas td:last-child { grid-column: 3; grid-row: 1 / span 4; }
}

/* Etiquetas de estado: siempre con texto, nunca solo color */
.estado {
  display: inline-flex;
  align-items: baseline; /* Así su texto va a la altura del texto que tiene al lado */
  gap: 6px;
  padding: 2px 10px 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}
.estado::before {
  flex: none;
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}
.estado--coincide, .estado--validada, .estado--dentro {
  background: var(--correcto-suave);
  border-color: var(--correcto);
  color: var(--correcto-oscuro);
}
.estado--no-coincide, .estado--pendiente, .estado--pausa {
  background: var(--aviso-suave);
  border-color: var(--aviso);
  color: var(--aviso-oscuro);
}
.estado--incompleto, .estado--sin-turno, .estado--explicada, .estado--otro-centro {
  background: var(--info-suave);
  border-color: var(--info);
  color: var(--info-oscuro);
}
.estado--sin-fichaje, .estado--rechazada {
  background: var(--error-suave);
  border-color: var(--error);
  color: var(--error-oscuro);
}
.estado--ausencia, .estado--no-disponible, .estado--cerrada, .estado--fuera {
  background: var(--neutro-suave);
  border-color: var(--borde-fuerte);
  color: var(--texto);
}

.senal {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 1px 8px;
  border: 1px solid var(--acento);
  border-radius: 6px;
  color: var(--acento-oscuro);
  font-size: 0.875rem;
}

/* Mensajes */
.alerta {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: var(--radio-pequeno);
  background: var(--info-suave);
  color: var(--info-oscuro);
}
.alerta--ok { background: var(--correcto-suave); color: var(--correcto-oscuro); }
.alerta--info { background: var(--info-suave); color: var(--info-oscuro); }
.alerta--aviso { background: var(--aviso-suave); color: var(--aviso-oscuro); }
.alerta--error { background: var(--error-suave); color: var(--error-oscuro); }
.pila > .alerta { margin-bottom: 0; } /* En una pila, el hueco lo pone ella */

/* Estados vacíos */
.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 20px;
  background: var(--superficie);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio);
  text-align: center;
}
.vacio__titulo { font-size: 1.125rem; font-weight: 700; }
.vacio__texto { color: var(--texto-suave); max-width: 46ch; }

/* Cifras destacadas */
.cifras {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}
.cifra {
  padding: 14px 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.cifra__valor { display: block; font-size: 1.875rem; font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1.1; }
.cifra__texto { color: var(--texto-suave); font-size: 0.9375rem; }

/* Guía */
.tarea { scroll-margin-top: 56px; }
.tarea__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.tarea__pasos { display: grid; gap: 4px; margin: 0; }
.tarea__pasos dt { margin-top: 8px; font-weight: 700; }
.tarea__pasos dt:first-child { margin-top: 0; }
.tarea__pasos dd { margin: 0; }
.tarea__pasos .datos-prueba { margin-left: 4px; }
.plegable summary { cursor: pointer; font-weight: 600; min-height: var(--alto-toque); padding: 12px 0; }
.plegable[open] summary { margin-bottom: 12px; }
.lista { margin: 0; padding-left: 20px; }

/* Avisos */
.avisos { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.aviso--nuevo { border-color: var(--borde-fuerte); }
.aviso--nuevo .aviso__texto { font-weight: 600; }

/* Puerta de entrada: sobre oscuro, con el logo en blanco */
.cuerpo-oscuro { background: var(--picon); color: var(--sobre-color); }
.cuerpo-oscuro .alerta { margin-bottom: 0; }
.cuerpo-oscuro :focus-visible { outline-color: var(--oro); }
.cuerpo-oscuro input:focus-visible { border-color: var(--oro); box-shadow: 0 0 0 3px var(--oro); }
.puerta { position: relative; gap: 22px; margin-top: 8vh; text-align: center; }
.puerta .formulario, .puerta .alerta { text-align: left; }
/* El vino se pierde sobre el negro: aquí la acción principal va en oro */
.puerta .boton--primario { background: var(--oro); color: var(--picon); }
.puerta .boton--primario:hover { background: var(--superficie); color: var(--picon); }
.puerta__loto {
  position: fixed;
  right: -8vw;
  bottom: -6vh;
  width: min(760px, 90vw);
  max-width: none;
  opacity: 0.08;
  pointer-events: none;
}
.puerta__logo { display: block; width: min(320px, 80%); margin: 0 auto 8px; }
.puerta .etiqueta, .puerta h1 { position: relative; }
.puerta .campo__ayuda { color: var(--picon-texto); }

/* Reloj de pruebas */
.reloj-panel {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 40;
  width: max-content;
  max-width: calc(100vw - 24px - 64px);
  background: var(--picon-capa);
  border: 1px solid var(--picon-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  color: var(--sobre-color);
}
.reloj-panel[open] { z-index: 45; width: min(330px, calc(100vw - 24px)); max-width: none; }
/* Sin barra lateral sube a lo oscuro, junto a quien haya entrado: no tapa nada y se va al bajar */
@media (min-width: 1000px) {
  body:has(.barra__quien) { --sitio-persona: 356px; }
  body:has(> .barra):not(:has(> .barra .pestanas)) .reloj-panel,
  body:has(> .barra):not(:has(> .barra .pestanas)) .reloj-panel[open] {
    position: absolute;
    top: calc(var(--alto-franja) + var(--arriba-reloj, 13px));
    right: calc(var(--margen-barra, var(--espacio)) + var(--sitio-persona, 0px));
    bottom: auto;
    left: auto;
  }
}
.reloj-panel :focus-visible { outline-color: var(--oro); }
.reloj-panel input:focus { border-color: var(--oro); box-shadow: 0 0 0 3px var(--oro); }
.reloj-panel__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 10px;
  min-height: var(--alto-toque);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
}
.reloj-panel__hora { color: var(--oro); font-weight: 700; font-variant-numeric: tabular-nums; }
.reloj-panel__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding: 0 12px 12px;
}
.reloj-panel__nota { color: var(--picon-texto); font-size: 0.9375rem; }
.reloj-panel__fila { display: flex; flex-wrap: wrap; gap: 6px; }
.reloj-panel__fila .boton { flex: 1 1 auto; padding: 8px 6px; font-size: 0.9375rem; }
.reloj-panel__fecha { display: flex; flex-direction: column; gap: 6px; }
.reloj-panel .boton--secundario { background: transparent; border-color: var(--picon-texto); color: var(--sobre-color); }
.reloj-panel .boton--secundario:hover { background: var(--picon); border-color: var(--oro); color: var(--oro); }
.reloj-panel .boton--fantasma { color: var(--oro); }
.reloj-panel .boton--fantasma:hover { background: var(--picon); color: var(--oro); }

/* Ventanas */
.dialogo {
  width: min(480px, calc(100vw - 24px));
  padding: 20px;
  border: 0;
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  color: var(--texto);
}
.dialogo::backdrop { background: var(--velo); }
.dialogo[open] { animation: asomar 0.16s ease-out; }
@keyframes asomar {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Explicación al pasar el cursor. La pinta `iniciarAyudas` en app.js */
.globo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  max-width: min(320px, calc(100vw - 24px));
  padding: 9px 12px;
  background: var(--picon);
  border-radius: var(--radio-pequeno);
  box-shadow: 0 0 0 1px var(--picon-borde), var(--sombra-alta); /* El filo lo separa de la barra oscura */
  color: var(--sobre-color);
  font-family: var(--letra);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.35;
  pointer-events: none;
  text-align: left;
  white-space: normal;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.globo--visible { opacity: 1; }
.globo::after {
  position: absolute;
  left: var(--flecha, 50%);
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: var(--picon);
  content: "";
  transform: rotate(45deg);
}
.globo[data-lado="arriba"]::after { bottom: -4px; }
.globo[data-lado="abajo"]::after { top: -4px; }
.globo[data-lado="dentro"]::after { display: none; }

/* En pantallas táctiles no hay cursor: el botón ? activa el modo ayuda */
.boton-ayuda {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 46;
  width: 52px;
  height: 52px;
  background: var(--picon);
  border: 2px solid var(--oro);
  border-radius: 50%;
  box-shadow: var(--sombra-alta);
  color: var(--oro);
  cursor: pointer;
  font: inherit;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.boton-ayuda[aria-pressed="true"] { background: var(--oro); color: var(--picon); }
/* Que el botón ? no tape el reloj abierto */
@media (hover: none) { .reloj-panel[open] { bottom: 72px; } }
/* Con una ventana abierta va dentro de ella. En el móvil, la ventana le deja sitio bajo sus botones */
@media (max-width: 620px) { .dialogo:has(> .boton-ayuda) { padding-bottom: 76px; } }
.modo-ayuda__aviso {
  position: fixed;
  right: 12px;
  bottom: 76px; /* Por encima del reloj y del botón ?, que también se pueden tocar */
  left: 12px;
  z-index: 46;
  padding: 10px 14px;
  background: var(--picon);
  border-radius: var(--radio-pequeno);
  box-shadow: var(--sombra-alta);
  color: var(--sobre-color);
  font-size: 0.9375rem;
  pointer-events: none; /* El primer toque llega a lo que haya debajo */
}
.modo-ayuda * { cursor: pointer; } /* Sin esto, el iPhone no avisa del toque en lo que no es un botón */

/* Paso de una pantalla a otra: la barra se queda quieta y el contenido cambia */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.14s; }
.barra { view-transition-name: barra; }
.franja-prueba { view-transition-name: franja; }
::view-transition-group(barra), ::view-transition-group(franja) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@media print {
  .franja-prueba, .barra, .reloj-panel, .boton-ayuda, .modo-ayuda__aviso, .globo { display: none; }
  body { background: var(--superficie); }
}

/* Cada frase de la portada para quien la va a usar: con ratón o con el dedo */
@media (hover: none) { [data-solo-cursor] { display: none; } }
@media (hover: hover) { [data-solo-tactil] { display: none; } }