/*
 * Tema institucional TEG — Sistema de Marcaciones y Permisos.
 * Paleta y estructura de shell (sidebar/topbar) portadas del Sistema de
 * Transporte del TEG para unificar la identidad visual entre ambos sistemas.
 * Se carga después de Bootstrap y sus complementos para que sus reglas prevalezcan.
 */

:root {
  --teg-blue: #00508b;
  --teg-blue-dark: #003d6b;
  --teg-blue-soft: #eaf3f8;
  --teg-gold: #a87300;
  --teg-gold-light: #d7ad45;
  --teg-green: #4e9f32;
  --teg-lime: #b6d334;
  --teg-primary: var(--teg-blue);
  --teg-primary-dark: var(--teg-blue-dark);
  --teg-accent: var(--teg-gold);
  --teg-bg: #f5f7f9;
  --teg-sidebar: #004575;
  --teg-text: #172432;
  --teg-muted: #617080;
  --teg-border: #d8e0e7;
}

body {
  background: var(--teg-bg);
  color: var(--teg-text);
}

/* Se conserva la fuente actual del sistema (Poppins) sobre el cuerpo de texto,
   solo se corrige el fondo degradado morado por el fondo institucional plano. */

a { color: var(--teg-primary); }
.bg-primary { background-color: var(--teg-blue) !important; color: #fff !important; }
.text-primary { color: var(--teg-blue) !important; }
.border-primary { border-color: var(--teg-blue) !important; }

/* Clases heredadas de encabezados de tarjeta (usadas en varias pantallas):
   se retematizan aquí en lugar de tocar cada vista, para unificar colores. */
.bg-dark1 { background-color: var(--teg-blue-dark) !important; color: #fff !important; }
.bg-primary1 { background-color: var(--teg-blue) !important; color: #fff !important; }
.bg-secondary1 { background-color: #526474 !important; color: #fff !important; }
.bg-success1 { background-color: var(--teg-green) !important; color: #fff !important; }

/* ---------- Estructura del shell (sidebar + topbar) ---------- */
.app-shell { min-height: 100vh; }
.app-sidebar {
  width: 275px;
  background: linear-gradient(180deg, var(--teg-sidebar) 0%, var(--teg-blue-dark) 68%, #002c4d 100%);
  color: #fff;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox: el menú sigue siendo desplazable (rueda/touch), solo se oculta la barra visual */
  transition: width .22s ease, transform .22s ease;
}
.app-sidebar::-webkit-scrollbar { display: none; } /* Chrome/Edge/Safari */
.app-sidebar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--teg-lime) 0 28%, var(--teg-green) 28% 52%, var(--teg-gold) 52% 72%, #fff 72%);
}
.app-sidebar .brand { min-height: 92px; display: flex; align-items: center; gap: .8rem; padding: 1rem; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.app-sidebar .brand-logo { width: 56px; height: 56px; padding: .28rem; background: #fff; border-radius: .6rem; display: grid; place-items: center; flex: 0 0 auto; }
.app-sidebar .brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.app-sidebar .brand strong { display: block; font-size: .98rem; line-height: 1.25; }
.app-sidebar .brand small { display: block; color: #cbd5e1; }
.sidebar-section { padding: .65rem 0 .2rem; border-bottom: 1px solid rgba(255,255,255,.075); }
.sidebar-section-last { padding-bottom: 1rem; border-bottom: 0; }
.sidebar-label { display: flex; align-items: center; gap: .45rem; padding: .55rem 1.25rem .3rem; color: #8fc0d6; font-size: .65rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.sidebar-label i { color: var(--teg-lime); font-size: .72rem; }
.sidebar-nav { padding: 0 .7rem .55rem; }
.sidebar-nav .nav-list { list-style: none; padding: 0; margin: 0; display: block; }
.sidebar-nav .nav-link { min-height: 43px; color: #dbeafe !important; border: 1px solid transparent; border-radius: .65rem; padding: .48rem .65rem; display: flex; align-items: center; gap: .65rem; margin: .08rem 0; font-size: .92rem; text-decoration: none; }
.sidebar-icon { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: .5rem; color: #cce7f3; background: rgba(255,255,255,.07); }
.sidebar-nav .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.08); }
.sidebar-nav .nav-link.active { color: #fff !important; border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.14); box-shadow: inset 3px 0 0 var(--teg-lime); font-weight: 650; }
.sidebar-nav .nav-link.active .sidebar-icon { color: var(--teg-blue-dark); background: var(--teg-lime); }
.sidebar-nav .nav-tooltip { display: none; }

.app-main { margin-left: 275px; min-height: 100vh; transition: margin-left .22s ease; }
.sidebar-collapsed .app-sidebar { width: 78px; }
.sidebar-collapsed .app-main { margin-left: 78px; }
.sidebar-collapsed .app-sidebar .brand { min-height: 76px; justify-content: center; padding: .65rem; }
.sidebar-collapsed .app-sidebar .brand-logo { width: 46px; height: 46px; }
.sidebar-collapsed .app-sidebar .brand > span:last-child,
.sidebar-collapsed .app-sidebar .brand strong,
.sidebar-collapsed .app-sidebar .brand small { display: none; }
.sidebar-collapsed .sidebar-label { justify-content: center; height: 25px; padding: .35rem 0; font-size: 0; }
.sidebar-collapsed .sidebar-label i { font-size: .8rem; }
.sidebar-collapsed .sidebar-nav .nav-link { justify-content: center; padding: .4rem; }
.sidebar-collapsed .sidebar-nav .nav-link .nav-label { display: none; }
.sidebar-collapsed .sidebar-icon { width: 36px; height: 36px; }

.sidebar-toggle { width: 42px; height: 42px; flex: 0 0 auto; padding: 0; font-size: 1.2rem; border: 0; background: transparent; color: var(--teg-blue-dark); }
.sidebar-toggle:hover { background: var(--teg-blue-soft); border-radius: .5rem; }
.sidebar-backdrop { display: none; position: fixed; z-index: 1035; inset: 0; border: 0; background: rgba(0,25,43,.48); backdrop-filter: blur(2px); }

.app-topbar { min-height: 74px; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--teg-border); box-shadow: 0 2px 12px rgba(0,61,107,.05); position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; }
.topbar-back { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .85rem; border: 1px solid var(--teg-border); border-radius: .55rem; color: var(--teg-muted); font-size: .84rem; font-weight: 650; text-decoration: none; background: #fff; }
.topbar-back:hover { color: var(--teg-blue-dark); border-color: var(--teg-blue); background: var(--teg-blue-soft); }
.topbar-title { min-width: 0; line-height: 1.2; flex: 1 1 auto; }
.topbar-title > strong { display: block; font-size: 1.05rem; color: var(--teg-blue-dark); }
.topbar-title > span { display: block; margin-top: .18rem; font-size: .72rem; color: var(--teg-muted); }
.topbar-actions { flex: 0 1 auto; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .6rem; min-width: 0; }
.page-content { padding: 1.5rem; }

/* ---------- Menú de usuario (topbar) ---------- */
.topbar-user { position: relative; }
.topbar-user-btn { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--teg-border); background: #fff; border-radius: .65rem; padding: .3rem .7rem .3rem .3rem; cursor: pointer; }
.topbar-user-btn:hover { background: var(--teg-blue-soft); }
.topbar-user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--teg-blue); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; flex: 0 0 auto; }
.topbar-user-info { line-height: 1.15; text-align: left; }
.topbar-user-info strong { display: block; font-size: .85rem; color: var(--teg-text); }
.topbar-user-info span { display: block; font-size: .7rem; color: var(--teg-muted); }
.topbar-user-btn > i.fa-chevron-down { color: var(--teg-muted); font-size: .7rem; }
.topbar-user-menu { display: none; position: absolute; right: 0; top: calc(100% + .5rem); min-width: 210px; background: #fff; border: 1px solid var(--teg-border); border-radius: .65rem; box-shadow: 0 14px 32px rgba(15,23,42,.14); padding: .4rem; z-index: 1030; }
.topbar-user.open .topbar-user-menu { display: block; }
.topbar-user-menu a, .topbar-user-menu button { display: flex; align-items: center; gap: .6rem; width: 100%; border: 0; background: transparent; text-align: left; padding: .55rem .7rem; border-radius: .5rem; font-size: .87rem; color: var(--teg-text); text-decoration: none; }
.topbar-user-menu a:hover, .topbar-user-menu button:hover { background: var(--teg-blue-soft); color: var(--teg-blue-dark); }
.topbar-user-menu i { width: 18px; text-align: center; color: var(--teg-muted); }
.topbar-user-menu hr { margin: .3rem 0; border-color: var(--teg-border); }

/* ---------- Tarjetas de estado (pestañas de filtro con contador) ---------- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .85rem; margin-bottom: 1.25rem; }
.stat-card { display: flex; align-items: center; gap: .75rem; background: #fff; border: 1px solid var(--teg-border); border-left: 4px solid var(--teg-border); border-radius: .7rem; padding: .85rem 1rem; text-decoration: none; color: inherit; box-shadow: 0 3px 12px rgba(15,23,42,.04); }
a.stat-card:hover { border-color: var(--teg-primary); box-shadow: 0 8px 20px rgba(0,80,139,.1); transform: translateY(-1px); }
.stat-card.active { border-left-color: var(--teg-gold); background: #fffaf0; }
.stat-card-icon { width: 42px; height: 42px; border-radius: .6rem; display: grid; place-items: center; font-size: 1.05rem; flex: 0 0 auto; color: #fff; background: var(--teg-muted); }
.stat-card-body { min-width: 0; flex: 1 1 auto; line-height: 1.2; }
.stat-card-body strong { display: block; font-size: .87rem; color: var(--teg-text); }
.stat-card-body span { display: block; margin-top: .1rem; font-size: .72rem; color: var(--teg-muted); }
.stat-card-count { flex: 0 0 auto; min-width: 28px; height: 28px; padding: 0 .4rem; border-radius: 50rem; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .82rem; background: var(--teg-muted); }
.stat-card[data-tone="warning"] .stat-card-icon, .stat-card[data-tone="warning"] .stat-card-count { background: #a96608; }
.stat-card[data-tone="info"] .stat-card-icon, .stat-card[data-tone="info"] .stat-card-count { background: #087f8c; }
.stat-card[data-tone="primary"] .stat-card-icon, .stat-card[data-tone="primary"] .stat-card-count { background: var(--teg-blue); }
.stat-card[data-tone="success"] .stat-card-icon, .stat-card[data-tone="success"] .stat-card-count { background: #397b2d; }
.stat-card[data-tone="danger"] .stat-card-icon, .stat-card[data-tone="danger"] .stat-card-count { background: #b42332; }

/* ---------- Panel de inicio: franja de bienvenida y selector de módulos ---------- */
.welcome-strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .85rem; background: #fff; border: 1px solid var(--teg-border); border-radius: .85rem; padding: 1.1rem 1.4rem; margin-bottom: 1.25rem; box-shadow: 0 3px 12px rgba(15,23,42,.04); }
.welcome-strip h1 { color: var(--teg-text); }
.welcome-role { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 50rem; background: var(--teg-blue-soft); color: var(--teg-blue-dark); font-size: .78rem; font-weight: 650; white-space: nowrap; }

.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.module-tile { position: relative; display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--teg-border); border-radius: .9rem; padding: 1.15rem 1.25rem; text-decoration: none; color: inherit; box-shadow: 0 3px 14px rgba(15,23,42,.05); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.module-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,80,139,.14); border-color: var(--teg-primary); color: inherit; }
.module-tile-icon { width: 52px; height: 52px; flex: 0 0 auto; border-radius: .75rem; display: grid; place-items: center; font-size: 1.35rem; color: #fff; background: var(--teg-muted); }
.module-tile-body { min-width: 0; flex: 1 1 auto; }
.module-tile-body strong { display: block; font-size: 1rem; color: var(--teg-text); margin-bottom: .15rem; }
.module-tile-body span { display: block; font-size: .82rem; color: var(--teg-muted); line-height: 1.35; }
.module-tile-arrow { color: var(--teg-border); font-size: .85rem; flex: 0 0 auto; transition: color .15s ease, transform .15s ease; }
.module-tile:hover .module-tile-arrow { color: var(--teg-primary); transform: translateX(3px); }
.module-tile-badge { position: absolute; top: -8px; right: -8px; min-width: 24px; height: 24px; padding: 0 .4rem; border-radius: 50rem; background: var(--teg-gold); color: #fff; font-size: .74rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.module-tile[data-tone="warning"] .module-tile-icon { background: #a96608; }
.module-tile[data-tone="info"] .module-tile-icon { background: #087f8c; }
.module-tile[data-tone="primary"] .module-tile-icon { background: var(--teg-blue); }
.module-tile[data-tone="success"] .module-tile-icon { background: #397b2d; }
.module-tile[data-tone="danger"] .module-tile-icon { background: #b42332; }
.module-tile[data-tone="secondary"] .module-tile-icon { background: #526474; }

/* ---------- Botones de acción de tabla (cuadrados, solo ícono) ---------- */
.table-actions { display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
.btn-icon { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem; font-size: .85rem; border: 1px solid var(--teg-border); background: #fff; }
.btn-icon:hover { transform: translateY(-1px); }
.btn-icon.btn-icon-info { color: #087f8c; border-color: #bfe3e7; }
.btn-icon.btn-icon-info:hover { background: #087f8c; color: #fff; }
.btn-icon.btn-icon-warning { color: #a96608; border-color: #f0dcb2; }
.btn-icon.btn-icon-warning:hover { background: #a96608; color: #fff; }
.btn-icon.btn-icon-success { color: #397b2d; border-color: #c3ddb9; }
.btn-icon.btn-icon-success:hover { background: #397b2d; color: #fff; }
.btn-icon.btn-icon-secondary { color: #526474; border-color: var(--teg-border); }
.btn-icon.btn-icon-secondary:hover { background: #526474; color: #fff; }
.btn-icon.btn-icon-danger { color: #b42332; border-color: #edc0c6; }
.btn-icon.btn-icon-danger:hover { background: #b42332; color: #fff; }

/* ---------- Calendario (Mi Calendario / Calendario Admin) ---------- */
.calendar-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; background: #fff; border: 1px solid var(--teg-border); border-left: 4px solid var(--teg-gold); border-radius: .7rem; padding: .9rem 1.2rem; margin-bottom: .85rem; }
.calendar-eyebrow { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teg-gold); }
.calendar-title { margin: .1rem 0 0; font-size: 1.5rem; font-weight: 750; color: var(--teg-blue-dark); }
.calendar-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.calendar-nav-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--teg-border); background: #fff; border-radius: .5rem; color: var(--teg-blue-dark); }
.calendar-nav-btn:hover { background: var(--teg-blue-soft); }
.calendar-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; background: #fff; border: 1px solid var(--teg-border); border-radius: .7rem; padding: .7rem 1.2rem; margin-bottom: 1rem; }
.calendar-legend-item { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--teg-muted); }
.calendar-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.calendar-legend-hours { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--teg-muted); padding: .25rem .65rem; background: var(--teg-blue-soft); border-radius: 50rem; }
.calendar-legend-hours i { color: var(--teg-primary); }
.calendar-legend-hours strong { color: var(--teg-blue-dark); }
.calendar-legend-count { margin-left: auto; font-size: .78rem; font-weight: 650; color: var(--teg-blue-dark); }
.calendar-wrap .fc { --fc-border-color: var(--teg-border); --fc-today-bg-color: var(--teg-blue-soft); font-family: inherit; }
.calendar-wrap .fc-col-header-cell { background: #eef4f8; }
.calendar-wrap .fc-col-header-cell-cushion { padding: .5rem; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: #344054; text-decoration: none; }
.calendar-wrap .fc-daygrid-day-frame { min-height: 92px; }
.calendar-wrap .fc-daygrid-day-number { font-size: .82rem; color: var(--teg-text); text-decoration: none; padding: .3rem; }
.calendar-wrap .fc-daygrid-event {
  border: 0; border-left: 3px solid #94a3b8; background: #f8fafc !important; color: var(--teg-text) !important;
  border-radius: .35rem; margin: 1px 3px; padding: .18rem .4rem; font-size: .72rem;
}
.calendar-wrap .fc-daygrid-event:hover { background: #eef2f6 !important; }
.calendar-wrap .fc-daygrid-event .fc-event-time { font-weight: 700; }
.calendar-wrap .fc-list-event-dot { display: none; }
/* Chip de evento (ícono + resumen de una línea) — ver public/js/teg-calendar.js */
.calendar-wrap .fc-event-chip { display: flex; align-items: center; gap: .32rem; overflow: hidden; }
.calendar-wrap .fc-event-chip i { flex: 0 0 auto; font-size: .62rem; opacity: .85; }
.calendar-wrap .fc-event-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-wrap .fc-daygrid-more-link { color: var(--teg-primary); font-weight: 650; font-size: .72rem; }
.calendar-wrap .fc-popover { border: 1px solid var(--teg-border); border-radius: .6rem; box-shadow: 0 10px 30px rgba(15,23,42,.12); overflow: hidden; }
.calendar-wrap .fc-popover-header { background: #eef4f8; color: var(--teg-text); padding: .5rem .75rem; }
.calendar-wrap .fc-popover-body { padding: .4rem; }

/* ---------- Asistente "Completar Expediente" (wizard por pasos) ---------- */
.wizard-progress { background: #fff; border: 1px solid var(--teg-border); border-radius: .7rem; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.wizard-progress-bar { height: 10px; border-radius: 50rem; background: var(--teg-border); overflow: hidden; margin-bottom: .9rem; }
.wizard-progress-bar > div { height: 100%; background: linear-gradient(90deg, var(--teg-lime), var(--teg-green)); border-radius: 50rem; transition: width .3s ease; }
.wizard-progress-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; font-size: .85rem; color: var(--teg-muted); }
.wizard-progress-label strong { font-size: 1.05rem; color: var(--teg-blue-dark); }
.wizard-steps { display: flex; flex-wrap: wrap; gap: .4rem; }
.wizard-step-btn { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--teg-border); background: #fff; border-radius: .55rem; padding: .4rem .75rem; font-size: .8rem; color: var(--teg-muted); cursor: pointer; }
.wizard-step-btn:hover { border-color: var(--teg-primary); }
.wizard-step-btn.active { border-color: var(--teg-blue); background: var(--teg-blue-soft); color: var(--teg-blue-dark); font-weight: 650; }
.wizard-step-num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700; background: var(--teg-border); color: #fff; flex: 0 0 auto; }
.wizard-step-btn.done .wizard-step-num { background: #397b2d; }
.wizard-step-btn.active .wizard-step-num { background: var(--teg-blue); }
.wizard-pane { display: none; }
.wizard-pane.active { display: block; }
.wizard-nav { display: flex; justify-content: space-between; margin-top: 1rem; }

/* ---------- Indicador de flujo por pasos ---------- */
.flow-steps { display: flex; align-items: center; gap: 0; }
.flow-step { display: flex; align-items: center; }
.flow-step-icon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .68rem; color: #fff; background: var(--teg-border); flex: 0 0 auto; }
.flow-step.done .flow-step-icon { background: #397b2d; }
.flow-step.current .flow-step-icon { background: var(--teg-blue); }
.flow-step-line { width: 26px; height: 2px; background: var(--teg-border); }
.flow-step.done + .flow-step-line, .flow-step-line.done { background: #397b2d; }
.flow-step-label { display: none; }
.approval-timeline-icon { width: 34px; height: 34px; line-height: 34px; flex: 0 0 34px; }
@media (min-width: 1200px) {
  .flow-step-label { display: inline; font-size: .68rem; color: var(--teg-muted); margin: 0 .3rem 0 .35rem; white-space: nowrap; }
}

@media (max-width: 991.98px) {
  .app-sidebar, .sidebar-collapsed .app-sidebar { width: 275px; transform: translateX(-100%); box-shadow: 15px 0 35px rgba(0,25,43,.24); }
  .app-sidebar.show, .sidebar-collapsed .app-sidebar.show { transform: translateX(0); }
  .sidebar-collapsed .app-sidebar .brand { min-height: 92px; justify-content: flex-start; padding: 1rem; }
  .sidebar-collapsed .app-sidebar .brand-logo { width: 56px; height: 56px; }
  .sidebar-collapsed .app-sidebar .brand strong,
  .sidebar-collapsed .app-sidebar .brand small { display: block; }
  .sidebar-collapsed .sidebar-label { justify-content: flex-start; height: auto; padding: .55rem 1.25rem .3rem; font-size: .65rem; }
  .sidebar-collapsed .sidebar-nav .nav-link { justify-content: flex-start; padding: .48rem .65rem; }
  .sidebar-collapsed .sidebar-nav .nav-link .nav-label { display: inline; }
  .sidebar-backdrop.show { display: block; }
  .app-main { margin-left: 0; }
  .page-content { padding: 1rem; }
}
@media (max-width: 575.98px) {
  .app-topbar { gap: .5rem; padding: 0 .75rem; }
  .topbar-actions .btn span { display: none; }
}
@media print { .app-sidebar, .app-topbar, .no-print { display: none !important; } .app-main { margin: 0; } }

/* ---------- Botones ---------- */
.btn { border-radius: .58rem; font-weight: 650; transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { color: #fff; background: #075985; border-color: #075985; box-shadow: 0 3px 9px rgba(7,89,133,.18); }
.btn-primary:hover, .btn-primary:focus { color: #fff; background: #06476a; border-color: #06476a; box-shadow: 0 5px 13px rgba(7,89,133,.25); }
.btn-secondary { color: #fff; background: #526474; border-color: #526474; }
.btn-secondary:hover, .btn-secondary:focus { color: #fff; background: #3f4e5b; border-color: #3f4e5b; }
.btn-success { color: #fff; background: #397b2d; border-color: #397b2d; }
.btn-success:hover, .btn-success:focus { color: #fff; background: #2d6324; border-color: #2d6324; }
.btn-info { color: #fff; background: #087f8c; border-color: #087f8c; }
.btn-info:hover, .btn-info:focus { color: #fff; background: #066772; border-color: #066772; }
.btn-warning { color: #fff; background: #a96608; border-color: #a96608; }
.btn-warning:hover, .btn-warning:focus { color: #fff; background: #885106; border-color: #885106; }
.btn-danger { color: #fff; background: #b42332; border-color: #b42332; }
.btn-danger:hover, .btn-danger:focus { color: #fff; background: #8f1c28; border-color: #8f1c28; }
.btn-outline-primary { color: #075985; border-color: #79a7bf; background: #fff; }
.btn-outline-primary:hover, .btn-outline-primary:focus { color: #fff; background: #075985; border-color: #075985; }
.btn-outline-secondary { color: #465766; border-color: #aab7c2; background: #fff; }
.btn-outline-secondary:hover, .btn-outline-secondary:focus { color: #fff; background: #526474; border-color: #526474; }

/* ---------- Formularios, tarjetas, tablas ---------- */
.form-control, .form-select { border-color: #b9c6d3; min-height: 42px; }
.form-control:focus, .form-select:focus, .btn:focus-visible, .nav-link:focus-visible { box-shadow: 0 0 0 .22rem rgba(7,89,133,.22); border-color: var(--teg-primary); }
.card { border: 1px solid var(--teg-border); border-radius: .85rem; box-shadow: 0 4px 18px rgba(15, 23, 42, .05); }
.card-header { border-bottom-color: var(--teg-border); padding: 1rem 1.2rem; }
.table { --bs-table-bg: transparent; }

/* Tabla moderna unificada: cabecera clara (nunca el lavanda de .table-primary
   ni ningún otro color heredado de estilos anteriores), sin líneas de cuadrícula
   (table-bordered) y sin cebra (table-striped) — solo un borde inferior
   sutil por fila y resalte al pasar el mouse. Se usa !important porque
   DataTables inyecta su propio selector de alta especificidad
   (`table.table.dataTable > :not(caption) > * > *`, ver
   dataTables.bootstrap5.css) que de otro modo gana por especificidad aunque
   este archivo se cargue al final.
   Ver components/action-link.blade.php y action-form.blade.php para los
   botones cuadrados de la columna Acciones, que NO cambian con esto. */
.table thead th,
.table thead.thead-light th,
table.dataTable thead th {
  background-color: #f8fafc !important;
  color: #475467 !important;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 2px solid #e4e9f0 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
}
.table tbody td,
.table tbody th,
table.dataTable tbody td,
table.dataTable tbody th {
  background-color: #fff !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid #eef1f5 !important;
  vertical-align: middle;
}
.table-hover > tbody > tr:hover > *,
table.dataTable.table-hover > tbody > tr:hover > * {
  background-color: #f4f7fa !important;
}
.badge { border-radius: 50rem; padding: .32rem .7rem; font-weight: 650; }
.badge-lg { font-size: .8rem; padding: .35rem .6rem; }
/* Colores institucionales para los distintivos de estado; la hoja base trae sus
   propios bg-warning/danger/etc. en tonos saturados (naranja/rosa fuerte)
   que no combinan con la paleta azul/dorado del sistema. Mismos tonos que
   ya usan .stat-card, .module-tile y .filter-stat (data-tone), para que
   un mismo estado se vea igual en toda la pantalla. Se scoping a
   ".badge.bg-*" (no ".bg-*" a secas) para no tocar botones ni alerts. */
.badge.bg-warning { background-color: #a96608 !important; color: #fff !important; }
.badge.bg-danger { background-color: #b42332 !important; color: #fff !important; }
.badge.bg-success { background-color: #397b2d !important; color: #fff !important; }
.badge.bg-info { background-color: #087f8c !important; color: #fff !important; }
.badge.bg-primary { background-color: var(--teg-blue) !important; color: #fff !important; }
.badge.bg-secondary { background-color: #526474 !important; color: #fff !important; }
/* Tablas largas (marcaciones, usuarios, etc.): cabecera fija + scroll interno */
.table-responsive .table-striped { max-height: 500px; overflow-x: auto; overflow-y: auto; scrollbar-width: thin; }
.table-responsive .table-striped thead th { position: sticky; top: 0; z-index: 1; }

/* Buscador de DataTables — componente único reutilizado en todas las
   tablas del sistema (ver dom:'frtip' en layouts/app.blade.php, que ya
   quita el selector "Mostrar X registros" en todas ellas). Solo queda el
   buscador, con ícono y una caja tipo píldora en vez del <input> plano. */
.dataTables_wrapper { padding-top: .1rem; }
.dataTables_filter { display: flex; justify-content: flex-end; margin-bottom: .9rem; }
.dataTables_filter label { position: relative; display: flex; align-items: center; margin: 0; width: 100%; max-width: 280px; font-size: 0; }
.dataTables_filter label::before {
  content: "\f002";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: .85rem;
  color: var(--teg-muted);
  font-size: .82rem;
  pointer-events: none;
}
.dataTables_wrapper .dataTables_filter input[type="search"] {
/* !important: complementos como DataTables
     se cargan DESPUÉS de este archivo y traen su propio selector con la
     misma especificidad (.dataTables_wrapper .dataTables_filter input),
     así que ganaría por orden de carga si no se fuerza aquí. */
  width: 100% !important;
  border: 1px solid var(--teg-border) !important;
  border-radius: 50rem !important;
  padding: .5rem .9rem .5rem 2.15rem !important;
  font-size: .86rem !important;
  background: #fff !important;
  color: var(--teg-text) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dataTables_wrapper .dataTables_filter input[type="search"]:focus {
  outline: none !important;
  border-color: var(--teg-primary) !important;
  box-shadow: 0 0 0 .18rem rgba(0,80,139,.15) !important;
}
.dataTables_filter input[type="search"]::placeholder { color: #93a2b1; }
@media (max-width: 576px) {
  .dataTables_filter { justify-content: stretch; }
  .dataTables_filter label { max-width: none; }
}

/* Pie de tabla (info + paginación): mismo componente en las 11 pantallas
   con DataTables — solo recolorea/agrega íconos sobre el float izq/der que
   ya trae dataTables.min.css, sin cambiar su estructura. */
.dataTables_wrapper::after { content: ""; display: block; clear: both; }
.dataTables_info {
  color: var(--teg-muted) !important;
  font-size: .84rem !important;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.dataTables_info::before {
  content: "\f129";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  width: 20px; height: 20px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--teg-blue-soft);
  color: var(--teg-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
}
.dataTables_paginate .paginate_button {
  border-radius: .45rem !important;
  color: var(--teg-primary) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  font-size: .85rem !important;
}
.dataTables_paginate .paginate_button.disabled { color: #b7c2cc !important; }
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: var(--teg-primary) !important;
  color: #fff !important;
  border-color: var(--teg-primary) !important;
}
.dataTables_paginate .paginate_button:not(.disabled):not(.current):hover {
  background: var(--teg-blue-soft) !important;
  color: var(--teg-blue-dark) !important;
}
.dataTables_paginate .paginate_button.previous::before { content: "\f053"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: .4rem; font-size: .7rem; }
.dataTables_paginate .paginate_button.next::after { content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left: .4rem; font-size: .7rem; }

/* ---------- Encabezado de tarjeta moderno (icono circular + subtítulo) ---------- */
/* Componente: resources/views/components/card-header.blade.php */
.card-header-modern {
  position: relative;
  overflow: hidden;
  background: var(--teg-blue-dark);
  color: #fff;
  border-radius: .85rem .85rem 0 0;
  padding: 1.35rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  border-bottom: 0;
}
.card-header-modern-bgicon {
  position: absolute;
  right: -.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 6rem;
  color: rgba(255,255,255,.07);
  pointer-events: none;
}
.card-header-modern-icon {
  position: relative;
  z-index: 1;
  width: 56px; height: 56px; flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  color: #fff;
  background: rgba(255,255,255,.08);
}
.card-header-modern-body { position: relative; z-index: 1; min-width: 0; }
.card-header-modern-body strong { display: block; font-size: 1.18rem; font-weight: 700; line-height: 1.25; }
.card-header-modern-body span { display: block; margin-top: .2rem; font-size: .85rem; color: rgba(255,255,255,.8); font-weight: 400; }

/* ---------- Encabezado de perfil (foto centrada + nombre) ---------- */
/* Usado en empleados/show.blade.php en vez de card-header-modern: la foto
   necesita ir centrada y más grande que el ícono circular genérico. */
.profile-header {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--teg-blue-dark) 0%, var(--teg-blue) 100%);
  color: #fff;
  text-align: center;
  padding: 2rem 1.5rem 1.6rem;
  border-radius: .85rem .85rem 0 0;
}
.profile-header-photo {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  margin: 0 auto .9rem;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.12);
  display: grid;
  place-items: center;
  font-size: 2.1rem;
  overflow: hidden;
}
.profile-header-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-header-name { position: relative; z-index: 1; margin: 0; font-size: 1.35rem; font-weight: 700; }
.profile-header-meta { position: relative; z-index: 1; font-size: .85rem; color: rgba(255,255,255,.8); margin-top: .25rem; }
.profile-header-badge { position: relative; z-index: 1; margin-top: .9rem; }

/* Recolorea encabezados de tarjeta que usaban los tonos chillones de
   hoja base (bg-info cian, bg-danger rosado) para que combinen con la
   paleta institucional — mismos tonos que ya usan .stat-card/.module-tile. */
.card-header.bg-info { background-color: #087f8c !important; color: #fff !important; }
.card-header.bg-danger { background-color: #b42332 !important; color: #fff !important; }

/* ---------- Barra informativa + buscador en una sola fila ---------- */
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.table-toolbar .info-bar { flex: 1 1 320px; margin: 0; }
.table-toolbar .dataTables_filter { margin-bottom: 0; flex: 0 0 auto; }
.info-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--teg-blue-soft);
  border-left: 3px solid var(--teg-primary);
  border-radius: .5rem;
  padding: .7rem 1rem;
  color: var(--teg-text);
  font-size: .9rem;
}

/* ---------- Fila de filtro + estadísticas rápidas (fecha seleccionada, etc.) ---------- */
.filter-row { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; padding: 1.1rem 1.3rem; background: #fff; border: 1px solid var(--teg-border); border-radius: .85rem; margin-bottom: 1rem; }
.filter-row-divider { width: 1px; align-self: stretch; background: var(--teg-border); }
.filter-stats { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.filter-stat { display: flex; align-items: center; gap: .7rem; }
.filter-stat-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; flex: 0 0 auto; background: var(--teg-blue-soft); color: var(--teg-primary); }
.filter-stat[data-tone="success"] .filter-stat-icon { background: #e6f4ec; color: #1a6b3c; }
.filter-stat-body span { display: block; font-size: .74rem; color: var(--teg-muted); }
.filter-stat-body strong { display: block; font-size: .92rem; color: var(--teg-text); }

/* ---------- Cuadrícula de detalle (pares etiqueta/valor de solo lectura) ---------- */
/* Reemplaza los <ul class="list-unstyled"> y <table> de pura lectura usados
   en license/justify, license_admin/show y marking/showUser. */
.detail-card { background: #fff; border: 1px solid var(--teg-border); border-radius: .7rem; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem 1.5rem; }
.detail-item span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--teg-muted); margin-bottom: .2rem; }
.detail-item strong { display: block; font-size: .92rem; color: var(--teg-text); font-weight: 600; line-height: 1.35; }
.detail-item strong:empty::before { content: "—"; color: var(--teg-muted); font-weight: 400; }

/* ---------- Títulos de sección dentro de un formulario ---------- */
/* Reemplaza los <h3 class="form-label"> + <hr> usados en los formularios de
   solicitud (license/create + partials/campos_dinamicos): esos <h3> se
   veían como títulos de página en medio de un formulario. */
.form-section-title {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--teg-blue-dark);
  margin: 1.4rem 0 .7rem;
  padding-top: 1rem;
  border-top: 1px solid var(--teg-border);
}
.form-section-title:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.radio-option-list { display: flex; flex-direction: column; gap: .5rem; }
.radio-option-list .form-check { padding: .5rem .75rem; border: 1px solid var(--teg-border); border-radius: .5rem; margin: 0; }
.radio-option-list .form-check-input { margin-top: .2rem; }
.radio-option-list .form-check:has(.form-check-input:checked) { border-color: var(--teg-primary); background: var(--teg-blue-soft); }

/* ---------- Estado vacío de DataTables (icono + texto centrados) ---------- */
.table td.dataTables_empty {
  padding: 2.75rem 1rem !important;
  color: var(--teg-muted) !important;
  background: #fff !important;
}
.table td.dataTables_empty::before {
  content: "\f187";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: block;
  width: 52px; height: 52px;
  line-height: 52px;
  text-align: center;
  margin: 0 auto .6rem;
  border-radius: 50%;
  background: var(--teg-blue-soft);
  color: var(--teg-primary);
  font-size: 1.3rem;
}

/* ---------- Tabla compacta (para que quepa sin scroll horizontal) ---------- */
/* !important: algunas hojas base aumentan el relleno de las tablas dentro de tarjetas
   con más especificidad (dos clases) que gana aunque este archivo se cargue
   al final. */
.table-compact th, .table-compact td { padding: .4rem .55rem !important; font-size: .82rem; white-space: normal; }
.table-truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; }

/* ---------- Chip de estado (punto + texto, más suave que un badge sólido) ---------- */
.status-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .7rem; border-radius: 50rem; font-size: .78rem; font-weight: 650; white-space: nowrap; }
.status-chip .status-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.status-chip[data-tone="success"] { background: #e6f4ec; color: #1a6b3c; }
.status-chip[data-tone="success"] .status-dot { background: #1a6b3c; }
.status-chip[data-tone="secondary"] { background: #eef1f4; color: #526474; }
.status-chip[data-tone="secondary"] .status-dot { background: #526474; }
.status-chip[data-tone="warning"] { background: #fef3e2; color: #a96608; }
.status-chip[data-tone="warning"] .status-dot { background: #a96608; }
.status-chip[data-tone="danger"] { background: #fbe7e9; color: #b42332; }
.status-chip[data-tone="danger"] .status-dot { background: #b42332; }

/* ---------- Barra de progreso mini (% de completitud en una celda) ---------- */
.progress-mini { display: flex; align-items: center; gap: .55rem; min-width: 96px; }
.progress-mini-track { flex: 1 1 auto; height: 6px; border-radius: 50rem; background: var(--teg-border); overflow: hidden; }
.progress-mini-fill { height: 100%; border-radius: 50rem; }
.progress-mini-label { font-size: .76rem; font-weight: 700; color: var(--teg-text); min-width: 34px; text-align: right; flex: 0 0 auto; }

/* ---------- Estados de página vacíos y componentes varios ---------- */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--teg-muted); }

/* ---------- Acceso institucional (login) ---------- */
.guest-shell { min-height: 100vh; }
.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(430px, 46%) 1fr; background: #fff; }
.login-brand-panel { position: relative; overflow: hidden; color: #fff; padding: clamp(2rem, 5vw, 5rem); display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(145deg, #00395f 0%, var(--teg-blue) 58%, #00639c 100%); }
.login-brand-panel::before { content: ""; position: absolute; width: 520px; height: 520px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; right: -270px; top: -190px; box-shadow: 0 0 0 75px rgba(255,255,255,.035), 0 0 0 150px rgba(255,255,255,.025); }
.login-brand-panel::after { content: ""; position: absolute; height: 7px; inset: 0 0 auto; background: linear-gradient(90deg, var(--teg-lime) 0 24%, var(--teg-green) 24% 49%, var(--teg-gold) 49% 73%, rgba(255,255,255,.9) 73%); }
.login-brand-content, .login-brand-footer { position: relative; z-index: 1; }
.login-official-logo { width: min(320px, 75%); background: #fff; border-radius: 1rem; padding: .6rem 1rem; box-shadow: 0 18px 45px rgba(0,30,54,.22); margin-bottom: clamp(2.5rem, 8vh, 5.5rem); }
.login-official-logo img { display: block; width: 100%; height: 118px; object-fit: contain; }
.login-system-label { display: flex; gap: .65rem; align-items: center; color: #d9ecf7; font-size: .8rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.login-system-label span { width: 34px; height: 3px; background: var(--teg-lime); border-radius: 1rem; }
.login-brand-panel h1 { font-size: clamp(2.3rem, 4.5vw, 3.6rem); line-height: 1.05; letter-spacing: -.03em; margin: 1rem 0 1.35rem; font-weight: 750; }
.login-brand-panel > .login-brand-content > p { max-width: 570px; color: #d9eaf4; font-size: 1.05rem; line-height: 1.7; }
.login-principles { display: grid; gap: 1rem; margin-top: clamp(2rem, 5vh, 3.5rem); }
.login-principles > div { display: flex; gap: .9rem; align-items: center; }
.login-principles i { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.09); border-radius: .75rem; display: grid; place-items: center; color: var(--teg-lime); font-size: 1.15rem; }
.login-principles span { display: flex; flex-direction: column; }
.login-principles strong { font-size: .92rem; }
.login-principles small { color: #c4dce9; }
.login-brand-footer { margin-top: 2.5rem; color: #bed6e4; font-size: .82rem; }
.login-form-panel { display: grid; place-items: center; padding: clamp(2rem, 7vw, 6.5rem); background: radial-gradient(circle at 85% 10%, #dceff7 0, transparent 32%), linear-gradient(145deg,#f7fafc,#edf4f7); }
.login-form-wrap { width: min(100%, 470px); background: rgba(255,255,255,.96); border: 1px solid rgba(0,80,139,.10); border-radius: 1.35rem; padding: clamp(1.7rem,4vw,2.7rem); box-shadow: 0 24px 65px rgba(10,45,70,.14); }
.login-mobile-logo { display: none; }
.login-eyebrow { color: var(--teg-gold); text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 800; }
.login-heading h2 { color: var(--teg-blue-dark); font-size: clamp(1.8rem, 3.5vw, 2.3rem); letter-spacing: -.03em; margin: .5rem 0 .65rem; font-weight: 750; }
.login-heading p { color: var(--teg-muted); line-height: 1.6; margin-bottom: 2rem; }
.login-form .form-label { color: #26394a; font-size: .88rem; font-weight: 700; margin-bottom: .55rem; }
.login-input-group { min-height: 54px; display: flex; align-items: center; border: 1px solid #b8c6d1; border-radius: .75rem; background: #fff; transition: border-color .16s, box-shadow .16s; }
.login-input-group:focus-within { border-color: var(--teg-blue); box-shadow: 0 0 0 .22rem rgba(0,80,139,.13); }
.login-input-group.is-invalid { border-color: #dc3545; }
.login-input-group > i { color: var(--teg-blue); font-size: 1.05rem; margin-left: 1rem; }
.login-input-group input { min-width: 0; flex: 1; height: 52px; border: 0; outline: 0; padding: 0 1rem; background: transparent; color: var(--teg-text); }
.login-input-group input::placeholder { color: #98a5b1; }
.password-toggle { border: 0; background: transparent; color: #637485; width: 48px; align-self: stretch; border-radius: 0 .75rem .75rem 0; }
.password-toggle:hover { color: var(--teg-blue); background: var(--teg-blue-soft); }
.login-help-link { color: var(--teg-blue); font-size: .82rem; font-weight: 650; text-decoration: none; }
.login-submit { min-height: 55px; display: flex; align-items: center; justify-content: center; gap: .75rem; color: #fff; background: linear-gradient(90deg, var(--teg-blue-dark), var(--teg-blue)); border: 0; border-radius: .75rem; font-weight: 700; box-shadow: 0 10px 24px rgba(0,80,139,.2); }
.login-submit:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 13px 28px rgba(0,80,139,.27); }
.login-security-note { display: flex; gap: .7rem; align-items: flex-start; padding: 1rem; margin-top: 2rem; color: #526474; background: var(--teg-blue-soft); border-left: 3px solid var(--teg-green); border-radius: .45rem; font-size: .8rem; line-height: 1.5; }
.login-security-note i { color: var(--teg-blue); }
.login-support { margin: 1.5rem 0 0; color: #7a8997; text-align: center; font-size: .78rem; }
@media (max-width: 991.98px) {
  .login-page { grid-template-columns: 1fr; }
  .login-brand-panel { display: none; }
  .login-form-panel { min-height: 100vh; padding: 2rem 1.25rem; }
  .login-mobile-logo { display: block; width: 210px; margin: 0 auto 2rem; }
  .login-mobile-logo img { width: 100%; max-height: 130px; object-fit: contain; }
}

/* Notificaciones institucionales Bootstrap 5. */
#tegToastContainer { z-index: 1090; top: 78px !important; width: min(390px, 100vw); pointer-events: none; }
.teg-toast { width: 100%; overflow: hidden; border: 1px solid var(--teg-border); border-left: 4px solid var(--teg-primary); border-radius: .7rem; background: rgba(255,255,255,.98); box-shadow: 0 14px 35px rgba(15,23,42,.18); pointer-events: auto; }
.teg-toast .toast-header { padding: .65rem .85rem; color: var(--teg-blue-dark); background: #fff; border-bottom-color: var(--teg-border); }
.teg-toast .toast-body { padding: .8rem .85rem; color: var(--teg-text); line-height: 1.45; }
.teg-toast-success { border-left-color: #397b2d; }
.teg-toast-success .toast-header i { color: #397b2d; }
.teg-toast-danger { border-left-color: #b42332; }
.teg-toast-danger .toast-header i { color: #b42332; }
.teg-toast-warning { border-left-color: #a96608; }
.teg-toast-warning .toast-header i { color: #a96608; }
.teg-toast-info .toast-header i { color: #087f8c; }

/* Maquetación responsiva transversal: campos y acciones nunca desbordan. */
.page-content, .page-content .container, .page-content .container-fluid,
.page-content .card, .page-content .card-body,
.page-content .row > [class*="col-"] { min-width: 0; }
.page-content > .container-fluid { max-width: none; padding-right: 0; padding-left: 0; }
.page-content .form-control, .page-content .form-select,
.page-content .custom-select, .page-content .input-group,
.page-content .select2-container { width: 100% !important; max-width: 100%; min-width: 0; }
.form-label { display: block; margin-bottom: .42rem; color: #26394a; font-size: .84rem; font-weight: 650; line-height: 1.3; }
.page-content .row > [class*="col-"] > label:not(.form-check-label) {
  display: block;
  margin-bottom: .42rem;
  color: #26394a;
  font-size: .84rem;
  font-weight: 650;
  line-height: 1.3;
}
.page-content .row.align-items-end > [class*="col-"] > .btn { margin-top: .25rem; }
.responsive-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; min-width: 0; }
.responsive-actions > .btn, .responsive-actions > form { margin: 0 !important; }
.responsive-actions > form { min-width: 0; }
.form-section { margin-bottom: 1rem; border-color: var(--teg-border); box-shadow: 0 3px 12px rgba(15,23,42,.04); }
.form-section-header { display: flex; align-items: center; gap: .7rem; background: #fff; }
.form-section-header h2 { margin: 0; color: var(--teg-blue-dark); font-size: .98rem; font-weight: 700; }
.form-section-header p { margin: .18rem 0 0; color: var(--teg-muted); font-size: .76rem; }
.form-section-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: .55rem; color: var(--teg-blue); background: var(--teg-blue-soft); }
.empty-state { padding: 2.5rem 1rem; text-align: center; color: var(--teg-muted); }
.empty-state-icon { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto .8rem; border-radius: 50%; color: var(--teg-blue); background: var(--teg-blue-soft); font-size: 1.25rem; }
.empty-state strong { display: block; color: var(--teg-text); font-size: .95rem; }
.empty-state p { max-width: 520px; margin: .3rem auto .9rem; font-size: .82rem; }
.report-compact-form { max-width: 520px; }
.formative-management-cell { min-width: 320px; }
.formative-calendar { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: .7rem; overflow-x: auto; padding-bottom: .2rem; }
.formative-calendar-day { min-width: 150px; min-height: 172px; padding: .65rem; border: 1px solid var(--teg-border); border-radius: .65rem; background: #f9fbfc; }
.formative-calendar-day.is-selected { border-color: var(--teg-blue); box-shadow: inset 0 0 0 1px var(--teg-blue); background: var(--teg-blue-soft); }
.formative-calendar-day > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; color: var(--teg-blue-dark); font-size: .8rem; text-transform: uppercase; }
.formative-calendar-day > header span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #fff; background: var(--teg-blue); font-weight: 700; }
.formative-calendar-person { margin-top: .45rem; padding: .45rem; border-radius: .45rem; color: #244154; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.08); font-size: .72rem; }
.formative-calendar-person strong,.formative-calendar-person span,.formative-calendar-person small { display: block; overflow-wrap: anywhere; }
.formative-calendar-person span { margin-top: .12rem; color: var(--teg-primary); font-weight: 700; }.formative-calendar-person small { margin-top: .12rem; color: var(--teg-muted); }.formative-calendar-empty { padding: 1.4rem .25rem; color: var(--teg-muted); font-size: .75rem; text-align: center; }
.initially-hidden { display: none; }
.detail-label-column { width: 30%; }
.inline-action-form { display: grid; grid-template-columns: minmax(145px,.8fr) minmax(190px,1.3fr) auto; align-items: center; gap: .4rem; min-width: 430px; }
.table-responsive { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive > .table { margin-bottom: 0; }
.page-content .card:has(> .table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.page-content .card > .table { min-width: 680px; }
.table th { white-space: nowrap; }
.table td { vertical-align: middle; }
.table td .form-control, .table td .form-select { min-width: 120px; }
.weekly-schedule-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(205px,1fr)); gap: .75rem; }
.schedule-day { min-width: 0; padding: .8rem; border: 1px solid var(--teg-border); border-radius: .65rem; background: #f9fbfc; }
.schedule-day-title { display: block; margin-bottom: .55rem; color: var(--teg-blue-dark); font-size: .85rem; font-weight: 700; }
.schedule-day-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
.schedule-day-fields .form-label { font-size: .72rem; margin-bottom: .25rem; }
@media (max-width:1199.98px) {
  .app-topbar { gap: .65rem; padding-right: 1rem; padding-left: 1rem; }
  .topbar-actions { min-width: 0; gap: .4rem; }
  .topbar-actions > .btn { padding-right: .55rem; padding-left: .55rem; }
}
@media (max-width:767.98px) {
  .page-content { padding: .85rem; }
  .page-content .container-fluid { padding-right: 0; padding-left: 0; }
  .card-body { padding: 1rem; }
  .app-topbar { min-height: 64px; flex-wrap: nowrap; }
  .topbar-title > span { display: none; }
  .topbar-actions { margin-left: auto; }
  .responsive-actions > .btn { flex: 1 1 auto; }
  .page-content form.d-flex { flex-wrap: wrap; }
  .page-content form.d-flex > .btn { flex: 1 1 auto; }
  .inline-action-form { grid-template-columns: 1fr; min-width: 250px; }
  .inline-action-form .btn { width: 100%; }
  #tegToastContainer { top: 65px !important; width: 100%; padding: .65rem !important; }
}

/* Accesibilidad y rendimiento: evita transiciones costosas cuando el equipo
   o la persona usuaria solicita movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
@media (max-width:479.98px) {
  .topbar-back { width: 36px; padding: 0; justify-content: center; font-size: 0; }
  .topbar-back i { font-size: .84rem; }
  .topbar-title > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .schedule-day-fields { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Directorio de expedientes (empleados/index.blade.php) — acuerdos REQ-02 y
   REQ-03 de la minuta técnica del 03/09/2026 con RRHH: la lista pasa de
   tabla a una tarjeta por persona. Antes vivían como <style> local de la
   vista; se centralizan aquí porque teg-theme.css se carga al final.
   ========================================================================== */
.employee-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .85rem; margin-bottom: 1rem; }
.employee-stat { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid #dbe3ea; border-radius: .75rem; }
.employee-stat-marker { width: 5px; height: 38px; border-radius: 99px; background: var(--teg-primary); }
.employee-stat span { display: block; color: var(--teg-muted); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; }
.employee-stat strong { display: block; color: var(--teg-blue-dark); font-size: 1.25rem; }
.employee-stat.warning .employee-stat-marker { background: #b7791f; }
.employee-stat.muted .employee-stat-marker { background: #7a8d99; }

.directory-card { border: 1px solid #dbe3ea; box-shadow: 0 3px 14px rgba(25,55,80,.05); }
.directory-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; border-bottom: 1px solid #dbe3ea; }
.directory-heading strong { display: block; color: var(--teg-blue-dark); font-size: 1rem; }
.directory-heading span { display: block; color: var(--teg-muted); font-size: .78rem; }
.directory-count { flex: none; padding: .35rem .7rem; border-radius: 99px; color: var(--teg-primary) !important; background: #eaf2f7; font-weight: 700; }

.directory-tabs { display: flex; gap: .35rem; padding: .75rem 1.15rem 0; background: #fff; border-bottom: 1px solid #e2e8ed; }
.directory-tab { display: flex; align-items: center; gap: .45rem; padding: .65rem .9rem; color: #607583; border-bottom: 3px solid transparent; font-size: .78rem; font-weight: 700; }
.directory-tab:hover { color: var(--teg-primary); }
.directory-tab.active { color: var(--teg-primary); border-bottom-color: var(--teg-primary); }
.directory-tab em { padding: .12rem .42rem; border-radius: 99px; background: #e8eef2; font-size: .65rem; font-style: normal; }
.directory-tab.active em { color: #fff; background: var(--teg-primary); }

.employee-filters { display: grid; grid-template-columns: repeat(auto-fit,minmax(185px,1fr)); gap: .85rem; align-items: end; padding: 1.15rem; background: #f6f9fb; border-bottom: 1px solid #e2e8ed; }
.employee-filters .search-field { grid-column: span 2; }
.filter-control { min-width: 0; padding: .7rem; background: #fff; border: 1px solid #dbe3ea; border-radius: .65rem; }
.employee-filters label { display: block; margin-bottom: .35rem; color: #536978; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.employee-filters .form-control, .employee-filters .form-select { width: 100%; height: 38px; padding-top: .35rem; padding-bottom: .35rem; background-color: #fff; border-color: #cbd6dd; box-shadow: none; }
.employee-filters .form-control:focus, .employee-filters .form-select:focus { border-color: #4d8dad; box-shadow: 0 0 0 3px rgba(0,96,145,.1); }
.search-field { position: relative; }
.search-field i { position: absolute; left: 1.55rem; bottom: 19px; color: #7c909d; }
.search-field input { padding-left: 2.25rem; }
.filter-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: .7rem; }
.filter-actions .btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }

/* Cuadrícula de tarjetas: reemplaza la tabla anterior (REQ-02). auto-fit +
   minmax evita el desbordamiento horizontal en monitores/pantallas
   pequeñas: las tarjetas se acomodan en menos columnas en vez de encogerse
   o generar scroll lateral. */
.employee-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 1rem; padding: 1.15rem; }
.employee-card { display: flex; flex-direction: column; gap: .85rem; min-width: 0; padding: 1.1rem; background: #fff; border: 1px solid #dbe3ea; border-left: 4px solid #cbd6dd; border-radius: .75rem; box-shadow: 0 2px 10px rgba(25,55,80,.04); transition: box-shadow .15s ease; }
.employee-card:hover { box-shadow: 0 6px 18px rgba(25,55,80,.1); }
/* Distinción visual inmediata entre personal activo y dado de baja. */
.employee-card.is-active { border-left-color: #1a6b3c; }
.employee-card.is-inactive { background: #f7f8fa; border-left-color: #8a97a3; }
.employee-card.is-inactive .employee-card-heading strong { color: #55636e; }
.employee-card-head { display: grid; grid-template-columns: 54px minmax(0,1fr); align-items: flex-start; gap: .7rem; }
.employee-card-heading { flex: 1; min-width: 0; }
.employee-card-heading strong { display: block; max-width: none; overflow: visible; color: var(--teg-text); font-size: 1rem; font-weight: 750; line-height: 1.35; white-space: normal; text-overflow: clip; overflow-wrap: break-word; }
.employee-card-heading small { display: block; margin-top: .2rem; color: var(--teg-muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
.employee-avatar { position: relative; width: 54px; height: 54px; flex: none; display: grid; place-items: center;
                   overflow: hidden; border-radius: 50%; color: var(--teg-primary); background: #e7f0f5;
                   font-size: .95rem; font-weight: 800; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e2e9ef; }
.employee-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Los distintivos van DEBAJO del nombre, no al lado: ahi le quitaban ancho
   al dato con el que realmente se ubica a una persona. */
.employee-card-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.type-chip { display: inline-block; padding: .28rem .58rem; border-radius: 99px; color: #496170; background: #e9eef1; font-size: .64rem; font-weight: 700; text-transform: uppercase; }
.employee-card-body { display: grid; grid-template-columns: repeat(auto-fit,minmax(118px,1fr)); gap: .6rem .9rem; margin: 0; }
/* La unidad a ancho completo y sobre fondo propio: es el texto mas largo
   y el que mas se consulta al recorrer el listado. */
.employee-card-body .employee-field-destacado { grid-column: 1 / -1; padding: .5rem .65rem; border-radius: .5rem; background: #f5f8fa; }
.employee-field dd.vacio { color: #9aa8b4; font-style: italic; }
.employee-field { min-width: 0; }
.employee-field dt { margin: 0; color: #536978; font-size: .64rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.employee-field dd { margin: .18rem 0 0; color: var(--teg-text); font-size: .82rem; line-height: 1.35; overflow-wrap: anywhere; }
.employee-field.span-2 { grid-column: 1 / -1; }
.employee-field dd.wrap { overflow: visible; white-space: normal; }
.employee-card-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .75rem; border-top: 1px solid #eef1f4; }
.completion-cell { min-width: 130px; }
.completion-text { display: flex; justify-content: space-between; margin-bottom: .3rem; color: var(--teg-muted); font-size: .7rem; }
.completion-text strong { color: var(--teg-text); }
.completion-progress { display: block; width: 100%; height: 6px; overflow: hidden; border: 0; border-radius: 99px; background: #e5ebef; appearance: none; }
.completion-progress::-webkit-progress-bar { background: #e5ebef; }
.completion-progress::-webkit-progress-value { border-radius: 99px; background: var(--teg-primary); }
.completion-progress::-moz-progress-bar { border-radius: 99px; background: var(--teg-primary); }
.open-record { display: inline-flex; align-items: center; gap: .35rem; flex: none; color: var(--teg-primary); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.empty-directory { grid-column: 1 / -1; padding: 3rem 1rem !important; color: var(--teg-muted); text-align: center; }
.empty-directory i { display: block; margin-bottom: .75rem; color: #9eb0bb; font-size: 1.75rem; }
.directory-footer { padding: .9rem 1.15rem; border-top: 1px solid #e2e8ed; }

@media (max-width:991.98px) { .employee-stats { grid-template-columns: repeat(2,1fr); } }
@media (max-width:575.98px) {
  .employee-stats, .employee-filters { grid-template-columns: 1fr; }
  .employee-filters .search-field { grid-column: auto; }
  .directory-heading { align-items: flex-start; flex-direction: column; }
  .directory-tabs { overflow-x: auto; padding-left: .75rem; }
  .directory-tab { white-space: nowrap; }
  .filter-actions { padding-bottom: 0; }
  .filter-actions .btn { flex: 1; }
  .employee-grid { padding: .85rem; }
  .employee-card-body { grid-template-columns: 1fr 1fr; }
}
@media (max-width:359.98px) {
  /* Defecto detectado en QA (verificación previa a producción, 09/09/2026):
     .employee-grid usa minmax(300px,1fr); en viewports por debajo de ~330px
     ese mínimo de 300px no cabe junto con el padding del contenedor y la
     cuadrícula desborda horizontalmente la pantalla. Se fuerza una sola
     columna elástica para eliminar el mínimo fijo. */
  .employee-grid { grid-template-columns: 1fr; }
  .employee-card-body { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Marcaciones (.mrc-*)
   Lo comparten el panel y el listado de registros, por eso vive aqui y no
   dentro de una vista: son dos pantallas que tienen que verse igual.
   ========================================================================== */
    /* Barra de herramientas: búsqueda y filtros rápidos. */
    .mrc-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: 1rem; }
    .mrc-search { position: relative; flex: 1 1 280px; min-width: 220px; }
    .mrc-search i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--teg-muted); pointer-events: none; }
    .mrc-search input { padding-left: 2.4rem; padding-right: 2.2rem; height: 42px; border-radius: 10px; }
    .mrc-search-clear { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--teg-muted); cursor: pointer; padding: .25rem .4rem; line-height: 1; border-radius: 6px; }
    .mrc-search-clear:hover { background: var(--teg-bg); color: var(--teg-text); }

    .mrc-date { display: flex; align-items: flex-end; gap: .5rem; }
    .mrc-date input { height: 42px; border-radius: 10px; }

    .mrc-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
    .mrc-chip { border: 1px solid var(--teg-border); background: #fff; color: var(--teg-text); border-radius: 50rem;
                padding: .32rem .85rem; font-size: .8rem; font-weight: 600; cursor: pointer; display: inline-flex;
                align-items: center; gap: .4rem; transition: background .12s, border-color .12s, color .12s; }
    .mrc-chip:hover { border-color: var(--teg-primary); }
    .mrc-chip[aria-pressed="true"] { background: var(--teg-primary); border-color: var(--teg-primary); color: #fff; }
    .mrc-chip-count { font-size: .72rem; opacity: .75; font-weight: 700; }

    .mrc-count { font-size: .82rem; color: var(--teg-muted); margin-bottom: .6rem; }
    .mrc-count strong { color: var(--teg-text); }

    /* Tabla: encabezado fijo para no perder la referencia al desplazar. */
    .mrc-table-wrap { border: 1px solid var(--teg-border); border-radius: 12px; overflow: auto; max-height: 68vh; background: #fff; }
    .mrc-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: .88rem; }
    .mrc-table thead th { position: sticky; top: 0; z-index: 2; background: #f4f7fa; color: var(--teg-text);
                          font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 700;
                          padding: .7rem .9rem; border-bottom: 1px solid var(--teg-border); white-space: nowrap; text-align: left; }
    .mrc-table thead th[data-sort] { cursor: pointer; user-select: none; }
    .mrc-table thead th[data-sort]:hover { background: #eaeff5; }
    .mrc-table thead th .mrc-arrow { opacity: .3; margin-left: .35rem; font-size: .68rem; }
    .mrc-table thead th[aria-sort] .mrc-arrow { opacity: 1; color: var(--teg-primary); }
    .mrc-table tbody td { padding: .7rem .9rem; border-bottom: 1px solid #eef2f6; vertical-align: middle; }
    .mrc-table tbody tr:last-child td { border-bottom: 0; }
    .mrc-table tbody tr:hover { background: #f8fbfd; }

    /* Persona: iniciales + nombre, con la unidad como segunda línea. */
    .mrc-person { display: flex; align-items: center; gap: .65rem; min-width: 0; }
    .mrc-initials { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
                    background: var(--teg-blue-soft, #e7eff6); color: var(--teg-primary); font-weight: 700; font-size: .78rem; }
    .mrc-person-body { min-width: 0; }
    .mrc-person-name { font-weight: 650; color: var(--teg-text); display: block; }
    .mrc-person-unit { font-size: .76rem; color: var(--teg-muted); display: block; }

    /* Horas: una pastilla por marcación, la primera y la última destacadas. */
    .mrc-times { display: flex; flex-wrap: wrap; gap: .3rem; }
    .mrc-time { background: #eef2f6; color: #40525f; border-radius: 6px; padding: .16rem .45rem;
                font-size: .78rem; font-variant-numeric: tabular-nums; font-weight: 600; }
    .mrc-time[data-borde="entrada"] { background: #e6f4ec; color: #1a6b3c; }
    .mrc-time[data-borde="salida"] { background: #fdeee9; color: #a8482a; }
    .mrc-times-empty { color: var(--teg-muted); font-size: .82rem; }
    .mrc-times-n { font-size: .72rem; color: var(--teg-muted); margin-left: .2rem; }

    .mrc-empty { padding: 2.5rem 1rem; text-align: center; color: var(--teg-muted); }
    .mrc-empty i { font-size: 1.8rem; display: block; margin-bottom: .6rem; opacity: .5; }

    /* Teléfono: la tabla se convierte en tarjetas apiladas. */
    @media (max-width: 767.98px) {
        .mrc-table-wrap { border: 0; max-height: none; overflow: visible; background: transparent; }
        .mrc-table, .mrc-table tbody, .mrc-table tr, .mrc-table td { display: block; width: 100%; }
        .mrc-table thead { display: none; }
        .mrc-table tbody tr { border: 1px solid var(--teg-border); border-radius: 12px; background: #fff;
                              margin-bottom: .7rem; padding: .3rem 0; }
        .mrc-table tbody td { border-bottom: 0; display: flex; justify-content: space-between; gap: 1rem;
                              align-items: center; padding: .45rem .9rem; }
        .mrc-table tbody td::before { content: attr(data-etiqueta); font-size: .72rem; text-transform: uppercase;
                                      letter-spacing: .03em; color: var(--teg-muted); font-weight: 700; flex: 0 0 auto; }
        .mrc-table tbody td.mrc-td-persona { display: block; }
        .mrc-table tbody td.mrc-td-persona::before { display: none; }
        .mrc-table tbody td > *:not(::before) { text-align: right; }
    }