/* ============================================================================
   CDI Asistencia — Sistema de diseño (Fase D1)
   Único archivo de diseño propio del proyecto: se monta sobre AdminLTE 3 +
   Bootstrap 4 (no los reemplaza, los tematiza — ver README.md). Antes de esta
   fase, estas reglas vivían incrustadas en un <style> dentro de
   includes/header.php; se movieron aquí sin cambiar ningún selector ni valor,
   para no alterar el layout ni la apariencia actual de ninguna página.
   ============================================================================ */

:root {
  /* ── Color ───────────────────────────────────────────────────────────────
     Mismos valores que ya usaba el sistema (los mismos tonos que tenía el
     extinto assets/css/style.css, solo que aquí con los nombres cortos que
     usa el resto del CSS: --p = --primary, --em = --success, --amber =
     --warning/--accent, --red = --danger, --blue = --info, --ink* = --text-*,
     --mut = --text-muted, --line = --border). */
  --p: #4f46e5;
  --p2: #4338ca;
  --p-light: #eef2ff;
  --em: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;
  --blue: #3b82f6;
  --ink: #0f172a;
  --ink2: #1e293b;
  --ink3: #334155;
  --mut: #64748b;
  --line: #e2e8f0;
  --bg: #f1f5f9;

  /* Versión clara ("tenue") de cada color de acento, para fondos de ícono
     suaves con el ícono mismo saturado encima (D3 — refinamiento visual).
     El color decorativo vive en el ícono; la tarjeta que lo contiene se
     mantiene blanca. */
  --p-tint: #eef2ff;
  --em-tint: #d1fae5;
  --red-tint: #fee2e2;
  --amber-tint: #fef3c7;
  --blue-tint: #dbeafe;
  --slate-tint: #e2e8f0;
  --teal: #0d9488;
  --teal-tint: #ccfbf1;
  --violet: #7c3aed;
  --violet-tint: #ede9fe;

  /* ── Radios y sombra ─────────────────────────────────────────────────── */
  --r: 10px;
  --r-sm: 8px;
  --sh: 0 1px 2px rgba(15, 23, 42, .06);

  /* Duración única para las transiciones sobrias del sistema (hover de
     botones, filas de tabla, elementos de menú, tarjetas): 150-200ms. */
  --dur: 180ms;

  /* ── Espaciado, en múltiplos de 8px ─────────────────────────────────────
     Uso previsto para el CSS nuevo de las siguientes fases (D2-D5); las
     reglas movidas en esta fase siguen con sus valores puntuales originales,
     ya que D1 no cambia el layout ni la estructura de las páginas. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
}

body, .content-wrapper, .main-header{font-family:'Inter',system-ui,sans-serif !important;}
body{background:var(--bg);color:var(--ink);}
code{background:var(--p-light);color:var(--p2);border-radius:6px;padding:2px 7px;font-size:.82rem;font-weight:600;}

/* ── Sidebar ─────────────────────────────────────────────── */
.main-sidebar{background:#0f172a !important;}
.brand-link{background:#0f172a !important;border-bottom:1px solid rgba(255,255,255,.06) !important;}
.brand-link .brand-text{font-weight:800;letter-spacing:.4px;font-size:1rem;}
/* Marca del sidebar: la misma del login (logotipo CDI + nombre completo + subtítulo). El nombre puede
   ocupar dos líneas en vez de cortarse. */
.brand-link.sb-marca{display:flex !important;align-items:center;gap:10px;height:auto !important;min-height:57px;padding-top:10px !important;padding-bottom:10px !important;text-decoration:none;}
.sb-logo{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:var(--p);color:#fff;font-weight:900;font-size:.95rem;display:inline-flex;align-items:center;justify-content:center;}
.sb-marca-texto{display:flex;flex-direction:column;min-width:0;line-height:1.15;}
.sb-marca-nombre{color:#fff;font-weight:800;font-size:.86rem;letter-spacing:.2px;white-space:normal;}
.sb-marca-sub{color:rgba(255,255,255,.55);font-size:.68rem;font-weight:400;margin-top:3px;white-space:normal;}
.sidebar{background:transparent !important;}
.nav-sidebar .nav-header{padding:16px 20px 6px;color:#64748b;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.nav-sidebar>.nav-item{margin:2px 8px;}
.nav-sidebar .nav-link{border-radius:var(--r-sm) !important;color:#94a3b8 !important;font-weight:500;font-size:.92rem;transition:background var(--dur) ease,color var(--dur) ease;}
.nav-sidebar .nav-link:hover{background:rgba(255,255,255,.06) !important;color:#e2e8f0 !important;}
.nav-sidebar .nav-link.active{background:var(--p) !important;color:#fff !important;}
.nav-sidebar .nav-link.text-danger{color:#f87171 !important;}
.nav-sidebar .nav-link.text-danger:hover{background:rgba(248,113,113,.1) !important;color:#fca5a5 !important;}
.nav-sidebar .nav-icon{font-size:.95rem;margin-right:4px;width:22px;text-align:center;color:#8aa0bd;}
.user-panel{margin:14px 18px 6px !important;padding-bottom:14px !important;border-bottom:1px solid rgba(255,255,255,.07);}
/* El nombre del usuario se ve completo: puede pasar a una segunda línea en vez de cortarse. */
.user-panel .image{flex:0 0 auto;}
.sb-usuario{min-width:0;flex:1 1 auto;line-height:1.25;}
.sb-usuario-nombre{font-weight:600;font-size:.85rem;white-space:normal;word-break:break-word;overflow-wrap:anywhere;}
.user-badge{width:40px;height:40px;background:var(--p);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:.9rem;}

/* ── Navbar ──────────────────────────────────────────────── */
.main-header.navbar{background:#fff !important;box-shadow:0 1px 0 var(--line),0 1px 3px rgba(15,23,42,.04) !important;border-bottom:0 !important;}
.main-header.navbar .nav-link{color:var(--ink2);}
.main-header.navbar .nav-salir{color:#b42318;font-weight:600;font-size:.85rem;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;}
.date-chip{font-weight:600;color:var(--ink3) !important;font-size:.8rem !important;padding:0;}
.nav-avatar{width:32px;height:32px;border-radius:var(--r-sm);background:var(--p);color:#fff;font-weight:800;font-size:.75rem;display:inline-flex;align-items:center;justify-content:center;}

/* ── Page header ─────────────────────────────────────────── */
.content-header{padding:20px 24px 8px !important;}
.content-header h1{font-size:1.3rem !important;font-weight:700 !important;color:var(--ink);}
.breadcrumb{background:#e9eef5 !important;border-radius:6px !important;padding:6px 14px !important;font-size:.78rem;}
.breadcrumb-item a{color:var(--p);}
.breadcrumb-item.active{color:var(--mut);}
.content{padding:14px 24px 24px !important;}

/* ── Cards ───────────────────────────────────────────────── */
.card{border:1px solid var(--line) !important;border-radius:var(--r) !important;box-shadow:var(--sh) !important;transition:box-shadow var(--dur) ease,transform var(--dur) ease;}
.card:hover{box-shadow:0 4px 12px rgba(15,23,42,.08) !important;transform:translateY(-1px);}
.card.card-outline{border-top:3px solid var(--line) !important;}
.card-outline.card-primary{border-top-color:var(--p) !important;}
.card-outline.card-success{border-top-color:var(--em) !important;}
.card-outline.card-danger{border-top-color:var(--red) !important;}
.card-outline.card-warning{border-top-color:var(--amber) !important;}
.card-outline.card-info{border-top-color:var(--blue) !important;}
.card-header{border-bottom:1px solid var(--line) !important;padding:13px 16px !important;background:transparent !important;}
.card-title{font-weight:700 !important;font-size:.98rem !important;color:var(--ink2);}
.card-header:not(.bg-primary):not(.bg-warning):not(.bg-success):not(.bg-danger):not(.bg-info) .card-title i{color:var(--p);}
.card-body{padding:16px !important;}
.card-footer{border-top:1px solid var(--line) !important;background:#fff !important;border-radius:0 0 10px 10px !important;}
.card-header .card-tools .btn{vertical-align:middle;}

/* ── Stat cards (D3): tarjetas neutras con un solo color de acento ───────
   Reemplazan los small-box de colores de AdminLTE (bg-primary/success/...);
   el color queda reservado para estados reales (badges, info-box de abajo). */
.stat-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:18px 20px;height:100%;display:flex;flex-direction:column;justify-content:space-between;transition:box-shadow var(--dur) ease,transform var(--dur) ease;}
.stat-card:hover{box-shadow:0 4px 14px rgba(15,23,42,.10);transform:translateY(-1px);}
.stat-card-main{display:flex;align-items:center;gap:14px;}
.stat-icon{width:48px;height:48px;border-radius:var(--r-sm);background:var(--p-light);color:var(--p);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}
/* Cada tarjeta de indicador puede tomar un color de ícono distinto (fondo
   tenue, ícono saturado) sin dejar de ser una tarjeta blanca neutra — color
   con intención, no decorativo: distingue una métrica de otra a simple
   vista sin que ninguna represente un estado real. El índigo por defecto
   (.stat-icon) se conserva como el acento principal del sistema. */
.stat-icon-teal{background:var(--teal-tint);color:var(--teal);}
.stat-icon-violet{background:var(--violet-tint);color:var(--violet);}
.stat-icon-amber{background:var(--amber-tint);color:#b45309;}
.stat-value{font-size:1.55rem;font-weight:800;color:var(--ink);line-height:1.15;}
.stat-label{font-size:.78rem;font-weight:600;color:var(--mut);margin-top:1px;}
.stat-link{display:inline-block;margin-top:14px;font-size:.78rem;font-weight:700;color:var(--p);text-decoration:none;transition:color var(--dur) ease;}
.stat-link:hover{color:var(--p2);text-decoration:underline;}

/* ── Info boxes ──────────────────────────────────────────────────────────
   D3 (refinamiento visual): antes "bg-primary/success/..." pintaba TODO el
   bloque de un color sólido — decorativo, no un estado. Ahora la tarjeta
   se mantiene blanca y el color queda solo en el ícono (fondo tenue, ícono
   saturado), igual que .stat-card; el número queda en tinta oscura y la
   etiqueta en gris, con jerarquía tipográfica clara (número grande, texto
   pequeño). Esto no cambia ningún significado: donde bg-success ya
   representaba un estado real (Activos, Presentes, Niveles con maestro...)
   sigue siendo verde, solo que ahora tenue en vez de sólido. */
.info-box{border-radius:var(--r) !important;box-shadow:var(--sh) !important;overflow:hidden;min-height:84px !important;
  background:#fff !important;color:var(--ink) !important;transition:box-shadow var(--dur) ease,transform var(--dur) ease;}
.info-box:hover{box-shadow:0 4px 14px rgba(15,23,42,.10) !important;transform:translateY(-1px);}
.info-box .info-box-icon{border-radius:var(--r-sm) !important;margin:10px;width:52px;height:52px;font-size:1.3rem;display:flex;align-items:center;justify-content:center;}
.info-box-number{font-weight:800 !important;font-size:1.35rem !important;line-height:1.1;color:var(--ink) !important;}
.info-box-text{font-weight:600 !important;font-size:.76rem !important;text-transform:uppercase;letter-spacing:.03em;color:var(--mut) !important;opacity:1;}

.info-box-icon.bg-primary,  .info-box.bg-primary   .info-box-icon{background:var(--p-tint) !important;color:var(--p) !important;}
.info-box-icon.bg-success,  .info-box.bg-success   .info-box-icon{background:var(--em-tint) !important;color:#047857 !important;}
.info-box-icon.bg-danger,   .info-box.bg-danger    .info-box-icon{background:var(--red-tint) !important;color:#b91c1c !important;}
.info-box-icon.bg-warning,  .info-box.bg-warning   .info-box-icon{background:var(--amber-tint) !important;color:#b45309 !important;}
.info-box-icon.bg-info,     .info-box.bg-info      .info-box-icon{background:var(--blue-tint) !important;color:#1d4ed8 !important;}
.info-box-icon.bg-secondary,.info-box.bg-secondary .info-box-icon{background:var(--slate-tint) !important;color:#475569 !important;}

/* ── Tables ──────────────────────────────────────────────────────────────
   Más aire entre filas y bordes más livianos (D3 — bajar ruido visual): el
   dato debe notarse más que la cuadrícula que lo contiene. */
.table thead th,.thead-light th,.thead-dark th,.table-bordered thead th{
  background:#eef2f7 !important;color:var(--ink3) !important;border-color:var(--line) !important;
  text-transform:uppercase;font-size:.72rem !important;font-weight:700 !important;
  vertical-align:middle !important;padding:12px 14px !important;
}
.table td{vertical-align:middle !important;padding:16px 14px !important;font-size:.88rem;border-color:#f1f5f9 !important;transition:background-color var(--dur) ease;}
.table-hover tbody tr:hover td{background:#f8fafc !important;}
.table-bordered{border-color:var(--line) !important;}
.table tfoot td{background:#f8fafc;font-weight:700;}

/* ── Línea de resumen ──────────────────────────────────────────────────────
   Reemplaza las tarjetas de métricas (.stat-card / .info-box) en las
   pantallas de gestión: esas tarjetas quedan reservadas para el panel
   principal. Aquí el conteo es una sola línea discreta sobre la tabla, para
   darle ese espacio a los datos. */
.summary-line{color:var(--mut);font-size:.85rem;margin:0 0 14px;}
.summary-line strong{color:var(--ink2);font-weight:700;}
.summary-line .sep{margin:0 8px;color:var(--line);}

/* ── Botones de ícono (columnas de acciones) ──────────────────────────────
   Un botón cuadrado con un solo ícono y tooltip (title + data-toggle=
   "tooltip", inicializado en assets/js/main.js), en vez de repetir el mismo
   texto en cada fila de una tabla. */
.btn-icon{display:inline-flex !important;align-items:center;justify-content:center;padding:0 !important;}
.btn-icon.btn-xs{width:26px;height:26px;}
.btn-icon.btn-sm{width:32px;height:32px;}
.btn-icon i{margin:0 !important;}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{border-radius:var(--r-sm) !important;font-weight:600 !important;transition:background var(--dur) ease,border-color var(--dur) ease,box-shadow var(--dur) ease,opacity var(--dur) ease;box-shadow:none !important;}
.btn:focus,.btn:active:focus{box-shadow:0 0 0 .2rem rgba(79,70,229,.18) !important;}
.btn-primary{background:var(--p) !important;border-color:var(--p) !important;}
.btn-primary:hover{background:var(--p2) !important;border-color:var(--p2) !important;}
.btn-success{background:var(--em) !important;border-color:var(--em) !important;}
.btn-success:hover{background:#059669 !important;border-color:#059669 !important;}
.btn-warning{color:#78350f !important;}
.btn-outline-primary{border-color:#c7d2fe !important;color:var(--p) !important;}
.btn-outline-primary:hover{background:var(--p-light) !important;border-color:var(--p) !important;color:var(--p) !important;}
.btn-outline-success{border-color:#a7f3d0 !important;color:#047857 !important;}
.btn-outline-success:hover{background:#ecfdf5 !important;border-color:var(--em) !important;}
.btn-outline-danger{border-color:#fecaca !important;color:#dc2626 !important;}
.btn-outline-danger:hover{background:#fef2f2 !important;border-color:var(--red) !important;}
.btn-outline-secondary{border-color:var(--line) !important;color:var(--ink3) !important;}
.btn-outline-secondary:hover{background:#eef2f7 !important;border-color:#cbd5e1 !important;color:var(--ink) !important;}
.btn-sm{padding:6px 12px;font-size:.8rem;}
.btn-xs{padding:4px 10px;font-size:.74rem;border-radius:6px !important;}
.btn.btn-sm i,.btn.btn-xs i{font-size:.85em;}

/* ── Forms ───────────────────────────────────────────────── */
label{font-weight:600 !important;font-size:.84rem;color:var(--ink2);}
.form-control{border-radius:var(--r-sm) !important;border:1px solid #cbd5e1 !important;padding:8px 12px;font-size:.9rem;transition:border-color var(--dur) ease,box-shadow var(--dur) ease;}
.form-control:focus{border-color:var(--p) !important;box-shadow:0 0 0 .2rem rgba(79,70,229,.15) !important;}
.form-control-sm{padding:5px 10px;}
.input-group-text{border-radius:0 8px 8px 0 !important;border-color:#cbd5e1 !important;background:#f8fafc !important;color:var(--mut);}
.custom-control-input:checked~.custom-control-label::before{background-color:var(--p) !important;border-color:var(--p) !important;}
.custom-control-input:focus~.custom-control-label::before{box-shadow:0 0 0 .2rem rgba(79,70,229,.15) !important;}
.custom-control-label{font-weight:500 !important;}

/* ── Badges ──────────────────────────────────────────────── */
.badge{border-radius:.25rem;font-weight:600;padding:.4em .7em;font-size:.74rem;}
.badge-primary{background:var(--p-light);color:var(--p2);}
.badge-success{background:#d1fae5;color:#047857;}
.badge-danger{background:#fee2e2;color:#b91c1c;}
.badge-warning{background:#fef3c7;color:#b45309;}
.badge-info{background:#dbeafe;color:#1d4ed8;}
.badge-secondary{background:#e2e8f0;color:#475569;}
.badge-light{background:#f8fafc;color:var(--ink3);}

/* Estados de asistencia (mismos colores que usa asistencia.php para sus
   botones de estado), para poder pintar "badge badge-<?= $estado ?>"
   directamente en cualquier tabla sin traducir el valor a mano.
   Color semántico consistente en todo el sistema: presente=verde,
   ausente=rojo, tarde y justificado comparten ámbar (ambos son una
   asistencia "no plena" pero explicada/tolerada, a diferencia de una
   ausencia real). Antes "presente" salía en lavanda (el mismo tono que el
   acento de navegación) mientras el ícono del panel principal ya lo pintaba
   en verde — mismo concepto, dos colores; y "justificado" salía en azul,
   una cuarta familia de color sin necesidad real. */
.badge-presente{background:var(--em-tint);color:#047857;}
.badge-ausente{background:var(--red-tint);color:#b91c1c;}
.badge-tarde{background:var(--amber-tint);color:#b45309;}
.badge-justificado{background:var(--amber-tint);color:#b45309;}

/* ── Modals ──────────────────────────────────────────────── */
.modal-content{border:0 !important;border-radius:var(--r) !important;box-shadow:0 16px 48px rgba(15,23,42,.25) !important;overflow:hidden;}
.modal-header{border-bottom:1px solid var(--line) !important;padding:14px 18px !important;background:#fafbfc !important;}
.modal-header.bg-primary{background:var(--p) !important;}
.modal-header.bg-warning{background:var(--amber) !important;}
.modal-title{font-weight:700 !important;font-size:1rem !important;}
.modal-body{padding:20px 18px !important;}
.modal-footer{border-top:1px solid var(--line) !important;padding:12px 18px !important;background:#fafbfc !important;}
.modal .close{text-shadow:none !important;}

/* ── Alerts ──────────────────────────────────────────────── */
.alert{border:0 !important;border-radius:var(--r-sm) !important;border-left:4px solid currentColor;box-shadow:var(--sh);}
.alert-success{background:#ecfdf5 !important;color:#065f46 !important;border-left-color:#059669 !important;}
.alert-danger{background:#fef2f2 !important;color:#991b1b !important;border-left-color:#dc2626 !important;}
.alert-warning{background:#fffbeb !important;color:#92400e !important;border-left-color:#d97706 !important;}
.alert-info{background:#eff6ff !important;color:#1e40af !important;border-left-color:#2563eb !important;}
.alert a{font-weight:700;text-decoration:underline;}
.alert-dismissible .close{color:inherit !important;opacity:.6;text-shadow:none !important;}
.alert-dismissible .close:hover{opacity:1;}
.alert strong{font-weight:700;}

/* ── Callout ─────────────────────────────────────────────── */
.callout{border-radius:var(--r-sm) !important;border:0 !important;border-left:4px solid var(--p) !important;box-shadow:var(--sh);}
.callout.callout-primary{background:#eef2ff !important;color:var(--ink2) !important;}
/* AdminLTE define ".callout a" con un gris genérico (pensado para un enlace
   de texto suelto dentro de la nota, no para un botón real); por especificidad
   le ganaba al blanco propio de un .btn-primary/.btn-success/... cuando ese
   botón vive dentro de un callout — el texto de "Tomar Asistencia" en el
   panel principal quedaba casi invisible (gris #495057 sobre índigo sólido,
   contraste 1.3:1) sin que ningún botón hubiera cambiado de color por sí
   mismo. Se restaura el texto blanco correcto de cada variante sólida. */
.callout .btn-primary,.callout .btn-success,.callout .btn-danger,.callout .btn-secondary{color:#fff !important;}

/* ── Dropdowns ───────────────────────────────────────────── */
.dropdown-menu{border-radius:var(--r-sm) !important;border:1px solid var(--line) !important;box-shadow:0 8px 24px rgba(15,23,42,.12) !important;padding:6px !important;}
.dropdown-item{border-radius:6px;margin:2px 0;padding:8px 12px;font-size:.88rem;font-weight:500;transition:background-color var(--dur) ease,color var(--dur) ease;}
.dropdown-item i{width:18px;text-align:center;}
.dropdown-item.text-danger{color:#dc2626 !important;}
.dropdown-item.text-danger:hover{background:#fef2f2 !important;color:#b91c1c !important;}
.dropdown-item-text{font-size:.8rem;}

/* ── Asistencia (widgets) ────────────────────────────────── */
.timer-box{background:var(--p-light);border:1px solid #c7d2fe;border-radius:var(--r-sm);padding:8px 14px;display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--p);}
.timer-display{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.1rem;letter-spacing:1px;}

/* ── Footer ──────────────────────────────────────────────── */
.main-footer{background:#fff;border-top:1px solid var(--line);padding:12px 24px;font-size:.8rem;color:var(--mut);}

/* ── Aparición de página (D3: refinamiento visual) ───────────────────────
   Entrada suave del contenido al cargar cada pantalla: sin rebote (ease-out)
   y con un desplazamiento corto (6px), nunca largo. Solo el contenido se
   anima; el sidebar y la barra superior permanecen fijos para que el marco
   de la aplicación se sienta estable. */
@keyframes cdi-fade-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.content-wrapper{animation:cdi-fade-in .25s ease-out;}

/* ── Foco visible (accesibilidad) ─────────────────────────────────────────
   .btn y .form-control ya tienen su propio anillo de foco (arriba); esta
   regla cubre todo lo demás que también puede recibir foco por teclado
   (enlaces, ítems de menú, checkboxes/radios personalizados) y que de otro
   modo podría quedar sin ninguna indicación visible. */
a:focus-visible,
button:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--p) !important;
  outline-offset:2px;
}
.custom-control-input:focus-visible ~ .custom-control-label::before{
  box-shadow:0 0 0 .2rem rgba(79,70,229,.25) !important;
}

/* ── Estado de carga en botones (assets/js/main.js los activa al enviar
   un formulario) ─────────────────────────────────────────────────────── */
.btn-loading{opacity:.75;pointer-events:none;}

/* ── Utilidad ──────────────────────────────────────────────────────────── */
.text-strikethrough{text-decoration:line-through;}

/* ── Impresión de reportes (movido desde el <style> propio de reportes.php:
   todo el CSS del sistema vive únicamente en este archivo) ──────────────── */
@media print {
  .main-header,.main-sidebar,.content-header,.card-tools,.no-print{display:none !important;}
  .main-wrapper,.content-wrapper{margin:0 !important;}
  .card{box-shadow:none !important;border:1px solid #dee2e6 !important;}
}

/* ── Login (pantalla independiente, no pasa por includes/header.php, pero
   sí enlaza este mismo archivo para compartir el mismo sistema de diseño en
   vez de tener su propio <style> incrustado) ────────────────────────────── */
.login-page{background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 55%,#312e81 100%);}
.login-box{position:relative;z-index:2;}
.login-box .card{border:0 !important;border-radius:14px !important;box-shadow:0 16px 48px rgba(0,0,0,.35) !important;overflow:hidden;}
.login-box .card:hover{transform:none;box-shadow:0 16px 48px rgba(0,0,0,.35) !important;}
.login-card-body{background:#fff;padding:32px 30px !important;}
.login-logo{margin-bottom:20px;}
.login-logo a{color:#fff !important;font-size:1.5rem !important;font-weight:800;letter-spacing:.5px;text-decoration:none;}
.login-logo small{display:block;color:rgba(255,255,255,.55);font-size:.85rem;font-weight:400;margin-top:4px;letter-spacing:.02em;}
.cdi-logo{width:60px;height:60px;background:var(--p);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:900;color:#fff;margin:0 auto 14px;}
.login-box .btn-primary{padding:10px 18px !important;letter-spacing:.02em;}
.login-box-msg{font-size:.9rem;}
.login-eye-btn{border-radius:0 8px 8px 0 !important;border-color:#cbd5e1 !important;background:#f8fafc !important;color:var(--mut);}

/* Catálogo de reportes: tarjeta clicable por reporte, deshabilitada para los
   que todavía no están implementados. */
.reporte-card { transition: box-shadow var(--dur, .18s), transform var(--dur, .18s); }
.reporte-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-1px); }
.reporte-card-disabled { opacity: .55; cursor: not-allowed; }

/* Cabecera de una sección colapsable (ej. cada grupo de una campaña de
   regalos): el ícono de flecha rota según el propio atributo aria-expanded
   que Bootstrap ya actualiza solo en el disparador de data-toggle="collapse",
   sin JS adicional. */
.chevron-grupo-campana { transition: transform var(--dur, .18s); }
[aria-expanded="true"] > .chevron-grupo-campana,
[aria-expanded="true"] .chevron-grupo-campana { transform: rotate(180deg); }

/* ── prefers-reduced-motion ────────────────────────────────────────────────
   Para quien tenga las animaciones desactivadas en su sistema operativo:
   todas las transiciones y animaciones del sistema (aparición de página,
   elevación de tarjetas, hover de botones/filas/menú, spinner de carga)
   quedan reducidas a un cambio prácticamente instantáneo, sin movimiento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .fa-spin { animation: none !important; }
}

/* ===========================================================================
   Buscador (autocompletado) de beneficiarios — assets/js/buscador_beneficiario.js
   El contenedor .ben-buscador envuelve SOLO al campo de texto y a su lista, para
   que la lista se ancle al borde inferior del campo (top:100%) y nunca lo cubra,
   aunque el formulario que lo contiene sea un flex centrado (.form-inline).
   =========================================================================== */
.ben-buscador{position:relative;display:block;}
.ben-lista{position:absolute !important;top:100% !important;bottom:auto !important;left:0;right:0;margin-top:2px;z-index:1060;overflow-y:auto;box-shadow:0 8px 24px rgba(15,23,42,.12);border-radius:var(--r-sm);}
/* Mientras la lista del buscador está abierta, la tarjeta que la contiene queda por encima de lo que
   sigue en la página (avisos, otras tarjetas): evita que la lista se vea cortada. */
.card.ben-tarjeta-elevada{position:relative;z-index:1040;}


/* ===========================================================================
   Toma de asistencia (asistencia.php) — una sola presentación, dos disposiciones
   La MISMA tabla de la nómina se presenta como una tarjeta por beneficiario:
   apilada en teléfono (< 768 px) y en una línea por beneficiario en pantallas
   grandes. Ambas ofrecen exactamente las mismas funciones (marcar, observación,
   motivo, marcado masivo, ver solo sin marcar, guardar con confirmación); solo
   cambia la disposición. Sin desplazamiento horizontal en ningún ancho.
   =========================================================================== */
.card-asistencia,.card-asistencia:hover{transform:none !important;}
.card-asistencia .card-body{padding:0 !important;}
.asistencia-movil .table-responsive{overflow:visible;}
.asistencia-movil table,.asistencia-movil tbody{display:block;width:100%;}
.asistencia-movil thead{display:none;}
.asistencia-movil tbody td{display:block;width:auto;padding:0 !important;border:0 !important;}
.asistencia-movil .col-genero{display:none !important;}

/* Barra fija única: aula, fecha, cronómetro, contador, filtro y marcado masivo. */
.asis-barra{position:sticky;top:0;z-index:1020;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 2px 8px rgba(15,23,42,.08);padding:6px 10px;display:flex;flex-direction:column;gap:6px;}
.asis-l1,.asis-l2,.asis-l3{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.asis-id{min-width:0;display:flex;flex-direction:column;gap:0;line-height:1.2;}
.asis-barra-aula{font-size:1.02rem;color:var(--ink);white-space:nowrap;}
.asis-barra-fecha{color:var(--mut);font-size:.85rem;white-space:nowrap;}
.asis-reloj{display:flex;align-items:center;gap:6px;}
.asis-barra .timer-box{padding:3px 6px 3px 10px;gap:6px;}
.asis-barra .timer-box .btn{min-width:32px;min-height:32px;}
.asis-aviso{font-size:.72rem;}
.asis-contador{font-size:.9rem;color:var(--ink2);white-space:nowrap;}
.asis-filtro{flex:0 0 auto;min-height:40px;padding:0 8px;font-size:.8rem;font-weight:600;white-space:nowrap;border:1px solid #94a3b8;background:#fff;color:#334155;border-radius:8px;}
.asis-filtro.activo{background:#1e293b;border-color:#1e293b;color:#fff;}
/* Par de marcado masivo: mismo peso visual, mismo tamaño. */
.asis-masivo{flex:1 1 0;min-width:0;padding:0 4px;font-size:.84rem;min-height:40px;font-weight:700;white-space:nowrap;border-radius:8px;background:#fff;border:2px solid;}
.asis-masivo.m-presente{color:#047857;border-color:#047857;}
.asis-masivo.m-ausente{color:#b91c1c;border-color:#b91c1c;}
.asis-masivo.m-presente:active,.asis-masivo.m-presente:hover{background:#ecfdf5;}
.asis-masivo.m-ausente:active,.asis-masivo.m-ausente:hover{background:#fef2f2;}
.asis-sin-pendientes{display:none;padding:18px 12px;text-align:center;color:#047857;font-weight:600;}

/* Tarjeta de cada beneficiario: la franja lateral toma el color del estado. */
.asistencia-movil tbody tr{display:grid;gap:6px 12px;margin:8px;padding:10px;background:#fff;
  border:1px solid var(--line);border-left:6px solid #94a3b8;border-radius:var(--r);box-shadow:var(--sh);}
.asistencia-movil tbody tr.oculta-marcada{display:none;}
.asistencia-movil tbody tr[data-marcado="0"]{background:#f1f5f9;border-left-color:#94a3b8;}
.asistencia-movil tbody tr[data-marcado="1"][data-estado="presente"]{border-left-color:#047857;}
.asistencia-movil tbody tr[data-marcado="1"][data-estado="ausente"]{border-left-color:#b91c1c;}
.asistencia-movil tbody tr[data-marcado="1"][data-estado="tarde"]{border-left-color:#eab308;}
.asistencia-movil tbody tr[data-marcado="1"][data-estado="justificado"]{border-left-color:#2563eb;}
.asistencia-movil .col-nombre{font-size:1.05rem;line-height:1.25;color:var(--ink);}
.asistencia-movil .col-codigo{margin-top:-4px;font-size:.75rem;}
.asistencia-movil .col-codigo code{font-size:.75rem;color:var(--mut);background:none;padding:0;}
.asistencia-movil .col-encargado{font-size:.78rem;color:var(--mut);}
.asistencia-movil .enc-linea{display:block;}
.asistencia-movil .col-encargado:empty{display:none !important;}
/* El nombre, el código y el encargado son texto de solo lectura: sin fondo, borde ni reacción al puntero. */
.asistencia-movil tbody td,.asistencia-movil tbody tr:hover td{background:transparent !important;box-shadow:none;}
.asistencia-movil .col-nombre,.asistencia-movil .col-codigo,.asistencia-movil .col-encargado{cursor:default;}
.asistencia-movil .col-codigo code{background:none !important;border:0;padding:0;}
.asistencia-movil .col-obs .form-control,.asistencia-movil .col-motivo .form-control{height:44px;font-size:1rem;}
/* Observación y motivo (ambos opcionales) con Ausente, Tarde o Justificado; con Presente no hay campos. El servidor solo guarda el motivo con esos estados. */
.asistencia-movil tbody tr[data-estado="presente"] .col-obs,
.asistencia-movil tbody tr[data-estado="presente"] .col-motivo{display:none;}

/* Botones de estado: todos iguales sin seleccionar; el seleccionado va relleno con su color. */
.attendance-toggle{display:flex;gap:6px;}
.attendance-toggle .toggle-btn{flex:1 1 0;min-width:0;min-height:48px;margin:0 !important;padding:6px 8px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:.76rem;font-weight:600;line-height:1.15;border-radius:8px !important;
  background:#fff;color:#334155;border:2px solid #cbd5e1;cursor:pointer;user-select:none;}
.attendance-toggle .toggle-btn i{margin:0 0 3px !important;font-size:1rem;}
.toggle-btn.est-presente i{color:#047857;} .toggle-btn.est-ausente i{color:#b91c1c;}
.toggle-btn.est-tarde i{color:#a16207;}    .toggle-btn.est-justificado i{color:#1d4ed8;}
.attendance-toggle .toggle-btn:hover{border-color:#94a3b8;}
.attendance-toggle .toggle-btn:focus{outline:3px solid rgba(37,99,235,.35);outline-offset:1px;}
/* Seleccionado: solo si el beneficiario ya fue marcado ("sin marcar" no resalta ninguno). */
tr[data-marcado="1"] .toggle-btn.active i{color:inherit;}
tr[data-marcado="1"] .toggle-btn.est-presente.active{background:#047857;border-color:#047857;color:#fff;}
tr[data-marcado="1"] .toggle-btn.est-ausente.active{background:#b91c1c;border-color:#b91c1c;color:#fff;}
tr[data-marcado="1"] .toggle-btn.est-tarde.active{background:#facc15;border-color:#eab308;color:#422006;}
tr[data-marcado="1"] .toggle-btn.est-justificado.active{background:#1d4ed8;border-color:#1d4ed8;color:#fff;}

/* Guardar siempre visible abajo. */
.asistencia-movil .asis-guardar{position:sticky;bottom:0;z-index:1020;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -4px 12px rgba(15,23,42,.10);padding:10px 12px;}
.asistencia-movil .asis-guardar .btn{min-height:46px;font-weight:700;}

/* Teléfono: tarjeta apilada. */
@media (max-width: 767.98px){
  .asistencia-movil tbody tr{grid-template-columns:minmax(0,1fr);}
  .asistencia-movil .col-foto,.asistencia-movil .col-encargado{display:none !important;}
  /* En teléfono los tres botones de la barra llevan el rótulo en dos líneas, sin icono, para caber sin recortarse. */
  .asis-barra .asis-l3 .btn i{display:none;}
  .asis-barra .asis-l3 .btn{line-height:1.05;font-size:.78rem;min-height:44px;}
  .asis-barra .asis-masivo span,.asis-filtro #nSinMarcar{display:block;}
  .asis-barra .asis-l3{gap:6px;}
  .asistencia-movil .col-nombre{order:1;} .asistencia-movil .col-codigo{order:2;}
  .asistencia-movil .col-estado{order:3;} .asistencia-movil .col-obs{order:4;} .asistencia-movil .col-motivo{order:5;}
  .asistencia-movil .attendance-toggle .toggle-btn{padding:6px 2px;font-size:.74rem;}
  .asistencia-movil .asis-guardar .btn{width:100%;min-height:50px;font-size:1.05rem;}

  /* Historial de asistencias registradas: también sin desplazamiento lateral. */
  .tabla-historial-movil,.tabla-historial-movil tbody{display:block;width:100%;}
  .tabla-historial-movil thead{display:none;}
  .tabla-historial-movil tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 6px;padding:10px 12px;border-bottom:1px solid var(--line);}
  .tabla-historial-movil td{display:block;padding:0 !important;border:0 !important;}
  .tabla-historial-movil .h-fecha{order:1;flex:0 0 26%;font-weight:700;}
  .tabla-historial-movil .h-grupo{order:1;flex:1 1 40%;color:var(--mut);min-width:0;}
  .tabla-historial-movil .h-accion{order:2;flex:0 0 auto;}
  .tabla-historial-movil .h-cifra{order:3;flex:1 1 16%;min-width:0;}
  .tabla-historial-movil .h-cifra::before{content:attr(data-label);display:block;font-size:.65rem;font-weight:400;color:var(--mut);}
}
@media (max-width: 380px){ .attendance-toggle .toggle-btn{font-size:.7rem;} }

/* Pantalla grande: una línea por beneficiario (foto, nombre y código, estado, detalle). */
@media (min-width: 768px){
  .asis-barra{flex-direction:row;flex-wrap:wrap;align-items:center;padding:8px 14px;gap:8px 18px;}
  .asis-id{flex-direction:row;align-items:baseline;gap:14px;}
  .asis-l1{gap:18px;} .asis-l2{gap:14px;} .asis-l3{gap:8px;margin-left:auto;}
  .asis-masivo{flex:0 0 auto;padding:0 16px;}
  .asistencia-movil tbody tr{grid-template-columns:44px minmax(110px,1fr) 310px minmax(150px,1.2fr);
    grid-template-areas:"foto nombre estado obs" "foto codigo estado mot" "foto enc estado mot";align-items:center;}
  .asistencia-movil .col-foto{grid-area:foto;} .asistencia-movil .col-nombre{grid-area:nombre;}
  .asistencia-movil .col-codigo{grid-area:codigo;margin-top:0;} .asistencia-movil .col-encargado{grid-area:enc;}
  .asistencia-movil .col-estado{grid-area:estado;}
  .asistencia-movil .col-obs{grid-area:obs;} .asistencia-movil .col-motivo{grid-area:mot;}
  .asistencia-movil .col-obs .form-control,.asistencia-movil .col-motivo .form-control{height:36px;font-size:.88rem;}
  .asistencia-movil .attendance-toggle .toggle-btn{padding:6px 2px;font-size:.74rem;}
  .asistencia-movil .asis-guardar .btn{min-width:220px;}
}

/* Toma de asistencia — estado "ya registrada" (solo lectura) y resumen de confirmación. */
.asis-solo-lectura .toggle-btn{pointer-events:none;cursor:default;}
.asis-solo-lectura .toggle-btn:not(.active){opacity:.55;}
.asistencia-movil .col-obs:empty,.asistencia-movil .col-motivo:empty{display:none !important;}
.asistencia-movil .solo-texto{display:block;font-size:.9rem;color:var(--ink2);}
.asis-confirmacion .btn{white-space:nowrap;}
.asis-resumen{display:flex;flex-wrap:wrap;gap:6px;}
.asis-chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.85rem;font-weight:600;background:#fff;border:1px solid #cbd5e1;color:#334155;}
.asis-chip.c-presente{border-color:#047857;color:#047857;} .asis-chip.c-ausente{border-color:#b91c1c;color:#b91c1c;}
.asis-chip.c-tarde{border-color:#eab308;color:#854d0e;}     .asis-chip.c-justificado{border-color:#1d4ed8;color:#1d4ed8;}
.asis-corregir{background:#fff;color:#1e293b !important;border:2px solid #1e293b;border-radius:8px;font-weight:700;min-height:44px;}
.asis-corregir:hover,.asis-corregir:active{background:#1e293b;color:#fff !important;}

/* ===========================================================================
   Contenedor común, aviso de desplazamiento y controles táctiles (todas las páginas)
   Una sola regla de tema: ninguna pantalla define su propio margen lateral ni su propio
   ancho de tarjeta. Teléfono (< 768 px): 16 px a cada lado; el espacio vertical entre
   tarjetas es el margen inferior de .card (16 px) en todas las páginas.
   =========================================================================== */
.content-header .container-fluid,.content > .container-fluid{max-width:1400px;margin-left:auto;margin-right:auto;}

/* Aviso de desplazamiento en tablas anchas (ver assets/js/main.js): sombra del lado con contenido por ver + texto. */
.tr-envoltorio{position:relative;}
.tr-aviso{display:none;font-size:.78rem;color:var(--mut);text-align:right;padding:0 4px 4px;}
.tr-envoltorio.tr-con-scroll:not(.tr-mas-izq) .tr-aviso{display:block;}
.tr-envoltorio::before,.tr-envoltorio::after{content:"";position:absolute;top:0;bottom:0;width:22px;pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:2;}
.tr-envoltorio::before{left:0;background:linear-gradient(to right,rgba(15,23,42,.22),rgba(15,23,42,0));}
.tr-envoltorio::after{right:0;background:linear-gradient(to left,rgba(15,23,42,.22),rgba(15,23,42,0));}
.tr-envoltorio.tr-mas-izq::before,.tr-envoltorio.tr-mas-der::after{opacity:1;}
@media print{.tr-aviso,.tr-envoltorio::before,.tr-envoltorio::after{display:none !important;}}

.btn-texto{display:none;}

@media (max-width: 767.98px){
  .content,.content-header{padding-left:16px !important;padding-right:16px !important;}
  .content-header .container-fluid,.content > .container-fluid{padding-left:0;padding-right:0;}

  /* Controles táctiles: 44 px como mínimo. Los campos a 16 px evitan el zoom automático al enfocar en iOS. */
  .content .btn,.modal .btn,.login-box .btn{min-height:44px;}
  .content .btn,.modal .btn{min-width:44px;}
  .content .form-control,.modal .form-control,.login-box .form-control,
  .content .custom-select,.content .input-group-text,.login-box .input-group-text{min-height:44px;font-size:16px;}
  .content .btn-sm,.content .btn-xs{font-size:.9rem;}
  .pagination .page-link{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;}
  /* Filtros en línea: cada control en su propia fila, a todo el ancho (sin recortar el texto) (sobrescribe los anchos fijos en línea de cada página). */
  .content .form-inline{flex-direction:row !important;flex-wrap:wrap !important;align-items:flex-end !important;gap:10px !important;}
  .content .form-inline > *{flex:1 1 100%;width:auto !important;max-width:none !important;min-width:0;margin:0 !important;}
  .content .form-inline .form-control,.content .form-inline select{width:100% !important;max-width:none !important;}
  .content .form-inline .input-group > .form-control{width:1% !important;flex:1 1 auto;min-width:0;}
  .content .form-inline .form-group{display:flex;flex-direction:column;align-items:stretch;}
  .content .form-inline .form-group > label{margin:0 0 4px;}
  /* Encabezado de tarjeta: título y herramientas se acomodan sin encimarse. */
  .content .card-header{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
  .content .card-header .card-tools{float:none;margin:0 !important;}
  .asis-barra .timer-box{padding-top:0;padding-bottom:0;}
  .asis-barra .timer-box .btn{min-width:44px;min-height:44px;}
  .content .input-group .btn,.content .input-group-append .btn{min-width:44px;}

  /* Beneficiarios: la misma tabla se presenta como una tarjeta por beneficiario (la tabla se
     conserva en pantallas grandes). Nombre, código, aula y tutor, y acciones como botones táctiles. */
  .card-body-ben{padding:12px !important;}
  .tabla-ben-movil,.tabla-ben-movil tbody{display:block;width:100%;}
  .tabla-ben-movil thead{display:none;}
  .tabla-ben-movil tbody tr{display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 12px;padding:12px;margin:0 0 10px;
    background:#fff;border:1px solid var(--line);border-left:6px solid #047857;border-radius:var(--r);box-shadow:var(--sh);}
  .tabla-ben-movil tbody tr.ben-inactivo{border-left-color:#94a3b8;background:#f8fafc;}
  .tabla-ben-movil tbody td{display:block;padding:0 !important;border:0 !important;}
  .tabla-ben-movil tbody tr:hover td{background:transparent !important;}
  .tabla-ben-movil tbody tr > td[colspan]{grid-column:1 / -1;padding:16px 0 !important;}
  .tabla-ben-movil .col-foto{grid-column:1;grid-row:1 / span 3;align-self:start;}
  .tabla-ben-movil .col-nombre{grid-column:2;grid-row:1;font-size:1.05rem;line-height:1.25;color:var(--ink);}
  .tabla-ben-movil .col-codigo{grid-column:2;grid-row:2;}
  .tabla-ben-movil .col-codigo code{font-size:.75rem;color:var(--mut);background:none;padding:0;}
  .tabla-ben-movil .col-grupo{grid-column:2;grid-row:3;font-size:.9rem;}
  .tabla-ben-movil .col-estado{grid-column:1 / -1;margin-top:4px;}
  .tabla-ben-movil tbody tr:not(.ben-inactivo) .col-estado{display:none;}
  .tabla-ben-movil .col-nac,.tabla-ben-movil .col-genero,.tabla-ben-movil .col-enc,.tabla-ben-movil .col-pat{display:none;}
  .tabla-ben-movil .col-acciones{grid-column:1 / -1;display:flex;gap:8px;margin-top:8px;}
  .tabla-ben-movil .col-acciones .btn{flex:1 1 0;min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:600;}
  .tabla-ben-movil .btn-texto{display:inline;}
}

/* Sidebar contraído (solo iconos): se oculta el texto de la marca, queda el logotipo. */
.sidebar-collapse .main-sidebar .sb-marca-texto{display:none;}
.sidebar-collapse .main-sidebar .brand-link.sb-marca{justify-content:center;padding-left:0 !important;padding-right:0 !important;}
/* Sidebar contraído: el panel de usuario queda solo con el avatar centrado. Sin esto el nombre, con
   ajuste de línea, se apilaba letra por letra en una columna de 22 px y desordenaba todo el menú. */
.sidebar-collapse .main-sidebar .user-panel{margin:14px 0 6px !important;justify-content:center;}
.sidebar-collapse .main-sidebar .user-panel .info{display:none !important;}
.sidebar-collapse .main-sidebar .user-panel .image{padding:0 !important;width:auto;}

/* Menú lateral con medidas fijas: el espacio de la barra de desplazamiento se reserva siempre
   (scrollbar-gutter), así que cuando aparece al pasar el cursor el contenido ya no se corre ni el
   nombre cambia de línea. Márgenes del panel de usuario ajustados para que "Administrador CDI"
   quepa en una línea con o sin barra. */
.main-sidebar .sidebar{overflow-x:hidden !important;scrollbar-gutter:stable;}
.user-panel{margin:14px 10px 6px !important;}
.user-panel .info{padding-left:6px !important;}

/* ── Tablas como tarjetas en el teléfono (.tabla-movil) ─────────────────────────────────────────────────
   Una tabla con botones o campos obligaba a desplazarse hacia los lados para llegar a la acción. En pantallas
   angostas cada fila pasa a ser una tarjeta, con el nombre de la columna sobre cada dato. */
@media (max-width: 767.98px) {
  table.tabla-movil thead { display: none; }
  table.tabla-movil, table.tabla-movil tbody, table.tabla-movil tr, table.tabla-movil td { display: block; width: 100%; }
  table.tabla-movil tr { padding: 10px 14px; border-bottom: 1px solid var(--line, #e2e8f0); }
  table.tabla-movil td { border: 0 !important; padding: 3px 0 !important; text-align: left !important; min-width: 0 !important; }
  table.tabla-movil td.tm-oculta { display: none; }
  table.tabla-movil td[data-label]::before { content: attr(data-label); display: block; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mut, #64748b); }
  table.tabla-movil td.tm-sin-etiqueta.text-right, table.tabla-movil td:last-child:has(.btn) { padding-top: 8px !important; }
}
/* Variante en cuadrícula (.tm-grid): los datos cortos van de dos en dos para que la tarjeta no sea larguísima.
   La primera celda (el nombre o la fecha) y las de acciones ocupan todo el ancho. */
@media (max-width: 767.98px) {
  table.tabla-movil.tm-grid tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 14px; }
  table.tabla-movil.tm-grid td { width: auto; overflow-wrap: anywhere; }
  table.tabla-movil.tm-grid td:first-child, table.tabla-movil.tm-grid td.tm-sin-etiqueta, table.tabla-movil.tm-grid td[colspan] { grid-column: 1 / -1; }
  table.tabla-movil.tm-grid td input[type="checkbox"] { width: 22px; height: 22px; }
  table.tabla-movil.tm-grid td .btn-xs { min-width: 44px; min-height: 44px; }
  .table-responsive:has(> table.tabla-movil) { overflow-x: visible; }
  table.tabla-movil tfoot, table.tabla-movil tfoot tr { display: block; width: 100%; }
  /* Ficha de datos (etiqueta y valor en pares): una pareja por línea. */
  table.tabla-campos-movil, table.tabla-campos-movil tbody, table.tabla-campos-movil tr { display: block; width: 100%; }
  table.tabla-campos-movil th, table.tabla-campos-movil td { display: block; width: 100% !important; border: 0 !important; padding: 2px 0 !important; }
  table.tabla-campos-movil th { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; padding-top: 8px !important; }
  table.tabla-campos-movil th:empty, table.tabla-campos-movil td:empty { display: none; }
}
/* Matriz de permisos: sin desplazamiento lateral en el teléfono (nombres que se ajustan y casillas juntas). */
@media (max-width: 575.98px) {
  .table-permisos { table-layout: fixed; width: 100%; }
  .table-permisos th, .table-permisos td { padding: 6px 3px !important; font-size: .76rem; overflow-wrap: anywhere; }
  .table-permisos th:first-child, .table-permisos td:first-child { width: 40%; padding-left: 8px !important; }
  .table-permisos thead small { display: none; }
  /* Los nombres de rol van en vertical: tres columnas de ~50 px no alcanzan para «Administrativo» en horizontal. */
  .table-permisos thead th { font-size: .72rem; letter-spacing: 0; text-transform: none; overflow-wrap: normal; word-break: normal; }
  .table-permisos thead th:not(:first-child) { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; height: 118px; vertical-align: middle; text-align: left; }
}

/* ── Panel de ayuda plegable «¿Cómo funciona esta pantalla?» (includes/ayuda.php) ─────────────────────────
   Plegado ocupa una sola línea; el control de plegar mide al menos 44 px de alto (táctil). No se imprime. */
.ayuda-panel { background: var(--p-tint); border: 1px solid #c7d2fe; border-radius: var(--r); margin-bottom: 14px; overflow: hidden; }
.ayuda-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 14px; background: transparent; border: 0;
  color: var(--p2); font-weight: 700; font-size: .92rem; text-align: left; cursor: pointer; }
.ayuda-toggle:hover { background: rgba(79, 70, 229, .06); }
.ayuda-toggle:focus-visible { outline: 3px solid rgba(79, 70, 229, .45); outline-offset: -3px; }
.ayuda-icono { flex: 0 0 auto; font-size: 1.1rem; }
.ayuda-titulo { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ayuda-flecha { flex: 0 0 auto; transition: transform .15s ease; }
.ayuda-panel.plegado .ayuda-flecha { transform: rotate(180deg); }
.ayuda-cuerpo { padding: 0 16px 12px 16px; }
.ayuda-panel.plegado .ayuda-cuerpo { display: none; }
.ayuda-pasos { margin: 0; padding-left: 1.5rem; }
.ayuda-pasos li { padding: 3px 0; font-size: .9rem; line-height: 1.4; color: var(--ink3); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .ayuda-flecha { transition: none; } }
@media print { .ayuda-panel { display: none !important; } }

/* Encabezado del panel: el control de plegar ocupa lo que sobra y el botón «Ver recorrido» queda a su lado. */
.ayuda-cab { display: flex; align-items: stretch; }
.ayuda-cab .ayuda-toggle { flex: 1 1 auto; width: auto; min-width: 0; }
.ayuda-recorrido-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 0 14px; background: transparent;
  border: 0; border-left: 1px solid #c7d2fe; color: var(--p2); font-weight: 700; font-size: .85rem; cursor: pointer; }
.ayuda-recorrido-btn:hover { background: rgba(79, 70, 229, .08); }
.ayuda-recorrido-btn:focus-visible { outline: 3px solid rgba(79, 70, 229, .45); outline-offset: -3px; }
.ayuda-recorrido-btn .rec-txt-corto { display: none; }
@media (max-width: 479.98px) {
  .ayuda-recorrido-btn { padding: 0 12px; }
  .ayuda-recorrido-btn .rec-txt-largo { display: none; }
  .ayuda-recorrido-btn .rec-txt-corto { display: inline; }
}
.ayuda-recorrido-btn.rec-nuevo { animation: rec-late 1.6s ease-in-out infinite; }
@keyframes rec-late { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(79, 70, 229, 0); } 50% { box-shadow: inset 0 0 0 3px rgba(79, 70, 229, .35); } }
@media (prefers-reduced-motion: reduce) { .ayuda-recorrido-btn.rec-nuevo { animation: none; box-shadow: inset 0 0 0 2px rgba(79, 70, 229, .45); } }

/* ── Recorrido guiado (assets/js/recorrido.js) ─────────────────────────────────────────────────────────
   Capa transparente que bloquea los clics, recuadro que resalta el elemento (su sombra gigante oscurece el resto)
   y globo con la explicación: hoja fija abajo en el teléfono, flotante junto al elemento en pantalla grande. */
.rec-bloqueo { position: fixed; inset: 0; z-index: 2000; background: transparent; }
.rec-foco { position: fixed; z-index: 2001; pointer-events: none; border-radius: 12px; border: 3px solid #fff; outline: 3px solid var(--p);
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, .62); transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease; }
.rec-globo { position: fixed; z-index: 2002; background: #fff; color: var(--ink); border-radius: 14px; padding: 14px 16px 16px; box-shadow: 0 10px 30px rgba(15, 23, 42, .35); }
.rec-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.rec-paso { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--p); }
.rec-salir { width: 44px; height: 44px; margin: -8px -10px -8px 0; background: transparent; border: 0; border-radius: 10px; color: var(--mut); font-size: 1.05rem; cursor: pointer; }
.rec-titulo { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; }
.rec-texto { margin: 0 0 12px; font-size: .95rem; line-height: 1.45; color: var(--ink3); }
.rec-pie { display: flex; gap: 10px; }
.rec-btn { flex: 1 1 0; min-height: 44px; border-radius: 10px; font-weight: 700; font-size: .95rem; cursor: pointer; border: 1px solid var(--p); }
.rec-ant { background: #fff; color: var(--p2); }
.rec-sig { background: var(--p); color: #fff; }
.rec-btn:disabled { opacity: .4; cursor: default; }
.rec-btn:focus-visible, .rec-salir:focus-visible { outline: 3px solid rgba(79, 70, 229, .5); outline-offset: 2px; }
@media (max-width: 767.98px) {
  .rec-globo { left: 0; right: 0; bottom: 0; border-radius: 16px 16px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 767.98px) {
  /* Cuando el elemento resaltado queda abajo (p. ej. el botón de guardar), la hoja pasa arriba para no taparlo. */
  .rec-globo.rec-arriba { top: 0; bottom: auto; border-radius: 0 0 16px 16px; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 14px; }
}
@media (prefers-reduced-motion: reduce) { .rec-foco { transition: none; } }
@media print { .rec-bloqueo, .rec-foco, .rec-globo { display: none !important; } }

/* Menú lateral en el teléfono: la altura se mide con la barra del navegador (dvh) y se deja un colchón
   al final, para que la última opción («Cerrar Sesión») siempre se pueda alcanzar al deslizar. */
@media (max-width:991.98px){
  .main-sidebar{height:100vh;height:100dvh;}
  .main-sidebar .sidebar{padding-bottom:96px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
}