/* Hoja de estilos única.
 *
 * Pensada para el móvil primero: la pantalla que más se usa es la de fichar, y
 * se usa de pie, con una mano, a veces con prisa. De ahí el botón grande. Por
 * eso Fichar (index.html) es la única pantalla que NO lleva el menú lateral
 * del resto — conserva su cabecera simple y su botón grande, solo con los
 * colores y tipografía de aquí abajo. Ver .cabecera-fichar más abajo.
 *
 * Tipografía del sistema a propósito, sin Google Fonts: carga al instante
 * incluso con mala cobertura y no le cuenta a nadie de fuera quién entra.
 *
 * Desde 2026-10-15, mismos tokens y mismo menú lateral que la plataforma
 * (Torre/SaaS de Din Bolig): misma marca, misma persona usando las dos. Los
 * hex de --acento y --marca-rojo son los oficiales que dio el cliente
 * (#1e2b5b / #dc3545), no una estimación — sustituyen a los que había antes. */

:root {
  --fondo: #f4f4f2;
  --superficie: #ffffff;
  --superficie-2: #faf9f7;
  --borde: #e3e1da;
  --borde-fuerte: #cfcbc0;

  --texto: #1d1d1b;
  --texto-2: #5d5a52;
  --texto-3: #8b867c;

  /* Marca oficial de LN DinBolig (Grupo Din Bolig / Lundquist & Nielsen),
   * confirmada por el cliente el 2026-10-15 — misma paleta que la
   * plataforma. --acento es el único acento funcional (botones, enlaces,
   * estado activo del menú); --marca-rojo se reserva al logotipo y al
   * indicador de sección activa del lateral, NUNCA a botones ni texto
   * corrido (se leería como aviso o peligro). */
  --navy-900: #151e40;
  --navy-800: #1e2b5b;
  --navy-700: #324589;
  --navy-600: #6b79ab;
  --navy-100: #eff0f3;
  --marca-rojo: #dc3545;

  --acento: var(--navy-800);
  --acento-fondo: var(--navy-100);
  --acento-oscuro: var(--navy-900);
  --foco: #2f6fd0;

  --bien: #1f6f43;
  --bien-fondo: #e8f3ec;
  --aviso: #8a5a00;
  --aviso-fondo: #fdf3e2;
  --mal: #b3261e;
  --mal-fondo: #fdecea;

  /* Espaciado (escala de 4) y tipografía del menú lateral — nombres iguales
   * a los de la plataforma a propósito, para poder copiar su CSS tal cual. */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --t-xs: 12px;
  --t-sm: 13px;
  --t-base: 15px;

  --radio: 12px;
  --radio-s: 8px;
  --r-sm: 5px;
  --r-pill: 999px;
  --sombra: 0 8px 24px -8px rgba(19, 32, 58, 0.18), 0 2px 6px -2px rgba(19, 32, 58, 0.08);
  --ancho: 1100px;
  --salida: cubic-bezier(0.23, 1, 0.32, 1);

  --lateral: 232px;
  --cabecera: 56px;
}

/* Modo oscuro: SOLO por el botón de la cabecera, nunca por la preferencia del
 * sistema (mismo criterio que la plataforma — ver tema.js). El claro es el
 * valor por defecto siempre. */
:root[data-theme='dark'] {
  --fondo: #16161a;
  --superficie: #1e1e23;
  --superficie-2: #24242b;
  --borde: #32323a;
  --borde-fuerte: #45454f;
  --texto: #f2f1ee;
  --texto-2: #aeaaa2;
  --texto-3: #857f76;

  --navy-100: #1f2b45;
  --acento: #808dbc;
  --acento-fondo: #1f2b45;
  --acento-oscuro: #0e1428;
  --foco: #6fa0e8;

  --bien-fondo: #12281c;
  --aviso-fondo: #2c2008;
  --mal-fondo: #2e1312;
  --sombra: 0 8px 24px -8px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
}

/* --navy-800 no cambia en oscuro a propósito (el lateral se queda siempre
 * navy, ver más abajo), pero eso deja el círculo con la inicial de cada
 * persona con navy sobre navy casi sin contraste — se corrige aparte, sin
 * tocar la variable. */
:root[data-theme='dark'] .usuario__inicial { color: #fff; }

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  /* Respeta la zona segura del iPhone: la barra inferior se come el botón. */
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3 { margin: 0 0 12px; line-height: 1.25; font-weight: 600; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 12px; }
a { color: var(--acento); }

/* Un solo anillo de foco, visible de verdad, y solo con teclado. */
:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Cabecera simple de Fichar (solo index.html) --------------------------- */

.cabecera-fichar {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 20;
}

.cabecera-interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.marca-fichar {
  font-weight: 600;
  font-size: 15px;
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
}
.marca-fichar span { color: var(--acento); }

.menu { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }

.menu a {
  padding: 6px 10px;
  border-radius: var(--radio-s);
  color: var(--texto-2);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}
.menu a:hover { background: var(--superficie-2); color: var(--texto); }
.menu a[aria-current='page'] { background: var(--acento-fondo); color: var(--acento-oscuro); font-weight: 500; }

.menu-separador {
  width: 1px;
  background: var(--borde);
  margin: 4px 6px;
  align-self: stretch;
}

.yo { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--texto-3); }

/* --- Menú lateral (resto de pantallas, no Fichar) -------------------------- */

.app {
  display: grid;
  grid-template-columns: var(--lateral) 1fr;
  min-height: 100vh;
  transition: grid-template-columns 200ms var(--salida);
}

/* menu.js ya habrá puesto este atributo antes de la primera pintura si
 * estaba guardado, igual que con el tema. */
:root[data-menu='colapsado'] {
  --lateral: 68px;
}

/* El lateral es la única pieza con un color de marca fijo (navy sólido,
 * letras blancas, acento rojo en lo activo), igual en claro y en oscuro: es
 * la "chapa" de la marca, no contenido que deba seguir el tema. */
.lateral {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  padding: var(--e4) var(--e3);
  background: var(--navy-800);
  border-right: 1px solid var(--navy-900);
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: 0 var(--e2);
  min-height: 32px;
}

/* Versión blanca del logotipo: el lateral tiene fondo navy fijo, así que es
 * la que corresponde aquí. La de color (/marca/logo.png) se queda para
 * login.html, que tiene fondo blanco. */
.marca__logo { width: 168px; height: auto; }

/* El icono suelto (sin letras) solo se ve con el menú minimizado. */
.marca__icono { display: none; width: 28px; height: 28px; }

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav__grupo {
  padding: var(--e3) var(--e2) 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(255 255 255 / 45%);
}

.nav__enlace {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: 7px var(--e2);
  border-radius: var(--r-sm);
  color: rgb(255 255 255 / 85%);
  text-decoration: none;
  font-size: var(--t-sm);
  border-left: 3px solid transparent;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.nav__enlace[aria-current='page'] {
  background: rgb(255 255 255 / 10%);
  border-left-color: var(--marca-rojo);
  color: #fff;
  font-weight: 600;
}

.nav__icono { width: 16px; height: 16px; flex: none; }

@media (hover: hover) and (pointer: fine) {
  .nav__enlace:not([aria-current='page']):hover {
    background: rgb(255 255 255 / 8%);
    color: #fff;
  }
}

/* Botón para minimizar/expandir, pegado al logotipo arriba del todo. Sin
 * texto visible nunca, solo icono + aria-label que cambia con el estado. */
.lateral__colapsar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  margin-left: auto;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: var(--r-sm);
  background: transparent;
  color: rgb(255 255 255 / 70%);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--salida);
}
.lateral__colapsar:active { transform: scale(0.9); }

.lateral__colapsar-icono { width: 12px; height: 12px; transition: transform 200ms var(--salida); }

/* La flecha apunta hacia donde "se va" el menú. */
:root[data-menu='colapsado'] .lateral__colapsar-icono { transform: rotate(180deg); }

@media (hover: hover) and (pointer: fine) {
  .lateral__colapsar:hover { background: rgb(255 255 255 / 8%); color: #fff; }
}

/* Menú minimizado: a 68px no cabe el icono y el botón uno al lado del otro,
 * se apilan en vertical. */
:root[data-menu='colapsado'] .marca { flex-direction: column; gap: var(--e2); padding: 0; }
:root[data-menu='colapsado'] .marca__logo { display: none; }
:root[data-menu='colapsado'] .marca__icono { display: block; }
:root[data-menu='colapsado'] .lateral__colapsar { margin-left: 0; }
:root[data-menu='colapsado'] .nav__enlace { justify-content: center; }

/* Texto de cada enlace oculto solo VISUALMENTE al minimizar (nunca
 * display:none, para que el enlace conserve su nombre accesible). */
:root[data-menu='colapsado'] .nav__texto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
:root[data-menu='colapsado'] .nav__grupo { display: none; }

.principal { display: flex; flex-direction: column; min-width: 0; }

.cabecera {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: var(--cabecera);
  padding: 0 var(--e5);
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

.cabecera__derecha { display: flex; align-items: center; gap: var(--e3); margin-left: auto; }

.usuario { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-sm); }

.usuario__inicial {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy-100);
  color: var(--navy-800);
  font-size: var(--t-xs);
  font-weight: 600;
}

.usuario__rol { color: var(--texto-3); }

/* Botón de tema: los dos iconos (sol y luna) viven siempre en el DOM; cuál se
 * ve lo decide [data-theme] en :root, no JS añadiendo/quitando SVG — así no
 * hay parpadeo al cambiar. */
.boton-tema {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  background: var(--superficie);
  color: var(--texto-2);
  cursor: pointer;
  transition: transform 160ms var(--salida), background-color 160ms ease, border-color 160ms ease;
}
.boton-tema:active { transform: scale(0.94); }
.boton-tema__icono { width: 16px; height: 16px; }
.boton-tema__icono--luna { display: none; }
:root[data-theme='dark'] .boton-tema__icono--sol { display: none; }
:root[data-theme='dark'] .boton-tema__icono--luna { display: block; }

@media (hover: hover) and (pointer: fine) {
  .boton-tema:hover { background: var(--superficie-2); border-color: var(--borde-fuerte); }
}

.contenido {
  flex: 1;
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e5);
  max-width: 1120px;
}

/* En móvil el lateral pasa arriba en horizontal: con pocas entradas no hace
 * falta un cajón deslizante. */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }

  .lateral {
    flex-direction: row;
    align-items: center;
    gap: var(--e3);
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--navy-900);
    padding: var(--e2) var(--e3);
  }

  .nav { flex-direction: row; gap: var(--e1); }
  .nav__grupo { display: none; }
  .marca__logo { width: 104px; flex: none; }
  .lateral__colapsar { display: none; }
  .contenido, .cabecera { padding: var(--e4); }
}

/* --- Estructura ----------------------------------------------------------- */

main:not(.contenido) { max-width: var(--ancho); margin: 0 auto; padding: 20px 16px 48px; }

.titulo-pagina { margin-bottom: 20px; }
.titulo-pagina p { color: var(--texto-2); margin: 0; font-size: 14px; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
  box-shadow: var(--sombra);
  margin-bottom: 16px;
}
.tarjeta > h2:first-child, .tarjeta > h3:first-child { margin-top: 0; }

.rejilla { display: grid; gap: 14px; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }

/* --- Cifras --------------------------------------------------------------- */

.cifra {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
}
.cifra .valor { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cifra .etiqueta { font-size: 12px; color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.04em; }

/* --- Pantalla de fichar --------------------------------------------------- */

.fichar { max-width: 460px; margin: 0 auto; }

.estado-actual {
  text-align: center;
  padding: 22px 18px;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--superficie);
  margin-bottom: 16px;
}
.estado-actual.dentro { background: var(--bien-fondo); border-color: #bcdcc6; }
.estado-actual.pausa { background: var(--aviso-fondo); border-color: #ecd9a7; }

.estado-actual .rotulo { font-size: 13px; color: var(--texto-2); text-transform: uppercase; letter-spacing: 0.05em; }
.estado-actual .reloj {
  font-size: 40px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin: 6px 0 2px;
}
.estado-actual .detalle { font-size: 13px; color: var(--texto-2); }

.botones-fichaje { display: grid; gap: 10px; }

.boton-grande {
  display: block;
  width: 100%;
  padding: 20px;
  font-size: 18px;
  font-weight: 600;
  border: 0;
  border-radius: var(--radio);
  background: var(--acento);
  color: #fff;
  cursor: pointer;
  /* Apple pide 44px mínimo de alto táctil; aquí vamos muy por encima. */
  min-height: 60px;
  transition: transform 160ms var(--salida), background-color 160ms ease;
}
.boton-grande:active:not(:disabled) { transform: scale(0.98); }
.boton-grande:hover { background: var(--acento-oscuro); }
.boton-grande:disabled { background: var(--borde-fuerte); cursor: not-allowed; }
.boton-grande.secundario { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde-fuerte); }
.boton-grande.secundario:hover { background: var(--superficie-2); }
.boton-grande.salir { background: var(--mal); }
.boton-grande.salir:hover { filter: brightness(0.9); }

/* --- Formularios ---------------------------------------------------------- */

label { display: block; font-size: 13px; color: var(--texto-2); margin-bottom: 4px; font-weight: 500; }

input, select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  /* 16px evita que Safari haga zoom al enfocar un campo en el móvil. */
  font-size: 16px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
  border-color: var(--acento);
}
textarea { min-height: 80px; resize: vertical; }

.campo { margin-bottom: 14px; }
.campo .ayuda { font-size: 12px; color: var(--texto-3); margin-top: 4px; }

.casilla { display: flex; align-items: center; gap: 8px; }
.casilla input { width: auto; }
.casilla label { margin: 0; }
.alinear-abajo { align-self: end; }
.ancho-cambio { max-width: 360px; }

button {
  padding: 9px 16px;
  border-radius: var(--radio-s);
  border: 1px solid var(--acento);
  background: var(--acento);
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: transform 160ms var(--salida), background-color 160ms ease, border-color 160ms ease;
}
button:active:not(:disabled) { transform: scale(0.97); }
button:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.suave { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); }
button.suave:hover { background: var(--superficie-2); }
button.peligro { background: var(--mal); border-color: var(--mal); }
button.peligro:hover { filter: brightness(0.9); }
button.mini { padding: 4px 9px; font-size: 13px; }
button.acento-activo { background: var(--acento); color: #fff; border-color: var(--acento); }

/* --- Tablas --------------------------------------------------------------- */

.tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-3);
  font-weight: 600;
  white-space: nowrap;
  background: var(--superficie-2);
  position: sticky;
  top: 0;
}
tbody tr:hover { background: var(--superficie-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.anulado { color: var(--texto-3); text-decoration: line-through; }
tfoot td { font-weight: 600; border-top: 2px solid var(--borde-fuerte); border-bottom: 0; }

/* --- Etiquetas de estado -------------------------------------------------- */

.etiqueta {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.etiqueta.bien { background: var(--bien-fondo); color: var(--bien); }
.etiqueta.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.etiqueta.mal { background: var(--mal-fondo); color: var(--mal); }
.etiqueta.neutra { background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borde); }
.etiqueta.acento { background: var(--acento-fondo); color: var(--acento-oscuro); }

/* --- Avisos --------------------------------------------------------------- */

.nota {
  border-radius: var(--radio-s);
  padding: 11px 13px;
  font-size: 14px;
  margin-bottom: 14px;
  border: 1px solid transparent;
}
.nota.info { background: var(--acento-fondo); border-color: #b9ddd7; color: var(--acento-oscuro); }
.nota.aviso { background: var(--aviso-fondo); border-color: #ecd9a7; color: var(--aviso); }
.nota.mal { background: var(--mal-fondo); border-color: #eec4bd; color: var(--mal); }
.nota.bien { background: var(--bien-fondo); border-color: #bcdcc6; color: var(--bien); }
.nota ul { margin: 6px 0 0; padding-left: 20px; }
.nota[hidden] { display: none; }

.vacio { text-align: center; padding: 32px 16px; color: var(--texto-3); font-size: 14px; }

/* --- Modal ---------------------------------------------------------------- */

.telon {
  position: fixed;
  inset: 0;
  background: rgba(29, 28, 25, 0.45);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 16px;
  z-index: 50;
  overflow-y: auto;
}
.telon.visible { display: flex; }

.modal {
  background: var(--superficie);
  border-radius: var(--radio);
  padding: 20px;
  width: 100%;
  max-width: 520px;
  margin: auto;
  box-shadow: 0 10px 40px rgba(29, 28, 25, 0.2);
}
.modal-acciones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }

/* --- Login ---------------------------------------------------------------- */

.login-caja { max-width: 380px; margin: 8vh auto 0; padding: 0 16px; }
.login-marca { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; margin-bottom: 20px; }
.login-logo { width: 220px; height: auto; margin-bottom: 8px; }
.login-caja .tarjeta { padding: 26px; }
.login-caja h1 { font-size: 20px; margin-bottom: 4px; }
.login-caja .lema { color: var(--texto-2); font-size: 14px; margin-bottom: 22px; }
.login-legal { font-size: 12px; color: var(--texto-3); margin-top: 18px; line-height: 1.5; }

/* --- Utilidades ----------------------------------------------------------- */

.silencio { color: var(--texto-3); }
.pequeno { font-size: 13px; }
.derecha { text-align: right; }
.sin-margen { margin: 0; }
.espacio { margin-top: 18px; }
.espacio-chico { margin-top: 10px; }
.espacio-abajo { margin-bottom: 16px; }
.fila-separada { justify-content: space-between; }
.ancho-corto { max-width: 260px; }
.separador { border: none; border-top: 1px solid var(--borde); margin: 14px 0; }
.modal.ancho { max-width: 720px; }

code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 15px;
}

/* Fila de un tramo de horario: día + hora inicio + hora fin + quitar. */
.tramo { align-items: center; margin-bottom: 8px; }
.tramo select, .tramo input[type='time'] { max-width: 130px; }

[hidden] { display: none !important; }

@media (max-width: 640px) {
  .cabecera-interior { padding: 8px 12px; gap: 8px; }
  .menu { order: 3; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .menu-separador { display: none; }
  main:not(.contenido) { padding: 16px 12px 40px; }
  .tarjeta { padding: 14px; }
  h1 { font-size: 19px; }
}

/* Menos movimiento, no cero: se mantienen opacidad y color, se quita el
 * desplazamiento. */
@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;
  }
}