/* ════════════════════════════════════════════════════════════
   Dashboard de Asistencias IED — style.css
   ════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties (Design Tokens) ── */
:root {
  /* Paleta institucional */
  --color-primario      : #00568D;   /* azul oscuro */
  --color-secundario    : #00ADE7;   /* azul claro */
  --color-amarillo      : #FFDC2A;   /* amarillo acento */
  --color-complementario: #8EC6E3;   /* azul suave */

  /* Semánticos (mantener compatibilidad con componentes existentes) */
  --color-acento        : #27ae60;
  --color-alerta        : #e74c3c;
  --color-advertencia   : #f39c12;
  --color-fondo         : #F4F8FB;
  --color-blanco        : #FFFFFF;
  --color-texto         : #1A2E42;
  --color-texto-suave   : #5A7A96;
  --color-borde         : #D6EAF5;

  /* Fondos */
  --fondo-body          : #F4F8FB;
  --fondo-tarjeta       : #FFFFFF;
  --borde-suave         : #D6EAF5;
  --texto-principal     : #1A2E42;
  --texto-secundario    : #5A7A96;

  --sombra              : 0 2px 10px rgba(0, 0, 0, 0.08);
  --sombra-hover        : 0 6px 20px rgba(0, 0, 0, 0.14);
  --sombra-btn          : 0 4px 14px rgba(0, 86, 141, 0.35);

  --radio               : 12px;
  --radio-sm            : 6px;
  --radio-lg            : 16px;

  --transicion          : all 0.25s ease;
  --font-base           : 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Reset & Base ──────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin    : 0;
  padding   : 0;
}

html {
  font-size  : 16px;
  scroll-behavior: smooth;
}

body {
  font-family     : var(--font-base);
  background-color: var(--color-fondo);
  color           : var(--color-texto);
  line-height     : 1.6;
  min-height      : 100vh;
}

img,
svg {
  display        : block;
  max-width      : 100%;
}

button {
  font-family: inherit;
  cursor     : pointer;
}

/* ── Utility ───────────────────────────────── */
.hidden {
  display: none !important;
}

/* ── Loading Overlay ───────────────────────── */
#loading {
  position        : fixed;
  inset           : 0;
  z-index         : 9999;
  background-color: rgba(245, 247, 250, 0.92);
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  gap             : 1rem;
  backdrop-filter : blur(3px);
  transition      : opacity 0.3s ease;
}

#loading.hidden {
  display: none;
}

.loading-text {
  color      : var(--color-primario);
  font-weight: 500;
  font-size  : 1rem;
}

/* Spinner */
.spinner {
  width        : 52px;
  height       : 52px;
  border       : 5px solid var(--color-borde);
  border-top   : 5px solid var(--color-secundario);
  border-radius: 50%;
  animation    : girar 0.85s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* ── Error Container ───────────────────────── */
#error-container {
  margin  : 1.5rem;
  position: relative;
}

.error-message {
  display         : flex;
  align-items     : flex-start;
  gap             : 1rem;
  background-color: #fff5f5;
  border          : 1px solid #fed7d7;
  border-left     : 4px solid var(--color-alerta);
  border-radius   : var(--radio);
  padding         : 1.25rem 1.5rem;
  color           : #742a2a;
}

.error-icon {
  font-size  : 1.5rem;
  flex-shrink: 0;
}

.error-message strong {
  display     : block;
  margin-bottom: 0.25rem;
  font-size   : 1rem;
}

.error-message p {
  font-size: 0.875rem;
  color    : #9b2c2c;
}

.btn-reintentar {
  margin-left     : auto;
  flex-shrink     : 0;
  background-color: var(--color-alerta);
  color           : var(--color-blanco);
  border          : none;
  border-radius   : var(--radio-sm);
  padding         : 0.5rem 1rem;
  font-size       : 0.875rem;
  font-weight     : 600;
  transition      : var(--transicion);
  align-self      : center;
}

.btn-reintentar:hover {
  background-color: #c0392b;
  transform       : translateY(-1px);
  box-shadow      : 0 3px 10px rgba(231, 76, 60, 0.40);
}

/* ── HEADER ────────────────────────────────── */
.header {
  background    : #00568D;
  color         : var(--color-blanco);
  padding       : 1.25rem 2rem;
  display       : flex;
  align-items   : center;
  justify-content: space-between;
  flex-wrap     : wrap;
  gap           : 1rem;
  position      : sticky;
  top           : 0;
  z-index       : 100;
  box-shadow    : 0 2px 16px rgba(26, 58, 92, 0.30);
}

.header-left {
  display    : flex;
  align-items: center;
  gap        : 0.875rem;
}

.header-icon {
  height     : 52px;
  width      : auto;
  max-width  : 220px;
  flex-shrink: 0;
}

.header h1 {
  font-size  : 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.header-subtitle {
  font-size  : 0.825rem;
  opacity    : 0.80;
  margin-top : 0.15rem;
}

.header-right {
  display    : flex;
  align-items: center;
  gap        : 1rem;
  flex-wrap  : wrap;
}

.last-update {
  font-size  : 0.8rem;
  opacity    : 0.80;
  white-space: nowrap;
}

.btn-actualizar {
  background-color: rgba(255, 255, 255, 0.18);
  color           : var(--color-blanco);
  border          : 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius   : var(--radio-sm);
  padding         : 0.45rem 1rem;
  font-size       : 0.875rem;
  font-weight     : 600;
  display         : flex;
  align-items     : center;
  gap             : 0.4rem;
  transition      : var(--transicion);
  white-space     : nowrap;
}

.btn-actualizar:hover {
  background-color: rgba(255, 255, 255, 0.30);
  border-color    : rgba(255, 255, 255, 0.70);
  transform       : translateY(-1px);
}

.btn-actualizar .btn-icon {
  display   : inline-block;
  font-size : 1rem;
  transition: transform 0.5s ease;
}

.btn-actualizar.loading .btn-icon {
  animation: girar 0.6s linear infinite;
}

/* ── MAIN CONTENT ─────────────────────────── */
.main-content {
  max-width : 1600px;
  margin    : 0 auto;
  padding   : 1.5rem 2rem 5rem;
  display   : flex;
  flex-direction: column;
  gap       : 1.5rem;
}

/* ── FILTROS ──────────────────────────────── */
.filtros-container {
  background   : var(--color-blanco);
  border-radius: var(--radio);
  box-shadow   : var(--sombra);
  padding      : 1.25rem 1.5rem;
  display      : flex;
  flex-wrap    : wrap;
  align-items  : flex-end;
  gap          : 1rem;
}

.filtro-grupo {
  display       : flex;
  flex-direction: column;
  gap           : 0.35rem;
  flex          : 1 1 160px;
  min-width     : 140px;
}

.filtro-grupo label {
  font-size  : 0.78rem;
  font-weight: 600;
  color      : var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.filtro-grupo select,
.filtro-grupo input[type="date"],
.filtro-grupo input[type="text"] {
  border       : 1.5px solid var(--color-borde);
  border-radius: var(--radio-sm);
  padding      : 0.5rem 0.75rem;
  height       : 2.5rem;
  box-sizing   : border-box;
  font-size    : 0.9rem;
  font-family  : inherit;
  color        : var(--color-texto);
  background   : var(--color-blanco);
  transition   : border-color 0.2s ease, box-shadow 0.2s ease;
  outline      : none;
  width        : 100%;
}

.filtro-grupo select:focus,
.filtro-grupo input[type="date"]:focus,
.filtro-grupo input[type="text"]:focus {
  border-color: var(--color-secundario);
  box-shadow  : 0 0 0 3px rgba(41, 128, 185, 0.15);
  outline     : none;
}

.filtro-acciones {
  display    : flex;
  gap        : 0.6rem;
  align-items: flex-end;
  flex-wrap  : wrap;
}

/* Pseudo-label vacío para alinear botones con los inputs */
.filtro-acciones::before {
  content    : '';
  display    : block;
  height     : 1.1rem; /* altura del label */
  font-size  : 0.78rem;
}

.btn-primary {
  background-color: var(--color-secundario);
  color           : var(--color-blanco);
  border          : none;
  border-radius   : var(--radio-sm);
  padding         : 0 1.2rem;
  height          : 2.5rem;
  box-sizing      : border-box;
  font-size       : 0.875rem;
  font-weight     : 600;
  transition      : var(--transicion);
  white-space     : nowrap;
}

.btn-primary:hover {
  background-color: #2471a3;
  transform       : translateY(-1px);
  box-shadow      : 0 4px 12px rgba(41, 128, 185, 0.35);
}

.btn-secondary {
  background-color: var(--color-blanco);
  color           : var(--color-texto-suave);
  border          : 1.5px solid var(--color-borde);
  border-radius   : var(--radio-sm);
  padding         : 0 1rem;
  height          : 2.5rem;
  box-sizing      : border-box;
  font-size       : 0.875rem;
  font-weight     : 600;
  transition      : var(--transicion);
  white-space     : nowrap;
}

.btn-secondary:hover {
  border-color: var(--color-secundario);
  color       : var(--color-secundario);
  background  : #f0f7ff;
}

/* ── KPI GRID ─────────────────────────────── */
.kpi-grid {
  display              : grid;
  grid-template-columns: repeat(4, 1fr);
  gap                  : 1.25rem;
}

.kpi-card {
  background   : var(--color-blanco);
  border-radius: var(--radio);
  box-shadow   : var(--sombra);
  padding      : 1.5rem 1.25rem;
  display      : flex;
  align-items  : center;
  gap          : 1rem;
  border-left  : 5px solid transparent;
  transition   : var(--transicion);
  position     : relative;
  overflow     : hidden;
}

.kpi-card::after {
  content      : '';
  position     : absolute;
  top          : -20px;
  right        : -20px;
  width        : 80px;
  height       : 80px;
  border-radius: 50%;
  opacity      : 0.06;
  background   : currentColor;
  pointer-events: none;
}

.kpi-card:hover {
  transform : translateY(-3px);
  box-shadow: var(--sombra-hover);
}

.kpi-card--total  { border-left-color: var(--color-primario);    color: var(--color-primario); }
.kpi-card--si     { border-left-color: var(--color-acento);      color: var(--color-acento); }
.kpi-card--no     { border-left-color: var(--color-alerta);      color: var(--color-alerta); }
.kpi-card--pct    { border-left-color: var(--color-advertencia); color: var(--color-advertencia); }

.kpi-icon {
  font-size  : 2rem;
  flex-shrink: 0;
  line-height: 1;
}

.kpi-body {
  display       : flex;
  flex-direction: column;
  gap           : 0.2rem;
}

.kpi-valor {
  font-size  : 2rem;
  font-weight: 700;
  line-height: 1;
  color      : var(--color-texto);
}

.kpi-label {
  font-size  : 0.8rem;
  color      : var(--color-texto-suave);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── GRAFICOS ─────────────────────────────── */
.graficos-grid {
  display              : grid;
  grid-template-columns: 2fr 1fr;
  gap                  : 1.25rem;
}

.chart-card {
  background   : var(--color-blanco);
  border-radius: var(--radio);
  box-shadow   : var(--sombra);
  padding      : 1.5rem;
  display      : flex;
  flex-direction: column;
  gap          : 1rem;
}

.chart-titulo {
  font-size  : 0.95rem;
  font-weight: 700;
  color      : var(--color-texto);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 0.75rem;
  border-bottom : 1px solid var(--color-borde);
}

.chart-wrapper {
  position: relative;
  flex     : 1;
  min-height: 280px;
  max-height: 380px;
}

.chart-wrapper--dona {
  max-height: 320px;
}

/* ── TABLA SECTION ────────────────────────── */
.tabla-container {
  background   : var(--color-blanco);
  border-radius: var(--radio);
  box-shadow   : var(--sombra);
  overflow     : hidden;
}

.tabla-header-row {
  padding        : 1.25rem 1.5rem 0.75rem;
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  flex-wrap      : wrap;
  gap            : 0.5rem;
  border-bottom  : 1px solid var(--color-borde);
}

.tabla-titulo {
  font-size  : 0.95rem;
  font-weight: 700;
  color      : var(--color-texto);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tabla-hint {
  font-size: 0.775rem;
  color    : var(--color-texto-suave);
}

/* Scrollable wrapper */
.tabla-wrapper {
  overflow-x : auto;
  overflow-y : auto;
  max-height : 600px;
  /* Scrollbar styling (WebKit) */
  scrollbar-width     : thin;
  scrollbar-color     : #c5cdd8 transparent;
}

.tabla-wrapper::-webkit-scrollbar {
  width : 7px;
  height: 7px;
}

.tabla-wrapper::-webkit-scrollbar-track {
  background   : transparent;
  border-radius: 4px;
}

.tabla-wrapper::-webkit-scrollbar-thumb {
  background-color: #c5cdd8;
  border-radius   : 4px;
}

.tabla-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #a0aab4;
}

/* Table */
.tabla-matriz {
  border-collapse: collapse;
  min-width      : 100%;
  font-size      : 0.85rem;
}

/* ── Thead sticky ── */
.tabla-matriz thead {
  position: sticky;
  top     : 0;
  z-index : 10;
}

.tabla-matriz thead tr th {
  background-color: var(--color-primario);
  color           : var(--color-blanco);
  padding         : 0.5rem 0.6rem;
  text-align      : center;
  font-weight     : 600;
  white-space     : nowrap;
  border-right    : 1px solid rgba(255, 255, 255, 0.12);
  font-size       : 0.78rem;
  letter-spacing  : 0.02em;
}

/* Fecha bilinea en cabecera de columna */
.tabla-matriz thead th .fecha-dia {
  display    : block;
  font-size  : 1rem;
  font-weight: 700;
  line-height: 1.1;
}
.tabla-matriz thead th .fecha-mes {
  display    : block;
  font-size  : 0.65rem;
  font-weight: 400;
  opacity    : 0.85;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Sticky first column (nombre) */
.tabla-matriz .col-nombre {
  position        : sticky;
  left            : 0;
  z-index         : 11;
  background-color: var(--color-primario);
  text-align      : left;
  min-width       : 200px;
  max-width       : 260px;
  padding-left    : 1rem;
}

/* ── Body rows ── */
.tabla-matriz tbody tr:hover td {
  background-color: #f0f7ff !important;
}

.tabla-matriz tbody td {
  padding      : 0.55rem 0.6rem;
  border-bottom: 1px solid var(--color-borde);
  border-right : 1px solid #eef1f6;
  text-align   : center;
  color        : var(--color-texto);
}

/* Sticky first body column */
.tabla-matriz tbody td.col-nombre {
  position        : sticky;
  left            : 0;
  z-index         : 5;
  background-color: var(--color-blanco);
  text-align      : left;
  font-weight     : 500;
  padding-left    : 1.25rem;
  border-right    : 2px solid var(--color-borde);
  white-space     : nowrap;
  overflow        : hidden;
  text-overflow   : ellipsis;
  max-width       : 260px;
}

/* ── IED header rows ── */
.fila-ied td {
  background-color: #e8f0fe;
  font-weight     : 700;
  color           : var(--color-primario);
  padding         : 0.65rem 0.75rem;
  border-top      : 2px solid #b8ccf0;
  border-bottom   : 1px solid #b8ccf0;
  font-size       : 0.82rem;
  text-transform  : uppercase;
  letter-spacing  : 0.03em;
  cursor          : pointer;
  user-select     : none;
}

.fila-ied td.col-nombre {
  position        : sticky;
  left            : 0;
  z-index         : 6;
  background-color: #dce8fb;
}

.fila-ied:hover td {
  background-color: #d0e0fa !important;
}

/* Toggle icon on IED row */
.ied-toggle-icon {
  display     : inline-block;
  margin-right: 0.4rem;
  font-size   : 0.85rem;
  transition  : transform 0.2s ease;
}

.ied-toggle-icon.collapsed {
  transform: rotate(-90deg);
}

/* ── Subtotal rows ── */
.fila-subtotal td {
  background-color: #f0f4ff;
  font-weight     : 700;
  color           : var(--color-primario);
  border-top      : 2px solid #d0daef;
  font-size       : 0.82rem;
  font-style      : italic;
}

.fila-subtotal td.col-nombre {
  position        : sticky;
  left            : 0;
  z-index         : 5;
  background-color: #eaeffc;
}

/* ── Cell types ── */
.celda-si {
  background-color: #d4edda;
  color           : #155724;
  font-weight     : 600;
  text-align      : center;
  border-radius   : 4px;
}

.celda-no {
  background-color: #f8d7da;
  color           : #721c24;
  text-align      : center;
  font-weight     : 500;
}

.celda-vacia {
  text-align: center;
  color     : #b0b8c4;
  font-size : 0.8rem;
}

.celda-total {
  font-weight     : 700;
  background-color: #f8f9fa;
  border-left     : 2px solid var(--color-borde);
  text-align      : center;
}
.celda-total-si {
  background-color: #eafaf1;
  color           : #1a7a40;
  border-left     : 2px solid #27ae60;
}
.celda-total-no {
  background-color: #fdf2f2;
  color           : #a93226;
  border-left     : 2px solid #e74c3c;
}

/* ── EXPORT BUTTON (fixed) ─────────────────── */
#btn-exportar-pdf {
  position        : fixed;
  bottom          : 2rem;
  right           : 2rem;
  z-index         : 200;
  background-color: var(--color-primario);
  color           : var(--color-blanco);
  border          : none;
  border-radius   : var(--radio);
  padding         : 0.85rem 1.5rem;
  font-size       : 0.925rem;
  font-weight     : 600;
  display         : flex;
  align-items     : center;
  gap             : 0.5rem;
  box-shadow      : var(--sombra-btn);
  transition      : var(--transicion);
  letter-spacing  : 0.02em;
}

#btn-exportar-pdf:hover {
  background-color: #153151;
  transform       : translateY(-3px);
  box-shadow      : 0 8px 24px rgba(26, 58, 92, 0.45);
}

#btn-exportar-pdf:active {
  transform: translateY(-1px);
}

#btn-exportar-pdf.loading {
  opacity: 0.7;
  cursor : not-allowed;
}

/* ── Tooltip ──────────────────────────────── */
.tooltip-custom {
  position        : fixed;
  z-index         : 9998;
  background-color: rgba(26, 58, 92, 0.92);
  color           : var(--color-blanco);
  padding         : 0.45rem 0.75rem;
  border-radius   : var(--radio-sm);
  font-size       : 0.78rem;
  font-family     : var(--font-base);
  line-height     : 1.4;
  pointer-events  : none;
  max-width       : 220px;
  white-space     : pre-line;
  box-shadow      : 0 4px 12px rgba(0, 0, 0, 0.2);
  transition      : opacity 0.15s ease;
  opacity         : 0;
}

.tooltip-custom.visible {
  opacity: 1;
}

/* ── Zona usuario en header ── */
.zona-usuario {
  display    : flex;
  align-items: center;
  gap        : 12px;
}

#nombreUsuario {
  color    : #FFFFFF;
  font-size: 14px;
  white-space: nowrap;
}

#btnCerrarSesion {
  background   : transparent;
  border       : 1.5px solid rgba(255, 255, 255, 0.55);
  color        : #FFFFFF;
  padding      : 5px 14px;
  border-radius: 6px;
  font-size    : 13px;
  font-family  : var(--font-base);
  cursor       : pointer;
  transition   : background 0.2s;
  white-space  : nowrap;
}

#btnCerrarSesion:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ── Badges de rol ── */
.badge-rol {
  padding       : 3px 10px;
  border-radius : 12px;
  font-size     : 11px;
  font-weight   : 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space   : nowrap;
}

.badge-admin   { background: #FFDC2A; color: #00568D; }
.badge-docente { background: #8EC6E3; color: #00568D; }

/* ── KPI cards — borde top institucional ── */
.kpi-card {
  border-top: 4px solid #00ADE7;
}

/* ── Botones primario/secundario — paleta nueva ── */
.btn-primary:hover {
  background-color: #00568D;
  box-shadow      : 0 4px 12px rgba(0, 173, 231, 0.35);
}

#btn-exportar-pdf:hover {
  background-color: #00ADE7;
  box-shadow      : 0 8px 24px rgba(0, 86, 141, 0.45);
}

/* ── RESPONSIVE ────────────────────────────── */

/* Large → 1440px */
@media (max-width: 1440px) {
  .main-content {
    padding: 1.25rem 1.5rem 5rem;
  }
}

/* Medium large → 1200px */
@media (max-width: 1200px) {
  .graficos-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Tablet → 1024px */
@media (max-width: 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .graficos-grid {
    grid-template-columns: 1fr;
  }

  .chart-wrapper {
    min-height: 240px;
  }
}

/* Mobile → 768px */
@media (max-width: 768px) {
  .header {
    padding: 1rem 1.25rem;
  }

  .header h1 {
    font-size: 1.1rem;
  }

  .main-content {
    padding: 1rem 1rem 5rem;
  }

  .kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .kpi-valor {
    font-size: 1.6rem;
  }

  .filtros-container {
    flex-direction: column;
  }

  .filtro-grupo {
    flex: 1 1 100%;
  }

  .filtro-acciones {
    width: 100%;
  }

  .filtro-acciones button {
    flex: 1;
  }

  #btn-exportar-pdf {
    bottom    : 1rem;
    right     : 1rem;
    padding   : 0.7rem 1.1rem;
    font-size : 0.85rem;
  }
}

/* Extra small → 480px */
@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .header-right {
    width: 100%;
    justify-content: space-between;
  }
}