/* ==========================================================================
   Arlance · estilos base
   Son exactamente los del prototipo. Todo lo demás va en estilos en línea,
   igual que en el diseño original, para no desviarse ni un píxel.
   ========================================================================== */

html, body { margin: 0; padding: 0; background: #f7f5f3; }

body {
  /*
   * Century Gothic es de Monotype y llega con Office, así que en los equipos de
   * la oficina se ve la de verdad. Fuera de Windows no existe, y ahí entra
   * Mulish: es la geométrica libre que más se le parece y trae los cuatro pesos
   * que usa el portal (400/500/600/700), cosa que no hacen Questrial ni Didact
   * Gothic, que solo tienen la redonda y obligarían al navegador a falsear las
   * negritas.
   */
  font-family: 'Century Gothic', 'Mulish', system-ui, sans-serif;
  color: #221f1d;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

a { color: #2f5bd0; text-decoration: none; }
a:hover { color: #22459c; text-decoration: underline; }

input, button, select, textarea { font: inherit; color: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #dcd7d1; border-radius: 8px; border: 3px solid #f7f5f3; }

/* Añadidos mínimos que el prototipo no necesitaba por ser estático. */

:focus-visible { outline: 2px solid #1f4f9c; outline-offset: 2px; }

/* Marcador de carga mientras llegan los datos. */
.sk {
  background: linear-gradient(90deg, #f4f2ef 25%, #eeeae5 50%, #f4f2ef 75%);
  background-size: 200% 100%;
  animation: sk 1.2s infinite linear;
  border-radius: 12px;
}
@keyframes sk { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Avisos: abajo en el centro y por encima de todo, se esté donde se esté de la página. */
.toast-host {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 24px;
  z-index: 80;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/*
 * Barra superior: el menú no se encoge, así que cuando falta sitio se va
 * quitando lo prescindible, por este orden. Con todos los menús del
 * administrador, el menú ocupa unos 1000 px.
 */
@media (max-width: 1640px) {
  [data-topbar] [data-topbar-date] { display: none; }
}
@media (max-width: 1400px) {
  [data-topbar] [data-account-name] { display: none; }
}
@media (max-width: 1300px) {
  [data-topbar] [data-nav-icon],
  [data-topbar] [data-search-shortcut] { display: none; }
}

/* ==========================================================================
   Móvil
   app.js marca <html data-device="mobile"> por debajo de 860 px de ancho y
   pinta otro marco: barra superior, menú deslizante y barra inferior. Aquí se
   adaptan las pantallas. Como llevan los estilos en línea (igual que el
   prototipo), las reglas usan !important y buscan los patrones de rejilla que
   usan las propias pantallas.
   ========================================================================== */

/* Contenido: menos margen a los lados y hueco para la barra inferior. */
html[data-device="mobile"] [data-content] {
  padding: 16px 14px calc(96px + env(safe-area-inset-bottom)) !important;
}

html[data-device="mobile"] [data-tabs] {
  gap: 18px !important;
  padding: 12px 14px 0 !important;
  margin-top: 0 !important;
  background: #fff;
  scrollbar-width: none;
}

html[data-device="mobile"] .toast-host {
  bottom: calc(84px + env(safe-area-inset-bottom));
}

/* Pantallas de dos columnas (Inicio, Ausencias, Perfil, Espacios, acceso): una debajo de otra. */
html[data-device="mobile"] [style*="grid-template-columns:minmax(0,1fr) 330px"],
html[data-device="mobile"] [style*="grid-template-columns:minmax(0,1fr) 300px"],
html[data-device="mobile"] [style*="grid-template-columns:340px minmax(0,1fr)"],
html[data-device="mobile"] [style*="grid-template-columns:300px minmax(0,1fr)"],
html[data-device="mobile"] [style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"] {
  grid-template-columns: minmax(0, 1fr) !important;
}

/*
 * Tablas (Organización, Tickets, Control horario, Horario, Roles, Firmas...):
 * todas empiezan por una primera columna minmax(2xxpx, ...). Mantienen su
 * ancho y la tabla se desliza de lado dentro de su tarjeta.
 */
html[data-device="mobile"] [data-content] [style*="grid-template-columns:minmax(2"] {
  min-width: 760px;
}
html[data-device="mobile"] [data-content] [style*="grid-template-columns:200px repeat(7"] {
  min-width: 1040px;
}
html[data-device="mobile"] [data-content] div:has(> [style*="grid-template-columns:minmax(2"]),
html[data-device="mobile"] [data-content] div:has(> [style*="grid-template-columns:200px repeat(7"]) {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Buscadores y filtros con ancho mínimo de escritorio: que encojan. */
html[data-device="mobile"] [data-content] [style*="min-width:220px"],
html[data-device="mobile"] [data-content] [style*="min-width:260px"] {
  min-width: 0 !important;
}

/* Ventanas: casi todo el ancho, y las filas de campos bajan de línea si no caben. */
html[data-device="mobile"] #modal-host > [style*="rgba(28,24,20,.42)"] {
  padding: 12px !important;
}
html[data-device="mobile"] #modal-host [role="dialog"] {
  max-width: 100% !important;
}
html[data-device="mobile"] #modal-host [role="dialog"] [style*="display:flex;gap:12px"] {
  flex-wrap: wrap;
}

/* Calendario: siete columnas en unos 340 px, así que todo más compacto. */
html[data-device="mobile"] [data-week] [data-day] {
  padding: 6px 3px !important;
}
html[data-device="mobile"] [data-week] [data-day] > div:first-child {
  overflow: hidden;
}
html[data-device="mobile"] [data-week] [data-day] > div:first-child > span:first-child {
  font-size: 12px !important;
}
html[data-device="mobile"] [data-week] [data-absence-bar],
html[data-device="mobile"] [data-week] [data-event-chip],
html[data-device="mobile"] [data-week] [data-birthday-chip] {
  font-size: 10.5px !important;
  padding-left: 3px !important;
  padding-right: 3px !important;
}