/**
 * Componentes de la interfaz.
 *
 * Tailwind entra por CDN y no hay paso de compilación, así que `@apply` no está
 * disponible: lo que se repite se escribe aquí como CSS plano y las vistas usan
 * utilidades sólo para el layout. Así una cadena de veinte clases no se copia
 * en diez plantillas.
 */

:root {
  --primary: #002045;
  --primary-container: #1a365d;
  --on-primary: #ffffff;
  --surface: #f8f9ff;
  --surface-lowest: #ffffff;
  --surface-low: #eff4ff;
  --surface-container: #e5eeff;
  --outline-variant: #c4c6cf;
  --on-surface: #0d1c2e;
  --on-surface-variant: #43474e;
  --error: #ba1a1a;
  --error-container: #ffdad6;
  --exito: #2f855a;
  --exito-bg: #c6f6d5;
  --aviso: #d69e2e;
  --aviso-bg: #fefcbf;
  --aviso-borde: #ecc94b;
  --aviso-texto: #744210;
  --celda-alto: 34px;
  --celda-ancho: 34px;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background-color: #f7fafc;
  color: var(--on-surface);
  -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
.material-symbols-outlined.relleno { font-variation-settings: 'FILL' 1; }

/* ---------------------------------------------------------------- Tarjetas */

.tarjeta {
  background: var(--surface-lowest);
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
}
.tarjeta-cabecera {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--outline-variant);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}
.tarjeta-cuerpo { padding: 0.875rem; }
.tarjeta-cuerpo-plano { padding: 0; }

.kpi { border-left: 4px solid transparent; }
.kpi-error { border-left-color: var(--error); }
.kpi-exito { border-left-color: var(--exito); }
.kpi-aviso { border-left-color: var(--aviso); }
.kpi-neutro { border-left-color: var(--primary-container); }

/* ---------------------------------------------------------------- Etiquetas */

.etiqueta-caps {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.05em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.dato {
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.numerico { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Botones */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 32px;
  padding: 0 0.75rem;
  border-radius: 0.25rem;
  border: 1px solid var(--outline-variant);
  background: var(--surface-lowest);
  color: var(--on-surface);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--surface-container); }
.btn .material-symbols-outlined { font-size: 17px; }

.btn-primario {
  background: var(--primary-container);
  border-color: var(--primary-container);
  color: #fff;
}
.btn-primario:hover { background: var(--primary); border-color: var(--primary); }

.btn-exito { background: var(--exito); border-color: var(--exito); color: #fff; }
.btn-exito:hover { background: #276749; border-color: #276749; }

.btn-peligro { color: var(--error); border-color: #f3c0c0; }
.btn-peligro:hover { background: var(--error-container); }

.btn-mini { height: 24px; padding: 0 0.5rem; font-size: 11px; }
.btn-icono { width: 28px; height: 28px; padding: 0; }

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

.campo {
  height: 32px;
  width: 100%;
  padding: 0 0.5rem;
  border: 1px solid var(--outline-variant);
  border-radius: 0.25rem;
  background: var(--surface-lowest);
  font-size: 13px;
  color: var(--on-surface);
}
.campo:focus { outline: none; border-color: var(--primary-container); box-shadow: 0 0 0 1px var(--primary-container); }
textarea.campo { height: auto; padding: 0.375rem 0.5rem; line-height: 1.4; }
.campo-mini { height: 26px; font-size: 12px; }
.etiqueta-campo { display: block; margin-bottom: 2px; }

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

.tabla { width: 100%; border-collapse: collapse; text-align: left; }
.tabla thead th {
  background: #f8fafc;
  color: #4a5568;
  border-bottom: 1px solid var(--outline-variant);
  padding: 6px 8px;
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
.tabla tbody td {
  border-bottom: 1px solid #e2e8f0;
  padding: 4px 8px;
  height: var(--celda-alto);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.tabla tbody tr:hover { background: var(--surface-low); }
.tabla tbody tr.sin-hover:hover { background: transparent; }
.tabla .num { text-align: right; }
.tabla .cen { text-align: center; }

.fila-aviso { background: rgba(254, 252, 191, .45); }
.fila-aviso:hover { background: rgba(254, 252, 191, .7) !important; }

/* -------------------------------------------------- Grilla quincenal densa */

.grilla { width: 100%; border-collapse: collapse; }
.grilla th,
.grilla td {
  border: 1px solid #e2e8f0;
  padding: 0;
  height: var(--celda-alto);
  text-align: center;
  vertical-align: middle;
}
.grilla th {
  background: #f8fafc;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #4a5568;
}
.grilla .col-nombre {
  text-align: left;
  padding-left: 8px;
  min-width: 190px;
  white-space: nowrap;
}
.grilla .col-dia { width: var(--celda-ancho); min-width: var(--celda-ancho); }
.grilla .col-horas { width: 52px; }
.grilla .col-firma { width: 92px; }

.grilla .dia-domingo { background: #eef1f5; }
.grilla .dia-festivo { background: #fff3cd; }

.fila-grupo td {
  background: #edf2f7;
  text-align: left;
  padding: 3px 10px;
  height: 26px;
  border-color: #cbd5e0;
}

/* Celda de turno: el color codifica el tipo, la letra lo confirma */
.celda {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.celda-M  { background: #e6fffa; color: #234e52; }
.celda-T  { background: #ebf8ff; color: #2a4365; }
.celda-N  { background: #faf5ff; color: #44337a; }
.celda-MT { background: #fffff0; color: #744210; }
.celda-D  { background: #f7fafc; color: #a0aec0; font-weight: 400; }
.celda-nov { background: #fffaf0; color: #c05621; font-weight: 700; }
.celda-vacia { background: transparent; }

.grilla td.editable { cursor: pointer; }
.grilla td.editable:hover { outline: 2px solid var(--primary-container); outline-offset: -2px; }

/* ---------------------------------------------------------------- Insignias */

.insignia {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 0.25rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.insignia-neutra { background: #edf2f7; color: #4a5568; }
.insignia-exito { background: var(--exito-bg); color: var(--exito); }
.insignia-error { background: var(--error-container); color: #93000a; }
.insignia-aviso { background: var(--aviso-bg); color: var(--aviso-texto); }
.insignia-info { background: #d6e0f6; color: #2d476f; }
.insignia-oscura { background: #2d3748; color: #fff; }

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

.aviso {
  border-left: 5px solid;
  border-radius: 0 0.25rem 0.25rem 0;
  padding: 0.75rem 0.875rem;
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}
.aviso-amarillo { background: var(--aviso-bg); border-color: var(--aviso-borde); color: var(--aviso-texto); }
.aviso-rojo { background: #fff5f5; border-color: var(--error); color: #742a2a; }
.aviso-verde { background: #f0fff4; border-color: var(--exito); color: #22543d; }
.aviso-azul { background: var(--surface-low); border-color: var(--primary-container); color: #1a365d; }

/* ---------------------------------------------------------------- Hallazgos */

.hallazgo {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid #edf2f7;
  border-left: 4px solid transparent;
  font-size: 13px;
}
.hallazgo:last-child { border-bottom: 0; }
.hallazgo-ALTA { border-left-color: var(--error); }
.hallazgo-MEDIA { border-left-color: var(--aviso); }
.hallazgo-BAJA { border-left-color: #a0aec0; }
.hallazgo .material-symbols-outlined { font-size: 17px; margin-top: 1px; }
.hallazgo-ALTA .material-symbols-outlined { color: var(--error); }
.hallazgo-MEDIA .material-symbols-outlined { color: var(--aviso); }
.hallazgo-BAJA .material-symbols-outlined { color: #a0aec0; }

/* ---------------------------------------------------------------- Detalles */

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chevron { transform: rotate(90deg); }
.chevron { transition: transform .15s ease; }

/* ---------------------------------------------------------------- Barras */

.barra { width: 100%; height: 8px; background: var(--surface-container); border-radius: 999px; overflow: hidden; }
.barra > span { display: block; height: 100%; border-radius: 999px; background: var(--primary-container); }
.barra > span.excedido { background: var(--error); }

/* ---------------------------------------------------------------- Navegación */

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  font-size: 14px;
  color: #bdc7dc;
  text-decoration: none;
  border-left: 4px solid transparent;
  transition: background-color .15s ease, color .15s ease;
}
.nav-item:hover { background: rgba(26, 54, 93, .55); color: #fff; }
.nav-item.activo {
  background: var(--primary-container);
  color: #fff;
  border-left-color: #fff;
  font-weight: 600;
}
.nav-grupo {
  padding: 14px 16px 4px;
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #7f92b8;
  font-weight: 700;
}

/* ---------------------------------------------------------------- Vacío */

.vacio {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--on-surface-variant);
  font-size: 13px;
}
.vacio .material-symbols-outlined { font-size: 32px; color: #cbd5e0; display: block; margin: 0 auto .5rem; }

/* ---------------------------------------------------------------- Impresión */

@media print {
  .sidebar, .topbar, .no-imprimir { display: none !important; }
  .contenido { margin-left: 0 !important; }
  .tarjeta { border-color: #999; break-inside: avoid; }
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a0aec0; }

/* ============================================================ Responsive */
/*
 * El menú lateral es fijo de 240 px. Por debajo de 1024 px eso se come la
 * pantalla, así que se convierte en cajón: sale por encima del contenido y
 * se cierra al elegir una sección, al tocar fuera o con Escape.
 *
 * El desplazamiento del contenido lo hace Tailwind con `lg:ml-[240px]`, no
 * este archivo: así no hay que pelear especificidad contra las utilidades.
 */

.velo {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 28, 46, .5);
  z-index: 45;
}

.boton-menu { display: none; }

@media (max-width: 1023px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 2px 0 12px rgba(0, 0, 0, .18);
  }
  body.menu-abierto .sidebar { transform: translateX(0); }
  body.menu-abierto .velo { display: block; }
  body.menu-abierto { overflow: hidden; }

  .boton-menu { display: inline-flex; }
}

/* --------------------------------------------- Tablas en pantalla pequeña */

/* Todo lo que scrollea en horizontal lo hace dentro de su tarjeta, nunca la
   página entera: una página que se mueve de lado es imposible de usar. */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* En la grilla quincenal el nombre se queda fijo al desplazar de lado; sin
   esto no se sabe de quién es la fila que se está mirando. */
.grilla th.col-nombre,
.grilla td.col-nombre {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
}
.grilla th.col-nombre { z-index: 3; background: #f8fafc; }
.grilla .fila-grupo td { position: sticky; left: 0; z-index: 1; }

@media (max-width: 640px) {
  .grilla .col-nombre { min-width: 140px; }
  .grilla th.col-nombre,
  .grilla td.col-nombre { box-shadow: 2px 0 4px rgba(0, 0, 0, .06); }

  /* Deja respirar el contenido: en móvil el margen ancho no aporta nada. */
  .tarjeta-cuerpo { padding: 0.75rem; }
  .tarjeta-cabecera { padding: 0.5rem 0.75rem; flex-wrap: wrap; }
}

/* Los botones de acción de la cabecera se reparten en filas en vez de
   desbordarse fuera de la pantalla. */
@media (max-width: 640px) {
  .btn { height: 34px; }        /* objetivo táctil más cómodo */
  .campo { height: 36px; font-size: 14px; }  /* 16px evitaría el zoom de iOS */
  .btn-mini { height: 28px; }
}