/* ============================================================
   BIBLIOAPP — Biblioteca Escolar MEP · Costa Rica
   main.css — Hoja de estilos principal
   ============================================================ */

/* ── VARIABLES ── */
:root {
  --blue:        #003DA5;
  --blue-dark:   #002880;
  --blue-deep:   #001540;
  --blue-mid:    #1A52B5;
  --blue-light:  #D6E4FF;
  --blue-xlight: #EBF1FF;
  --orange:      #FF6B00;
  --orange-dark: #D45800;
  --orange-light:#FFF0E5;
  --white:       #FFFFFF;
  --off-white:   #F3F6FC;
  --bg2:         #F3F6FC;
  --surface:     #FFFFFF;
  --border:      #E1E8F5;
  --text:        #0A1628;
  --text2:       #3D5075;
  --text3:       #7A90B8;
  --ok:          #0A6640;
  --ok-bg:       #E0F4EB;
  --warn:        #7A4F00;
  --warn-bg:     #FFF4D6;
  --danger:      #9B1919;
  --danger-bg:   #FCEAEA;
  --font-head:   'Playfair Display', Georgia, serif;
  --font-body:   'Plus Jakarta Sans', system-ui, sans-serif;
  --r:           16px;
  --r-sm:        10px;
  --shadow-sm:   0 2px 8px rgba(0,30,80,0.06);
  --shadow-md:   0 8px 28px rgba(0,30,80,0.10);
  --shadow-lg:   0 16px 48px rgba(0,30,80,0.14);
  --shadow-blue: 0 8px 24px rgba(0,61,165,0.18);
  --shadow-orange:0 8px 24px rgba(255,107,0,0.18);
  /* Aliases de compatibilidad */
  --card:       #FFFFFF;
  --accent:     #003DA5;
  --font:       'Plus Jakarta Sans', system-ui, sans-serif;
  --text-muted: #7A90B8;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--off-white);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ── TOPBAR ── */
.topbar {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 60%, #001A6E 100%);
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0,30,100,0.35);
}
.topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
}
.logo { display: flex; align-items: center; gap: 14px; }
.logo-mep {
  width: 52px; height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  overflow: visible;
  /* Halo suave de fondo */
  filter: drop-shadow(0 0 8px rgba(0,200,255,.7)) drop-shadow(0 0 20px rgba(0,160,255,.4));
  animation: logo-topbar-pulse 3.5s ease-in-out infinite;
}
/* Anillo giratorio exterior con gradiente */
.logo-mep::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(
    rgba(0,220,255,1)   0%,
    rgba(80,255,220,.6) 25%,
    rgba(255,220,80,.9) 50%,
    rgba(0,180,255,.7)  75%,
    rgba(0,220,255,1)   100%
  );
  animation: logo-ring-spin 4s linear infinite;
  z-index: 0;
}
/* Separación entre anillo y logo */
.logo-mep::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: #ffffff;
  z-index: 1;
}
@keyframes logo-ring-spin {
  to { transform: rotate(360deg); }
}
@keyframes logo-topbar-pulse {
  0%,100% { filter: drop-shadow(0 0 6px rgba(0,200,255,.6))  drop-shadow(0 0 16px rgba(0,140,255,.3)); }
  50%      { filter: drop-shadow(0 0 12px rgba(0,220,255,.95)) drop-shadow(0 0 28px rgba(0,180,255,.55)); }
}
.logo-mep-inner {
  width: calc(100% - 8px); height: calc(100% - 8px);
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 2;
}
.logo-mep-inner img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.logo-name {
  font-family: var(--font-head);
  font-size: 20px; color: white;
  line-height: 1; letter-spacing: 0.2px;
}
.logo-sub {
  font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  margin-top: 3px;
  letter-spacing: 0.04em;
}
.topbar-right { display: flex; align-items: center; gap: 12px; }
.user-chip {
  background: rgba(255,255,255,0.12);
  color: white;
  font-size: 12px; font-weight: 600;
  padding: 6px 14px 6px 6px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(4px);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .2s;
  font-family: inherit;
}
.user-chip:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(0,170,255,0.4);
}
.btn-logout {
  background: rgba(255,255,255,0.12);
  color: white;
  border: 1px solid rgba(255,255,255,0.18);
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.btn-logout:hover { background: rgba(255,80,80,0.3); }
.hamburger {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  padding: 4px 8px;
  margin-right: 4px;
}

/* ── LAYOUT ── */
.layout { display: flex; flex: 1; }

/* ── SIDEBAR ── */
.sidebar {
  width: 240px; min-width: 240px;
  background: var(--blue-deep);
  padding: 20px 0 24px;
  display: flex; flex-direction: column;
  position: sticky; top: 66px;
  height: calc(100vh - 66px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  z-index: 90;
}
.sidebar::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(255,107,0,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0,61,165,0.12) 0%, transparent 50%);
  pointer-events: none;
}
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 89;
}
.nav-section {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  padding: 22px 22px 8px;
  position: relative;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.55);
  border-left: 3px solid transparent;
  transition: all .18s ease;
  user-select: none;
  margin: 1px 12px 1px 0;
  border-radius: 0 10px 10px 0;
  position: relative;
  cursor: pointer;
}
.nav-item:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.9);
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(255,107,0,0.2), rgba(255,107,0,0.06));
  color: white;
  font-weight: 700;
  border-left-color: var(--orange);
  box-shadow: inset 0 0 20px rgba(255,107,0,0.05);
}
.nav-item .ni { font-size: 17px; width: 22px; text-align: center; }
.sidebar-foot {
  margin-top: auto;
  padding: 18px 22px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  position: relative;
}
.sidebar-date {
  font-size: 10.5px;
  color: rgba(255,255,255,0.22);
  line-height: 1.8;
}

/* ── MAIN CONTENT ── */
.main {
  flex: 1;
  padding: 30px 36px;
  display: none;
  flex-direction: column;
  gap: 26px;
  overflow-y: auto;
  animation: pageIn .28s cubic-bezier(.4,0,.2,1);
  min-width: 0;
  zoom: 0.7;
}
.main.active { display: flex; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── PAGE HEADER ── */
.ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pt {
  font-family: var(--font-head);
  font-size: 30px;
  color: var(--blue-dark);
  letter-spacing: -.3px;
}
.ps { font-size: 13px; color: var(--text3); margin-top: 4px; }

/* ── HERO BANNER (Dashboard) ── */
.hero-banner {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-mid) 50%, #2660C4 100%);
  border-radius: var(--r);
  padding: 32px 36px;
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-blue);
}
.hero-banner::before {
  content: '';
  position: absolute; top: -40px; right: -20px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
}
.hero-banner::after {
  content: '';
  position: absolute; bottom: -60px; right: 80px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,107,0,0.1);
}
.hero-title {
  font-family: var(--font-head);
  font-size: 26px;
  margin-bottom: 4px;
  position: relative; z-index: 1;
}
.hero-sub {
  font-size: 13.5px;
  opacity: 0.7;
  position: relative; z-index: 1;
}
.hero-deco {
  position: absolute;
  top: 20px; right: 36px;
  font-size: 64px;
  opacity: 0.12;
  z-index: 0;
}

/* ── METRICS ── */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.metric {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 22px 24px;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}
.metric::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--blue);
  border-radius: var(--r) var(--r) 0 0;
}
.metric::after {
  content: '';
  position: absolute; top: 12px; right: 14px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--blue-xlight);
  opacity: 0;
  transition: opacity .25s;
}
.metric:hover {
  box-shadow: var(--shadow-blue);
  transform: translateY(-3px);
}
.metric:hover::after { opacity: 1; }
.metric.m-or::before { background: var(--orange); }
.metric.m-or::after  { background: var(--orange-light); }
.metric.m-da::before { background: var(--danger); }
.metric.m-da::after  { background: var(--danger-bg); }
.metric.m-wa::before { background: #D4860A; }
.metric.m-wa::after  { background: var(--warn-bg); }
.ml {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text3); margin-bottom: 10px;
}
.mv {
  font-family: var(--font-head);
  font-size: 38px; color: var(--blue-dark); line-height: 1;
}
.mv.c-or { color: var(--orange-dark); }
.mv.c-da { color: var(--danger); }
.mv.c-wa { color: #8B5E00; }
.ms { font-size: 12px; color: var(--text3); margin-top: 7px; }
.metric-icon {
  position: absolute; top: 16px; right: 18px;
  font-size: 28px; opacity: 0.15;
  z-index: 1;
}
.metric.m-ok::before { background: var(--ok); }
.metric.m-ok::after  { background: var(--ok-bg); }
.mv.c-ok { color: var(--ok); }

/* Morado: cuarto acento para tarjetas que no encajan en éxito/alerta/aviso
   (p. ej. Asistencia). Mismo tono que ya usan sus gráficas (SERIE[3]). */
.metric.m-pu::before { background: #7A3FA8; }
.metric.m-pu::after  { background: #F1E7F9; }
.mv.c-pu { color: #6B2F94; }

/* Tarjetas de indicador clicables (Préstamos): resaltan el filtro activo */
.pl-card { cursor: pointer; }
.pl-card.pl-card-active {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue-xlight);
}

/* ══════════════════════════════════════════════════════════
   INDICADORES DE PRÉSTAMOS — jerarquía
   "Activos" define la pantalla, así que manda: el anillo muestra
   de qué se compone ese número. Los otros tres, filas compactas.
   ══════════════════════════════════════════════════════════ */
.pl-kpis { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; }

.pl-hero {
  display: flex; align-items: center; gap: 24px; text-align: left;
  font-family: inherit; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 65%, var(--blue-deep) 100%);
  border-radius: var(--r); padding: 22px 26px; color: #fff;
  box-shadow: 0 12px 30px rgba(0,40,128,.22);
  position: relative; overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.pl-hero::after {
  content: ''; position: absolute; right: -40px; top: -40px;
  width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.05);
}
.pl-hero:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,40,128,.30); }
.pl-hero:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 2px; }
/* Va después de .pl-card-active a propósito: el borde azul no se ve sobre el azul */
.pl-hero.pl-card-active { box-shadow: 0 0 0 3px var(--blue-light), 0 12px 30px rgba(0,40,128,.22); }

.pl-ring {
  width: 104px; height: 104px; border-radius: 50%; flex-shrink: 0; position: relative;
  background: conic-gradient(rgba(255,255,255,.22) 0deg 360deg);   /* JS pinta los tramos reales */
}
.pl-ring::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--blue-dark); }
.pl-ring b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 34px; font-weight: 700; z-index: 1;
  /* Playfair Display usa cifras de estilo antiguo (el 6/8 suben, el 3/4/5/7/9 bajan
     de la línea base): sin esto cada dígito se ve centrado distinto. Con cifras
     "lining" todos comparten la misma caja vertical y el centrado queda exacto. */
  font-variant-numeric: lining-nums tabular-nums;
}
.pl-hero-t { display: flex; flex-direction: column; min-width: 0; }
.pl-hero-l {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: rgba(255,255,255,.70);
}
.pl-hero-n { font-size: 19px; font-weight: 700; margin: 5px 0 12px; }
.pl-hero-leg { display: flex; flex-direction: column; gap: 6px; }
.pl-hero-leg > span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.86); }
.pl-hero-leg i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pl-hero-leg b { font-weight: 800; color: #fff; }
.lg-ok { background: #7FE3B4; }
.lg-wa { background: #FFC96B; }
.lg-da { background: #FF8A8A; }

.pl-minis { display: grid; grid-template-rows: repeat(3, 1fr); gap: 10px; }
.pl-mini {
  display: flex; align-items: center; gap: 14px; text-align: left; font-family: inherit;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px;
  padding: 0 16px; min-height: 62px; cursor: pointer;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.pl-mini:hover { border-color: var(--blue-light); transform: translateX(3px); box-shadow: var(--shadow-sm); }
.pl-mini:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-xlight); }
.pl-mini-b { width: 4px; height: 34px; border-radius: 4px; flex-shrink: 0; }
.pl-mini-v {
  font-family: var(--font-head); font-size: 27px; font-weight: 700; min-width: 30px; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;   /* mismo motivo que .pl-ring b */
}
.pl-mini-t { display: flex; flex-direction: column; min-width: 0; }
.pl-mini-n { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.25; }
.pl-mini-s { font-size: 11.5px; color: var(--text3); margin-top: 2px; }
.pl-mini-go { margin-left: auto; color: var(--text3); flex-shrink: 0; }
.pl-mini.k-da .pl-mini-b { background: var(--danger); }
.pl-mini.k-da .pl-mini-v { color: var(--danger); }
.pl-mini.k-wa .pl-mini-b { background: #D4860A; }
.pl-mini.k-wa .pl-mini-v { color: #8B5E00; }
.pl-mini.k-ok .pl-mini-b { background: var(--ok); }
.pl-mini.k-ok .pl-mini-v { color: var(--ok); }
/* Un cero no debe gritar: sin vencidos, la fila se apaga */
.pl-mini.k-cero .pl-mini-b { background: var(--border); }
.pl-mini.k-cero .pl-mini-v { color: var(--text3); }

@media (max-width: 1100px) {
  .pl-kpis { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pl-hero { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .pl-ring { width: 88px; height: 88px; }
  .pl-ring b { font-size: 29px; }
}

/* ══════════════════════════════════════════════════════════
   PÁGINA PRÉSTAMOS — toolbar, chips, tabla, drawer
   ══════════════════════════════════════════════════════════ */

/* Toolbar de búsqueda y filtros */
.pl-toolbar-card { padding: 16px 18px; margin-top: 16px; }
.pl-toolbar { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; position: relative; }
.pl-toolbar .fi { width: auto; }
.pl-search { flex: 1 1 260px; min-width: 200px; border-radius: 22px; }
.pl-sel    { flex: 0 0 auto; min-width: 165px; }
.pl-btn-fecha, #plBtnLimpiar {
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; flex-shrink: 0;
}

/* ── Rango de fecha de devolución (calendario propio) ── */
.pl-rango { position: relative; flex-shrink: 0; }
.pl-rango-chev { color: var(--text3); flex-shrink: 0; }
.pl-btn-fecha.on {
  border-color: var(--blue); background: var(--blue-xlight); color: var(--blue-dark);
}
.pl-btn-fecha.on .pl-rango-chev { color: var(--blue); }

.pl-cal {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  width: 580px; padding: 14px;
  background: #fff; border: 1.5px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0,30,80,.18);
}
.pl-cal-quick { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 13px; }
.pl-cal-q {
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--text2);
  background: var(--off-white); border: 1.5px solid var(--border);
  border-radius: 20px; padding: 6px 12px; cursor: pointer; transition: all .15s;
}
.pl-cal-q:hover { border-color: var(--blue-light); background: var(--blue-xlight); color: var(--blue); }

/* Las flechas viven fuera de los meses: así siguen accesibles en móvil,
   donde el segundo mes se oculta. */
.pl-cal-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.pl-cal-titles { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; min-width: 0; }
.pl-cal-titles b {
  text-align: center; font-size: 13.5px; font-weight: 800;
  color: var(--text); text-transform: capitalize;
}
.pl-cal-arrow {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  border: 1.5px solid var(--border); background: #fff; color: var(--text2);
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s;
}
.pl-cal-arrow:hover { border-color: var(--blue); color: var(--blue); }

.pl-cal-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pl-cal-m { min-width: 0; }

/* minmax(0,…): con 1fr a secas los días fuerzan el ancho mínimo y descuadran la rejilla */
.pl-cal-wd, .pl-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.pl-cal-wd span {
  text-align: center; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text3); padding-bottom: 6px;
}
.pl-cal-grid { row-gap: 2px; }
.pl-cal-d {
  height: 34px; border: none; background: none; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--text2);
  cursor: pointer; border-radius: 9px; position: relative; transition: background .12s, color .12s;
}
.pl-cal-d:hover { background: var(--blue-xlight); color: var(--blue-dark); }
.pl-cal-d.empty { visibility: hidden; cursor: default; }
.pl-cal-d.hoy { font-weight: 800; color: var(--blue); }
.pl-cal-d.hoy::after {
  content: ''; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: currentColor;
}
/* El tramo intermedio pinta una banda continua: el rango se lee sin contar días */
.pl-cal-d.rango { background: var(--blue-xlight); color: var(--blue-dark); border-radius: 0; }
.pl-cal-d.ini, .pl-cal-d.fin { background: var(--blue); color: #fff; font-weight: 800; }
.pl-cal-d.ini:hover, .pl-cal-d.fin:hover { background: var(--blue-dark); color: #fff; }
.pl-cal-d.ini { border-radius: 9px 0 0 9px; }
.pl-cal-d.fin { border-radius: 0 9px 9px 0; }
.pl-cal-d.ini.fin { border-radius: 9px; }
.pl-cal-d.ini.hoy::after, .pl-cal-d.fin.hoy::after { background: #fff; }

.pl-cal-ft {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 13px; padding-top: 13px; border-top: 1.5px solid var(--border);
}
.pl-cal-sel { font-size: 12.5px; color: var(--text3); min-width: 0; }
.pl-cal-sel b { color: var(--text); font-weight: 700; }
.pl-cal-acts { display: flex; gap: 8px; flex-shrink: 0; }

@media (max-width: 720px) {
  /* Anclado a la izquierda: en móvil la toolbar se envuelve y el botón queda
     a la izquierda, así que abrir hacia la izquierda lo sacaría de pantalla. */
  .pl-cal { width: min(330px, calc(100vw - 44px)); left: 0; right: auto; }
  .pl-cal-body, .pl-cal-titles { grid-template-columns: minmax(0, 1fr); }
  .pl-cal-m2 { display: none; }        /* en móvil basta un mes */
}

/* Chips de filtros activos */
.pl-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pl-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--blue-xlight); color: var(--blue-dark);
  font-size: 11.5px; font-weight: 700;
  padding: 6px 8px 6px 12px; border-radius: 20px;
}
.pl-chip button {
  border: none; background: rgba(0,40,128,.12); color: var(--blue-dark);
  width: 17px; height: 17px; border-radius: 50%; cursor: pointer;
  font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.pl-chip button:hover { background: var(--blue); color: #fff; }

/* Contenedor del cuerpo: ya no es un panel: la tarjeta ahora es cada préstamo.
   `.card` se declara más abajo, así que hace falta subir la especificidad. */
.card.pl-body-card {
  margin-top: 16px; padding: 0; overflow: visible;
  background: none; border: none; box-shadow: none;
}
.card.pl-body-card:hover { box-shadow: none; }

/* Estado: badge morado para "parcial", reutiliza .badge existentes para el resto */
.badge.parcial { background: #EDE8FF; color: #38188A; }

.pl-btn-dev { display: inline-flex; align-items: center; gap: 6px; }
.pl-btn-dev svg { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   LISTADO EN TARJETAS (Préstamos)
   Cada tarjeta lleva una barra que muestra cuánto se ha
   consumido del plazo: se entiende sin leer los números.
   ══════════════════════════════════════════════════════════ */
.pl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.pl-card-item {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  box-shadow: 0 1px 3px rgba(0,15,50,.04);
}
.pl-card-item:hover {
  transform: translateY(-3px);
  border-color: var(--blue-light, #C9DAF8);
  box-shadow: 0 14px 34px rgba(0,15,50,.10);
}
.pl-card-item:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-xlight);
}
.pl-card-item.pl-row-selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-xlight);
}
/* Franja lateral que codifica el estado (además del badge: nunca solo color) */
.pl-card-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.pl-card-item.e-ok::before { background: var(--ok); }
.pl-card-item.e-wa::before { background: #D4860A; }
.pl-card-item.e-da::before { background: var(--danger); }
.pl-card-item.e-pa::before { background: #6B2F94; }
.pl-card-item.e-dv::before { background: var(--text3); }

.pl-c-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.pl-c-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-c-who .av { width: 44px; height: 44px; font-size: 15px; }
.pl-c-txt { min-width: 0; }
.pl-c-n {
  font-weight: 800; font-size: 16px; color: var(--text); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-c-m {
  font-size: 13px; color: var(--text3); margin-top: 2px; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pl-c-books {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; background: var(--off-white); border-radius: 11px; margin-bottom: 16px;
}
.pl-row-thumbs { display: flex; flex-shrink: 0; }
.pl-row-thumbs .lote-book-thumb { margin-left: -12px; border: 2px solid #fff; border-radius: 5px; }
.pl-row-thumbs .lote-book-thumb:first-child { margin-left: 0; }
.lote-book-more {
  font-size: 12px; font-weight: 800; color: var(--blue);
  background: var(--blue-xlight); border-radius: 20px; padding: 3px 9px; flex-shrink: 0;
}
.pl-c-btxt { min-width: 0; flex: 1; }
.pl-c-bt {
  font-weight: 700; font-size: 14.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-c-bs {
  font-size: 12.5px; color: var(--text3); margin-top: 3px; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Barra de plazo */
.pl-plazo { margin-bottom: 16px; }
.pl-plazo-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 12.5px; margin-bottom: 7px;
}
.pl-plazo-hd span { color: var(--text3); font-weight: 600; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-plazo-hd b { font-weight: 800; white-space: nowrap; flex-shrink: 0; }
.pl-plazo.p-ok b { color: var(--ok); }
.pl-plazo.p-wa b { color: #8B5E00; }
.pl-plazo.p-da b { color: var(--danger); }
.pl-plazo.p-pa b { color: #6B2F94; }
.pl-plazo.p-dv b { color: var(--text3); }
.pl-bar { height: 8px; border-radius: 6px; background: var(--border); overflow: hidden; }
.pl-bar i { display: block; height: 100%; border-radius: 6px; transition: width .35s ease; }
.p-ok .pl-bar i { background: linear-gradient(90deg, #0A6640, #2A9C6A); }
.p-wa .pl-bar i { background: linear-gradient(90deg, #D4860A, #F0A93C); }
.p-da .pl-bar i { background: linear-gradient(90deg, #9B1919, #C94A4A); }
.p-pa .pl-bar i { background: linear-gradient(90deg, #6B2F94, #9A5BC4); }
.p-dv .pl-bar i { background: var(--text3); }

/* Tooltip de libros del lote (hover sobre .pl-c-books) */
.pl-books-tip {
  position: fixed; z-index: 500;
  min-width: 250px; max-width: 340px;
  background: #fff; border: 1.5px solid var(--border); border-radius: 12px;
  padding: 12px; box-shadow: 0 14px 34px rgba(0,15,50,.18);
  pointer-events: none;                  /* el hover pertenece a la tarjeta, no al tooltip */
  opacity: 0; transform: translateY(-4px);
  transition: opacity .13s ease, transform .13s ease;
}
.pl-books-tip.show { opacity: 1; transform: translateY(0); }
.pl-bt-hd {
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text3); margin-bottom: 9px;
}
.pl-bt-i { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.pl-bt-txt { min-width: 0; }
.pl-bt-n {
  font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-bt-m { font-size: 12px; color: var(--text3); margin-top: 2px; }

.pl-c-ft {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.pl-c-fecha { font-size: 12.5px; color: var(--text3); }
.pl-c-fecha b { color: var(--text2); font-weight: 700; }
.pl-c-acts { display: flex; gap: 8px; flex-shrink: 0; }

@media (max-width: 1280px) {
  .pl-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pl-card-item { padding: 17px; }
  .pl-c-ft { flex-direction: column; align-items: stretch; }
  .pl-c-acts { width: 100%; }
  .pl-c-acts .btn { flex: 1; justify-content: center; }
}

/* Skeletons */
.pl-skeleton { padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
@media (max-width: 1280px) { .pl-skeleton { grid-template-columns: minmax(0,1fr); } }
.pl-skel-row {
  height: 224px; border-radius: 16px;    /* silueta de la tarjeta real */
  background: linear-gradient(90deg, #EEF2F9 25%, #E4EAF5 37%, #EEF2F9 63%);
  background-size: 400% 100%;
  animation: pl-shimmer 1.4s ease infinite;
}
@keyframes pl-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Vacío / error — ahora son tarjetas propias, no filas dentro de una tabla */
.pl-empty {
  text-align: center; padding: 56px 24px;
  background: #fff; border: 1.5px solid var(--border); border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,15,50,.04);
}
.pl-empty-i { font-size: 46px; margin-bottom: 14px; opacity: .55; }
.pl-empty b { display: block; font-size: 14px; color: var(--text2); margin-bottom: 16px; max-width: 380px; margin-left: auto; margin-right: auto; }

/* Paginación */
.pl-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 13px 18px;
  background: #fff; border: 1.5px solid var(--border); border-radius: 14px;
}
.pl-pag-info { font-size: 12px; color: var(--text3); }
.pl-pag-btns { display: flex; align-items: center; gap: 5px; }
.pl-pag-size { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text2); }
.pl-pag-size select { width: auto; padding: 6px 10px; font-size: 12px; }

/* (Los estilos de la rejilla de tarjetas viven arriba, junto a .pl-grid.
   mostrarEstado() solo pone display:none para ocultar, o lo limpia para
   que mande el CSS.) */

/* ══════════════════════════════════════════════════════════
   PANEL LATERAL DE DETALLE (drawer)
   ══════════════════════════════════════════════════════════ */
.pld-overlay {
  display: none; position: fixed; inset: 0; z-index: 210;
  background: rgba(0,15,50,.35);
}
.pld-overlay.open { display: block; }

.pld {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 211;
  width: 420px; max-width: 100vw;
  background: #fff;
  box-shadow: -18px 0 50px rgba(0,15,60,.22);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.pld.open { transform: translateX(0); }

.pld-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; flex-shrink: 0;
  background: linear-gradient(135deg, #002880, #1A52B5); color: #fff;
}
.pld-hd b { font-family: var(--font-head); font-size: 17px; }

.pld-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.pld-ft {
  flex-shrink: 0; padding: 14px 20px;
  border-top: 1.5px solid var(--border); background: var(--off-white);
  display: flex; flex-direction: column; gap: 8px;
}
.pld-ft .btn { width: 100%; justify-content: center; }

/* Skeleton del panel */
.pld-skel { display: flex; flex-direction: column; gap: 14px; }
.pld-skel-av { width: 56px; height: 56px; border-radius: 50%; background: #EEF2F9; }
.pld-skel-line, .pld-skel-block {
  border-radius: 8px;
  background: linear-gradient(90deg, #EEF2F9 25%, #E4EAF5 37%, #EEF2F9 63%);
  background-size: 400% 100%;
  animation: pl-shimmer 1.4s ease infinite;
}
.pld-skel-line { height: 14px; }
.pld-skel-block { height: 90px; }

/* Encabezado de persona en el panel */
.pld-persona {
  display: flex; align-items: center; gap: 13px;
  padding-bottom: 16px; border-bottom: 1.5px solid var(--border); margin-bottom: 16px;
}
/* Sin las tarjetas de estadísticas debajo: un poco más de aire y avatar
   más grande para aprovechar el espacio que antes ocupaban. */
.pld-persona-sola { padding-bottom: 20px; margin-bottom: 20px; }
.pld-persona-sola .av { width: 58px; height: 58px; font-size: 18px; }
.pld-persona-sola .pld-persona-n { font-size: 19px; }
.pld-persona .av { width: 50px; height: 50px; font-size: 16px; flex-shrink: 0; }
.pld-persona-n { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--text); }
.pld-persona-m { font-size: 12.5px; color: var(--text2); margin-top: 1px; }
.pld-persona-c { font-size: 11px; color: var(--text3); margin-top: 2px; }

.pld-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.pld-stat { text-align: center; background: var(--off-white); border-radius: 10px; padding: 9px 4px; }
.pld-stat b { display: block; font-size: 17px; font-family: var(--font-head); color: var(--blue-dark); }
.pld-stat span { font-size: 9.5px; color: var(--text3); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }

.pld-sec { margin-bottom: 22px; }
.pld-sec-t {
  font-size: 11px; font-weight: 800; color: var(--text3);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 11px;
}
.pld-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; }
.pld-row span:first-child { color: var(--text3); }
.pld-row span:last-child  { color: var(--text); font-weight: 600; text-align: right; }

.pld-warn {
  font-size: 12px; color: var(--warn); background: var(--warn-bg);
  padding: 9px 11px; border-radius: 8px; margin-top: 6px; font-weight: 600;
}

/* Libros prestados en el panel */
.pld-libro {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.pld-libro:last-child { border-bottom: none; }
.pld-libro-cover { width: 34px; height: 46px; border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.pld-libro-t { font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: 0.1px; margin-bottom: 3px; }
.pld-libro-a { font-size: 11.5px; line-height: 1.5; letter-spacing: 0.15px; color: var(--text3); }
.pld-libro-cod { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.pld-libro-cod span {
  font-size: 9px; font-weight: 700; font-family: ui-monospace, monospace;
  background: var(--off-white); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px;
}
.pld-libro-cod span.dev { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.pld-ver-todos {
  background: none; border: none; color: var(--blue); font-size: 12px; font-weight: 700;
  cursor: pointer; padding: 8px 0 0; text-align: left;
}

/* Línea de tiempo de historial */
.pld-tl { position: relative; padding-left: 20px; }
.pld-tl::before { content: ''; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 2px; background: var(--border); }
.pld-tl-item { position: relative; padding-bottom: 16px; }
.pld-tl-item:last-child { padding-bottom: 0; }
.pld-tl-item::before {
  content: ''; position: absolute; left: -20px; top: 3px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--blue); border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px var(--blue);
}
.pld-tl-accion { font-size: 12.5px; font-weight: 700; color: var(--text); }
.pld-tl-detalle { font-size: 11.5px; color: var(--text2); margin-top: 1px; }
.pld-tl-meta { font-size: 10.5px; color: var(--text3); margin-top: 2px; }

/* ══════════════════════════════════════════════════════════
   MODAL "REGISTRAR DEVOLUCIÓN" v2 — panel dividido, por cantidad
   ══════════════════════════════════════════════════════════ */
.dv2 {
  /* grid-template-rows: minmax(0,1fr) es lo que realmente limita la fila del
     grid al alto del contenedor: sin esto, max-height no basta — la fila del
     grid crece con el contenido más alto (.dv2-main) y el resto se recorta
     por overflow:hidden en vez de scrollear internamente. */
  display: grid; grid-template-columns: 300px 1fr; grid-template-rows: minmax(0, 1fr);
  width: min(840px, 100%); max-height: min(90vh, 960px);
  background: #fff; border-radius: 28px; overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,21,64,.30);
  animation: modalIn .22s cubic-bezier(.4,0,.2,1);
}
/* ── Panel lateral azul ── */
.dv2-side {
  position: relative; overflow-y: auto; overflow-x: hidden; color: #fff;
  padding: 34px 30px; display: flex; flex-direction: column; min-height: 0;
  background: linear-gradient(165deg, var(--blue-mid) 0%, var(--blue) 44%, var(--blue-deep) 100%);
}
.dv2-side::-webkit-scrollbar { width: 6px; }
.dv2-side::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 6px; }
.dv2-side::-webkit-scrollbar-track { background: transparent; }
.dv2-side::before {
  content: ""; position: absolute; right: -50px; top: -50px; width: 200px; height: 200px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
}
.dv2-side::after {
  content: ""; position: absolute; left: -40px; bottom: -30px; width: 150px; height: 150px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,107,0,.14), transparent 68%);
}
.dv2-side { padding: 38px 32px; }
.dv2-side > * { position: relative; }
.dv2-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #FFC79A; margin-bottom: 10px; }
.dv2-side-t { font-family: var(--font-head); font-weight: 800; font-size: 26px; line-height: 1.05; letter-spacing: -.02em; }
.dv2-side-s { font-size: 12px; color: var(--blue-light); margin-top: 6px; }
.dv2-doc {
  display: flex; align-items: center; gap: 12px; margin-top: 26px; padding: 14px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 16px;
}
.dv2-doc .av {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #fff, #E6EEFF); color: var(--blue-dark); font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.dv2-doc .dn { font-weight: 800; font-size: 14px; }
.dv2-doc .dm { font-size: 11.5px; color: var(--blue-light); }
/* Número grande como tarjeta de vidrio, ubicada tras el docente */
.dv2-big {
  margin-top: 26px; text-align: center; padding: 22px 0;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 18px;
}
.dv2-big .n {
  font-family: var(--font-head); font-weight: 800; font-size: 58px; line-height: .84;
  font-variant-numeric: lining-nums tabular-nums;
}
.dv2-big .l { font-size: 10.5px; color: var(--blue-light); text-transform: uppercase; letter-spacing: .08em; margin-top: 8px; }
/* Metadatos al fondo del panel */
.dv2-meta { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; }
.dv2-meta .row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.12);
}
.dv2-meta .row:last-child { border-bottom: none; }
.dv2-meta .k { color: var(--blue-light); }
.dv2-meta .v { font-weight: 700; }
.dv2-meta .v.pill { background: rgba(255,107,0,.2); color: #FFC79A; padding: 2px 9px; border-radius: 999px; font-size: 11px; }
.dv2-meta .v.pill.warn { background: rgba(255,80,80,.22); color: #FFC0C0; }

/* ── Panel principal ── */
/* min-height:0 es imprescindible: sin esto un grid/flex item no se encoge
   por debajo de su contenido y el scroll interno de .dv2-main-scroll no activa
   (el modal se desborda en vez de scrollear, cortando el pie de vista). */
.dv2-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dv2-close {
  position: absolute; top: 18px; right: 18px; z-index: 3;
  color: var(--text3); background: var(--off-white); border: 1.5px solid var(--border);
}
/* padding-right menor: el scrollbar-gutter (stable) reserva ~15px a la derecha,
   así el contenido queda ópticamente centrado (34px izq ≈ 19px pad + 15px gutter der).
   padding-top de 66px deja aire bajo el botón de cerrar (36px, top:18 → termina en 54). */
.dv2-main-scroll { flex: 1; overflow-y: auto; padding: 66px 19px 8px 34px; scrollbar-gutter: stable; }
.dv2-main-scroll::-webkit-scrollbar { width: 8px; }
.dv2-main-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.dv2-main-scroll::-webkit-scrollbar-track { background: transparent; }
/* Título de sección con filete a la derecha (editorial) */
.dv2-h {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 800; color: var(--text3);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 18px;
}
.dv2-h::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Filas editoriales: portada con lomo, título en serif, autor en itálica, mucho aire */
.dv2-lista { display: flex; flex-direction: column; }
.dv2-row { display: flex; align-items: center; gap: 16px; padding: 15px 0; }
.dv2-row + .dv2-row { border-top: 1px solid var(--border); }
.dv2-cover {
  width: 42px; height: 57px; border-radius: 4px 6px 6px 4px; flex-shrink: 0; overflow: hidden;
  position: relative; box-shadow: 0 6px 14px rgba(0,21,64,.2);
}
.dv2-cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; z-index: 2; background: rgba(0,0,0,.26); }
.dv2-cover::after { content: ""; position: absolute; right: 0; top: 2px; bottom: 2px; width: 2px; z-index: 2; background: repeating-linear-gradient(180deg,#fff,#fff 1px,#ddd 1px,#ddd 2px); opacity: .55; }
.dv2-info { flex: 1; min-width: 0; }
.dv2-t {
  font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--text);
  letter-spacing: -.008em; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dv2-a { font-size: 12px; color: var(--text3); margin-top: 3px; font-style: italic; }

/* Stepper (un poco más grande, acorde a las filas editoriales) */
.dv2-stepper {
  display: flex; align-items: center; flex-shrink: 0;
  border: 1.5px solid var(--border); border-radius: 13px; overflow: hidden;
  background: var(--off-white); box-shadow: 0 2px 6px rgba(0,21,64,.06);
}
.dv2-stepper button {
  width: 36px; height: 40px; border: none; background: transparent; color: var(--blue);
  font-size: 20px; font-weight: 600; cursor: pointer; transition: .13s;
  display: flex; align-items: center; justify-content: center;
}
.dv2-stepper button:hover:not(:disabled) { background: var(--blue-xlight); }
.dv2-stepper button:disabled { color: var(--text3); opacity: .4; cursor: not-allowed; }
.dv2-stepper .val {
  min-width: 56px; text-align: center; background: #fff; height: 40px;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  border-left: 1.5px solid var(--border); border-right: 1.5px solid var(--border);
}
.dv2-stepper .val b { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.dv2-stepper .val small { font-size: 11px; color: var(--text3); }

/* Selector de fecha: trigger tipo tarjeta que abre un calendario propio.
   Mismo lenguaje visual que .dv2-doc del panel lateral. */
.dv2-fecha-wrap { position: relative; margin-bottom: 24px; }
.dv2-fecha {
  width: 100%; text-align: left; font-family: var(--font-body); cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 16px;
  background: var(--off-white); border: 1.5px solid var(--border);
  transition: border-color .15s, box-shadow .15s;
}
.dv2-fecha:hover { border-color: var(--blue-light); }
.dv2-fecha[aria-expanded="true"] {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,61,165,.08);
}
.dv2-fecha .ic {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: var(--blue-xlight); color: var(--blue); border: 1px solid var(--blue-light);
  display: flex; align-items: center; justify-content: center;
}
.dv2-fecha .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dv2-fecha .l {
  font-size: 10.5px; font-weight: 800; color: var(--text3);
  text-transform: uppercase; letter-spacing: .06em;
}
.dv2-fecha .v { font-size: 15px; font-weight: 700; color: var(--text); text-transform: capitalize; }
.dv2-fecha .chev { color: var(--text3); flex-shrink: 0; transition: transform .18s; }
.dv2-fecha[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--blue); }

/* Popover del calendario: ocupa el mismo ancho que el trigger de fecha
   (left:0 + right:0 sobre el wrap) para que quede claramente asociado a ese
   campo y cubra su columna, sin dejar asomar el contenido de atrás. */
.dv2-cal-pop {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20;
  background: #fff; border: 1.5px solid var(--border); border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0,21,64,.20); padding: 16px 20px 20px;
  animation: dvCalIn .16s cubic-bezier(.4,0,.2,1);
}
@keyframes dvCalIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Cabecera de navegación del mes */
.dv2-cal-pop .pl-cal-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dv2-cal-title { flex: 1; text-align: center; }
.dv2-cal-title b { font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--blue-deep); text-transform: capitalize; }

/* Cabecera de días de la semana */
.dv2-cal-month .pl-cal-wd { grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.dv2-cal-month .pl-cal-wd span { font-size: 10px; color: var(--text3); padding-bottom: 4px; }

/* Grilla de días: celdas cuadradas, uniformes y con aire.
   grid-auto-rows fija evita que la primera fila se dimensione de forma
   irregular al mezclar spans vacíos y botones con número. */
.dv2-cal-month .pl-cal-grid { grid-template-columns: repeat(7, 1fr); grid-auto-rows: 40px; row-gap: 2px; }
.dv2-cal-month .pl-cal-d {
  height: 38px; margin: 0 auto; width: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 600; color: var(--text2);
  font-variant-numeric: tabular-nums; transition: background .13s, color .13s;
}
.dv2-cal-month .pl-cal-d:hover:not(.empty) { background: var(--blue-xlight); color: var(--blue-dark); }
/* Días de los meses adyacentes: atenuados, pero clicables */
.dv2-cal-month .pl-cal-d.fuera { color: var(--text3); opacity: .5; font-weight: 500; }
.dv2-cal-month .pl-cal-d.fuera:hover { opacity: 1; }
.dv2-cal-month .pl-cal-d.hoy { font-weight: 800; color: var(--blue); }
/* Día seleccionado: círculo azul con sombra suave (estilo pill limpio) */
.dv2-cal-month .pl-cal-d.ini,
.dv2-cal-month .pl-cal-d.fin {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff;
  font-weight: 800; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,61,165,.35);
}
.dv2-cal-month .pl-cal-d.ini:hover,
.dv2-cal-month .pl-cal-d.fin:hover { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff; }
.dv2-cal-month .pl-cal-d.ini.hoy::after,
.dv2-cal-month .pl-cal-d.fin.hoy::after { display: none; }

/* Pie: resumen a la izquierda (flex:1, nunca se parte en dos líneas),
   botones a la derecha con ancho mínimo consistente. */
.dv2-ft {
  flex-shrink: 0; padding: 20px 30px; border-top: 1.5px solid var(--border); background: var(--off-white);
  display: flex; align-items: center; gap: 18px;
}
.dv2-resumen { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text2); line-height: 1.35; }
.dv2-resumen b { color: var(--ok); font-variant-numeric: tabular-nums; }
.dv2-resumen .danger { color: var(--danger); font-weight: 700; }
.dv2-ft-btns { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dv2-ft-btns .btn { white-space: nowrap; }
.dv2-ft-btns .btn.primary { min-width: 176px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.dv2-ft-btns .btn.primary svg { flex-shrink: 0; }

@media (max-width: 680px) {
  .dv2 { grid-template-columns: 1fr; max-height: 94vh; }
  .dv2-side { padding: 24px 24px; }
  .dv2-big { margin-top: 18px; }
  .dv2-big .n { font-size: 42px; }
  .dv2-ft { flex-direction: column; align-items: stretch; }
  .dv2-ft-btns { justify-content: flex-end; }
}

/* ══════════════════════════════════════════════════════════
   MODAL DE DEVOLUCIÓN (registrar / ver)
   ══════════════════════════════════════════════════════════ */
.dv-overlay { padding: 20px; z-index: 220; }
.dv-modal {
  background: #fff; border-radius: 18px; overflow: hidden;
  width: min(760px, 100%); max-height: min(90vh, 860px);
  display: flex; flex-direction: column;
  box-shadow: 0 30px 90px rgba(0,15,60,.38);
  animation: modalIn .22s cubic-bezier(.4,0,.2,1);
}
.dv-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; flex-shrink: 0;
  background: linear-gradient(135deg, #002880, #1A52B5);
}
.dv-hd-left { display: flex; align-items: center; gap: 13px; }
.dv-hd-ico {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center;
}
.dv-hd-title { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: #fff; line-height: 1.1; }
.dv-hd-sub   { font-size: 11.5px; color: rgba(255,255,255,.7); margin-top: 2px; }

.dv-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.dv-ft {
  flex-shrink: 0; padding: 13px 22px;
  border-top: 1.5px solid var(--border); background: var(--off-white);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.dv-resumen { font-size: 12.5px; font-weight: 700; color: var(--text2); }
.dv-resumen b { color: var(--blue-dark); }
.dv-ft-btns { display: flex; gap: 9px; margin-left: auto; }

/* Cabecera informativa del préstamo */
.dv-info {
  background: var(--off-white); border-radius: 12px; padding: 13px 15px; margin-bottom: 14px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 16px;
}
.dv-info-i span { display: block; font-size: 10.5px; color: var(--text3); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.dv-info-i b { font-size: 13px; color: var(--text); font-weight: 700; }
.dv-alerta {
  grid-column: 1 / -1;
  font-size: 12px; font-weight: 700; padding: 8px 11px; border-radius: 8px;
}
.dv-alerta.vencido { background: var(--danger-bg); color: var(--danger); }
.dv-alerta.parcial { background: var(--blue-xlight); color: var(--blue-dark); }
.dv-progreso { grid-column: 1 / -1; }
.dv-progreso-bar { height: 6px; border-radius: 6px; background: #e2e9f4; overflow: hidden; margin-top: 5px; }
.dv-progreso-fill { height: 100%; background: var(--ok); border-radius: 6px; }

/* Barra de fecha + acciones rápidas */
.dv-toolbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.dv-fecha { display: flex; flex-direction: column; gap: 5px; }
.dv-fecha .fi { width: auto; }
.dv-quick { display: flex; gap: 7px; }

/* Lista de ejemplares */
.dv-lista { border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden; }
.dv-libro-hd {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 13px; background: var(--off-white);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px; font-weight: 800; color: var(--blue-dark);
}
.dv-libro-hd .cover-mini { width: 24px; height: 31px; border-radius: 3px; overflow: hidden; flex-shrink: 0; cursor: zoom-in; }
.dv-libro-hd small { font-weight: 600; color: var(--text3); font-size: 11px; }

.dp-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.dp-item:last-child { border-bottom: none; }
.dp-item.sel { background: var(--blue-xlight); }
.dp-item input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--blue); cursor: pointer; flex-shrink: 0; }
.dp-item-c {
  font-size: 10.5px; color: var(--text2); font-family: ui-monospace, monospace;
  font-weight: 700; min-width: 82px;
}
.dp-item-estado { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.dp-item-estado select { width: auto; padding: 5px 9px; font-size: 12px; min-width: 140px; }
.dp-item-obs { flex: 1 1 100%; margin-top: 7px; padding-left: 27px; }
.dp-item-obs input { width: 100%; padding: 7px 10px; font-size: 12px; }
.dp-item-obs.req input { border-color: var(--danger); }
.dp-item-obs-msg { font-size: 10.5px; color: var(--danger); font-weight: 700; margin-top: 3px; }

/* Ejemplares ya devueltos (histórico, no editable) */
.dv-devuelto {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 13px; border-bottom: 1px solid var(--border);
  background: var(--ok-bg); font-size: 12px; color: var(--ok);
}
.dv-devuelto:last-child { border-bottom: none; }
.dv-devuelto code { font-family: ui-monospace, monospace; font-weight: 700; font-size: 10.5px; }

/* Badges de estado físico */
.dv-badge {
  font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .02em;
}
.dv-badge.bueno       { background: var(--ok-bg);     color: var(--ok); }
.dv-badge.leve        { background: var(--warn-bg);   color: var(--warn); }
.dv-badge.deteriorado { background: var(--orange-light); color: var(--orange-dark); }
.dv-badge.perdido     { background: var(--danger-bg); color: var(--danger); }

/* Línea de tiempo de devoluciones (Ver devolución) */
.vd-mov {
  border: 1.5px solid var(--border); border-radius: 12px;
  padding: 13px 15px; margin-bottom: 12px;
}
.vd-mov:last-child { margin-bottom: 0; }
.vd-mov-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 9px; flex-wrap: wrap;
}
.vd-mov-t { font-size: 13px; font-weight: 800; color: var(--blue-dark); }
.vd-mov-m { font-size: 11px; color: var(--text3); }
.vd-mov-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; font-size: 12.5px; color: var(--text2); flex-wrap: wrap;
}
.vd-mov-item .cover-mini { width: 20px; height: 26px; border-radius: 3px; overflow: hidden; flex-shrink: 0; cursor: zoom-in; }
.vd-mov-item code { font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--text3); }
.vd-mov-obs {
  font-size: 11.5px; color: var(--text2); font-style: italic;
  background: var(--off-white); border-radius: 7px; padding: 6px 9px; margin-top: 7px;
}

/* Vista previa ampliada de portada (hover sobre .cover-mini con data-cover-prev) */
.cover-hover-preview {
  position: fixed; z-index: 500;
  width: 130px; height: 172px;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,15,50,0.35), 0 0 0 3px rgba(255,255,255,0.95);
  pointer-events: none;
  opacity: 0; transform: scale(.9);
  transition: opacity .13s ease, transform .13s ease;
}
.cover-hover-preview.show { opacity: 1; transform: scale(1); }

@media (max-width: 640px) {
  .dv-overlay { padding: 0; }
  .dv-modal { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .dp-item-estado { margin-left: 0; flex: 1 1 100%; }
  .dp-item-estado select { width: 100%; }
  .dv-ft-btns { flex: 1 1 100%; margin-left: 0; }
  .dv-ft-btns .btn { flex: 1; justify-content: center; }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .pld { width: 48vw; }
}
@media (max-width: 800px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .pld { width: 100vw; }
}
@media (max-width: 640px) {
  /* Antes 45% cada uno (dos por fila): el texto de las opciones más largas
     ("Todos los estados", "Todas las materias") no cabía y quedaba cortado.
     Se apilan a ancho completo, una por fila. */
  .pl-toolbar .pl-sel { flex: 1 1 100%; min-width: 0; }
  .pl-rango { flex: 1 1 100%; }
  .pl-btn-fecha { width: 100%; justify-content: center; }
}

/* ── QUICK ACTIONS ── */
.qa-section-title {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text3); margin-bottom: 14px;
}
.qg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.qa {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 24px;
  cursor: pointer;
  transition: all .25s ease;
  display: flex; align-items: flex-start; gap: 18px;
  position: relative;
  overflow: hidden;
}
.qa::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
  background: var(--blue);
  border-radius: var(--r) 0 0 var(--r);
  opacity: 0;
  transition: opacity .25s;
}
.qa:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.qa:hover::before { opacity: 1; }
.qa.qa-or::before { background: var(--orange); }
.qa.qa-or:hover { border-color: var(--orange); }
.qa.qa-gr::before { background: var(--ok); }
.qa.qa-gr:hover { border-color: var(--ok); }
.qi {
  width: 50px; height: 50px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
  transition: transform .25s;
}
.qa:hover .qi { transform: scale(1.1); }
.qi.bl { background: var(--blue-xlight); }
.qi.or { background: var(--orange-light); }
.qi.gr { background: #E0F5E4; }
.ql { font-size: 15px; font-weight: 700; color: var(--text); }
.qd { font-size: 12.5px; color: var(--text3); margin-top: 4px; line-height: 1.45; }

/* ── CARDS ── */
.card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s;
}
.card:hover { box-shadow: var(--shadow-md); }
.ch { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.ct {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text3);
}
.cl { font-size: 12.5px; color: var(--orange); cursor: pointer; font-weight: 700; transition: color .15s; }
.cl:hover { color: var(--orange-dark); text-decoration: underline; }

/* ── TWO COLUMN ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ── TABLE RESPONSIVE ── */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Página Usuarios: barra de búsqueda ── */
.us-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.us-search {
  flex: 1; min-width: 220px; display: flex; align-items: center; gap: 9px;
  background: var(--off-white); border: 1.5px solid var(--border); border-radius: 10px; padding: 0 13px;
  transition: border-color .18s;
}
.us-search:focus-within { border-color: var(--blue); }
.us-search svg { color: var(--text3); flex-shrink: 0; }
.us-search input {
  border: 0; background: none; outline: none; width: 100%; padding: 10px 0;
  font-family: inherit; font-size: 13px; color: var(--text);
}
/* Botón ✕ dentro del buscador: solo visible con texto escrito.
   `display: grid` tiene más especificidad que el `display: none` implícito
   del atributo `hidden`, así que hay que anularlo explícitamente. */
.us-limpiar {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: none;
  background: var(--border); color: var(--text2); cursor: pointer;
  display: grid; place-items: center; transition: .15s;
}
.us-limpiar[hidden] { display: none; }
.us-limpiar:hover { background: var(--text3); color: #fff; }
.us-col-num { text-align: center; }
th.us-col-num { text-align: center; }


/* ══════════════════════════════════════════
   Usuarios — panel de gestión
   ══════════════════════════════════════════ */

/* Filtro por rol: control segmentado. El conteo vive dentro del propio
   botón, así el filtro y el dato que lo justifica son la misma pieza. */
.us-segs {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
}
.us-seg {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border: none;
  border-radius: 9px; background: none; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--text2); transition: .15s;
}
.us-seg:hover { background: var(--off-white); }
.us-seg.on { background: var(--blue); color: #fff; }
.us-seg b { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.us-seg-pt { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.us-seg-pt.total { background: var(--blue); }
.us-seg-pt.doc   { background: #C45000; }
.us-seg-pt.bib   { background: var(--ok); }
.us-seg-pt.adm   { background: #2B4FA8; }
.us-seg.on .us-seg-pt { background: #fff; }

/* Conteo de resultados: vive dentro de la barra, junto al buscador que lo
   modifica, en vez de en una línea propia sin relación visual con nada. */
.us-conteo {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text2);
  background: var(--off-white); border: 1px solid var(--border);
  padding: 9px 15px; border-radius: 10px; white-space: nowrap;
}
.us-conteo b { color: var(--blue); font-weight: 800; font-variant-numeric: tabular-nums; }
.us-conteo:empty { display: none; }

/* Grilla de fichas */
.us-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px;
}
.us-vacio {
  grid-column: 1 / -1; padding: 46px; text-align: center; color: var(--text3);
  font-size: 14px; background: var(--surface); border: 1px dashed var(--border); border-radius: 16px;
}

/* Ficha con banda superior de color: el retrato se monta sobre el borde de la
   banda, la identidad va centrada y las cifras al pie en dos celdas. */
.us-ficha {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, border-color .2s;
}
.us-ficha:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -20px rgba(0,20,60,.35);
}

/* --band tiñe la cabecera y --av-solid el avatar sin foto: el mismo color del
   rol, en su tono más saturado, para que el retrato se recorte contra la banda. */
.us-ficha.doc { --acc:#C45000; --acc-bd:#F0C9A6; --acc-soft:#FDF3EA; --band:linear-gradient(120deg,#A34400,#D96A15); --av-solid:#A34400; }
.us-ficha.bib { --acc:var(--ok); --acc-bd:#A9DCC4; --acc-soft:#EDF7F1; --band:linear-gradient(120deg,#166B37,#2A9455); --av-solid:#166B37; }
.us-ficha.adm { --acc:#2B4FA8; --acc-bd:#B6C7EC; --acc-soft:#EEF3FC; --band:linear-gradient(120deg,#0B4F9E,#1668C8); --av-solid:#0B4F9E; }
.us-ficha.otr { --acc:var(--text3); --acc-bd:var(--border); --acc-soft:var(--off-white); --band:linear-gradient(120deg,#5A6B82,#8595AB); --av-solid:#5A6B82; }

.us-f-top { height: 56px; position: relative; background: var(--band); flex-shrink: 0; }

/* Retrato circular montado sobre el borde inferior de la banda */
/* `box-sizing: border-box` hace que los 64px incluyan el aro blanco, igual que
   en el mockup; sin él el retrato mediría 72px y bajaría el resto del cuerpo. */
.us-av-wrap {
  position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%);
  width: 64px; height: 64px; box-sizing: border-box;
  border-radius: 50%; border: 4px solid var(--surface); background: var(--surface);
}
.us-av {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  object-fit: cover; background: var(--surface);
}
/* Sin foto: iniciales sobre el color sólido del rol. Heredan la tipografía de
   la interfaz (font-family: inherit) para que no aparezca la serif del
   navegador ni una fuente distinta a la del resto de la ficha. */
.us-av.vacio {
  background: var(--av-solid);
  font-family: inherit;
  color: #fff; font-size: 21px; font-weight: 700; letter-spacing: .5px;
}

/* El contenedor es flex para poder anclar el pie abajo, pero `align-items:
   center` evita que los hijos —en particular el badge de rol— se estiren a
   todo el ancho, que es el comportamiento por defecto en una columna flex. */
.us-f-body {
  padding: 38px 18px 0; text-align: center; flex: 1;
  display: flex; flex-direction: column; align-items: center;
}
/* Estos tres sí ocupan el ancho completo; solo el badge queda ajustado al texto */
.us-f-id, .us-f-datos, .us-f-pie { width: 100%; }
.us-f-id { min-width: 0; }
.us-f-n {
  font-size: 15.5px; font-weight: 800; letter-spacing: -.2px; color: var(--text); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.us-f-u {
  font-size: 12.5px; color: var(--text3); margin-top: 2px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.us-rol {
  display: inline-flex; align-items: center; margin-top: 10px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 20px; white-space: nowrap;
  color: var(--acc); background: var(--acc-soft);
}

/* Cifras al pie, en dos celdas divididas por un filete */
.us-f-datos {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: 16px -18px 0; border-top: 1px solid var(--line);
}
.us-d { padding: 12px 8px; min-width: 0; }
.us-d + .us-d { border-left: 1px solid var(--line); }
.us-d-v {
  font-size: 17px; font-weight: 800; letter-spacing: -.4px; color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* La materia es texto, no cifra: se compone más pequeña para que no compita */
.us-d-v.txt { font-size: 13px; letter-spacing: 0; }
.us-d-v.act { color: #C45000; }
.us-d-v.mut { color: var(--text3); }
.us-d-l {
  font-size: 9.5px; letter-spacing: .7px; text-transform: uppercase;
  color: var(--text3); font-weight: 800; margin-top: 2px;
}

.us-f-pie { margin: auto -18px 0; padding: 14px 18px 16px; border-top: 1px solid var(--line); }
.us-estado { display: none; }
/* Los 3 botones en una sola fila, centrados: la tarjeta ya es lo bastante
   ancha (min 300px, ver .us-grid) como para que quepan sin wrap. */
.us-f-acc { display: flex; align-items: center; justify-content: center; gap: 8px; }

.us-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1 1 0; min-width: 0; height: 36px; padding: 0 10px;
  border-radius: 9px; border: 1.5px solid var(--border); background: var(--surface);
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text2);
  cursor: pointer; transition: .15s; white-space: nowrap;
}
.us-act.edit:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-xlight); }
.us-act.reset:hover { border-color: #F0C868; color: #92650A; background: #FDF6E3; }
.us-act.del { flex: 0 0 36px; width: 36px; padding: 0; color: var(--text3); }
.us-act.del:hover { border-color: #EFC0C0; color: var(--danger); background: var(--danger-bg); }

.us-prot {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 36px; font-size: 11px; color: var(--text3); font-weight: 600;
  background: var(--off-white); border-radius: 9px;
}

/* La grilla iguala la altura de todas las fichas de una misma fila, para que
   los pies queden alineados aunque el nombre ocupe una o dos líneas. */
.us-grid { align-items: stretch; }

@media (max-width: 620px) {
  .us-segs { display: flex; width: 100%; }
  .us-seg { flex: 1 1 auto; justify-content: center; padding: 9px 11px; }
  .us-grid { grid-template-columns: 1fr; }
}

/* ── LIST ROWS ── */
.lr {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
  flex-wrap: wrap;
}
.lr:last-child { border-bottom: none; }
.lr:hover { background: var(--blue-xlight); margin: 0 -10px; padding: 12px 10px; border-radius: 8px; }
.av {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.li { flex: 1; min-width: 0; }
.ln { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb { font-size: 12px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── BADGES ── */
.badge {
  font-size: 11px; padding: 4px 12px;
  border-radius: 20px; font-weight: 700;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.badge.ok    { background: var(--ok-bg); color: var(--ok); }
.badge.ok::before { background: var(--ok); }
.badge.warn  { background: var(--warn-bg); color: var(--warn); }
.badge.warn::before { background: var(--warn); animation: pulse 1.5s infinite; }
.badge.danger{ background: var(--danger-bg); color: var(--danger); }
.badge.danger::before { background: var(--danger); animation: pulse 1s infinite; }
.badge.info  { background: var(--blue-xlight); color: var(--blue-dark); }
.badge.info::before { background: var(--blue); }
.badge.orange{ background: var(--orange-light); color: var(--orange-dark); }
.badge.orange::before { background: var(--orange); }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── TABLE ── */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--text3);
  padding: 0 14px 14px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.tbl td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text); vertical-align: middle;
}
.tbl tr:last-child td { border-bottom: none; }
.tbl tr { transition: background .15s; }
.tbl tbody tr:hover td { background: var(--blue-xlight); }

/* ── ACTION BUTTONS ── */
.action-btns {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}

/* ── BUTTONS ── */
.btn {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn:hover { border-color: var(--text3); background: var(--off-white); }
.btn:active { transform: scale(0.97); }
.btn.primary {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: white;
  border-color: var(--blue);
}
.btn.primary:hover {
  background: linear-gradient(135deg, var(--blue-dark), #001A6E);
  box-shadow: var(--shadow-blue);
}
.btn.or {
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  color: white;
  border-color: var(--orange);
}
.btn.or:hover {
  background: linear-gradient(135deg, var(--orange-dark), #B04800);
  box-shadow: var(--shadow-orange);
}
.btn.danger {
  background: linear-gradient(135deg, var(--danger), #7A1414);
  color: white;
  border-color: var(--danger);
}
.btn.danger:hover {
  background: linear-gradient(135deg, #7A1414, #5A0C0C);
  box-shadow: 0 8px 22px rgba(155,25,25,.28);
}
.btn.danger:disabled, .btn.danger[disabled] {
  background: #E4A8A8; border-color: #E4A8A8; cursor: not-allowed;
}
.btn.primary:disabled, .btn.primary[disabled] {
  background: var(--border); border-color: var(--border); color: var(--text3);
  cursor: not-allowed; box-shadow: none;
}
.btn.or:disabled, .btn.or[disabled] {
  background: var(--border); border-color: var(--border); color: var(--text3);
  cursor: not-allowed; box-shadow: none;
}
.btn.sm { font-size: 11.5px; padding: 6px 14px; border-radius: 8px; }
.btn.sm.danger {
  background: var(--danger-bg); color: var(--danger); border-color: #F3C6C6;
  display: inline-flex; align-items: center; gap: 5px;
}
.btn.sm.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.sm.danger svg { flex-shrink: 0; }

/* ── FORMS ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fg { display: flex; flex-direction: column; gap: 6px; }
.fg.full { grid-column: 1 / -1; }
.fl { font-size: 11.5px; font-weight: 700; color: var(--text2); letter-spacing: .02em; }

/* ── Checklist de libros (modal Nuevo préstamo) ── */
.p-libros-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 6px;
}
.p-libro-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  cursor: pointer; transition: background .12s;
}
.p-libro-row:hover { background: var(--bg2); }
.p-libro-row.checked { background: var(--blue-xlight); }
.p-libro-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--blue); flex-shrink: 0; cursor: pointer; }
.p-libro-cover { width: 28px; height: 36px; border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.p-libro-info { flex: 1; min-width: 0; }
.p-libro-titulo { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-libro-meta { font-size: 11px; color: var(--text3); }
.p-libro-disp { font-size: 11px; font-weight: 700; color: #0A5C38; flex-shrink: 0; white-space: nowrap; }
.p-libros-empty { padding: 20px; text-align: center; color: var(--text3); font-size: 13px; }

/* ══════════════════════════════════════════════════════════
   NUEVO PRÉSTAMO — modal de pantalla completa (2 columnas)
   ══════════════════════════════════════════════════════════ */
.np-overlay { padding: 0; align-items: stretch; justify-content: stretch; }
.np-overlay.open { display: flex; }
body.np-lock { overflow: hidden; }

.np-modal {
  background: var(--off-white);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalIn .22s cubic-bezier(.4,0,.2,1);
}
@media (min-width: 1101px) {
  .np-overlay { padding: 20px; }
  .np-modal   { border-radius: 18px; max-width: 1600px; margin: 0 auto;
                box-shadow: 0 30px 90px rgba(0,15,60,.4); }
}

/* Capa de carga mientras se trae el detalle del préstamo */
.np-loading {
  display: none;
  position: absolute; inset: 0; z-index: 40;
  background: rgba(255,255,255,.94);
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: var(--text2); font-size: 13.5px; font-weight: 700;
}
.np-modal.loading .np-loading { display: flex; }
.np-modal { position: relative; }
.np-spin-lg {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--blue-light); border-top-color: var(--blue);
  animation: np-spin .7s linear infinite;
}

/* Cabecera */
.np-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  background: linear-gradient(135deg, #002880, #1A52B5);
  flex-shrink: 0;
}
/* Identificador del préstamo en edición */
.np-hd-badge {
  margin-left: 14px;
  background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.3);
  color: #fff; font-size: 11px; font-weight: 800;
  padding: 4px 11px; border-radius: 20px; white-space: nowrap;
}

/* Aviso de cambio de fecha original */
.np-warn {
  padding: 9px 22px;
  background: var(--warn-bg); color: var(--warn);
  font-size: 12px; font-weight: 700;
  border-bottom: 1.5px solid var(--border); flex-shrink: 0;
}
.np-hd-left { display: flex; align-items: center; gap: 13px; }
.np-hd-ico {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0;
}
.np-hd-title { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: #fff; line-height: 1.1; }
.np-hd-sub   { font-size: 11.5px; color: rgba(255,255,255,.7); margin-top: 2px; }
.np-close {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.3);
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.np-close:hover { background: rgba(255,255,255,.3); transform: scale(1.08) rotate(90deg); }

/* Datos generales */
.np-gen {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  padding: 12px 22px; background: #fff;
  border-bottom: 1.5px solid var(--border); flex-shrink: 0;
}
.np-f { display: flex; flex-direction: column; gap: 5px; }
.np-l {
  font-size: 10px; font-weight: 800; color: var(--text2);
  letter-spacing: .04em; text-transform: uppercase;
}
.np-f .fi { min-height: 38px; }
.np-f-doc  { position: relative; min-width: 260px; flex: 1 1 260px; max-width: 420px; }
.np-f-grow { flex: 1 1 200px; min-width: 180px; }

/* Selector de docente con dropdown */
.np-doc-box { position: relative; }
.np-doc-box .fi { width: 100%; }
.np-doc-box.picked .fi {
  background: var(--blue-xlight); border-color: var(--blue-light);
  color: var(--blue-dark); font-weight: 700;
}

/* Docente responsable bloqueado (editor de solicitud del docente): siempre
   es el usuario logueado, así que el campo se muestra lleno pero inerte,
   con un candado en vez del dropdown de búsqueda. */
.np-doc-box--locked .fi {
  background: var(--blue-xlight); border-color: var(--blue-light);
  color: var(--blue-dark); font-weight: 700; padding-right: 38px;
  cursor: not-allowed; opacity: 1; -webkit-text-fill-color: var(--blue-dark);
}
.np-doc-lock-ic {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--blue); pointer-events: none;
}
.np-doc-drop {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1.5px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0,30,80,.18);
  max-height: 260px; overflow-y: auto; padding: 5px;
}
.np-doc-drop.open { display: block; }
.np-doc-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 8px; cursor: pointer;
}
.np-doc-row:hover     { background: var(--off-white); }
.np-doc-row.sel       { background: var(--blue-xlight); }
.np-doc-row .av       { width: 28px; height: 28px; font-size: 10px; flex-shrink: 0; }
.np-doc-nom  { font-size: 12.5px; font-weight: 600; }
.np-doc-meta { font-size: 10.5px; color: var(--text3); }

/* Filtros */
.np-filt {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  padding: 10px 22px; background: #fff;
  border-bottom: 1.5px solid var(--border); flex-shrink: 0;
}
.np-filt .fi { width: auto; }                       /* .fi trae width:100% */
.np-search { flex: 1 1 240px; min-width: 200px; border-radius: 22px; }
.np-sel    { flex: 0 0 auto; min-width: 155px; }
.np-switch {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; color: var(--text2);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.np-switch input { display: none; }
.np-switch-track {
  width: 34px; height: 18px; border-radius: 20px; background: #cfd9ea;
  position: relative; transition: background .18s; flex-shrink: 0;
}
.np-switch-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  transition: left .18s; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.np-switch input:checked + .np-switch-track { background: var(--blue); }
.np-switch input:checked + .np-switch-track::after { left: 18px; }

/* Cuerpo */
.np-body { flex: 1; display: flex; min-height: 0; }
.np-cat {
  flex: 1; overflow-y: auto; padding: 18px 22px;
  background: var(--off-white); min-width: 0;
}
/* .book-grid se declara más abajo: hace falta subir la especificidad */
.np-cat .np-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 14px;
}
/* Tarjetas más compactas que en el catálogo: caben más por pantalla */
.np-grid .bc { height: 150px; }
.np-grid .book-card:hover { transform: translateY(-4px); }
.np-grid .bt { font-size: 12.5px; }
.np-grid .bm { font-size: 11px; }
.np-more { text-align: center; padding: 18px; color: var(--text3); font-size: 12.5px; font-weight: 600; }

/* Tarjeta: botón / stepper al pie */
.np-card-ft { margin-top: auto; border-top: 1px solid var(--border); }
.np-add {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 12px 14px; border: none; cursor: pointer;
  background: var(--blue); color: #fff;
  font-size: 13px; font-weight: 700; font-family: inherit;
  transition: background .18s;
}
.np-add:hover { background: var(--blue-dark); }
.np-add--off {
  background: var(--off-white); color: var(--text3); cursor: not-allowed;
}
.np-add--off:hover { background: var(--off-white); }
.np-step {
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-xlight);
}
.np-step button {
  width: 38px; height: 42px; border: none; background: transparent;
  color: var(--blue); font-size: 18px; font-weight: 800; cursor: pointer; line-height: 1;
}
.np-step button:disabled { color: #b9c7dd; cursor: not-allowed; }
.np-step input {
  width: 44px; height: 42px; border: none; background: transparent; text-align: center;
  font-family: inherit; font-size: 14px; font-weight: 800; color: var(--blue-dark);
  -moz-appearance: textfield;
}
.np-step input::-webkit-outer-spin-button,
.np-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Etiquetas sobre la portada */
.np-nodisp {
  position: absolute; top: 8px; left: 14px; z-index: 3;
  background: var(--danger-bg); color: var(--danger);
  font-size: 9.5px; font-weight: 800;
  padding: 3px 9px; border-radius: 20px;
}
.book-card.np-off .bc { filter: grayscale(.85) opacity(.6); }

/* Insignias de estado del libro dentro del préstamo (modo edición) */
.np-tag {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  font-size: 9.5px; font-weight: 800;
  padding: 3px 9px; border-radius: 20px;
}
.np-tag--in    { background: var(--blue-xlight); color: var(--blue-dark); }
.np-tag--nuevo { background: var(--ok-bg);       color: var(--ok); }
.book-card.np-in .bi { background: rgba(235,241,255,.45); }

/* Línea "Incluido / disponibles adicionales" */
.np-incl {
  font-size: 10.5px; font-weight: 700; color: var(--blue-dark);
  margin-top: 5px; line-height: 1.4;
}
.np-incl small { display: block; color: var(--text3); font-weight: 600; }

/* Panel de resumen */
.np-sum {
  width: 330px; flex-shrink: 0;
  background: #fff; border-left: 1.5px solid var(--border);
  display: flex; flex-direction: column;
}
.np-sum-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; border-bottom: 1.5px solid var(--border);
}
.np-sum-hd b { font-size: 13px; color: var(--blue-dark); }
.np-sum-cnt {
  background: var(--orange); color: #fff;
  font-size: 10.5px; font-weight: 800; padding: 3px 10px; border-radius: 20px;
}
.np-sum-body { flex: 1; overflow-y: auto; padding: 12px 18px; }
.np-sum-ft {
  display: flex; gap: 9px; padding: 14px 18px;
  border-top: 1.5px solid var(--border); background: var(--off-white);
}
.np-sum-ft .btn         { flex: 1; justify-content: center; min-height: 42px; }
.np-sum-ft .btn.primary { flex: 1.7; }
.np-sum-ft .btn.primary:disabled {
  background: #c3d0e6; border-color: #c3d0e6; color: #fff; cursor: not-allowed;
}

/* Ficha del docente dentro del resumen */
.np-sum-doc {
  display: flex; align-items: center; gap: 9px;
  background: var(--blue-xlight); border-radius: 10px;
  padding: 9px 11px; margin-bottom: 12px;
}
.np-sum-doc .av { width: 30px; height: 30px; font-size: 11px; flex-shrink: 0; }
.np-sum-doc-n { font-size: 12px; font-weight: 800; color: var(--blue-dark); }
.np-sum-doc-m { font-size: 10.5px; color: var(--text2); }
.np-sum-doc.vacio { background: var(--warn-bg); color: var(--warn); font-size: 11.5px; font-weight: 700; }

/* Línea de libro en el resumen */
.np-si {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.np-si:last-of-type { border-bottom: none; }
.np-si-cover {
  width: 34px; height: 46px; border-radius: 4px; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 2px 7px rgba(0,0,0,.2);
}
.np-si-info { flex: 1; min-width: 0; }
.np-si-t {
  font-size: 12px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.np-si-m { font-size: 10.5px; color: var(--text3); margin-top: 1px; }
.np-si-step {
  display: flex; align-items: center; flex-shrink: 0;
  border: 1.5px solid var(--border); border-radius: 20px; overflow: hidden; background: #fff;
}
.np-si-step button {
  width: 26px; height: 28px; border: none; background: transparent;
  color: var(--blue); font-size: 14px; font-weight: 800; cursor: pointer; line-height: 1;
}
.np-si-step button:disabled { color: #c6d2e4; cursor: not-allowed; }
.np-si-step span { min-width: 24px; text-align: center; font-size: 12.5px; font-weight: 800; }
.np-si-del {
  width: 26px; height: 26px; border: none; background: transparent;
  color: #cbd5e1; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; transition: color .15s;
}
.np-si-del:hover { color: var(--danger); }

/* Totales */
.np-tot {
  background: var(--off-white); border-radius: 10px;
  padding: 11px 13px; margin-top: 12px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--text2);
}
.np-tot div { display: flex; justify-content: space-between; }
.np-tot b   { color: var(--blue-dark); }

/* Estado calculado del préstamo (no editable) */
.np-estado {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; margin-bottom: 12px;
  border-radius: 10px; font-size: 11.5px; font-weight: 700;
}
.np-estado--al_dia    { background: var(--ok-bg);     color: var(--ok); }
.np-estado--por_vencer{ background: var(--warn-bg);   color: var(--warn); }
.np-estado--vencido   { background: var(--danger-bg); color: var(--danger); }
.np-estado--parcial   { background: var(--blue-xlight); color: var(--blue-dark); }
.np-estado--devuelto  { background: var(--off-white); color: var(--text2); }

/* Códigos de ejemplar físico */
.np-copias {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px;
}
.np-copia {
  font-size: 9.5px; font-weight: 700; font-family: ui-monospace, monospace;
  background: var(--off-white); color: var(--text2);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px;
}
.np-copia--dev { background: var(--ok-bg); color: var(--ok); border-color: transparent; }

/* Devoluciones parciales / histórico no editable */
.np-hist {
  margin-top: 12px; padding: 10px 12px;
  background: var(--off-white); border-radius: 10px;
  border-left: 3px solid var(--ok);
}
.np-hist-t {
  font-size: 10.5px; font-weight: 800; color: var(--ok);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
}
.np-hist-i { font-size: 11.5px; color: var(--text2); padding: 3px 0; }

/* Resumen de cambios (modo edición) */
.np-cambios {
  margin-top: 12px; padding: 11px 13px;
  background: #FFF9E8; border: 1.5px solid #F5DFA0; border-radius: 10px;
}
.np-cambios-t {
  font-size: 10.5px; font-weight: 800; color: var(--warn);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 7px;
}
.np-cambio {
  font-size: 11.5px; color: var(--text2); padding: 3px 0; line-height: 1.45;
}
.np-cambio b { color: var(--text); }
.np-cambio .del { color: var(--danger); font-weight: 700; }
.np-cambio .add { color: var(--ok); font-weight: 700; }

/* Modal de eliminación de préstamo */
.del-title-ico {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--danger); background: var(--danger-bg);
}
.del-resumen {
  background: var(--off-white); border-radius: 12px;
  padding: 14px 16px; margin: 14px 0;
}
.del-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; }
.del-row span:first-child { color: var(--text3); font-weight: 600; }
.del-row span:last-child  { color: var(--text); font-weight: 700; text-align: right; }
.del-libros { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.del-libro-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text2); padding: 3px 0;
}
.del-libro-item .cover-mini { width: 22px; height: 29px; border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.del-nota {
  font-size: 12px; color: var(--text2); margin-top: 10px;
  padding: 9px 11px; background: var(--blue-xlight); border-radius: 8px;
}
.del-warn-parcial {
  font-size: 12px; color: var(--warn); background: var(--warn-bg);
  padding: 9px 11px; border-radius: 8px; margin-top: 10px; font-weight: 600;
}
.del-motivo-otro { margin-top: 8px; }

/* ══════════════════════════════════════════════════════════
   Modal de confirmación de préstamo — estilo "estante" (cabezal azul)
   ══════════════════════════════════════════════════════════ */
.modal.lf-confirm { padding: 0; overflow: hidden; }

/* Cabezal azul institucional con el título y el resumen de ejemplares */
.lf-cabezal {
  background: radial-gradient(130% 130% at 88% -30%, var(--blue-mid), var(--blue) 42%, var(--blue-deep) 100%);
  padding: 26px 32px; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.lf-cabezal .modal-title { color: #fff; margin-bottom: 3px; }
.lf-cabezal .modal-sub { color: var(--blue-light); margin: 0; }
.lf-cabezal-badge {
  text-align: center; flex-shrink: 0;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  border-radius: 15px; padding: 9px 15px; min-width: 78px;
}
.lf-cabezal-badge .n {
  font-family: var(--font-body); font-weight: 800; font-size: 22px; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em;
}
.lf-cabezal-badge .l {
  font-size: 9px; font-weight: 800; color: var(--blue-light);
  text-transform: uppercase; letter-spacing: .06em; margin-top: 2px;
}

/* Cuerpo con las secciones de cambios.
   scrollbar-gutter: stable both-edges reserva el ancho de la barra de scroll a
   ambos lados, para que las filas queden centradas aunque aparezca el scroll. */
.lf-confirm .lf-diff {
  max-height: 340px; overflow-y: auto;
  padding: 24px 32px; margin: 0;
  border: none; border-radius: 0;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.lf-confirm .lf-diff::-webkit-scrollbar { width: 8px; }
.lf-confirm .lf-diff::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 8px;
}
.lf-confirm .lf-diff::-webkit-scrollbar-track { background: transparent; }
.lf-diff-sec { margin-bottom: 18px; }
.lf-diff-sec:last-child { margin-bottom: 4px; }
.lf-diff-t {
  font-size: 10.5px; font-weight: 800; color: var(--text3);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px;
}
.lf-diff-l { font-size: 13px; color: var(--text2); padding: 3px 0; }
.lf-diff-l b { color: var(--text); }
.lf-diff-l .add { color: var(--ok); font-weight: 700; }
.lf-diff-l .del { color: var(--danger); font-weight: 700; }

/* Fila-libro estilo estante: portada con lomo + título/autor + cantidad.
   Padding simétrico; el acento de color va pegado al borde izquierdo como
   pseudo-elemento absoluto (no ocupa layout, por eso no rompe la simetría). */
.lf-diff-book {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px; border-radius: 16px; margin-bottom: 11px;
  background: var(--off-white); border: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.lf-diff-book:last-child { margin-bottom: 0; }
.lf-diff-book::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 4px; border-radius: 0 4px 4px 0; background: var(--ok);
}
.lf-diff-book.is-del::before { background: var(--danger); }
.lf-diff-book-cover {
  width: 44px; height: 60px; border-radius: 4px 7px 7px 4px; overflow: hidden;
  flex-shrink: 0; position: relative; box-shadow: 0 6px 14px rgba(0,21,64,.22);
}
.lf-diff-book-cover::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; z-index: 2;
  background: linear-gradient(90deg, rgba(0,0,0,.32), rgba(0,0,0,0));
}
.lf-diff-book-cover::after {
  content: ""; position: absolute; right: 0; top: 2px; bottom: 2px; width: 3px; z-index: 2;
  background: repeating-linear-gradient(180deg,#fff,#fff 1px,#e2e2e2 1px,#e2e2e2 2px); opacity: .7;
}
.lf-diff-book-info { flex: 1; min-width: 0; }
.lf-diff-book-t {
  font-family: var(--font-head); font-weight: 700; font-size: 16px; line-height: 1.24;
  letter-spacing: -.005em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lf-diff-book-a {
  font-size: 12px; color: var(--text3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Cantidad a la derecha, alineada como en el estante */
.lf-diff-qty { text-align: right; flex-shrink: 0; min-width: 88px; }
.lf-diff-qty .n {
  font-family: var(--font-body); font-weight: 800; font-size: 20px; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; color: var(--ok);
}
.lf-diff-qty.is-del .n { color: var(--danger); }
.lf-diff-qty .l {
  font-size: 9.5px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .05em; margin-top: 4px;
}

/* Pie del modal */
.lf-mf {
  padding: 18px 32px 24px; margin-top: 0;
  border-top: 1.5px solid var(--border);
  align-items: center;
}
.lf-foot-count { margin-right: auto; font-size: 12.5px; color: var(--text2); font-weight: 600; }
.lf-foot-count b { color: var(--blue-dark); }

/* El selector de motivo (edición desde Historial) va con su propio margen dentro del cuerpo */
.lf-confirm .lf-motivo { padding: 0 32px; margin-top: 4px; }

/* ── Corrección administrativa de un préstamo YA DEVUELTO ──
   El catálogo y sus filtros quedan inertes: los libros de un préstamo cerrado
   son historial de devoluciones. Solo se corrigen los datos generales. */
.np-meta-aviso {
  padding: 9px 22px;
  background: var(--blue-xlight); color: var(--blue-dark);
  font-size: 12px; font-weight: 600;
  border-bottom: 1.5px solid var(--border); flex-shrink: 0;
}
.np-modal.meta .np-filt,
.np-modal.meta .np-cat {
  opacity: .5;
  pointer-events: none;
  user-select: none;
}
/* Cantidad fija (no editable) en el resumen */
.np-si-fijo {
  font-size: 11.5px; font-weight: 800; color: var(--text3);
  background: var(--off-white); border: 1.5px solid var(--border);
  border-radius: 8px; padding: 5px 10px; white-space: nowrap;
}

/* Motivo de modificación (solo al editar desde Historial) */
.lf-motivo { margin-top: 16px; }
.lf-motivo-err {
  font-size: 11.5px; color: var(--danger); font-weight: 700; margin-top: 5px;
}
/* Sin motivo el botón queda bloqueado: debe VERSE bloqueado. El estilo de
   "primary deshabilitado" solo existía dentro de .np-sum-ft. */
#lfConfirmOk:disabled {
  background: #c3d0e6; background-image: none;
  border-color: #c3d0e6; color: #fff; cursor: not-allowed;
}

/* ── HISTORIAL: tarjetas compactas, misma familia visual que .hz-row /
   .sol-row (Inicio/Solicitudes). El acento (--acc) es por ESTADO del
   préstamo — a diferencia de las otras dos pantallas donde es por materia,
   aquí lo más útil de un vistazo es si el préstamo está al día o no. ── */
.hist-head {
  display: grid; grid-template-columns: 22% minmax(0,1fr) 22% 12% auto;
  padding: 2px 26px 10px 28px; gap: 22px;
}
.hist-head span {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text3);
}

.hist-row {
  display: grid; grid-template-columns: 22% minmax(0,1fr) 22% 12% auto;
  gap: 22px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 24px 14px 26px; position: relative; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,20,60,.04); transition: box-shadow .15s ease, transform .15s ease;
  margin-bottom: 8px;
}
.hist-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--acc, var(--blue)); opacity: .55; transition: width .15s ease, opacity .15s ease;
}
.hist-row:hover { box-shadow: 0 10px 24px rgba(0,20,60,.10); transform: translateY(-1px); }
.hist-row:hover::before { width: 6px; opacity: 1; }

.hist-per { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hist-av {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
}
.hist-nm { font-weight: 700; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-mat { font-size: 11.5px; color: var(--text3); margin-top: 1px; }

/* Vigencia: barra de cuánto del plazo (fp→fd) ya transcurrió — misma
   filosofía que la barra de disponibilidad en Solicitudes. */
.hist-vig { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hist-vig-txt { font-size: 11.5px; font-weight: 700; color: var(--text2); white-space: nowrap; }
.hist-vig-bar { width: 100%; max-width: 160px; height: 6px; border-radius: 999px; background: var(--off-white); overflow: hidden; }
.hist-vig-bar > i { display: block; height: 100%; border-radius: 999px; }

.hist-acciones { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.hist-btn { display: inline-flex; align-items: center; gap: 6px; }
.hist-btn svg { flex-shrink: 0; }
.hist-btn[disabled] { opacity: .45; cursor: not-allowed; }
/* En pantallas angostas el botón se reduce al icono; conserva su aria-label */
@media (max-width: 900px) {
  .hist-btn .hist-btn-txt { display: none; }
  .hist-btn { padding: 6px 10px; }
}

/* Vacío */
.np-empty { text-align: center; padding: 44px 12px; }
.np-empty-i { font-size: 42px; opacity: .3; margin-bottom: 10px; }
.np-empty b { display: block; font-size: 13px; color: var(--text2); }
.np-empty small { font-size: 11.5px; color: var(--text3); }

/* Spinner del botón */
.np-spin {
  width: 14px; height: 14px; border-radius: 50%; display: inline-block;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
  animation: np-spin .6s linear infinite; margin-right: 8px; vertical-align: -2px;
}
@keyframes np-spin { to { transform: rotate(360deg); } }

/* ── Responsive: un solo scroll vertical, acciones fijas al pie ──
   Docente + 2 fechas + filtros ya apilados (breakpoint de 600px, más abajo)
   ocupan por sí solos ~75% del alto del modal en un celular chico. Repartir
   el 25% restante entre catálogo y resumen con scroll interno cada uno (el
   enfoque anterior) dejaba ambos ilegibles: paneles de pocos px o el uno
   desbordando al otro — el bug reportado ("no hace scroll bien").
   Se resuelve dejando de limitar la altura de .np-body: todo el modal pasa
   a ser una columna continua que scrollea junto (docente → fechas →
   filtros → catálogo → resumen), y solo Cancelar/Enviar quedan "pegados"
   al fondo con sticky, siempre alcanzables sin competir por espacio. */
@media (max-width: 900px) {
  .np-modal { overflow: hidden; }
  .np-body {
    flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch;
    min-height: 0;
  }
  .np-cat { overflow-y: visible; flex: none; padding: 14px; }
  /* La regla base es `.np-cat .np-grid`: aquí hace falta la misma especificidad */
  .np-cat .np-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
  .np-sum {
    width: 100%; border-left: none; border-top: 1.5px solid var(--border);
    max-height: none; flex: none;
  }
  .np-sum-body { overflow-y: visible; }
  .np-sum-ft {
    position: sticky; bottom: 0; z-index: 5;
    box-shadow: 0 -6px 16px -8px rgba(0,20,60,.18);
  }
  .np-gen, .np-filt { padding: 10px 14px; }
  .np-f-doc { max-width: none; }
}
@media (max-width: 600px) {
  .np-hd { padding: 12px 14px; }
  .np-hd-title { font-size: 17px; }
  .np-cat .np-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .np-sum-ft .btn { min-height: 46px; }
  .np-f, .np-f-doc, .np-f-grow { flex: 1 1 100%; min-width: 0; }
}

/* ── Editar préstamo: selector de docente con búsqueda ── */
.ep-docente-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  margin-top: 6px;
}
.ep-docente-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  cursor: pointer; transition: background .12s;
}
.ep-docente-row:hover { background: var(--bg2); }
.ep-docente-row.selected { background: var(--blue-xlight); }
.ep-docente-row .av { width: 30px; height: 30px; font-size: 11px; flex-shrink: 0; }
.ep-docente-info { flex: 1; min-width: 0; }
.ep-docente-nombre { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-docente-meta { font-size: 11px; color: var(--text3); }
.ep-docente-check { color: var(--blue); font-weight: 800; flex-shrink: 0; opacity: 0; }
.ep-docente-row.selected .ep-docente-check { opacity: 1; }

/* Cantidad por título dentro del checklist de edición */
.ep-qty {
  display: inline-flex; align-items: center; flex-shrink: 0;
  border: 1.5px solid var(--border); border-radius: 20px;
  overflow: hidden; background: #fff;
}
.ep-qty button {
  width: 24px; height: 26px; border: none; background: transparent;
  color: var(--blue); font-size: 13px; font-weight: 800; cursor: pointer; line-height: 1;
}
.ep-qty button:disabled { color: #c6d2e4; cursor: not-allowed; }
.ep-qty b { min-width: 22px; text-align: center; font-size: 12px; font-weight: 800; color: var(--blue-dark); }

/* Aviso de cambio de docente */
.ep-warn {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 9px 12px;
  background: var(--warn-bg); color: var(--warn);
  border-radius: 8px; font-size: 12px; font-weight: 600;
}

/* Bitácora de cambios */
.ep-audit {
  max-height: 150px; overflow-y: auto;
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 8px 10px; background: var(--bg2);
}
.ep-audit-item {
  font-size: 11.5px; color: var(--text2);
  padding: 6px 0; border-bottom: 1px dashed var(--border);
  line-height: 1.5;
}
.ep-audit-item:last-child { border-bottom: none; }
.ep-audit-meta { color: var(--text3); font-size: 10.5px; }
.ep-audit-tag {
  display: inline-block; font-size: 10px; font-weight: 700;
  background: var(--blue-xlight); color: var(--blue-dark);
  padding: 1px 7px; border-radius: 20px; margin-right: 4px;
}

/* ── Préstamos: fila de lote (grupo de libros prestados juntos) ── */
.lote-libros { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; max-width: 220px; }
.lote-book-thumb { width: 26px; height: 34px; border-radius: 3px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.18); flex-shrink: 0; }
.lote-book-more { font-size: 11px; font-weight: 700; color: var(--text3); padding: 0 4px; }
.lote-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; color: var(--blue);
  cursor: pointer; margin-top: 5px; user-select: none;
}
.lote-toggle svg { transition: transform .15s; flex-shrink: 0; }
.lote-toggle.open svg { transform: rotate(90deg); }
.lote-detail-row td { padding: 0; }
.lote-detail-inner {
  background: var(--bg2);
  padding: 10px 16px 10px 66px;
  border-top: 1px dashed var(--border);
}
.lote-detail-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; font-size: 12.5px;
}
.lote-detail-item .cover-mini { width: 22px; height: 29px; border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.fi {
  font-family: var(--font-body);
  font-size: 13.5px;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--off-white);
  color: var(--text);
  outline: none;
  transition: all .2s ease;
  width: 100%;
}
.fi:focus {
  border-color: var(--blue);
  background: white;
  box-shadow: 0 0 0 4px rgba(0,61,165,0.08);
}
.fi::placeholder { color: var(--text3); }

/* ── SEARCH ROW ── */
.srow { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.srow .fi { flex: 1; min-width: 180px; }

/* ── MODAL ── */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,15,50,0.6);
  z-index: 200;
  align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  padding: 16px;
  overscroll-behavior: contain;
}
.modal-overlay.open { display: flex; }

/* Mientras hay un modal abierto la página de atrás no se mueve: sin esto,
   al llegar al final del contenido del modal (o si este no desborda) la
   rueda del ratón desplaza la lista que quedó debajo. */
body.modal-abierto { overflow: hidden; }

/* El diálogo de confirmación siempre va por encima de cualquier otro modal */
#modalConfirm { z-index: 320; }

/* Jerarquía de capas: página (0) < panel lateral (210/211) <
   modales de acción abiertos DESDE el panel (220) < confirmación (320).
   Sin esto, "Registrar devolución", "Editar préstamo" y "Eliminar
   préstamo" heredaban el z-index 200 genérico y quedaban detrás del
   panel lateral (211), invisibles y sin poder interactuar con ellos. */
.np-overlay,
#modalDeletePrestamo,
#modalDevolverParcial,
#modalVerDevolucion,
#modalNotificaciones {
  z-index: 220;
}
/* modalLoanConfirm se abre ANIDADO sobre .np-overlay (al pulsar "Guardar
   cambios" en Editar préstamo) — debe ir por encima de su padre (220) o
   queda invisible detrás y el guardado parece no hacer nada. */
#modalLoanConfirm { z-index: 230; }
.modal {
  background: white;
  border-radius: var(--r);
  padding: 34px;
  width: 540px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,15,50,0.3);
  animation: modalIn .25s cubic-bezier(.4,0,.2,1);
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-title {
  font-family: var(--font-head);
  font-size: 24px;
  color: var(--blue-dark);
  margin-bottom: 4px;
}
.modal-sub { font-size: 13px; color: var(--text3); margin-bottom: 24px; }
.mf {
  display: flex; gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
  border-top: 1.5px solid var(--border);
  padding-top: 20px;
  flex-wrap: wrap;
}

/* ── Modal "Detalle de solicitud" del docente — boleta perforada +
   línea de estado. Exclusivo de missolicitudes.js/inicio.js: el admin
   sigue usando #modalSolicitud (openDetalle en solicitudes.js) sin
   cambios. El header rompe el padding uniforme del .modal para ir
   edge-to-edge, así que .ms-modal queda sin padding propio y .ms-body
   toma el que antes tenía todo el modal. */
.ms-modal {
  width: 580px; padding: 0; overflow: hidden;
  display: flex; flex-direction: column; max-height: 90vh;
}
.ms-hd {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--blue-deep), var(--blue) 65%, var(--blue-mid));
  border-radius: var(--r) var(--r) 0 0;
  padding: 28px 34px 24px;
}
.ms-hd::after {
  content: ""; position: absolute; right: -40px; top: -50px; width: 180px; height: 180px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%);
}
.ms-eyebrow {
  position: relative; font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 8px;
}
.ms-title { position: relative; font-family: var(--font-head); font-size: 26px; color: #fff; font-weight: 700; margin: 0; }
.ms-sub { position: relative; font-size: 12.5px; color: rgba(255,255,255,.8); font-weight: 500; margin: 4px 0 0; }
.ms-hd-badge {
  position: absolute; top: 26px; right: 30px;
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800;
  padding: 5px 12px 5px 9px; border-radius: 100px; white-space: nowrap;
  background: rgba(255,255,255,.16); color: #fff;
}
.ms-hd-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.ms-hd-badge.ok::before { background: #6EE7B7; }
.ms-hd-badge.danger::before { background: #F5A3A3; }
.ms-hd-badge.warn::before { background: #F4C466; }

.ms-body {
  padding: 26px 34px 0; flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
/* Solo esta zona hace scroll — el header y los botones quedan fijos.
   La barra se oculta visualmente pero el scroll sigue funcionando
   (rueda, touch, teclado). */
.ms-scroll {
  flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 22px;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge/IE viejos */
}
.ms-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }  /* Chrome/Safari */
.ms-ft { margin-top: 0; padding: 18px 34px; flex-shrink: 0; }

.ms-track { display: flex; align-items: center; gap: 0; margin-bottom: 24px; }
.ms-step { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1; position: relative; }
.ms-step .dot {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  z-index: 2; border: 3px solid var(--surface); background: var(--border); color: var(--text3);
}
.ms-step.done .dot { background: var(--ok); color: #fff; }
.ms-step.now .dot { background: var(--blue); color: #fff; box-shadow: 0 0 0 4px var(--blue-xlight); }
.ms-step.danger .dot { background: var(--danger); color: #fff; }
.ms-step span { font-size: 10.5px; font-weight: 700; color: var(--text3); text-align: center; }
.ms-step.done span, .ms-step.now span, .ms-step.danger span { color: var(--text); }
.ms-line { position: absolute; top: 13px; left: 50%; width: 100%; height: 2px; background: var(--border); z-index: 1; }
.ms-line.on { background: var(--ok); }
.ms-line.danger { background: var(--danger); }
.ms-step:last-child .ms-line { display: none; }

.ms-who { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ms-av {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: var(--blue-xlight); color: var(--blue);
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
}
.ms-who b { font-size: 14px; color: var(--text); display: block; }
.ms-who span { font-size: 11.5px; color: var(--text3); }

table.ms-tbl { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
table.ms-tbl th {
  text-align: left; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text3); padding: 0 0 8px; border-bottom: 1px solid var(--border);
}
table.ms-tbl td { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
table.ms-tbl tr:last-child td { border-bottom: none; }
.ms-tbl-libro { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ms-tbl-libro .ms-cov { width: 30px; height: 40px; flex-shrink: 0; border-radius: 5px; overflow: hidden; }
.ms-tbl-libro span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-disp { font-weight: 800; font-variant-numeric: tabular-nums; }
.ms-disp.ok { color: var(--ok); }
.ms-disp.no { color: var(--danger); }

.ms-notas, .ms-resp {
  font-size: 12.5px; border-radius: 0 10px 10px 0; padding: 11px 14px; line-height: 1.5; margin-top: 14px;
}
.ms-notas { background: var(--blue-xlight); border-left: 3px solid var(--blue-light); color: var(--text2); }
.ms-resp.ok { background: var(--ok-bg); border-left: 3px solid var(--ok); color: var(--ok); }
.ms-resp.danger { background: var(--danger-bg); border-left: 3px solid var(--danger); color: var(--danger); }

@media (max-width: 640px) {
  .ms-modal { padding: 22px 20px; }
  .ms-step span { font-size: 9.5px; }
}

/* ══════════════════════════════════════════════════════════
   Diálogo de confirmación (descartar / eliminar / etc.)
   Modal genérico reutilizado — estilo pulido, centrado.
   ══════════════════════════════════════════════════════════ */
.confirm-dialog {
  max-width: 420px; width: 100%; text-align: center;
  padding: 32px 34px 28px; border-radius: 22px;
}
/* Ícono en badge circular con halo (reemplaza el emoji suelto) */
.confirm-ico {
  width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--warn); background: var(--warn-bg);
  box-shadow: 0 0 0 8px rgba(122,79,0,.06);
}
.confirm-title {
  font-family: var(--font-head); font-weight: 800; font-size: 22px;
  color: var(--blue-deep); letter-spacing: -.01em; margin-bottom: 8px;
}
.confirm-msg {
  font-size: 13.5px; color: var(--text2); line-height: 1.55;
  max-width: 34ch; margin: 0 auto;
}
.confirm-ft {
  display: flex; gap: 11px; justify-content: center; margin-top: 26px;
}
.confirm-ft .btn { min-width: 128px; justify-content: center; padding: 12px 22px; border-radius: 12px; font-size: 13.5px; }
/* Variante de peligro para el badge (eliminar) — se activa con .danger en el diálogo */
.confirm-dialog.danger .confirm-ico { color: var(--danger); background: var(--danger-bg); box-shadow: 0 0 0 8px rgba(155,25,25,.06); }

/* ── TOAST ── */
.toast {
  position: fixed;
  bottom: 30px; right: 30px;
  color: white;
  font-size: 13.5px; font-weight: 700;
  padding: 14px 24px;
  border-radius: var(--r-sm);
  box-shadow: 0 10px 36px rgba(0,0,0,0.22);
  z-index: 999;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: all .3s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  display: flex; align-items: center; gap: 8px;
  max-width: calc(100vw - 40px);
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }

/* ── EMPTY STATE ── */
.empty {
  text-align: center;
  padding: 48px;
  color: var(--text3);
  font-size: 14px;
}
.empty-ico {
  font-size: 44px; margin-bottom: 14px;
  filter: grayscale(0.3);
}

/* ── CHIPS ── */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}
.chip.av { background: var(--ok-bg); color: var(--ok); }
.chip.un { background: var(--danger-bg); color: var(--danger); }
.chip.pa { background: var(--warn-bg); color: var(--warn); }

/* ── STAT BARS ── */
.sb-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.sb-label {
  width: 150px;
  font-size: 12.5px; color: var(--text2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 0;
}
.sb-track {
  flex: 1; height: 10px;
  background: var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.sb-fill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--blue), var(--blue-mid));
  transition: width .8s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.sb-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.25), transparent);
  border-radius: 10px;
}
.sb-fill.orange { background: linear-gradient(90deg, var(--orange), #FF9040); }
.sb-fill.teal   { background: linear-gradient(90deg, #0A5060, #1A9AB0); }
.sb-num {
  width: 30px; text-align: right;
  font-size: 12px; color: var(--text3); font-weight: 700;
}

/* ── BOOK GRID ── */
.cat-stats-row {
  display: flex; align-items: center; gap: 20px;
  padding: 10px 4px 2px; flex-wrap: wrap;
}
.cat-stat { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text3); }
.cat-stat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cat-count { font-size: 12px; color: var(--text3); font-weight: 600; margin-left: auto; white-space: nowrap; }

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 24px;
}

/* ── CARD ── */
.book-card {
  background: white;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,30,80,0.07), 0 0 0 1px rgba(0,30,80,0.04);
  display: flex; flex-direction: column;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
}
.book-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 60px rgba(0,30,80,0.18), 0 0 0 1px rgba(0,61,165,0.08);
}

/* Cover */
.bc {
  width: 100%; height: 220px;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.bc > div { width: 100% !important; height: 100% !important; }


/* Info body */
.bi {
  padding: 15px 16px 12px; flex: 1;
  display: flex; flex-direction: column;
}
.bt {
  font-size: 13.5px; font-weight: 700;
  color: var(--text); line-height: 1.35;
  margin-bottom: 3px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.bm { font-size: 11.5px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-mat-row {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 6px;
}
.b-mat-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.b-mat-lbl {
  font-size: 11.5px; font-weight: 700;
}
/* Colores por índice de paleta */
.b-mat-row.c0 .b-mat-dot { background: #003DA5; }
.b-mat-row.c0 .b-mat-lbl { color: #003DA5; }
.b-mat-row.c1 .b-mat-dot { background: #C2410C; }
.b-mat-row.c1 .b-mat-lbl { color: #C2410C; }
.b-mat-row.c2 .b-mat-dot { background: #059669; }
.b-mat-row.c2 .b-mat-lbl { color: #059669; }
.b-mat-row.c3 .b-mat-dot { background: #DC2626; }
.b-mat-row.c3 .b-mat-lbl { color: #DC2626; }
.b-mat-row.c4 .b-mat-dot { background: #7C3AED; }
.b-mat-row.c4 .b-mat-lbl { color: #7C3AED; }
.b-mat-row.c5 .b-mat-dot { background: #0891B2; }
.b-mat-row.c5 .b-mat-lbl { color: #0891B2; }

/* Stock bar */
.b-stock {
  display: flex; align-items: center; gap: 9px;
  margin-top: 11px;
}
.b-stock-bar {
  flex: 1; height: 5px; border-radius: 99px;
  background: var(--border); overflow: hidden;
}
.b-stock-fill { height: 100%; border-radius: 99px; transition: width .4s ease; }
.b-stock-label { font-size: 10.5px; font-weight: 700; color: var(--text3); white-space: nowrap; min-width: 44px; text-align: right; }

/* Footer */
.bft {
  display: flex; justify-content: space-between; align-items: center;
  gap: 6px; padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--off-white);
}
.b-nivel {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  color: var(--blue); background: var(--blue-xlight);
  padding: 3px 10px; border-radius: 20px; letter-spacing: .2px;
}

/* Icon buttons */
.btn-ico {
  width: 32px; height: 32px; border-radius: 10px;
  border: 1.5px solid var(--border); background: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; cursor: pointer; color: var(--text3);
  transition: background .18s, border-color .18s, color .18s, transform .18s;
  padding: 0;
}
.btn-ico:hover { border-color: var(--blue-light); color: var(--blue); background: var(--blue-xlight); transform: scale(1.1); }
.btn-ico.red:hover { border-color: #FFAAAA; color: var(--danger); background: var(--danger-bg); }

/* ── OVERDUE ROWS ── */
/* ══════════════════════════════════════════════════════════
   PANEL DE CONTROL · cola de trabajo
   Una sola lista ordenada por tiempo de espera. Responde "qué
   hay que hacer hoy", no "qué números hay".
   ══════════════════════════════════════════════════════════ */
/* Panel único de Inicio: saludo + fecha + contador arriba, barra apilada
   de carga (vencidos/solicitudes) y KPIs debajo. Combina el antiguo hero
   con el board para no duplicar el número de pendientes. */
.pn-board {
  position: relative; overflow: hidden; color: #fff; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--blue-deep), var(--blue) 58%, var(--blue-mid));
  border-radius: 22px;
  padding: 34px 40px;
  box-shadow: 0 20px 48px rgba(0,20,80,.28);
}
.pn-board::after {
  content: ""; position: absolute; right: -70px; top: -90px; width: 320px; height: 320px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 68%);
}
.pn-board::before {
  content: ""; position: absolute; left: -60px; bottom: -110px; width: 260px; height: 260px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,107,0,.13), transparent 70%);
}
.pn-board > * { position: relative; }
.pn-board-top { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 64px; }
.pn-board:has(.pn-segbar:not(:empty)) .pn-board-top { margin-bottom: 24px; }
.pn-board-id { display: flex; align-items: center; gap: 20px; }
.pn-board-av {
  width: 60px; height: 60px; border-radius: 16px; flex-shrink: 0; display: none;
  align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 21px; color: #fff;
  background: linear-gradient(150deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  border: 1.5px solid rgba(255,255,255,.32);
  box-shadow: 0 8px 20px rgba(0,10,40,.25), inset 0 1px 0 rgba(255,255,255,.2);
}
.pn-board-av.on { display: flex; }
.pn-board-tx { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.pn-board-saludo { font-family: var(--font-head); font-weight: 800; font-size: 28px; line-height: 1.15; color: #fff; text-wrap: balance; }
.pn-board-fecha { font-size: 13.5px; color: var(--blue-light); font-weight: 500; }
.pn-board-count {
  text-align: right; flex-shrink: 0;
  font-family: var(--font-head); font-weight: 800; font-size: 46px; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 0 4px 18px rgba(0,10,50,.35);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}
.pn-board-count small {
  display: block; font-family: var(--font-body); font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.68); margin-top: 5px;
}
.pn-board-count.pn-count-ok {
  display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800;
  color: #DFFBEC; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  padding: 12px 22px; border-radius: 100px; font-family: var(--font-body);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.pn-board-count.pn-count-ok svg { flex-shrink: 0; color: #6EE7B7; }

@media (max-width: 640px) {
  .pn-board { padding: 24px 22px; }
  .pn-board-saludo { font-size: 21px; }
  .pn-board-count { font-size: 32px; }
  .pn-board-av { width: 46px; height: 46px; font-size: 16px; }
}
@keyframes pnCountIn { from { opacity: 0; transform: scale(.7) translateY(4px); } to { opacity: 1; transform: none; } }
.pn-board-count.pn-count-in { animation: pnCountIn .35s cubic-bezier(.34,1.56,.64,1); }

/* Tarjeta propia del docente: sin barra/leyenda del admin, así el alto de
   la tarjeta responde solo a su contenido y todo queda centrado y
   proporcional (avatar + texto a la izquierda, contador a la derecha,
   ambos alineados al mismo eje vertical). */
.pn-board-doc { padding: 48px 52px; }
.pn-board-doc-in { display: flex; align-items: center; gap: 28px; }
.pn-board-doc-in .pn-board-tx { flex: 1; min-width: 0; gap: 9px; }
.pn-board-doc-in .pn-board-av {
  width: 80px; height: 80px; border-radius: 22px; font-size: 28px;
}
.pn-board-doc-in .pn-board-saludo { font-size: 38px; }
.pn-board-doc-in .pn-board-fecha { font-size: 15.5px; }
.pn-board-doc-in .pn-board-count { font-size: 60px; }
.pn-board-doc-in .pn-board-count small { font-size: 12px; }
.pn-board-doc-in .pn-board-count.pn-count-ok { font-size: 19px; padding: 15px 26px; gap: 12px; }
.pn-board-doc-in .pn-board-count.pn-count-ok svg { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .pn-board-doc { padding: 26px 24px; }
  .pn-board-doc-in { flex-wrap: wrap; gap: 16px; }
  .pn-board-doc-in .pn-board-count { margin-left: auto; }
  .pn-board-doc-in .pn-board-av { width: 52px; height: 52px; font-size: 18px; border-radius: 16px; }
  .pn-board-doc-in .pn-board-saludo { font-size: 23px; }
  .pn-board-doc-in .pn-board-count { font-size: 34px; }
}

.pn-segbar {
  height: 13px; border-radius: 8px; overflow: hidden; display: flex;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
}
.pn-segbar .s-v { background: #F58989; } .pn-segbar .s-s { background: #F4C466; } .pn-segbar .s-ok { background: #8FE3B4; }
.pn-seglg { display: flex; gap: 24px; margin-top: 14px; flex-wrap: wrap; }
.pn-seglg span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.9); }
.pn-seglg i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pn-seglg b { font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.pn-seglg .lg-v { background: #F58989; } .pn-seglg .lg-s { background: #F4C466; }
.pn-seglg .lg-w { background: rgba(255,255,255,.5); } .pn-seglg .lg-d { background: #8FE3B4; }
.pn-seglg .pn-seglg-a { margin-left: auto; opacity: .75; }

/* Cola "Requiere tu atención" — estilo bandeja premium (mismo que Solicitudes) */
.pn-cola { padding: 18px 20px 20px; }
.pn-cola-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 0 2px 14px; margin-bottom: 14px;
}
.pn-cola-o { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--text3); }
#pnCola { display: flex; flex-direction: column; gap: 11px; }

/* Fila-tarjeta con acento de urgencia degradado a la izquierda */
.pn-f {
  display: flex; align-items: center; gap: 15px;
  padding: 14px 20px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 3px 12px rgba(0,20,60,.05); position: relative; overflow: hidden;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.pn-f::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.pn-f.u-alta::before  { background: linear-gradient(#E86A6A, #D64545); }
.pn-f.u-media::before { background: linear-gradient(#F4B740, #D9920E); }
.pn-f.u-baja::before  { background: linear-gradient(#5C8AE0, var(--blue)); }
.pn-f:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,20,60,.12); border-color: var(--blue-light); }

.pn-av {
  width: 42px; height: 42px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 14px; font-weight: 800;
  background: var(--blue-xlight); color: var(--blue); border: 1px solid var(--blue-light);
}
.pn-av.warn { background: var(--warn-bg); color: var(--warn); border-color: #EBD9A6; }
.pn-av.dan  { background: var(--danger-bg); color: var(--danger); border-color: #F2C7C7; }

/* En la fila de vencido (.pn-f-sub, texto libre) el bloque de texto ocupa
   todo el espacio; en la de solicitud (.pn-f-sub-plain) queda acotado porque
   los libros ahora se ven como portadas en .pn-f-libros, no como texto. */
.pn-f-tx { min-width: 0; flex: 1; }
.pn-f:has(.pn-f-libros) .pn-f-tx { flex: 0 1 220px; }
.pn-f-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pn-f-nom { font-size: 14.5px; font-weight: 800; color: var(--text); }
.pn-f-sub {
  font-size: 12px; color: var(--text2); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pn-f-sub b { color: var(--text); font-weight: 700; }
.pn-f-sub-plain { font-size: 12px; color: var(--text3); margin-top: 3px; font-weight: 600; }
.pn-f-libros { flex-shrink: 0; }

/* Estado + días de espera + acciones: siempre anclados al borde derecho de
   la fila, sin importar cuántas portadas traiga .pn-f-libros. Sin este
   grupo, .pn-f-disp/.pn-f-esp/.pn-f-acc quedaban pegados justo después de
   los libros con hueco vacío a la derecha en vez de alinearse al margen. */
.pn-f-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; margin-left: auto; }
.pn-f-disp { flex-shrink: 0; min-width: 82px; }
.pn-f-esp {
  font-size: 11.5px; color: var(--text3); font-weight: 700; flex-shrink: 0;
  text-align: right; min-width: 78px; font-variant-numeric: lining-nums tabular-nums;
}
.pn-f-acc { display: flex; gap: 7px; flex-shrink: 0; }

.pn-pie {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 6px 2px; margin-top: 14px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text3); font-weight: 600;
}
.pn-pie b { color: var(--text2); font-weight: 800; font-variant-numeric: lining-nums tabular-nums; }
.pn-pie .sep { width: 1px; height: 14px; background: var(--border); }
.pn-pie .btn { margin-left: auto; }
.pn-pie .btn.or {
  box-shadow: var(--shadow-orange); transition: transform .18s, box-shadow .18s;
}
.pn-pie .btn.or:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255,107,0,.28); }

/* Entrada escalonada de las tarjetas de la cola: da vida sin distraer,
   y respeta a quien prefiere menos movimiento. */
@keyframes pnFIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#pnCola .pn-f {
  animation: pnFIn .32s cubic-bezier(.22,.9,.35,1) backwards;
}
#pnCola .pn-f:nth-child(1) { animation-delay: .02s; }
#pnCola .pn-f:nth-child(2) { animation-delay: .06s; }
#pnCola .pn-f:nth-child(3) { animation-delay: .10s; }
#pnCola .pn-f:nth-child(4) { animation-delay: .14s; }
#pnCola .pn-f:nth-child(5) { animation-delay: .18s; }
#pnCola .pn-f:nth-child(n+6) { animation-delay: .20s; }
@media (prefers-reduced-motion: reduce) {
  #pnCola .pn-f, .pn-board-count.pn-count-in { animation: none; }
}

/* Vacío = buena noticia, no un error: por eso va en verde y no en gris */
.pn-vacio { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 20px; gap: 9px; }
.pn-vacio-ico {
  width: 52px; height: 52px; border-radius: 50%; background: var(--ok-bg); color: var(--ok);
  display: grid; place-items: center;
}
.pn-vacio b { font-size: 14px; color: var(--text); }
.pn-vacio small { font-size: 12px; color: var(--text3); max-width: 46ch; line-height: 1.5; }

@media (max-width: 640px) {
  .pn-f { flex-wrap: wrap; }
  .pn-f-esp { min-width: 0; margin-left: auto; }
  .pn-f-acc { width: 100%; justify-content: flex-end; }
  .pn-pie .btn { margin-left: 0; width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════
   INICIO — Tabla de solicitudes / devoluciones (.hz-*)
   ══════════════════════════════════════════════════════════ */
.hz-card { padding: 0; overflow: hidden; }

/* Tabs */
.hz-tabs { display: flex; gap: 4px; padding: 6px 18px 0; border-bottom: 1.5px solid var(--border); }
.hz-tab {
  display: inline-flex; align-items: center; gap: 9px; padding: 15px 18px 14px;
  border: none; background: none; cursor: pointer; position: relative;
  font-family: inherit; font-size: 14.5px; font-weight: 700; color: var(--text3);
  border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; transition: color .15s;
}
.hz-tab svg { opacity: .75; }
.hz-tab:hover { color: var(--text2); }
.hz-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.hz-tab.active svg { opacity: 1; }
.hz-tab-n {
  font-size: 11.5px; font-weight: 800; padding: 1px 8px; border-radius: 20px;
  background: var(--surface2, #EEF2FA); color: var(--text3); font-variant-numeric: tabular-nums;
}
.hz-tab.active .hz-tab-n { background: var(--blue-xlight); color: var(--blue); }

/* Tabla — cada fila es una TARJETA separada (border-spacing en vez de
   collapse), no filas pegadas con líneas. */
.hz-table-wrap { overflow-x: visible; padding: 12px 18px 6px; }
/* La <table> se comporta como un contenedor de bloques: cada fila es un
   grid propio, así el fondo/borde/sombra viven en UNA sola caja (.hz-row) y
   el hover ilumina la tarjeta entera pareja, sin líneas entre columnas. El
   thead usa el MISMO grid, de modo que las columnas siempre coinciden. */
.hz-table { display: block; width: 100%; }
.hz-table thead { display: block; }
.hz-table thead tr, .hz-row {
  display: grid;
  grid-template-columns: 24% 26% 15% 15% 20%;
  align-items: center;
}
.hz-table thead th {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-align: left;
  text-transform: uppercase; color: var(--text3); padding: 2px 20px 8px; white-space: nowrap;
}
.hz-table thead th:first-child { padding-left: 29px; }
.hz-table thead th:last-child { text-align: center; }
.hz-table tbody { display: block; }

/* Contenedor de fila = tarjeta ÚNICA, compacta. La banda de acento por
   materia (--acc, fijado inline por fila) es discreta en reposo y gana
   presencia solo al pasar el mouse, como acento de interacción — el fondo
   se mantiene liso para no competir con el contenido. overflow visible (no
   hidden) para que la portada ampliada en hover (.hz-cover:hover) pueda
   salirse de la tarjeta sin recortarse. */
.hz-row {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; overflow: visible;
  margin-bottom: 8px; padding: 2px 4px; box-shadow: 0 2px 8px rgba(0,20,60,.04);
  transition: box-shadow .15s ease, transform .15s ease;
}
.hz-row td {
  background: transparent; padding: 8px 18px; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.hz-row td:first-child { padding-left: 22px; }
.hz-row td.hz-td-acc { align-items: center; }
/* Las celdas de estado/libro/fecha alinean su contenido a la izquierda para
   que el badge y demás elementos tomen su ancho natural, sin estirarse. */
.hz-row td.hz-td-estado, .hz-row td.hz-td-fecha { align-items: flex-start; }
.hz-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 12px 0 0 12px; background: var(--acc, var(--blue));
  opacity: .55; transition: width .15s ease, opacity .15s ease;
}
/* Hover: elevación sutil + la banda de acento gana ancho y opacidad */
.hz-row:hover {
  box-shadow: 0 10px 24px rgba(0,20,60,.10); transform: translateY(-1px);
}
.hz-row:hover::before { width: 6px; opacity: 1; }
/* Fila con menú abierto: por encima de las demás para que el dropdown no
   quede tapado por la fila siguiente. */
.hz-row:has(.hz-menu.open) { z-index: 20; }

/* Columna DOCENTE */
.hz-doc { display: flex; align-items: center; gap: 13px; min-width: 0; }
.hz-doc > div { min-width: 0; }
.hz-doc-n, .hz-doc-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-libro { min-width: 0; }
.hz-libro-tx { min-width: 0; }
.hz-libro-t, .hz-libro-a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-av {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 14.5px; font-weight: 800;
}
.hz-doc-n { font-size: 14.5px; font-weight: 800; color: var(--text); }
.hz-doc-m { font-size: 12px; font-weight: 700; margin-top: 2px; }
.hz-doc-s { font-size: 11.5px; color: var(--text3); margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.hz-doc-s::before {
  content: ""; width: 12px; height: 12px; flex-shrink: 0; background: var(--text3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Columna LIBROS */
.hz-libro { display: flex; align-items: center; gap: 13px; }
.hz-cover {
  width: 44px; height: 58px; border-radius: 6px; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 3px 10px -3px rgba(0,20,60,.35); position: relative; background: var(--off-white);
  cursor: zoom-in;
}
.hz-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hz-cover--multi::after {
  content: ""; position: absolute; inset: 0; border-radius: 6px;
  box-shadow: 3px 3px 0 -1px #fff, 4px 4px 0 -1px rgba(0,20,60,.18);
}
.hz-libro-t { font-size: 14px; font-weight: 700; color: var(--text); }
.hz-libro-a { font-size: 12.5px; color: var(--text2); margin-top: 2px; }
.hz-libro-e { font-size: 11.5px; color: var(--text3); margin-top: 3px; }

/* Columna FECHA */
.hz-fecha, .hz-hora {
  display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text2);
  font-weight: 600; white-space: nowrap;
}
.hz-fecha { font-weight: 700; color: var(--text); }
.hz-hora { margin-top: 5px; color: var(--text3); }
.hz-fecha svg, .hz-hora svg { color: var(--text3); flex-shrink: 0; }

/* Columna ESTADO */
.hz-badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 999px;
}
.hz-badge i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.hz-badge.pend { color: var(--warn); background: var(--warn-bg); } .hz-badge.pend i { background: #D9920E; }
.hz-badge.apr  { color: var(--ok);   background: var(--ok-bg); }   .hz-badge.apr i  { background: #12A968; }
.hz-badge.rec  { color: var(--danger); background: var(--danger-bg); } .hz-badge.rec i { background: #D64545; }
.hz-estado-s { font-size: 11.5px; color: var(--text3); margin-top: 5px; }

/* Columna ACCIÓN — split button azul sólido, unificado y profesional.
   Mismo diseño para "Ver solicitud | ▾" (solicitudes) y "Ver | Registrar
   devolución" (devoluciones): contenedor con degradado, divisor blanco entre
   segmentos y hover con elevación sutil. */
.hz-td-acc { text-align: center; }
.hz-acc {
  display: inline-flex; align-items: stretch; height: 42px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(135deg, #1E5AD6, var(--blue) 65%, var(--blue-dark));
  box-shadow: 0 8px 18px -7px rgba(0,61,165,.55), inset 0 1px 0 rgba(255,255,255,.14);
  transition: box-shadow .18s ease, transform .18s ease;
}
.hz-acc:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -8px rgba(0,61,165,.6), inset 0 1px 0 rgba(255,255,255,.18);
}
.hz-acc:active { transform: translateY(0); }
/* Segmento principal (Ver solicitud / Ver) */
.hz-btn-ver {
  display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 17px;
  border: none; background: none; font-family: inherit; font-size: 13.5px; font-weight: 700;
  color: #fff; cursor: pointer; white-space: nowrap; transition: background .14s ease;
}
.hz-btn-ver svg { opacity: .92; }
.hz-btn-ver:hover { background: rgba(255,255,255,.16); }
.hz-btn-ver:active { background: rgba(0,0,0,.08); }
/* Botón único "Responder solicitud" (sin split ni menú ▾): ocupa todo el
   ancho del contenedor .hz-acc en vez de compartirlo con el chevron. */
.hz-btn-full { width: 100%; justify-content: center; padding: 0 20px; }
/* Divisor blanco vertical entre segmentos */
.hz-acc-div { width: 1.5px; background: rgba(255,255,255,.32); margin: 9px 0; flex-shrink: 0; }
/* Segmento secundario (Registrar devolución) */
.hz-btn-dev {
  display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 17px;
  border: none; background: none; color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: background .14s ease; box-shadow: none;
}
.hz-btn-dev:hover { background: rgba(255,255,255,.16); }
.hz-btn-dev:active { background: rgba(0,0,0,.08); }

/* Chevron ▾ del split (solicitudes) */
.hz-menu-wrap { position: relative; display: flex; }
.hz-btn-menu {
  width: 42px; height: 100%; border: none; background: none;
  cursor: pointer; color: #fff; display: grid; place-items: center; transition: background .14s ease;
}
.hz-btn-menu:hover { background: rgba(255,255,255,.16); }
.hz-btn-menu:active { background: rgba(0,0,0,.08); }
.hz-btn-menu svg { transition: transform .18s ease; }
.hz-row:has(.hz-menu.open) .hz-btn-menu svg { transform: rotate(180deg); }

/* Dropdown de acciones */
/* .hz-menu vive dentro de #page-inicio, que hereda zoom:0.7 de .main. Un
   position:absolute posicionado por CSS dentro de un ancestro con "zoom" se
   renderiza con clipping incorrecto en Chrome (bug de compositing). La
   solución robusta es sacarlo del flujo con zoom: position:fixed con sus
   coordenadas calculadas en JS a partir de getBoundingClientRect() del botón
   (que ya está en coordenadas de viewport reales, sin zoom), igual que hace
   el preview flotante de portadas (#solThumbPreview) en Solicitudes. */
.hz-menu {
  display: none; position: fixed; z-index: 400;
  min-width: 210px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 13px; box-shadow: 0 18px 44px -10px rgba(0,20,60,.3); padding: 7px;
}
.hz-menu.open { display: block; animation: hzMenuIn .14s ease; }
@keyframes hzMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.hz-menu-op {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px;
  border: none; background: none; border-radius: 9px; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text2); transition: .12s;
}
.hz-menu-op:hover { background: var(--blue-xlight); color: var(--blue-dark); }
.hz-menu-op svg { color: var(--text3); flex-shrink: 0; }
.hz-menu-op:hover svg { color: var(--blue); }
.hz-menu-op.ok { color: var(--ok); font-weight: 700; }
.hz-menu-op.ok svg { color: var(--ok); }
.hz-menu-op.ok:hover { background: var(--ok-bg); color: var(--ok); }
.hz-menu-op.danger { color: var(--danger); }
.hz-menu-op.danger svg { color: var(--danger); }
.hz-menu-op.danger:hover { background: var(--danger-bg); color: var(--danger); }
.hz-menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }

/* Móvil: .hz-row usaba un grid fijo de 5 columnas (24% 26% 15% 15% 20%) que
   en pantallas angostas deja cada columna sin espacio real, cortando el
   texto y el botón de acción fuera del borde visible. Mismo tratamiento que
   ya usa .sol-row (Solicitudes) en su propio breakpoint: colapsar a una sola
   columna, apilando docente/libro/fecha/estado/acción. */
@media (max-width: 640px) {
  .hz-table thead { display: none; }
  .hz-table thead tr, .hz-row { grid-template-columns: 1fr; gap: 10px; }
  .hz-row td, .hz-row td:first-child { padding: 0; }
  .hz-row { padding: 14px 16px; }
  .hz-row td.hz-td-estado, .hz-row td.hz-td-fecha { align-items: flex-start; }
  .hz-td-acc { text-align: left; }
}

/* Estados de carga / vacío */
.hz-loading { padding: 40px; text-align: center; color: var(--text3); font-size: 13px; }
/* El <tr> de la fila vacía no lleva .hz-row (no es una tarjeta de datos),
   así que no hereda el grid de columnas — dentro de un tbody { display:
   block } eso deja al <tr>/<td> con el ancho auto por defecto del navegador
   en vez de ocupar el 100%, y el text-align:center termina centrando el
   texto dentro de esa caja angosta, no dentro de la tabla completa. */
.hz-table tbody tr:has(.hz-empty) { display: block; width: 100%; }
.hz-empty {
  display: block; width: 100%;
  padding: 48px 20px !important; text-align: center; border-bottom: none !important;
}
.hz-empty-ic {
  width: 54px; height: 54px; border-radius: 50%; background: var(--ok-bg); color: var(--ok);
  display: grid; place-items: center; margin: 0 auto 12px;
}
.hz-empty b { display: block; font-size: 15px; color: var(--text); }
.hz-empty small { display: block; font-size: 12.5px; color: var(--text3); margin-top: 4px; }

/* Pie: "Mostrando X a Y de Z" + paginación + selector */
.hz-foot {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; border-top: 1px solid var(--border);
}
.hz-foot:empty { display: none; }
.hz-info { font-size: 12.5px; color: var(--text2); font-weight: 600; }
.hz-info b { color: var(--blue); font-variant-numeric: tabular-nums; }
.hz-nav { display: flex; gap: 6px; align-items: center; margin: 0 auto; }
.hz-pnum {
  min-width: 36px; height: 36px; padding: 0 9px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text2);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums; transition: .14s;
}
.hz-pnum:hover:not(:disabled):not(.on) { border-color: var(--blue); color: var(--blue); background: var(--blue-xlight); }
.hz-pnum.on { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 6px 14px -6px rgba(0,61,165,.55); }
.hz-pnum:disabled { opacity: .38; cursor: default; }
.hz-chev { font-size: 17px; padding-bottom: 2px; }
.hz-dots { color: var(--text3); font-weight: 800; padding: 0 3px; user-select: none; }
.hz-sel {
  height: 36px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface);
  color: var(--text2); font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 0 10px; cursor: pointer;
}
.hz-sel:hover { border-color: var(--blue-light); }
.hz-sel:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-xlight); }

@media (max-width: 860px) {
  .hz-doc-s, .hz-libro-a, .hz-estado-s { display: none; }
  .hz-btn-ver span, .hz-btn-dev { font-size: 12px; }
  .hz-foot { justify-content: center; }
  .hz-nav { margin: 0; }
}

/* ── DEVOLUCION GRID ── */
.dev-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 22px;
  align-items: start;
}

/* ── AGREGAR LAYOUT ── */
.agregar-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}
.preview-card { text-align: center; padding: 22px; }

/* ══════════════════════════════════════════
   AGREGAR LIBRO — rediseño (al-*)
   ══════════════════════════════════════════ */
/* Zoom algo menor que el resto de páginas para que el formulario completo
   (formulario + vista previa) quepa sin necesidad de hacer scroll. */
#page-agregar { gap: 18px; zoom: 0.72; }

/* Encabezado con ícono degradado + stepper */
.al-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.al-head-l { display: flex; align-items: center; gap: 16px; }
.al-head-ico {
  width: 54px; height: 54px; border-radius: 16px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, #6D5AE0 0%, #4C6BF5 60%, #3D5BE0 100%);
  box-shadow: 0 10px 26px -8px rgba(90,80,224,.6);
}
.al-head .pt { font-size: 26px; }
.al-head .ps { margin-top: 2px; }

/* Layout 2 columnas. align-items: stretch → ambas cards igualan altura.
   flex:1 → el bloque llena todo el alto disponible de la página. */
.al-layout { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: stretch; flex: 1 1 auto; min-height: 0; }
/* El formulario se estira; sus secciones se distribuyen en la altura con un
   reparto suave (los grids crecen), llenando el espacio sin huecos bruscos. */
.al-form { padding: 30px 32px; display: flex; flex-direction: column; }
.al-preview { padding: 26px 24px; display: flex; flex-direction: column; }

/* Cada grupo de campos crece para repartir el alto sobrante de forma
   proporcional; el header de sección y el divisor no crecen. */
.al-form > .al-grid { flex: 1 1 auto; align-content: space-evenly; }
.al-form > .al-divider { flex: 0 0 auto; }
.al-form > .al-sec { flex: 0 0 auto; }
.al-form > .al-actions { flex: 0 0 auto; }

/* Cabecera de sección con ícono */
.al-sec { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; }
.al-sec-ico {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--blue-xlight); color: var(--blue);
}
.al-sec-t { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -.2px; }
.al-sec-s { font-size: 12.5px; color: var(--text3); margin-top: 2px; font-weight: 500; }
.al-opt { font-size: .82em; font-weight: 600; color: var(--text3); }
.al-req { color: var(--danger); font-weight: 800; }

.al-divider { height: 1px; background: var(--border); margin: 24px 0; }

/* Grid de campos */
.al-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.al-grid .fg.full { grid-column: 1 / -1; }

/* Input con ícono a la izquierda */
.al-inp { position: relative; display: flex; align-items: center; }
.al-inp-ico {
  position: absolute; left: 13px; color: var(--text3); pointer-events: none; z-index: 1;
  display: flex; align-items: center; justify-content: center;
}
.al-inp-emoji { font-size: 16px; }
.al-inp .fi { padding-left: 40px; }
.al-inp--sel .fi { padding-right: 38px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.al-inp-chev { position: absolute; right: 13px; color: var(--text3); pointer-events: none; }

/* Stepper de cantidad: cápsula segmentada única (− | valor | +), no botones
   flotando sueltos sobre el input — así se lee como un solo control. */
.al-stepper {
  display: flex; align-items: stretch; height: 44px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: var(--off-white); overflow: hidden; transition: border-color .2s, box-shadow .2s;
}
.al-stepper:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,61,165,.08); background: var(--surface); }
.al-stepper .fi {
  flex: 1; min-width: 0; border: none; background: transparent; text-align: center;
  font-weight: 700; font-size: 14.5px; padding: 0; -moz-appearance: textfield;
  box-shadow: none !important;
}
.al-stepper .fi:focus { box-shadow: none; }
.al-stepper .fi::-webkit-outer-spin-button,
.al-stepper .fi::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.al-step-btn {
  flex: 0 0 40px; border: none; background: transparent; color: var(--text2);
  font-size: 17px; font-weight: 600; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background-color .15s, color .15s;
}
.al-step-btn:first-child { border-right: 1.5px solid var(--border); }
.al-step-btn:last-child { border-left: 1.5px solid var(--border); }
.al-step-btn:hover { background: var(--blue-xlight); color: var(--blue); }
.al-step-btn:active { background: var(--blue-light); }

/* Swatches de color: 18 colores = 6 columnas × 3 filas exactas, igual
   criterio que los íconos de al lado, para que ambos bloques luzcan
   proporcionales entre sí. */
/* 18 colores en 9 columnas × 2 filas exactas, para que el bloque quede con
   la misma estructura de 2 filas completas que los 24 íconos (12 × 2) de la
   mitad derecha. Ambas grillas usan celdas de 34px con el mismo gap, así los
   círculos y los botones de ícono miden y respiran igual pese a estar en
   mitades de distinto ancho. */
.al-swatches {
  display: grid; grid-template-columns: repeat(9, 34px); gap: 6px;
  padding-top: 4px; justify-content: start;
}
.al-swatch {
  width: 34px; height: 34px; border-radius: 50%; background: var(--sw); border: none; position: relative;
  cursor: pointer; transition: transform .14s, box-shadow .14s;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 2px transparent;
}
.al-swatch:hover { transform: scale(1.08); }
.al-swatch.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--blue); }
.al-swatch.on::after {
  content: ""; position: absolute; inset: 0; display: grid; place-items: center;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center no-repeat;
}

/* Botones de ícono cuadrados: junto a "Color de portada" (misma fila del
   grid, cada uno en su mitad). 24 íconos = 12 columnas × 2 filas exactas;
   las celdas son 1fr para repartir proporcionalmente todo el ancho de esa
   mitad, en vez de quedar angostos o desbordar la columna. */
.al-icons {
  display: grid; grid-template-columns: repeat(12, 34px); gap: 6px;
  padding-top: 4px; justify-content: start;
}
.al-icon {
  width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid var(--border); background: var(--off-white);
  font-size: 15px; display: grid; place-items: center; cursor: pointer; transition: .15s;
}
.al-icon:hover { border-color: var(--blue-light); background: var(--blue-xlight); transform: translateY(-1px); }
.al-icon.on { border-color: var(--blue); background: var(--blue-xlight); box-shadow: 0 0 0 3px rgba(0,61,165,.09); }

/* Textarea con contador */
.al-ta { min-height: 96px; resize: vertical; padding: 12px 14px; line-height: 1.5; }
.al-ta-wrap { position: relative; }
.al-ta-count {
  position: absolute; right: 12px; bottom: 10px; font-size: 11px; color: var(--text3);
  font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none;
}
.al-hint { font-size: 11.5px; color: var(--text3); font-weight: 500; margin-top: 2px; }

/* Acciones */
.al-actions {
  display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px;
  padding-top: 20px; border-top: 1px solid var(--border);
}
.al-actions .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; }
.al-save { position: relative; }
.al-save-spark { opacity: .9; }

/* ── Panel de vista previa ── */

/* Contenedor de la portada = la tapa del libro */
.al-cover {
  width: 186px; height: 246px; margin: 4px auto 0; border-radius: 6px 14px 14px 6px;
  overflow: visible; position: relative; cursor: pointer;
  /* Sombra proyectada del libro sobre la mesa */
  filter: drop-shadow(0 22px 26px rgba(0,30,80,.28));
}
.al-cover-ov {
  display: none; position: absolute; inset: 0; background: rgba(0,0,0,.5);
  border-radius: 6px 14px 14px 6px;
  align-items: center; justify-content: center; flex-direction: column; gap: 6px;
  color: #fff; font-size: 12px; font-weight: 700; z-index: 5;
}

/* Cuerpo del libro (lo genera B.coverLibro) */
.al-book {
  position: absolute; inset: 0; border-radius: 6px 14px 14px 6px; overflow: hidden;
}
/* Lomo: banda oscura a la izquierda + filo interior */
.al-book-spine {
  position: absolute; left: 0; top: 0; bottom: 0; width: 13px; z-index: 3;
  background: rgba(0,0,0,.28); box-shadow: inset -2px 0 4px rgba(0,0,0,.22);
}
.al-book-spine::after {
  content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(to right, rgba(255,255,255,.16), transparent);
}
/* Brillo diagonal de la tapa */
.al-book-sheen {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 55%);
}
/* Sombra inferior interna para dar volumen */
.al-book-shade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 50%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.35), transparent);
}
.al-book img { z-index: 1; }

/* Botón de subir en recuadro punteado */
.al-upload {
  display: flex; align-items: center; gap: 11px; width: 100%; margin-top: 16px;
  padding: 13px 16px; border-radius: 12px; border: 1.6px dashed var(--border);
  background: var(--off-white); color: var(--blue); text-align: left; transition: .15s;
}
.al-upload:hover { border-color: var(--blue); background: var(--blue-xlight); }
.al-upload svg { flex-shrink: 0; }
.al-upload-t { display: block; font-size: 13px; font-weight: 700; color: var(--text2); }
.al-upload-s { display: block; font-size: 11px; font-weight: 500; color: var(--text3); margin-top: 1px; }
.al-quitar { display: block; font-size: 11px; }

/* Resumen del libro. El espacio sobrante del panel (por la simetría de
   altura con el formulario) se reparte de forma proporcional entre las
   filas mediante space-between, en vez de acumularse en un hueco muerto:
   así el resumen ocupa toda la mitad inferior de manera equilibrada. */
.al-resume {
  margin-top: 28px; flex: 1 1 auto; padding-top: 24px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 0;
}
.al-resume-row { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 0; flex: 0 0 auto; }
.al-resume-ico { color: var(--text3); flex-shrink: 0; margin-top: 1px; }
.al-resume-tx { min-width: 0; padding: 0; margin: 0; }
.al-resume-l { font-size: 11px; color: var(--text3); font-weight: 600; text-align: left; line-height: 1.3; padding: 0; margin: 0; }
/* padding:0 explícito: una regla genérica de la card inyecta padding
   vertical a los <div>, y sin esto el valor crecía a ~114px de alto. */
.al-resume-v { font-size: 13px; color: var(--text); font-weight: 700; margin: 2px 0 0; padding: 0; text-align: left; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-resume-v.al-empty { color: var(--text3); font-weight: 500; }

@media (max-width: 1100px) {
  .al-layout { grid-template-columns: 1fr; align-items: start; }
  .al-preview { max-width: 420px; }
  .al-resume { margin-top: 22px; }
}
@media (max-width: 620px) {
  .al-grid { grid-template-columns: 1fr; }
  .al-form { padding: 20px; }
  /* En pantallas angostas las celdas fijas de 34px desbordarían: se vuelve
     a repartir el ancho disponible manteniendo la misma cantidad de filas. */
  .al-swatches { grid-template-columns: repeat(9, 1fr); }
  .al-icons { grid-template-columns: repeat(12, 1fr); }
  .al-swatch, .al-icon { width: 100%; height: auto; aspect-ratio: 1; }
}

/* ══════════════════════════════════════════
   Modal Editar Libro — Book Studio
   ══════════════════════════════════════════ */

/* Contenedor principal */
.el-libro-modal {
  border-radius: 20px !important;
  overflow: hidden !important;
  width: 860px !important;
  max-width: calc(100vw - 40px) !important;
  height: 520px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  box-shadow: 0 28px 90px rgba(0,10,40,.55);
  animation: modalIn .28s cubic-bezier(.4,0,.2,1);
}

/* ── PANEL IZQUIERDO (portada) ── */
.elp-left {
  flex: 0 0 260px !important;
  width: 260px !important;
  max-width: 260px !important;
  min-width: 260px !important;
  background: linear-gradient(175deg, #05091a 0%, #0d1f5c 55%, #1535a0 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  padding: 24px 20px 18px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box !important;
}
.elp-glow {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,179,237,.22), transparent 62%);
  top: -90px; left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.elp-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  margin-bottom: 18px;
  align-self: stretch;
  justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 30px;
  padding: 7px 12px;
  position: relative;
  z-index: 1;
}
.elp-eyebrow-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(99,179,237,.7);
  flex-shrink: 0;
}
.elp-book-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1;
  position: relative;
  z-index: 1;
}
.elp-btn-upload {
  width: 100%;
  padding: 8px 10px;
  background: rgba(255,255,255,.09);
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 9px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  font-family: var(--font);
  margin-top: 14px;
  margin-bottom: 7px;
  text-align: center;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}
.elp-btn-upload:hover { background: rgba(255,255,255,.18); }
.elp-btn-remove {
  width: 100%;
  padding: 6px 10px;
  background: rgba(239,68,68,.12);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  margin-bottom: 8px;
  text-align: center;
  transition: background .15s;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}
.elp-btn-remove:hover { background: rgba(239,68,68,.24); }
.elp-hint {
  font-size: 10px;
  color: rgba(255,255,255,.28);
  text-align: center;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

/* ── PANEL DERECHO (formulario) ── */
.elp-right {
  flex: 1 1 0 !important;     /* ocupa todo el espacio restante */
  min-width: 0 !important;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #fff !important;
  border-left: 1px solid rgba(0,0,0,.07);
}

/* Cabecera del formulario */
.elp-header {
  flex-shrink: 0 !important;
  background: #f4f7ff !important;
  border-bottom: 1.5px solid #dde5f6;
  padding: 14px 24px 12px;
}
.elp-header-tag {
  display: inline-flex;
  align-items: center;
  background: #dbeafe;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  margin-bottom: 8px;
}
.elp-title {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  font-family: var(--font-head);
  line-height: 1.2;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.elp-meta {
  font-size: 12.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cuerpo scrollable */
.elp-form-body {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 14px 24px 4px;
}
.elp-section-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid #edf0f7;
}

/* Footer con botones */
.elp-footer {
  flex-shrink: 0 !important;
  display: flex !important;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 24px 16px;
  border-top: 1.5px solid #eef1f8;
  background: #f8faff;
}
.elp-btn-save {
  background: linear-gradient(135deg, #1e3a8a, #2563EB) !important;
  border-color: #1e3a8a !important;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(30,58,138,.28);
}
.elp-btn-save:hover {
  background: linear-gradient(135deg, #1e3a6e, #1D4ED8) !important;
  box-shadow: 0 4px 14px rgba(30,58,138,.4);
  transform: translateY(-1px);
}

/* ── Responsive: ver sección RESPONSIVE MOBILE FULL al final ── */

/* ── HERO (portada + info) ── */
.el-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 65%, #2563EB 100%);
  padding: 28px 32px 24px;
  display: flex;
  gap: 28px;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* Patrón de puntos decorativo */
.el-hero-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}

/* Círculos decorativos de luz */
.el-hero::before {
  content: '';
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,179,237,.18), transparent 70%);
  top: -80px; right: 60px;
  pointer-events: none;
}
.el-hero::after {
  content: '';
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(129,140,248,.15), transparent 70%);
  bottom: -40px; right: 200px;
  pointer-events: none;
}

/* Columna izquierda del hero */
.el-hero-left {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.el-hero-eyebrow {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .13em;
  color: rgba(255,255,255,.38);
  text-transform: uppercase;
  margin-bottom: 14px;
  align-self: flex-start;
}

/* Portada con efecto libro 3D */
.el-cover-wrap {
  width: 152px;
  height: 200px;
  border-radius: 4px 10px 10px 4px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  box-shadow:
    -6px 6px 18px rgba(0,0,0,.7),
    4px 6px 30px rgba(0,0,0,.5),
    inset -5px 0 10px rgba(0,0,0,.4);
  border-left: 8px solid rgba(0,0,0,.35);
  background: #1e3a6e;
  transition: transform .22s ease, box-shadow .22s ease;
}
.el-cover-wrap:hover {
  transform: translateY(-4px) rotate(-1.5deg);
  box-shadow:
    -10px 14px 28px rgba(0,0,0,.75),
    6px 10px 40px rgba(0,0,0,.55),
    inset -5px 0 10px rgba(0,0,0,.4);
}

/* Overlay cámara */
.el-cover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.58);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transition: opacity .2s;
  z-index: 2;
}
.el-cover-wrap:hover .el-cover-overlay { opacity: 1; }

/* Botones bajo la portada */
.el-hero-cover-btns {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.el-btn-upload {
  padding: 7px 12px;
  background: rgba(255,255,255,.13);
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  font-family: var(--font);
  white-space: nowrap;
}
.el-btn-upload:hover { background: rgba(255,255,255,.24); }
.el-btn-remove {
  padding: 7px 10px;
  background: rgba(239,68,68,.18);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,.28);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
}
.el-btn-remove:hover { background: rgba(239,68,68,.3); }

/* Columna derecha del hero */
.el-hero-right {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
  padding-bottom: 6px;
}
.el-hero-titulo {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-head);
  line-height: 1.2;
  margin-bottom: 8px;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.el-hero-meta {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  margin-bottom: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.8);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ── FORMULARIO ── */
.el-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 8px;
}

/* ── FOOTER ── */
.el-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 32px 20px;
  border-top: 1.5px solid #f1f5f9;
  background: #fafbfc;
  flex-shrink: 0;
}

/* Botón guardar */
.el-btn-guardar {
  background: linear-gradient(135deg, #1e3a8a, #2563EB);
  border-color: #1e3a8a;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(30,58,138,.3);
}
.el-btn-guardar:hover {
  background: linear-gradient(135deg, #1e3a6e, #1D4ED8);
  box-shadow: 0 4px 14px rgba(30,58,138,.4);
}

/* ── SUMMARY ROW (stats) ── */
.summary-row {
  display: flex; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.summary-row:last-child { border-bottom: none; }
.summary-label { color: var(--text2); }
.summary-value { font-weight: 700; }
.summary-value.danger { color: var(--danger); }

/* ══════════════════════════════════════════
   Módulo Docentes
   ══════════════════════════════════════════ */

/* Stats row */
.doc-stats {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.doc-stat-card {
  flex: 1;
  min-width: 160px;
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.doc-stat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.doc-stat-val {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  font-family: var(--font-head);
}
.doc-stat-label {
  font-size: 11.5px;
  color: var(--text2);
  margin-top: 3px;
}

/* Foto avatar en tabla */
.doc-av-foto {
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

/* ── Modal docente profesional ── */
.doc-modal {
  padding: 0 !important;
  overflow: hidden !important;
  width: 540px;
  max-width: calc(100vw - 32px) !important;
}
.doc-modal-hd {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #2563EB 100%);
  padding: 22px 28px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.doc-modal-hd::before {
  content: '';
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,179,237,.15), transparent 70%);
  top: -70px; right: 20px;
  pointer-events: none;
}
.doc-modal-hd::after {
  content: '';
  position: absolute;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(147,197,253,.08), transparent 70%);
  bottom: -40px; left: 60px;
  pointer-events: none;
}
.doc-modal-av-wrap {
  position: relative;
  flex-shrink: 0;
  z-index: 1;
}
.doc-modal-av {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-head);
}
.doc-modal-av:hover { border-color: rgba(255,255,255,.65); }
.doc-modal-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.doc-modal-av-btn {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #2563EB;
  border: 2.5px solid #fff;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: background .15s, transform .15s;
}
.doc-modal-av-btn:hover { background: #1d4ed8; transform: scale(1.1); }
.doc-modal-hd-info { z-index: 1; min-width: 0; flex: 1; }
.doc-modal-hd-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-head);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
}
.doc-modal-hd-sub {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  margin-top: 2px;
  letter-spacing: .01em;
}
.doc-modal-hd-meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px; flex-wrap: wrap;
}
.doc-modal-hd-user {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  font-family: monospace;
}
.doc-modal-hd-badge {
  display: inline-block;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.78);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
}
/* ── Cuerpo del modal ── */
.doc-modal-bd {
  padding: 20px 28px 4px;
  overflow-y: auto;
  max-height: calc(90vh - 180px);
}
.doc-modal-sec {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text3);
  margin: 16px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--border);
}
.doc-modal-sec:first-child { margin-top: 0; }
/* ── Footer ── */
.doc-modal-ft {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 28px 18px;
  border-top: 1.5px solid var(--border);
  background: #fafbfc;
}
/* ── Responsive: ver sección RESPONSIVE MOBILE FULL al final ── */

/* Badge purple para bibliotecologo */
.badge.purple {
  background: #f3e8ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}

/* ── DECORATIVE ── */
.deco-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .qg      { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  .agregar-layout { grid-template-columns: 1fr; }
  .preview-card { display: none; }
}

@media (max-width: 800px) {
  /* Hamburger visible */
  .hamburger { display: block; }

  /* Sidebar como drawer */
  .sidebar {
    position: fixed;
    top: 58px; left: 0;
    height: calc(100vh - 58px);
    height: calc(100dvh - 58px);
    transform: translateX(-100%);
    transition: transform .3s ease;
    box-shadow: none;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 8px 0 30px rgba(0,0,0,0.3);
  }
  .sidebar-overlay.open { display: block; }

  /* Main content */
  .main { padding: 20px 16px; gap: 18px; zoom: 1; }
  .pt { font-size: 24px; }

  /* Metrics */
  .metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric { padding: 16px; }
  .mv { font-size: 28px; }
  .ml { font-size: 9px; }

  /* Quick actions */
  .qg { grid-template-columns: 1fr; }
  .qa { padding: 16px; gap: 12px; }
  .qi { width: 40px; height: 40px; font-size: 18px; border-radius: 10px; }

  /* Tables → horizontal scroll */
  .tbl { min-width: 600px; }

  /* Hero */
  .hero-banner { padding: 24px 20px; }
  .hero-title { font-size: 20px; }
  .hero-deco { display: none; }

  /* Forms */
  .form-grid { grid-template-columns: 1fr; }
  .fg.full { grid-column: 1; }

  /* Dev grid */
  .dev-grid { grid-template-columns: 1fr; }

  /* Book grid */
  .book-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }

  /* Search row: !important para ganar a inline styles */
  .srow { flex-direction: column; }
  .srow .fi { min-width: 0 !important; width: 100% !important; }

  /* Modal */
  .modal { padding: 24px 20px; }
  .modal-title { font-size: 20px; }

  /* Topbar */
  .topbar { padding: 0 14px; height: 58px; }
  .logo-mep { width: 40px; height: 40px; }
  .logo-name { font-size: 16px; }
  .logo-sub { display: none; }
  .user-chip { display: none; }

  /* Page header */
  .ph { flex-direction: column; align-items: flex-start; }

  /* Toast */
  .toast { bottom: 16px; right: 16px; left: 16px; font-size: 12.5px; }

  /* Stat bars */
  .sb-label { width: 100px; font-size: 11px; }
}


/* ── NEON GLOW PROFILE PHOTOS ── */
@keyframes neonGlow {
  0%, 100% { box-shadow: 0 0 4px #00aaff, 0 0 8px #00aaff, 0 0 16px #0066ff; }
  50%      { box-shadow: 0 0 6px #00ccff, 0 0 14px #00aaff, 0 0 22px #0066ff, 0 0 30px #0044cc; }
}

.user-chip-foto {
  width: 30px; height: 30px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 11px; font-weight: 700;
  background: linear-gradient(135deg, #003DA5, #1A52B5);
  color: white;
}
.user-chip-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 50%;
  border: 2px solid #00aaff;
  animation: neonGlow 2s ease-in-out infinite;
}

.profile-foto {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 2px solid #00aaff;
  animation: neonGlow 2s ease-in-out infinite;
}
.profile-foto-sm {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 2px solid #00aaff;
  animation: neonGlow 2s ease-in-out infinite;
}
.profile-foto-lg {
  width: 110px; height: 110px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 3px solid #00aaff;
  animation: neonGlow 2s ease-in-out infinite;
  cursor: pointer;
  display: block;
  margin: 0 auto 12px;
}
/* Marcador de posición de la foto en los formularios: el mismo retrato que
   usan las fichas de Usuarios, sin brillos ni animación. */
.profile-foto-placeholder {
  width: 110px; height: 110px;
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border);
  cursor: pointer;
  margin: 0 auto 12px;
  transition: .16s;
}
.profile-foto-placeholder:hover { border-color: var(--blue); }
/* El retrato llena el círculo como lo haría la fotografía que sustituye */
.profile-foto-placeholder svg,
.profile-foto-placeholder .us-av-ico { width: 100%; height: 100%; display: block; }
.foto-hint {
  text-align: center;
  font-size: 11px;
  color: var(--text3);
  margin-bottom: 16px;
}

/* Avatar fallback with neon in tables */
.av-neon {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 2px solid #00aaff;
  animation: neonGlow 2s ease-in-out infinite;
}

/* ── SOLICITAR LAYOUT (carrito) ── */
.solicitar-layout {
  display: block;
}
.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}
.cart-item:last-child { border-bottom: none; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-title {
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-item-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cart-item-qty { width: 28px; text-align: center; font-weight: 700; font-size: 13px; }

/* ── MODAL CARRITO WRAPPER ── */
.crt-modal {
  background: white;
  border-radius: 20px;
  width: min(540px, calc(100vw - 24px));
  max-height: min(88vh, 780px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 32px 100px rgba(0,15,60,.38), 0 0 0 1px rgba(255,255,255,.06);
  animation: modalIn .25s cubic-bezier(.4,0,.2,1);
}
.crt-modal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  flex-shrink: 0;
}
.crt-modal-hd-left { display: flex; align-items: center; gap: 14px; }
.crt-modal-hd-ico {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.crt-modal-hd-title {
  font-family: var(--font-head);
  font-size: 20px; font-weight: 700; color: white; line-height: 1.1;
}
.crt-modal-hd-sub { font-size: 12px; color: rgba(255,255,255,.68); margin-top: 3px; }
.crt-close-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.28);
  color: white; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; flex-shrink: 0;
}
.crt-close-btn:hover {
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.5);
  transform: scale(1.08) rotate(90deg);
}
.crt-modal-body { flex: 1; overflow-y: auto; padding: 20px 26px; min-height: 0; }
.crt-modal-notes {
  padding: 16px 26px 18px;
  border-top: 1.5px solid var(--border);
  flex-shrink: 0;
}
.crt-modal-ft {
  display: flex; gap: 10px; justify-content: flex-end;
  align-items: center;
  padding: 16px 26px;
  background: var(--bg2);
  border-top: 1.5px solid var(--border);
  flex-shrink: 0;
}
.crt-modal-ft .btn.primary {
  display: flex; align-items: center; gap: 8px;
}

/* Móvil: sheet desde abajo */
@media (max-width: 600px) {
  #modalCarrito { align-items: flex-end; padding: 0; }
  .crt-modal {
    width: 100%; border-radius: 20px 20px 0 0;
    max-height: 92dvh;
  }
  .crt-modal-ft { flex-direction: column-reverse; }
  .crt-modal-ft .btn { width: 100%; justify-content: center; min-height: 46px; }
}

/* ── CARRITO MODAL (pro) ── */
.crt-list { display: flex; flex-direction: column; gap: 0; }
.crt-item {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.crt-item:last-child { border-bottom: none; }
/* Mini-libro: lomo oscuro + brillo, gradiente del área o foto real */
.crt-book {
  width: 44px; height: 60px;
  border-radius: 4px 7px 7px 4px;
  flex-shrink: 0;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1;
  box-shadow: 0 5px 12px rgba(0,0,0,.22);
}
.crt-book::before {   /* lomo */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: rgba(0,0,0,.28); z-index: 2;
}
.crt-book::after {    /* brillo junto al lomo */
  content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(to right, rgba(255,255,255,.22), transparent);
  z-index: 2;
}
.crt-book img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crt-book.c0 { background: linear-gradient(135deg, #003DA5, #1d4ed8); }
.crt-book.c1 { background: linear-gradient(135deg, #C2410C, #fb923c); }
.crt-book.c2 { background: linear-gradient(135deg, #059669, #34d399); }
.crt-book.c3 { background: linear-gradient(135deg, #DC2626, #f87171); }
.crt-book.c4 { background: linear-gradient(135deg, #7C3AED, #8b5cf6); }
.crt-book.c5 { background: linear-gradient(135deg, #0891B2, #22d3ee); }
.crt-info { flex: 1; min-width: 0; }
.crt-title {
  font-size: 13.5px; font-weight: 700; color: var(--text1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.crt-autor { font-size: 11.5px; color: var(--text3); }
.crt-controls { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.crt-qty-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--border);
  background: white; cursor: pointer;
  font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue); transition: all .15s;
  line-height: 1;
}
.crt-qty-btn:hover { background: var(--blue); color: white; border-color: var(--blue); }
.crt-qty {
  width: 30px; text-align: center;
  font-size: 15px; font-weight: 700; color: var(--text1);
}
.crt-del {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1.5px solid #fecaca; background: #fff5f5;
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-left: 4px; transition: all .15s; color: #dc2626;
}
.crt-del:hover { background: #dc2626; border-color: #dc2626; color: white; }
.crt-summary {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--bg2); margin-top: 14px;
  font-size: 12.5px; color: var(--text2); font-weight: 600;
}
.crt-summary-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue); flex-shrink: 0;
}

/* ── SOLICITAR: botón ancho completo en pie de tarjeta ── */
.sol-card-ft {
  margin-top: auto;
  border-top: 1px solid var(--border);
}
.sol-card-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 13px 16px;
  background: var(--blue); color: white;
  border: none; cursor: pointer;
  font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
  transition: background .18s, filter .18s;
}
.sol-card-btn:hover { background: var(--blue-dark); }
.sol-card-btn--done {
  background: #f0fdf4; color: #166534;
  cursor: default;
}
.sol-card-btn--done:hover { background: #f0fdf4; filter: none; }
.sol-card-btn--off {
  background: var(--bg2); color: var(--text3);
  cursor: default;
}
.sol-card-btn--off:hover { background: var(--bg2); filter: none; }

/* ── CONFIGURACIÓN ── */
.config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.config-card {
  text-align: center;
  padding: 30px 20px;
}
.config-preview {
  width: 140px;
  height: 140px;
  border-radius: 18px;
  margin: 0 auto 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 3px solid #00aaff;
  animation: neonGlow 2s ease-in-out infinite;
  background: var(--off-white);
}
.config-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.config-preview-fav {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  margin: 0 auto 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid var(--border);
  background: var(--off-white);
}
.config-preview-fav img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Logo neon para topbar y login */
.logo-neon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: contain;
  border: 2px solid #00aaff;
  animation: neonGlow 2s ease-in-out infinite;
}
.logo-neon-login {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: contain;
  border: 3px solid #00aaff;
  animation: neonGlow 2s ease-in-out infinite;
}

/* ════════════════════════════════════════════════════════════
   SOLICITUDES v3.0
   ════════════════════════════════════════════════════════════ */

/* ── Modal previsualización PDF ── */
.pdf-preview-modal {
  max-width: 900px;
  width: 95vw;
  height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pdf-preview-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: -8px;
}
#pdfIframeWrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 6px;
}
.pdf-iframe-hint {
  font-size: 11px;
  color: var(--text3);
  text-align: center;
}
.pdf-preview-iframe {
  flex: 1;
  width: 100%;
  border: none;
  border-radius: 10px;
  background: #e8e8e8;
  min-height: 0;
}

/* Métricas resumen */
/* Header de Solicitudes con el estilo de Préstamos (hero + minis).
   Mismo grid que .pl-kpis. */
.sol-metrics {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
.sol-metric {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 20px 18px 16px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
  overflow: hidden;
}
.sol-metric::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--sol-metric-color, #ccc);
  border-radius: 16px 16px 0 0;
}
.sol-metric {
  cursor: pointer;
}
.sol-metric:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.sol-metric.active-filter {
  border-color: var(--sol-metric-color, #3B82F6);
  background: color-mix(in srgb, var(--sol-metric-color, #3B82F6) 8%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sol-metric-color, #3B82F6) 30%, transparent);
}
.sol-metric-ico {
  font-size: 26px;
  margin-bottom: 8px;
  display: block;
  line-height: 1;
}
.sol-metric-num {
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.5px;
}
.sol-metric-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 6px;
}
.sol-metric--pendiente { --sol-metric-color: #F59E0B; }
.sol-metric--espera    { --sol-metric-color: #3B82F6; }
.sol-metric--aprobada  { --sol-metric-color: #10B981; }
.sol-metric--rechazada { --sol-metric-color: #EF4444; }

/* Barra de filtros de solicitudes */
.sol-filter-bar { flex-wrap: wrap; gap: 10px; }
.sol-filter-card { margin-bottom: 16px; }

/* ══════════════════════════════════════════════════════════
   Bandeja de solicitudes — filas-tarjeta (mockup "Bandeja premium")
   ══════════════════════════════════════════════════════════ */
/* Marco envolvente: header azul degradado + cuerpo, como un único bloque
   con esquinas redondeadas arriba/abajo — mismo azul que el banner de
   Inicio (--blue-deep → --blue → --blue-mid). */
.sol-frame {
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
}
.sol-head {
  display: grid; grid-template-columns: 24% minmax(0,1fr) 15% 15% auto;
  gap: 24px; align-items: center;
  background: linear-gradient(135deg, var(--blue-deep), var(--blue) 65%, var(--blue-mid));
  padding: 14px 24px 14px 26px;
}
.sol-head span {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.85);
}
@media (max-width: 900px) {
  .sol-head { display: none; }
  .sol-frame { border: none; border-radius: 0; }
}

.sol-inbox {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--off-white); padding: 14px;
}
@media (max-width: 900px) {
  .sol-inbox { background: none; padding: 0; gap: 13px; }
}

/* ── Pie: "Mostrando X a Y de Z" + numeración con elipsis + selector ── */
.sol-pag {
  margin-top: 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.sp-info { font-size: 12.5px; color: var(--text2); font-weight: 600; }
.sp-info b { color: var(--blue); font-variant-numeric: tabular-nums; }
.sp-nav { display: flex; gap: 6px; align-items: center; margin: 0 auto; }
.sp-num {
  min-width: 36px; height: 36px; padding: 0 9px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text2);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums; transition: .14s;
}
.sp-num:hover:not(:disabled):not(.on) { border-color: var(--blue); color: var(--blue); background: var(--blue-xlight); }
.sp-num.on {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 6px 14px -6px rgba(0,61,165,.55);
}
.sp-num:disabled { opacity: .38; cursor: default; }
.sp-chev { font-size: 17px; padding-bottom: 2px; }
.sp-dots { color: var(--text3); font-weight: 800; padding: 0 3px; user-select: none; }
.sp-sel {
  height: 36px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface);
  color: var(--text2); font-family: inherit; font-size: 12.5px; font-weight: 700;
  padding: 0 10px; cursor: pointer;
}
.sp-sel:hover { border-color: var(--blue-light); }
.sp-sel:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-xlight); }
@media (max-width: 760px) {
  .sol-pag { justify-content: center; }
  .sp-nav { margin: 0; }
}

/* Tarjeta compacta con 5 columnas explícitas, alineada 1:1 al layout de
   .hz-row en Inicio: Docente / Libro(s) / Fecha / Disponibilidad / Estado+
   Acciones. El acento (--acc, variable inline) es por MATERIA DEL DOCENTE,
   igual que en Inicio — no por estado de la solicitud, que ya se lee en el
   badge de la derecha. Banda discreta en reposo, más presente en hover. */
.sol-row {
  display: grid; grid-template-columns: 24% minmax(0,1fr) 15% 15% auto;
  gap: 24px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 24px 16px 26px; position: relative; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,20,60,.04); transition: box-shadow .15s ease, transform .15s ease;
}
.sol-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--acc, var(--blue)); opacity: .55; transition: width .15s ease, opacity .15s ease;
}
.sol-row:hover {
  box-shadow: 0 10px 24px rgba(0,20,60,.10); transform: translateY(-1px);
}
.sol-row:hover::before { width: 6px; opacity: 1; }

.sol-lead { display: flex; align-items: center; gap: 13px; min-width: 0; }
.sol-av {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13.5px;
}
.sol-nm { font-weight: 700; font-size: 14.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sol-sub { font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.sol-sub2 {
  display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text3); margin-top: 3px;
}
.sol-sub2 svg { width: 12px; height: 12px; flex-shrink: 0; }
.sol-id { font-weight: 800; color: var(--blue); font-variant-numeric: tabular-nums; }

.sol-cluster { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sol-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text3); }
.sol-books { display: flex; align-items: center; gap: 6px; }
.sol-books-n { font-size: 11.5px; color: var(--text2); font-weight: 700; white-space: nowrap; }

/* Columna FECHA — mismo tratamiento que .hz-fecha en Inicio */
.sol-fecha {
  display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text);
  font-weight: 700; white-space: nowrap;
}
.sol-fecha svg { color: var(--text3); flex-shrink: 0; }

/* Disponibilidad como mini barra de progreso: de un vistazo se ve cuánto del
   stock cubre la solicitud, sin tener que leer el número primero. */
.sol-disp { display: flex; align-items: center; gap: 8px; min-width: 96px; }
.sol-disp-bar { width: 66px; height: 7px; border-radius: 999px; background: var(--off-white); overflow: hidden; flex-shrink: 0; }
.sol-disp-bar > i { display: block; height: 100%; border-radius: 999px; }
.sol-disp-txt { font-size: 11.5px; font-weight: 800; white-space: nowrap; }

.sol-right { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.sol-acts { display: flex; gap: 7px; }

/* Badge de estado en formato "punto + texto" */
.badge-sol {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11.5px; font-weight: 800; padding: 5px 12px; border-radius: 999px;
}
.badge-sol i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.badge-sol.pend { color: var(--warn); background: var(--warn-bg); } .badge-sol.pend i { background: #D9920E; }
.badge-sol.apr  { color: var(--ok);   background: var(--ok-bg); }   .badge-sol.apr i  { background: #12A968; }
.badge-sol.rec  { color: var(--danger); background: var(--danger-bg); } .badge-sol.rec i { background: #D64545; }

@media (max-width: 900px) {
  .sol-row { grid-template-columns: 1fr; gap: 14px; }
  .sol-right { justify-content: flex-start; flex-wrap: wrap; }
}

/* Columna de libros en tabla: thumbnails */
.sol-libros-cell {
  max-width: 220px;
  padding: 8px 12px;
}

/* Fila de thumbnails */
.sol-libros-thumbs {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: nowrap;
}

/* Wrapper de cada thumbnail con cantidad */
.sol-thumb-qty-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Badge de cantidad sobre el thumbnail */
.sol-thumb-qty {
  font-size: 10px;
  font-weight: 700;
  color: var(--text2);
  line-height: 1;
}

/* Wrapper del thumbnail — mismo tratamiento visual que .hz-cover en Inicio
   (radio, sombra, tamaño de fila), para que ambas pantallas luzcan
   consistentes aunque cada una tenga sus propias columnas/acciones. */
.sol-thumb-wrap {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--off-white);
  box-shadow: 0 3px 10px -3px rgba(0,20,60,.35);
  cursor: zoom-in;
}

/* Preview flotante al hover: portada grande + título */
#solThumbPreview {
  position: fixed;
  z-index: 999;
  background: white;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 18px 50px rgba(0,15,60,.35), 0 0 0 1px rgba(0,30,80,.06);
  opacity: 0;
  transform: scale(.92);
  transition: opacity .16s ease, transform .16s cubic-bezier(.34,1.4,.64,1);
  pointer-events: none;
}
#solThumbPreview.show {
  opacity: 1;
  transform: scale(1);
}
.sol-thumb-preview-name {
  max-width: 150px;
  margin-top: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text1);
  text-align: center;
  line-height: 1.3;
}

/* Preview de VARIOS libros (solicitud con más de un título): lista vertical
   de portada pequeña + título, en vez de una sola portada grande. */
.sol-thumb-preview-list {
  display: flex; flex-direction: column; gap: 10px;
  width: 214px; max-height: 380px; overflow-y: auto;
}
.sol-thumb-preview-item {
  display: flex; align-items: center; gap: 10px;
}
.sol-thumb-preview-item-t {
  font-size: 12px; font-weight: 700; color: var(--text1); line-height: 1.3;
}
.sol-thumb-preview-item-q {
  font-size: 11px; font-weight: 800; color: var(--text3); margin-left: 5px;
}

/* Indicador "+N más" en la fila de thumbnails */
.sol-thumb-more {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  padding: 0 3px;
  white-space: nowrap;
}

/* "Mis solicitudes" (docente) — lista de tarjetas "elevación premium":
   radio grande, sombra profunda, franja lateral de color por estado
   (mismo lenguaje que .pn-f::before, la cola de Inicio) con esquinas
   redondeadas, elevación notable al pasar el mouse. Exclusivo del
   docente — el admin sigue con su propia tabla/bandeja. */
.misol-list { display: flex; flex-direction: column; gap: 14px; }
.misol-thumbs { flex-shrink: 0; }
.misol-mas { color: var(--text3); font-weight: 600; }

.misol-f {
  display: flex; align-items: center; gap: 16px; padding: 16px 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0,20,60,.06); position: relative; overflow: hidden;
  transition: transform .18s cubic-bezier(.22,.9,.35,1), box-shadow .18s, border-color .18s;
}
.misol-f::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 20px 0 0 20px;
}
.misol-f.pend::before { background: linear-gradient(#F4B740, #D9920E); }
.misol-f.apr::before  { background: linear-gradient(#4FCE94, #12A968); }
.misol-f.rec::before  { background: linear-gradient(#E86A6A, #D64545); }
.misol-f:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(0,20,60,.14); border-color: var(--blue-light); }

.misol-f-id { font-family: var(--font-head); font-weight: 800; color: var(--blue); font-size: 17px; width: 40px; flex-shrink: 0; }
.misol-f-tx { flex: 1; min-width: 0; }
.misol-f-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 3px; }
.misol-f-nom { font-size: 14px; font-weight: 800; color: var(--text); }
.misol-f-sub {
  font-size: 11.5px; color: var(--text3); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.misol-f-right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; margin-left: auto; }
.misol-f-fecha { font-size: 11px; color: var(--text3); font-weight: 700; text-align: right; min-width: 68px; font-variant-numeric: lining-nums tabular-nums; }
.misol-f-acc { display: flex; gap: 6px; flex-shrink: 0; }

.misol-empty { text-align: center; padding: 44px 20px; color: var(--text3); font-size: 13.5px; }

@media (max-width: 640px) {
  .misol-f { flex-wrap: wrap; padding: 16px 18px 16px 22px; }
  .misol-f-right { width: 100%; justify-content: space-between; margin-left: 0; }
}

/* Filas de tabla solicitudes */
#tablaSolicitudes tbody tr {
  transition: background .12s;
}
#tablaSolicitudes tbody tr:hover {
  background: var(--blue-xlight);
}
#tablaSolicitudes td {
  vertical-align: middle;
  padding: 14px 12px;
}


/* Badge "convertida" */
.badge-convertida {
  background: #E8F5EA;
  color: #1B5E20;
  font-size: 10px;
  padding: 2px 6px;
  margin-left: 4px;
}

/* Botón "→ Préstamo" */
.btn-convertir {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: var(--ok);
}
.btn-convertir:hover { background: #cce8d8; }

/* ══════════════════════════════════════════
   Modal Responder solicitud — Dashboard docente
   ══════════════════════════════════════════ */
/* Tamaño completo a escala real (sin zoom reducido): prioriza la lectura por
   encima de ver todo sin scroll — el cuerpo (.rs-scroll) ya maneja su propio
   scroll interno si el contenido no cabe, con el pie de acciones siempre
   visible abajo. */
.rs-modal {
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  width: calc(100vw - 32px);
  height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
}
/* Header, banda de identidad, nota y pie de acciones no encogen: solo
   .rs-scroll (libros + verificaciones/observaciones) puede necesitar scroll,
   y dentro de él solo #respLibrosList tiene su propio límite de alto. */
.rs-hd, .rs-who { flex-shrink: 0; }
.rs-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #C7D4EA transparent;
}
.rs-scroll::-webkit-scrollbar { width: 9px; }
.rs-scroll::-webkit-scrollbar-track { background: transparent; }
.rs-scroll::-webkit-scrollbar-thumb { background: #C7D4EA; border-radius: 20px; border: 2px solid var(--card); }
.rs-scroll::-webkit-scrollbar-thumb:hover { background: #AFC0E0; }
.rs-ft { flex-shrink: 0; }

/* Encabezado. clamp() escala el tamaño de fuente relativo al viewport para
   verse proporcionado en cualquier resolución, en vez de un tamaño fijo que
   se ve "de más" ahora que el modal ocupa toda la pantalla. */
.rs-hd {
  background: linear-gradient(120deg, var(--blue-dark), var(--blue) 72%);
  padding: clamp(14px, 1.6vh, 20px) clamp(20px, 2vw, 32px);
  display: flex;
  align-items: center;
  gap: 16px;
}
.rs-hd-ico {
  width: 38px; height: 38px; border-radius: 12px;
  background: rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; flex-shrink: 0;
}
.rs-hd-t { color: #fff; font-size: clamp(15px, 1.3vw, 18px); font-weight: 800; letter-spacing: -.3px; }
.rs-hd-s { color: #bcd2f5; font-size: clamp(10.5px, .85vw, 12px); font-weight: 500; margin-top: 2px; }
.rs-hd-x {
  margin-left: auto; width: 32px; height: 32px; border-radius: 10px; border: none;
  cursor: pointer; background: rgba(255,255,255,.12); color: #fff; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.rs-hd-x:hover { background: rgba(255,255,255,.24); }

/* Banda de identidad */
.rs-who {
  display: flex; align-items: center; gap: 18px;
  padding: clamp(12px, 1.4vh, 16px) clamp(20px, 2vw, 32px); border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #fbfcff, var(--card));
}
.rs-av {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, #6d4bd6, #9b6be6);
  color: #fff; font-size: 19px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 8px 20px -6px rgba(109,75,214,.55);
}
.rs-who-i { flex: 1; min-width: 0; }
.rs-who-n { font-size: clamp(14.5px, 1.2vw, 16.5px); font-weight: 800; letter-spacing: -.3px; color: var(--text); }
.rs-who-sub { display: flex; gap: 8px; align-items: center; margin-top: 5px; flex-wrap: wrap; }
.rs-chip {
  font-size: clamp(10px, .8vw, 11px); color: var(--text2); background: var(--blue-xlight);
  padding: 3px 10px; border-radius: 20px; font-weight: 600;
}
.rs-chip.mat { color: var(--blue); background: #E2ECFF; font-weight: 700; }
.rs-who-r { margin-left: auto; text-align: right; flex-shrink: 0; }
.rs-who-r-l { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.rs-who-r-v { font-size: clamp(13px, 1.1vw, 14px); font-weight: 800; color: var(--blue); margin-top: 2px; }
.rs-st-pill {
  display: inline-flex; align-items: center; gap: 5px; font-size: clamp(10.5px, .85vw, 11px); font-weight: 700;
  color: var(--warn); background: var(--warn-bg); padding: 4px 11px; border-radius: 20px; margin-top: 6px;
}
.rs-st-pill.apr { color: var(--ok); background: var(--ok-bg); }
.rs-st-pill.rec { color: var(--danger); background: var(--danger-bg); }

/* Cuerpo. min-height:100% propaga el alto completo de .rs-scroll hacia
   .rs-main; .rs-main en column + #respLibrosList con flex:1 (ver más abajo)
   hace que la lista de libros aproveche el espacio sobrante, mientras
   Verificaciones/Observaciones se queda en su altura natural compacta. */
.rs-body { display: grid; grid-template-columns: 260px 1fr; align-items: stretch; min-height: 100%; }
.rs-aside { background: #F7F9FE; border-right: 1px solid var(--border); padding: 16px 20px; align-self: stretch; }
.rs-main { padding: 16px clamp(20px, 2vw, 30px); min-width: 0; display: flex; flex-direction: column; }
.rs-sec {
  font-size: 10.5px; font-weight: 800; color: var(--text3); text-transform: uppercase;
  letter-spacing: .7px; margin-bottom: 8px;
}

/* Panel lateral */
.rs-stat { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.rs-stat:last-of-type { border-bottom: none; }
.rs-stat-ic {
  width: 24px; height: 24px; border-radius: 8px; background: var(--card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;
}
.rs-stat-l { font-size: 11.5px; color: var(--text2); font-weight: 600; }
.rs-stat-v { margin-left: auto; font-size: 13.5px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.rs-stat-v.ok { color: var(--ok); }
.rs-stat-v.warn { color: var(--warn); }
.rs-stat-v--txt { font-size: 11.5px; }

/* Lista de libros: única zona con scroll propio, y la única que crece
   (flex:1) para aprovechar el espacio que .rs-row2 ya no reclama con su
   flex:1 (Verificaciones/Observaciones volvió a su altura natural). El
   max-height sigue como tope: si hay pocos libros no fuerza más alto de lo
   necesario, y si hay muchos, scrollea en vez de desbordar. */
#respLibrosList {
  flex: 1; max-height: 32vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px;
  overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #C7D4EA transparent;
}
#respLibrosList::-webkit-scrollbar { width: 8px; }
#respLibrosList::-webkit-scrollbar-track { background: transparent; }
#respLibrosList::-webkit-scrollbar-thumb { background: #C7D4EA; border-radius: 20px; }

/* Tarjetas de libro */
.rs-book {
  display: flex; gap: 13px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px;
  margin-bottom: 8px; position: relative; background: var(--card); transition: .15s;
}
.rs-book:hover { border-color: #C3D4F0; box-shadow: 0 6px 18px -8px rgba(0,61,165,.22); }
.rs-book::before { content: ""; position: absolute; left: 0; top: 13px; bottom: 13px; width: 3.5px; border-radius: 3px; }
.rs-book.ok::before   { background: var(--ok); }
.rs-book.warn::before { background: #D9920E; }
.rs-book.bad::before  { background: var(--danger); }
.rs-book-cover { flex-shrink: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px -4px rgba(0,0,0,.3); }
.rs-book-main { flex: 1; min-width: 0; }
.rs-book-t { font-size: clamp(13px, 1.1vw, 14.5px); font-weight: 800; letter-spacing: -.2px; color: var(--text); }
/* Grid de 3 columnas con el mismo ancho en TODAS las tarjetas (no flex con
   gap variable): así "Solicitados", "Disponibles" y el stepper "A prestar"
   arrancan siempre en la misma posición horizontal, tenga o no stock el
   libro, en vez de desplazarse según el ancho del badge de esa fila. */
.rs-book-meta {
  display: grid; grid-template-columns: 84px 84px minmax(112px, auto);
  align-items: end; gap: 12px; margin-top: 8px;
}
.rs-bm-l { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.rs-bm-v { font-size: clamp(13px, 1.1vw, 14.5px); font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.rs-bm-v.blue { color: var(--blue); }
.rs-bm-v.ok { color: var(--ok); }
.rs-bm-v.warn { color: var(--warn); }
.rs-bm-v.bad { color: var(--danger); }
/* Cantidad a prestar: el bibliotecólogo puede asignar menos ejemplares de
   los solicitados cuando no alcanza el stock. El wrapper tiene ancho y alto
   fijos (no "auto" en función del contenido) para que el stepper deshabilitado
   ("Sin stock") mida y se alinee exactamente igual que uno activo. */
.rs-qty-c { display: flex; flex-direction: column; }
.rs-qty {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  width: 100px; height: 32px; margin-top: 2px; box-sizing: border-box;
  border: 1.5px solid var(--border); border-radius: 10px; background: var(--card); overflow: hidden;
}
.rs-qty.cero { border-color: #F2C4C4; background: var(--danger-bg); }
.rs-qty-b {
  width: 26px; height: 100%; flex-shrink: 0; border: none; background: transparent; cursor: pointer;
  font-size: 15px; font-weight: 800; color: var(--blue); line-height: 1;
}
.rs-qty-b:hover { background: var(--blue-xlight); }
.rs-qty-b:disabled { color: var(--text3); cursor: not-allowed; background: none; }
.rs-qty-i:disabled { color: var(--text3); }
.rs-qty-i {
  width: 38px; height: 100%; flex-shrink: 0; border: none; background: transparent; text-align: center;
  font-family: inherit; font-size: 14px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.rs-qty-i:focus { outline: none; }
.rs-qty-i::-webkit-outer-spin-button,
.rs-qty-i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rs-qty.cero .rs-qty-i { color: var(--danger); }

.rs-badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  padding: 5px 12px; border-radius: 20px; white-space: nowrap;
}
.rs-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.rs-badge.ok   { color: var(--ok); background: var(--ok-bg); border: 1px solid #BCE3D1; }
.rs-badge.ok::before { background: var(--ok); }
.rs-badge.warn { color: var(--warn); background: var(--warn-bg); border: 1px solid #EBD9A6; }
.rs-badge.warn::before { background: #D9920E; }
.rs-badge.bad  { color: var(--danger); background: var(--danger-bg); border: 1px solid #F2C7C7; }
.rs-badge.bad::before { background: var(--danger); }

/* Verificaciones + observaciones. clamp() escala el texto relativo al
   viewport en vez de un tamaño fijo. Altura NATURAL (sin flex:1): el bloque
   ocupa solo lo que su contenido necesita, dejando el espacio sobrante para
   la lista de libros arriba, que es lo más relevante de ver. */
.rs-row2 { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 14px; margin-top: 10px; }
/* Sin Verificaciones automáticas, Observaciones es el único panel: una sola
   columna a todo el ancho en vez del grid de dos que repartía el espacio. */
.rs-row2--full { grid-template-columns: 1fr; }
.rs-panel { border: 1px solid var(--border); border-radius: 12px; padding: clamp(10px, 1vw, 14px); background: var(--card); }
.rs-panel-t { font-size: clamp(11px, .9vw, 12.5px); font-weight: 800; margin-bottom: 7px; color: var(--text); }
.rs-nota-hint { color: var(--danger); font-size: clamp(9px, .7vw, 10px); font-weight: 600; margin-left: 4px; }
.rs-ta {
  width: 100%; min-height: 54px; max-height: 90px; border: 1.5px solid var(--border); border-radius: 10px; padding: 9px;
  resize: vertical; font-family: inherit; font-size: clamp(10.5px, .85vw, 12px); color: var(--text); background: var(--card);
}
.rs-row2--full .rs-ta { max-height: 120px; }
.rs-ta:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-xlight); }
/* Con el modal a tamaño completo (sin el zoom reducido de antes) ya hay
   espacio real de sobra: los chips crecen libremente y el scroll general de
   .rs-scroll basta, sin necesitar un scroll interno propio aquí. */
.rs-qchips {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; flex-shrink: 0;
}
/* Los chips se tiñen según la intención de la respuesta —aprobar, prestar
   parcialmente o rechazar— para encontrar de un vistazo el que corresponde. */
.rs-qc {
  font-size: 10.5px; font-weight: 700; color: var(--blue); background: var(--blue-xlight);
  border: 1px solid #D5E3FB; padding: 4px 9px; border-radius: 20px; cursor: pointer;
  transition: .14s;
}
.rs-qc:hover { background: #DFEAFD; }
.rs-qc.ok { color: var(--ok); background: var(--ok-bg); border-color: #BCE3D1; }
.rs-qc.ok:hover { background: #D6EFE1; }
.rs-qc.wa { color: var(--warn); background: var(--warn-bg); border-color: #EBD9A6; }
.rs-qc.wa:hover { background: #FBEFCD; }
.rs-qc.da { color: var(--danger); background: var(--danger-bg); border-color: #F2C7C7; }
.rs-qc.da:hover { background: #F9DEDE; }

/* Resumen del préstamo: vive dentro de .rs-who, en el espacio libre entre la
   identidad del docente y el bloque "Solicitud #N". Tarjeta propia con
   degradado sutil y separadores punteados entre cada dato, para que se lea
   como un panel con entidad propia y no como texto suelto en la banda. */
.rs-sum {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 0;
  padding: 10px 6px; margin: 0 4px;
  background: linear-gradient(135deg, #F6F9FF, #EEF4FF);
  border: 1px solid #DCE7FA; border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  flex-wrap: wrap;
}
.rs-su {
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px; position: relative;
}
.rs-su + .rs-su::before {
  content: ""; position: absolute; left: 0; top: 15%; bottom: 15%;
  width: 1px; border-left: 1px dashed #C9D9F2;
}
.rs-su-ic {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: var(--card); border: 1px solid #D6E3FA;
  box-shadow: 0 3px 8px -3px rgba(0,61,165,.25);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.rs-su-l { font-size: 9.5px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.rs-su-v { font-size: clamp(12.5px, 1vw, 14px); font-weight: 800; margin-top: 2px; color: var(--text); letter-spacing: -.2px; }
.rs-su-v.ok { color: var(--ok); }
.rs-su-v.warn { color: var(--warn); }
/* Fuera de .rs-scroll ahora (hermano en el flex-column de .rs-modal): flex-
   shrink:0 para que nunca se comprima, igual que header/banda/pie. */
.rs-note {
  flex-shrink: 0; margin: 0; padding: 10px clamp(20px, 2vw, 32px);
  font-size: clamp(10.5px, .8vw, 11.5px); color: var(--text2); line-height: 1.4;
  border-top: 1px solid var(--border); background: var(--off-white);
}

@media (max-width: 1000px) {
  /* La banda no tiene ancho para tres bloques en línea: el resumen pasa a
     su propia fila debajo de la identidad. */
  .rs-who { flex-wrap: wrap; }
  .rs-sum {
    flex-basis: 100%; order: 3; justify-content: flex-start;
    margin: 14px 0 0;
  }
}

/* Acciones */
/* Los tres botones ocupan el mismo ancho (flex:1 a partes iguales) y
   comparten alto/radio/tipografía: la única diferencia entre ellos es el
   color, que codifica la intención (neutro / peligro / confirmación). */
.rs-ft {
  display: flex; align-items: stretch; gap: 12px; padding: clamp(14px, 1.6vh, 18px) clamp(20px, 2vw, 32px);
  border-top: 1px solid var(--border);
  background: var(--card);
}
.rs-btn {
  flex: 1 1 0; height: 46px; padding: 0 20px; border-radius: 12px;
  font-family: inherit; font-size: clamp(12.5px, 1vw, 13.5px); font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--card); color: var(--text2);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter .15s ease, background .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .1s ease;
}
.rs-btn:hover { background: #F4F7FC; border-color: #D5DEEA; }
.rs-btn:active { transform: translateY(1px); }
.rs-btn-wa { border-color: #EAD9A8; background: var(--warn-bg); color: var(--warn); }
.rs-btn-wa:hover { background: #FBEFCD; border-color: #E3C989; }
.rs-btn-da {
  border-color: #F2C4C4; background: var(--danger-bg); color: var(--danger);
  box-shadow: 0 6px 16px -10px rgba(211,47,47,.45);
}
.rs-btn-da:hover { background: #F9DEDE; border-color: #ECAFAF; box-shadow: 0 8px 20px -9px rgba(211,47,47,.5); }
.rs-btn-ok {
  border: none; background: linear-gradient(135deg, var(--blue-mid), var(--blue)); color: #fff;
  box-shadow: 0 10px 24px -8px rgba(0,61,165,.6);
}
.rs-btn-ok:hover { filter: brightness(1.08); box-shadow: 0 12px 28px -8px rgba(0,61,165,.68); }

@media (max-width: 860px) {
  .rs-body { grid-template-columns: 1fr; }
  .rs-aside { border-right: none; border-bottom: 1px solid var(--border); }
  .rs-row2 { grid-template-columns: 1fr; }
  .rs-ft { flex-wrap: wrap; }
  .rs-btn { flex: 1 1 auto; min-width: 0; }
}

/* Grilla info modal detalle */
.sol-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
}

/* Aviso en modal convertir */
.sol-aviso-warn {
  background: var(--warn-bg);
  color: var(--warn);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 10px;
  border: 1px solid #C9920A;
}

/* Fila de libro en modal convertir */
.conv-libro-row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

/* Item en modal crear solicitud */
.ns-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: var(--blue-xlight);
  border-radius: 8px;
  margin-bottom: 6px;
}
.ns-item-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.sol-empty-items {
  color: var(--text3);
  font-size: 13px;
  padding: 8px 4px;
  font-style: italic;
}


/* ============================================================
   VISITAS — Control de Asistencia
   ============================================================ */

/* Tarjetas de resumen: mismo componente que Préstamos (.metrics/.metric) —
   ver la sección ASISTENCIA más abajo para el icono y el valor de texto. */

/* Tabs */
.vis-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.vis-tab {
  background: none;
  border: none;
  color: var(--text3);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.vis-tab:hover { color: var(--text); }
.vis-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Filtros */
.vis-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.vis-filter-bar .fi { display: flex; flex-direction: column; gap: 3px; }
.vis-filter-bar label { font-size: 11px; color: var(--text3); font-weight: 500; }
.vis-filter-bar input,
.vis-filter-bar select { height: 32px; padding: 0 8px; font-size: 13px; }
.vis-filter-bar .ml-auto { margin-left: auto; }

/* Tabla */
.vis-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}
#tablaVisitas { width: 100%; }
#tablaVisitas th { font-size: 12px; white-space: nowrap; }
#tablaVisitas td { font-size: 13px; vertical-align: middle; }
.acciones-col { white-space: nowrap; }

/* Badges de estado para visitas */
.badge-activo     { background: rgba(16,185,129,.18);  color: #10b981; border: 1px solid rgba(16,185,129,.3); }
.badge-completado { background: rgba(37,99,235,.18);   color: #60a5fa; border: 1px solid rgba(37,99,235,.3); }
.badge-cancelado  { background: rgba(239,68,68,.15);   color: #f87171; border: 1px solid rgba(239,68,68,.3); }

/* Paginación */
#visPaginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.pag-info { font-size: 12px; color: var(--text3); }
.pag-btns { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pag-btns .btn.sm { min-width: 32px; }
.pag-dots { color: var(--text3); padding: 0 4px; font-size: 13px; }
.pag-active {
  background: var(--blue) !important;
  color: #fff !important;
  border-color: var(--blue) !important;
}
#solPaginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px 0;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

/* Panel estadísticas */
.vis-stats-top {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.vis-stats-top label { font-size: 12px; color: var(--text3); }
.vis-stats-top input { height: 32px; padding: 0 8px; font-size: 13px; }

#visStatsResumen,
#visStatsGrid,
#pstGrid {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.vis-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 28px;
  min-width: 150px;
  flex: 1;
}
.vis-stat-ico { font-size: 22px; margin-bottom: 4px; }
.vis-stat-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.vis-stat-lbl { font-size: 11px; color: var(--text3); margin-top: 4px; text-align: center; }

.vis-chart-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 12px;
}
.vis-chart-card-full {
  padding: 16px 20px;
}
.vis-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.vis-chart-card {
  padding: 16px;
}

/* Formulario modal visita */
.vis-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.vis-form-grid .full { grid-column: 1 / -1; }

/* Responsive visitas */
@media (max-width: 1000px) {
  .vis-charts-grid { grid-template-columns: 1fr; }
  .vis-form-grid { grid-template-columns: 1fr; }
  .vis-form-grid .full { grid-column: 1; }
}
@media (max-width: 600px) {
  .vis-filter-bar { flex-direction: column; align-items: flex-start; }
  .vis-filter-bar .fi { width: 100% !important; }
  .vis-filter-bar .ml-auto { margin-left: 0; }
  #visStatsResumen { gap: 12px; }
}

/* ════════════════════════════════════════════════════════════
   ASISTENCIA DE GRUPOS — integración con el lenguaje visual de
   LuKiBooks. El módulo venía con paleta índigo/oscura (otro design
   system); aquí se alinea con el azul institucional.
   ════════════════════════════════════════════════════════════ */

/* Indicadores: mismo lenguaje que el hero de Préstamos (anillo + filas
   compactas), con prefijo propio para no acoplar esta página a la de
   Préstamos aunque el diseño se parezca. */
.vis-kpis { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; }

.vis-hero {
  display: flex; align-items: center; gap: 24px; text-align: left;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 65%, var(--blue-deep) 100%);
  border-radius: var(--r); padding: 22px 26px; color: #fff;
  box-shadow: 0 12px 30px rgba(0,40,128,.22);
  position: relative; overflow: hidden;
}
.vis-hero::after {
  content: ''; position: absolute; right: -40px; top: -40px;
  width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.05);
}

.vis-ring {
  width: 104px; height: 104px; border-radius: 50%; flex-shrink: 0; position: relative;
  background: rgba(255,255,255,.22);   /* JS pinta los tramos reales */
}
.vis-ring::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--blue-dark); }
.vis-ring b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 34px; font-weight: 700; z-index: 1;
  font-variant-numeric: lining-nums tabular-nums;   /* cifras de Playfair no quedan centradas sin esto */
}
.vis-hero-t { display: flex; flex-direction: column; min-width: 0; }
.vis-hero-l {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: rgba(255,255,255,.70);
}
.vis-hero-n { font-size: 19px; font-weight: 700; margin: 5px 0 12px; }
.vis-leg { display: flex; flex-direction: column; gap: 6px; }
.vis-leg > span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.86); }
.vis-leg i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.vis-leg b { font-weight: 800; color: #fff; }
.vis-leg-vacio { font-size: 12.5px; color: rgba(255,255,255,.7); }

.vis-minis { display: grid; grid-template-rows: repeat(3, 1fr); gap: 10px; }
.vis-mc {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px;
  padding: 0 16px; min-height: 62px;
}
.vis-mc-b { width: 4px; height: 34px; border-radius: 4px; flex-shrink: 0; }
.vis-mc-v {
  font-family: var(--font-head); font-size: 27px; font-weight: 700; min-width: 30px; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
/* "Actividad más realizada" es texto, no una cifra: se reduce y envuelve
   en 2 líneas en vez de recortar con "…" (un ellipsis dejaba "Lec…"). */
.vis-mc-v--txt {
  font-size: 15px; line-height: 1.25; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.vis-mc-t { display: flex; flex-direction: column; min-width: 0; }
.vis-mc-n { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.25; }
.vis-mc-s { font-size: 11.5px; color: var(--text3); margin-top: 2px; }
.vis-b-bl { background: var(--blue); }
.vis-b-or { background: var(--orange); }
.vis-b-pu { background: #7A3FA8; }

@media (max-width: 1100px) {
  .vis-kpis { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .vis-hero { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .vis-ring { width: 88px; height: 88px; }
  .vis-ring b { font-size: 29px; }
}

/* ── Pestañas ── */
.vis-tabs { gap: 6px; border-bottom: 1.5px solid var(--border); }
.vis-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; font-size: 13px; font-weight: 700;
  color: var(--text3); border-bottom: 2.5px solid transparent;
}
.vis-tab svg { flex-shrink: 0; opacity: .75; }
.vis-tab:hover { color: var(--blue); }
.vis-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.vis-tab.active svg { opacity: 1; }

/* Botón "+ Registrar asistencia" */
.vis-btn-nueva { display: inline-flex; align-items: center; gap: 7px; }

/* KPIs de Estadísticas: mismo lenguaje que las tarjetas de resumen */
.vis-stat-item {
  border: 1.5px solid var(--border); border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(0,15,50,.04);
}
.vis-stat-num { color: var(--blue-dark); font-size: 30px; font-weight: 800; }
.vis-stat-lbl { font-size: 12px; color: var(--text3); font-weight: 600; margin-top: 5px; }
.vis-chart-title {
  font-size: 13px; font-weight: 800; color: var(--blue-dark); margin-bottom: 14px;
}

/* ══════════════════════════════════════════════════════════
   ESTADÍSTICAS · SELECTOR DE ÁMBITO
   Un solo control decide qué se mide: todo el centro o una
   sección. Escala a decenas de secciones porque la lista se
   busca, en vez de crecer en pantalla.
   ══════════════════════════════════════════════════════════ */
/* Altura única en toda la fila: el selector, los campos de fecha y los botones
   traían tres alturas distintas (47.7 / 43.9 / 38.6) y la fila se veía escalonada. */
.vst-fila { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.vst-fila .fi,
.vst-fila .btn { height: 44px; }
.vst-scope { position: relative; }
.vst-scope-btn {
  display: flex; align-items: center; gap: 10px; min-width: 260px; height: 44px;
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  color: #fff; border: 0; border-radius: 11px; padding: 0 14px;
  font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,61,165,.22);
  transition: box-shadow .2s, transform .1s;
}
.vst-scope-btn:hover { box-shadow: 0 7px 20px rgba(0,61,165,.3); }
.vst-scope-btn:active { transform: scale(.99); }
.vst-scope-btn:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 2px; }
/* Una sección tiñe el botón distinto del centro: el ámbito activo se ve, no se deduce */
.vst-scope.sec .vst-scope-btn { background: linear-gradient(135deg, var(--blue-mid), var(--blue)); }
.vst-scope-ico { display: flex; flex-shrink: 0; opacity: .9; }
.vst-scope-vl { flex: 1; min-width: 0; text-align: left; }
.vst-scope-et {
  display: block; font-size: 9px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255,255,255,.6); line-height: 1; margin-bottom: 3px;
}
#vstScopeVal { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vst-scope-chev { flex-shrink: 0; opacity: .8; transition: transform .2s; }
.vst-scope.open .vst-scope-chev { transform: rotate(180deg); }

.vst-scope-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,30,80,.16); padding: 6px; min-width: 290px;
}
.vst-scope.open .vst-scope-menu { display: block; animation: vstIn .16s ease; }
@keyframes vstIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.vst-scope-buscar {
  display: flex; align-items: center; gap: 8px; padding: 0 10px; margin-bottom: 4px;
  background: var(--off-white); border-radius: 8px;
}
.vst-scope-buscar svg { color: var(--text3); flex-shrink: 0; }
.vst-scope-buscar input {
  border: 0; background: none; padding: 9px 0; font-family: inherit; font-size: 12px;
  color: var(--text); width: 100%; outline: none;
}
/* Lista con scroll oculto: mismo recurso que el selector de sección del formulario */
.vst-scope-lista {
  max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.vst-scope-lista::-webkit-scrollbar { width: 0; display: none; }
.vst-scope-op {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 0; border-radius: 8px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text2);
  cursor: pointer; width: 100%; background: none; text-align: left;
  transition: background .15s, color .15s;
}
.vst-scope-op:hover { background: var(--blue-xlight); color: var(--blue-dark); }
.vst-scope-op.on { background: var(--blue); color: #fff; }
.vst-scope-op svg { flex-shrink: 0; }
.vst-scope-op b { font-variant-numeric: lining-nums tabular-nums; }
.vst-scope-op small { margin-left: auto; font-weight: 600; opacity: .75; font-size: 11px; flex-shrink: 0; }
.vst-scope-sep {
  font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text3); padding: 9px 11px 5px;
}
.vst-scope-vacio { padding: 14px 11px; font-size: 12px; color: var(--text3); text-align: center; }

/* Informe: se va al extremo opuesto de la fila porque no es un filtro, es una
   salida. Contorno azul: se distingue sin competir con "Actualizar". */
.vst-pdf {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--blue-light); color: var(--blue); background: var(--surface);
}
.vst-pdf:hover:not(:disabled) { background: var(--blue-xlight); border-color: var(--blue); }
.vst-pdf:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 900px) { .vst-pdf { margin-left: 0; } }

/* Contexto de la sección elegida */
.vst-ctx { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.vst-ctx:empty { display: none; }
.vst-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
  color: var(--text2); background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px;
}
.vst-chip i { font-style: normal; color: var(--text3); font-weight: 600; }
.vst-chip b { font-variant-numeric: lining-nums tabular-nums; }
.vst-chip svg { flex-shrink: 0; }
.vst-chip.warn { background: var(--warn-bg); border-color: #EBD9A6; color: var(--warn); }

@media (max-width: 560px) {
  .vst-scope { width: 100%; }
  .vst-scope-btn { width: 100%; min-width: 0; }
  .vst-scope-menu { width: 100%; min-width: 0; }
}

/* Barra de filtros: su propia tarjeta, delgada (el listado ya no vive
   dentro de ella, así que no hereda el padding de 24px de .card genérica). */
.card.vis-toolbar-card { padding: 14px 16px; }

/* ── Listado en tarjetas ── */
.vis-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px; margin-top: 16px;
}
.vis-card {
  background: #fff; border: 1.5px solid var(--border); border-radius: 16px;
  padding: 18px; text-align: left; cursor: pointer;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.vis-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,15,50,.09); border-color: var(--blue-light); }
.vis-card:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-xlight); }

.vis-c-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.vis-c-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.vis-c-txt { min-width: 0; }
.vis-c-n {
  font-weight: 800; font-size: 14px; color: var(--text); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vis-c-m { font-size: 11px; color: var(--text3); margin-top: 1px; }

/* Chip de sección */
.vis-seccion {
  display: inline-block; font-weight: 800; font-size: 11.5px;
  background: var(--blue-xlight); color: var(--blue-dark);
  border-radius: 20px; padding: 4px 11px; white-space: nowrap; flex-shrink: 0;
}

/* Actividad: icono propio + nombre + total, en una franja destacada */
.vis-c-act {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; background: var(--off-white); border-radius: 11px; margin-bottom: 14px;
}
.vis-c-act-i {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.vis-c-act-t {
  font-size: 13px; font-weight: 700; color: var(--text); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vis-c-act-n {
  font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--text);
  margin-left: auto; flex-shrink: 0; font-variant-numeric: lining-nums tabular-nums;
}

.vis-c-ft { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vis-c-hm { font-size: 11.5px; color: var(--text3); white-space: nowrap; }

/* Botones de acción: iconos en cuadro redondeado */
.vis-c-acts { display: flex; gap: 6px; flex-shrink: 0; }
.vis-c-acts .vis-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border-radius: 9px;
  border: 1.5px solid var(--border);
  background: #fff; color: var(--text2);
  transition: background .14s, color .14s, border-color .14s;
}
.vis-c-acts .vis-act:hover {
  background: var(--blue-xlight); color: var(--blue); border-color: var(--blue);
}
.vis-c-acts .vis-act.danger {
  color: var(--danger); border-color: #F3C6C6; background: var(--danger-bg);
}
.vis-c-acts .vis-act.danger:hover {
  background: var(--danger); color: #fff; border-color: var(--danger);
}

/* ══════════════════════════════════════════════════════════
   TARJETA AGRUPADA POR SECCIÓN
   Una tarjeta por sección (año lectivo + código), con el resumen
   de sus visitas. Reutiliza la caja .vis-card del módulo.
   ══════════════════════════════════════════════════════════ */
/* La cabecera sangra hasta el borde, así que la caja no lleva relleno propio.
   Columna flexible: el aviso de varios docentes hace más alta una tarjeta que
   otra y el pie debe quedar alineado igual en todas. */
.vis-card.vsec-card {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  border-width: 1px; border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0,30,80,.04), 0 8px 20px rgba(0,30,80,.06);
  transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s, border-color .28s;
}
.vis-card.vsec-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 5px rgba(0,30,80,.05), 0 22px 46px rgba(0,30,80,.16);
}

/* ── Cabecera institucional: el docente es el protagonista (avatar grande +
   nombre), la sección queda como dato de contexto en su propia esquina. ── */
.vsec-hd {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 130%);
  padding: 16px 18px 15px; display: flex; align-items: center;
  gap: 12px; position: relative; overflow: hidden;
}
.vsec-hd > * { position: relative; z-index: 1; min-width: 0; }

.vsec-av {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 16px; font-weight: 800;
  color: #fff; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.35);
}
.vsec-hd-tx { flex: 1; min-width: 0; }
.vsec-rol {
  display: block; font-size: 9px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.65);
}
.vsec-hd-tx b {                            /* nombre largo: 1 línea + tooltip */
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 14px; font-weight: 800; color: #fff; margin-top: 1px;
}
/* El aviso de varios docentes pasa a icono con tooltip: informa igual y no
   descuadra el ritmo horizontal de la cabecera que lo lleva. */
.vsec-warn {
  flex-shrink: 0; color: #fff; background: rgba(255,255,255,.18); border-radius: 50%;
  width: 24px; height: 24px; display: grid; place-items: center; cursor: help;
}
.vsec-cod {
  flex-shrink: 0; text-align: right;
  font-family: var(--font-head); font-size: 24px; font-weight: 800;
  color: #fff; line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums;
}
.vsec-cod small {
  display: block; font-family: var(--font-body); font-size: 8.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6);
  line-height: 1.2;
}

.vsec-bd { padding: 15px 18px 0; flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ── Ficha de datos: etiqueta a la izquierda, valor a la derecha ── */
.vsec-dl { display: flex; flex-direction: column; }
.vsec-dl > div {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7.5px 0; border-top: 1px solid var(--border); font-size: 12px; min-width: 0;
}
.vsec-dl > div:first-child { border-top: 0; padding-top: 0; }
/* El valor manda: la etiqueta cede espacio antes de que se recorte el dato */
.vsec-dl i {
  font-style: normal; color: var(--text3); font-weight: 600; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vsec-dl b {
  color: var(--text2); font-weight: 700; white-space: nowrap; flex-shrink: 0;
  text-align: right; font-variant-numeric: lining-nums tabular-nums;
}
.vsec-dl b.vsec-big {
  font-family: var(--font-head); font-size: 19px; color: var(--blue-dark); line-height: 1;
}

/* ── Distribución por sexo: barra proporcional de dos colores en vez de
   solo texto — de un vistazo se ve el balance sin leer los números. ── */
.vsec-dist { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.vsec-dist-lbl {
  display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 800;
  margin-bottom: 5px;
}
.vsec-dist-h { color: var(--blue-dark); }
.vsec-dist-m { color: #C45FA0; }
.vsec-dist-bar {
  display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--off-white);
}
.vsec-dist-bar .h { background: var(--blue); }
.vsec-dist-bar .m { background: #C45FA0; }
.vsec-dist-inc {
  font-size: 11px; font-weight: 700; color: var(--warn); background: var(--warn-bg);
  padding: 4px 10px; border-radius: 999px; display: inline-block;
}

/* ── Pie: registrar otra visita de este grupo o abrir su historial ── */
.vsec-ft { margin-top: auto; padding: 14px 18px 16px; display: grid;
  grid-template-columns: 1fr 1fr; gap: 8px; }
.vsec-b {
  font-family: inherit; font-size: 12px; font-weight: 800; border-radius: 11px;
  padding: 10px 8px; display: flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; min-width: 0;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .1s;
}
.vsec-b:active { transform: scale(.97); }
.vsec-b:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 2px; }
.vsec-b svg { flex-shrink: 0; transition: transform .25s; }
.vsec-b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Naranja en versión suave que se rellena al pasar: invita en el momento justo
   sin quitarle al azul el papel de acción principal. */
.vsec-b-nueva { background: var(--orange-light); color: var(--orange-dark); border: 1.5px solid #FFD0B0; }
.vsec-b-nueva:hover {
  background: var(--orange); border-color: var(--orange); color: #fff;
  box-shadow: 0 6px 16px rgba(255,107,0,.32);
}
.vsec-b-nueva:hover svg { transform: rotate(90deg); }
.vsec-b-hist {
  background: var(--blue); color: #fff; border: 1.5px solid var(--blue);
  box-shadow: 0 4px 12px rgba(0,61,165,.22);
}
.vsec-b-hist:hover {
  background: var(--blue-dark); border-color: var(--blue-dark);
  box-shadow: 0 7px 18px rgba(0,61,165,.32);
}
.vsec-b-hist:hover svg { transform: translateX(3px); }

/* En columnas muy angostas los dos botones no caben en una fila */
@media (max-width: 380px) { .vsec-ft { grid-template-columns: 1fr; } }

/* ── Historial de la sección ── */
/* Debe quedar por debajo de ver/editar (.va-overlay = 220) para que esos se
   apilen encima. Se usa selector compuesto a propósito: .va-overlay se declara
   más abajo en esta hoja y, a igual especificidad, ganaría; y como este modal
   va último en el DOM, con el mismo z-index taparía al de edición. */
.va-overlay.vsh-overlay { z-index: 215; }
/* Compuesto a propósito: .va-modal se declara MÁS ABAJO con la misma
   especificidad y su max-width:720px ganaba, dejando este modal angosto. */
.va-modal.vsh-modal { max-width: 980px; }

/* La cabecera de ESTE modal deja de ser una fila y pasa a bloque, para poder
   apilar identidad, cifras y pestañas. Selector compuesto a propósito: .va-hd
   la comparten los modales de registrar y ver detalle, que no deben cambiar. */
.vsh-modal .va-hd { display: block; padding: 17px 20px 0; }
.vsh-hd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vsh-modal .va-hd-sub { margin-top: 2px; }

/* Azulejos de vidrio sobre el propio azul: los acumulados quedan a la vista
   siempre, sin gastar alto del cuerpo ni desaparecer al hacer scroll. */
.vsh-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 15px; }
.vsh-tile {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  border-radius: 11px; padding: 9px 12px; min-width: 0;
}
.vsh-tile b {
  display: block; font-family: var(--font-head); font-size: 22px; font-weight: 700;
  color: #fff; line-height: 1; font-variant-numeric: lining-nums tabular-nums;
  overflow-wrap: anywhere;
}
.vsh-tile span {
  display: block; font-size: 9px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255,255,255,.66); margin-top: 4px;
}
/* La actividad es texto, no una cifra: no debe llevar tamaño de número */
.vsh-tile.tx b { font-size: 15px; line-height: 1.25; }

/* Pestañas ancladas al borde inferior de la cabecera */
.vsh-tabs { display: flex; gap: 4px; margin-top: 15px; }
.vsh-tab {
  font-family: inherit; background: rgba(255,255,255,.1); color: rgba(255,255,255,.72);
  font-size: 12px; font-weight: 800; padding: 10px 16px; border: 0; cursor: pointer;
  border-radius: 10px 10px 0 0; display: flex; align-items: center; gap: 7px;
  transition: background .2s, color .2s;
}
.vsh-tab:hover { background: rgba(255,255,255,.18); color: #fff; }
.vsh-tab.on { background: var(--surface); color: var(--blue-dark); }
.vsh-tab:focus-visible { outline: 2.5px solid #fff; outline-offset: -3px; }
.vsh-tab-n {
  font-size: 10px; font-weight: 800; border-radius: 20px; padding: 1px 6px;
  background: rgba(255,255,255,.2); color: #fff;
  font-variant-numeric: lining-nums tabular-nums;
}
.vsh-tab.on .vsh-tab-n { background: var(--blue-xlight); color: var(--blue); }

/* Avisos (sexo incompleto / varios docentes) como chips en una fila */
.vsh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.vsh-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  border-radius: 8px; padding: 5px 9px;
  background: var(--warn-bg); border: 1px solid #EBD9A6; color: var(--warn);
}
.vsh-chip svg { flex-shrink: 0; }
.vsh-chip.ok { background: var(--blue-xlight); border-color: var(--blue-light); color: var(--blue-dark); }

.vsh-tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vsh-tabla { width: 100%; border-collapse: collapse; }
.vsh-tabla th {
  text-align: left; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text3); padding: 9px 10px;
  border-bottom: 1.5px solid var(--border); white-space: nowrap;
}
.vsh-tabla td {
  padding: 10px; font-size: 12.5px; color: var(--text2);
  border-bottom: 1px solid var(--border); vertical-align: middle;
}
.vsh-tabla tbody tr:last-child td { border-bottom: none; }
.vsh-tabla tbody tr:hover { background: var(--blue-xlight); }
.vsh-tabla .num { text-align: center; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.vsh-tabla .num b { color: var(--text); }
.vsh-obs {
  max-width: 220px; color: var(--text3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vsh-acc { display: flex; gap: 6px; justify-content: flex-end; }
.vsh-acc .vis-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 8px;
  border: 1.5px solid var(--border); background: #fff; color: var(--text2);
  transition: background .14s, color .14s, border-color .14s;
}
.vsh-acc .vis-act:hover { background: var(--blue-xlight); color: var(--blue); border-color: var(--blue); }
.vsh-acc .vis-act.danger { color: var(--danger); border-color: #F3C6C6; background: var(--danger-bg); }
.vsh-acc .vis-act.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.va-ft #btnPdfSeccion { margin-right: auto; display: inline-flex; align-items: center; gap: 7px; }

@media (max-width: 760px) {
  .vsh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* En pantallas angostas los dos botones del pie no caben en una fila y el texto
   del informe se recorta: se apilan (solo en este modal, no en el de registro). */
@media (max-width: 520px) {
  .vsh-modal .va-ft { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .vsh-modal .va-ft .btn { width: 100%; justify-content: center; }
  .va-ft #btnPdfSeccion { margin-right: 0; }
}

/* Skeleton de carga: siluetas del alto aproximado de una tarjeta real */
.vis-skel {
  height: 168px; border-radius: 16px;
  background: linear-gradient(90deg, #fff 25%, var(--off-white) 37%, #fff 63%);
  background-size: 400% 100%;
  animation: ntfShimmer 1.4s ease infinite;   /* reutiliza el keyframe ya definido para notificaciones */
}
.vis-cargando { padding: 28px; text-align: center; color: var(--text3); font-size: 13px; }

/* Estado vacío: único hijo de .vis-grid, debe ocupar todas las columnas
   del grid (si no, queda encajado en la primera columna en vez de centrado
   en el ancho completo del listado). */
.vis-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 44px 16px; text-align: center;
}
.vis-empty-ico {
  width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-xlight); color: var(--blue);
  margin-bottom: 6px;
}
.vis-empty b     { font-size: 14px; color: var(--text2); }
.vis-empty small { font-size: 12px; color: var(--text3); max-width: 380px; }
.vis-empty .btn  { margin-top: 10px; }

/* Distribución por sexo (estadísticas) */
.vis-sexo-barra {
  display: flex; height: 22px; border-radius: 20px; overflow: hidden;
  background: var(--border); margin-bottom: 12px;
}
.vis-sexo-h { background: var(--blue); }
.vis-sexo-m { background: #B5407A; }
.vis-sexo-leg {
  display: flex; gap: 22px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text2); margin-bottom: 10px;
}
.vis-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.vis-dot--h { background: var(--blue); }
.vis-dot--m { background: #B5407A; }
.vis-sexo-nota {
  font-size: 11.5px; color: var(--text3); line-height: 1.5;
  background: var(--off-white); border-radius: 8px; padding: 9px 12px;
}

/* ── Modal de asistencia ── */
.va-overlay { padding: 20px; z-index: 220; }
.va-modal {
  background: #fff; border-radius: 18px; overflow: hidden;
  width: 100%; max-width: 720px; max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,15,50,.3);
  animation: modalIn .22s cubic-bezier(.4,0,.2,1);
}
.va-modal--sm { max-width: 520px; }
.va-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
}
.va-hd-left { display: flex; align-items: center; gap: 13px; }
.va-hd-ico {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16);
}
.va-hd-title { font-family: var(--font-head); font-size: 19px; color: #fff; }
.va-hd-sub   { font-size: 12px; color: rgba(255,255,255,.75); }
.va-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.va-ft {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 22px; flex-shrink: 0;
  border-top: 1.5px solid var(--border); background: var(--off-white);
}

.va-sec-t {
  font-size: 10.5px; font-weight: 800; color: var(--text3);
  text-transform: uppercase; letter-spacing: .05em;
  margin: 4px 0 10px; padding-bottom: 6px;
  border-bottom: 1.5px solid var(--border);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.va-sec-t + .va-sec-t { margin-top: 18px; }
.va-grid + .va-sec-t  { margin-top: 20px; }
.va-sec-opt {
  text-transform: none; letter-spacing: 0; font-weight: 600;
  font-size: 11px; color: var(--blue);
}
.va-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 14px;
}
/* Docente y sección van a fila completa: el buscador de docente y los dos
   steppers grado-sección necesitan ancho para respirar (si no, se apretaban
   y desbordaban la columna). Actividad + Otro comparten la fila siguiente. */
/* Distribución de la 1.ª sección del modal:
     fila 1 → docente (ancho completo)
     fila 2 → tipo de actividad (izq) + sección o grupo (der, 2 columnas)
     fila 3 → "especifique la actividad" (solo si se elige "Otro")
   min-width:0 deja que las celdas se encojan en móvil sin desbordar. */
.va-f-doc { grid-column: 1 / -1; min-width: 0; }
.va-f-act { grid-column: 1; grid-row: 2; }
.va-f-sec { grid-column: 2 / -1; grid-row: 2; min-width: 0; }
#vis-otro-wrap { grid-column: 1 / -1; grid-row: 3; }
.va-grid .fg { margin: 0; }

/* Selector de sección grado-sección. Cada lado es un stepper (−/+, escribir)
   con un desplegable de números: la barra de scroll se oculta pero se puede
   desplazar, y los bordes se difuminan para que se vea profesional. */
.vis-sec-pick { display: flex; align-items: flex-end; gap: 12px; width: 100%; max-width: 460px; }
/* El guion toma el alto del control y centra su glifo: así queda a la misma
   altura que los steppers sin depender de un padding calibrado a mano. */
.vis-sec-sep {
  font-weight: 800; font-size: 18px; color: var(--text3); flex-shrink: 0;
  height: var(--vis-ctl-h); display: flex; align-items: center;
}

.vis-sel { position: relative; flex: 1; min-width: 0; }
/* Medidas compartidas del campo de sección, en variables para que todo lo
   que debe quedar alineado se mueva junto:
   --vis-tag-h/mb → alto de la fila de sub-etiquetas (Grado/Sección), que
     "Tipo de actividad" reserva para alinear su select con los steppers.
   --vis-ctl-h    → alto del control; 43px es el que resulta de .fi (13.5px
     de texto + 11px de padding + 1.5px de borde), así el stepper, el guion,
     el select y el resto de campos del modal miden todos lo mismo. */
:root { --vis-tag-h: 12px; --vis-tag-mb: 5px; --vis-ctl-h: 43px; }
.vis-sel-tag {
  display: block; font-size: 10px; line-height: var(--vis-tag-h);
  font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text3); margin-bottom: var(--vis-tag-mb);
}
/* Baja el select el alto de esa fila para que su caja arranque y termine
   exactamente a la misma altura que los steppers de al lado. */
.va-f-act .fi { margin-top: calc(var(--vis-tag-h) + var(--vis-tag-mb)); }

/* Caja del stepper: −  [input]  + (alto compartido, ver --vis-ctl-h) */
.vis-step {
  display: flex; align-items: center; height: var(--vis-ctl-h);
  background: var(--off-white); border: 1.5px solid var(--border); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.vis-step:focus-within { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-xlight); }
.vis-step-btn {
  width: 42px; height: 100%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--blue);
  border-radius: 11px 0 0 11px; transition: background .14s, color .14s;
}
.vis-step-btn.plus { border-radius: 0 11px 11px 0; }
.vis-step-btn:hover { background: var(--blue-xlight); }
.vis-step-btn:disabled { color: var(--text3); opacity: .4; cursor: not-allowed; background: none; }
.vis-step-val {
  flex: 1; min-width: 0; height: 100%; border: none; background: none; outline: none;
  text-align: center; font-size: 20px; font-weight: 800; color: var(--text); cursor: pointer;
  font-variant-numeric: lining-nums tabular-nums;
}
.vis-step-val::placeholder { color: var(--text3); font-weight: 600; }

/* Desplegable de números. Anclado a la derecha para no salirse en el 2.º lado. */
.vis-step-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; left: auto; z-index: 40;
  width: 100%; min-width: 128px;
  background: #fff; border: 1.5px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0,30,80,.20); padding: 8px 6px;
}
.vis-sel.open .vis-step-menu { display: block; animation: visSelIn .16s cubic-bezier(.4,0,.2,1); }
.vis-sel.open .vis-step { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-xlight); }
@keyframes visSelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Lista desplazable: scroll SIN barra visible + bordes difuminados */
.vis-step-scroll {
  max-height: 198px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* Edge/IE viejos */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
          mask-image: linear-gradient(180deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}
.vis-step-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }  /* Chrome/Safari */

.vis-step-opt {
  height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; cursor: pointer; font-size: 15px; font-weight: 800; color: var(--text);
  transition: background .12s, color .12s;
}
.vis-step-opt:hover { background: var(--blue-xlight); color: var(--blue-dark); }
.vis-step-opt.sel { background: var(--blue); color: #fff; }

/* En el modal a pantalla completa (móvil) el primer stepper abre su lista
   hacia la izquierda para no rozar el borde de la pantalla. */
@media (max-width: 640px) {
  .vis-sec-pick > .vis-sel:first-of-type .vis-step-menu { left: 0; right: auto; }
}

/* Suma en vivo de la distribución */
.va-suma {
  display: flex; align-items: center;
  height: 42px; padding: 0 12px;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--off-white);
  font-size: 13px; font-weight: 800; color: var(--text3);
}
.va-suma.ok  { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok); }
.va-suma.bad { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

/* Errores por campo (nunca solo color: siempre llevan texto) */
.va-err {
  display: none; margin-top: 5px;
  font-size: 11.5px; font-weight: 700; color: var(--danger);
}
.va-err-block { margin-top: 8px; }
.va-cont { text-align: right; font-size: 11px; color: var(--text3); margin-top: 4px; }

/* Detalle (solo lectura) */
.vdv-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px;
}
.vdv-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 12px; border-radius: 9px; background: var(--off-white);
}
.vdv-row span { font-size: 10.5px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .03em; }
.vdv-row b    { font-size: 13px; color: var(--text); }
.vdv-obs { margin-top: 18px; }
.vdv-obs p {
  font-size: 12.5px; color: var(--text2); line-height: 1.55;
  background: var(--off-white); border-radius: 9px; padding: 10px 12px;
  white-space: pre-wrap; word-break: break-word;
}
.vdv-meta { margin-top: 14px; font-size: 11px; color: var(--text3); }

/* Responsive */
@media (max-width: 760px) {
  .va-grid { grid-template-columns: 1fr 1fr; }
  .va-f-doc { grid-column: 1 / -1; }
  .vdv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .va-overlay { padding: 0; }
  .va-modal { max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .va-grid { grid-template-columns: 1fr; }
  /* En una sola columna, cada campo va en su propia fila (se anula el
     placement explícito de actividad/sección/otro). */
  .va-f-act, .va-f-sec, #vis-otro-wrap { grid-column: 1 / -1; grid-row: auto; }
  /* Apilados ya no hay nada con qué alinear: se quita la compensación. */
  .va-f-act .fi { margin-top: 0; }
  .va-ft .btn { flex: 1; justify-content: center; }
}

/* ── Responsive adicional ── */



/* ============================================================
   RESPONSIVE MOBILE FULL — Optimización completa móvil/tablet
   Cubre: iPhone SE (375px), iPhone 14/15 (390px), Android común
   (360-412px), tablets (768px), landscape móvil
   ============================================================ */

/* ── iOS zoom fix + touch targets + scroll táctil ── */
@media (max-width: 800px) {
  /* Prevenir zoom automático en iOS al hacer focus en inputs */
  input, select, textarea, .fi { font-size: 16px !important; }
  .fi { padding: 10px 12px; }
  /* Touch targets mínimos 44px (WCAG / Apple HIG) */
  .btn { min-height: 44px; }
  .btn.sm { min-height: 38px; }
  .btn-ico { width: 40px; height: 40px; }
  .btn-logout { width: 40px; height: 40px; }
  .nav-item { padding: 13px 20px; min-height: 44px; }
  .vis-tab { padding: 10px 18px; min-height: 44px; }
  /* El menú (13 ítems + 2 encabezados) obligaba a hacer scroll interno en
     pantallas de móvil. Los .nav-item ya están en su piso mínimo de 44px
     (WCAG/Apple HIG) y no se tocan; se recupera espacio de los márgenes
     decorativos alrededor: relleno del panel, encabezados de grupo y pie. */
  .sidebar { padding: 8px 0 10px; }
  .nav-section { padding: 9px 22px 3px; }
  .sidebar-foot { padding: 8px 22px 0; }
  /* Scroll táctil suave en todas las tablas */
  .tbl-wrap, .table-responsive, .vis-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    position: relative;
  }
}

/* ── Tablet (768px – 1024px) ── */
@media (max-width: 1024px) and (min-width: 801px) {
  .main { padding: 24px 24px; gap: 20px; zoom: 1; }
  .metrics { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .qg { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  .dev-grid { grid-template-columns: 1fr; }
  .config-grid { grid-template-columns: 1fr; }
  .vis-charts-grid { grid-template-columns: 1fr; }
}

/* ── Móvil estándar (≤ 768px) ── */
@media (max-width: 768px) {
  /* Layout general */
  .main { padding: 16px 14px; gap: 16px; }
  .pt { font-size: 22px; }
  .ps { font-size: 12px; }

  /* Page header: apilado */
  .ph { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ph > .btn, .ph > div { width: 100%; }

  /* Cards */
  .card { padding: 16px; }

  /* Grids de métricas — 2 columnas en tablet, luego 1 */
  .metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mv { font-size: 30px; }
  .metric { padding: 16px; }

  /* Hero banner */
  .hero-banner { padding: 20px 18px; }
  .hero-title { font-size: 18px; }
  .hero-sub { font-size: 12px; }

  /* Quick actions: 1 columna */
  .qg { grid-template-columns: 1fr; gap: 10px; }
  .qa { padding: 14px 16px; gap: 12px; }

  /* Formularios: siempre 1 columna */
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .fg.full { grid-column: 1; }

  /* Dev grid (Devoluciones) */
  .dev-grid { grid-template-columns: 1fr; }

  /* Configuración */
  .config-grid { grid-template-columns: 1fr; }

  /* Visitas */
  .vis-charts-grid { grid-template-columns: 1fr; }
  .vis-form-grid { grid-template-columns: 1fr; }
  .vis-form-grid .full { grid-column: 1; }

  /* Sol metrics */
  .sol-metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sol-metric-num { font-size: 28px; }

  /* Solicitar layout */
  .solicitar-layout { grid-template-columns: 1fr; }
  .cart-sidebar { position: static !important; top: auto !important; max-height: none; order: -1; }

  /* Modal: full width en pantallas pequeñas */
  .modal { padding: 24px 18px; width: calc(100vw - 28px) !important; max-width: 100% !important; }
  .modal-title { font-size: 20px; }
  .modal-sub { font-size: 12px; margin-bottom: 18px; }
  .mf { flex-direction: column-reverse; gap: 8px; }
  .mf .btn { width: 100%; justify-content: center; }

  /* Modal editar libro — layout vertical en móvil */
  .el-libro-modal {
    flex-direction: column !important;
    width: calc(100vw - 20px) !important;
    height: auto !important;
    max-height: 96dvh !important;
    overflow: hidden !important;
  }
  /* Panel izquierdo: fila horizontal compacta */
  .elp-left {
    flex: 0 0 auto !important;
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    flex-direction: row !important;
    padding: 12px 16px !important;
    gap: 14px !important;
    align-items: center !important;
  }
  .elp-book-stage { flex: 0 0 auto !important; width: auto !important; }
  .elp-eyebrow, .elp-hint { display: none !important; }
  .elp-btn-upload { margin-top: 0 !important; margin-bottom: 0 !important; width: auto !important; }
  .elp-btn-remove { margin-bottom: 0 !important; width: auto !important; }
  /* Panel derecho: ocupa el resto y permite scroll */
  .elp-right {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;
  }
  .elp-form-body {
    overflow-y: visible !important;
    flex: none !important;
  }
  .elp-footer {
    flex-wrap: wrap !important;
    padding: 10px 16px 14px !important;
    gap: 8px !important;
  }
  .elp-footer .btn {
    flex: 1 1 auto !important;
    justify-content: center !important;
    min-width: 100px !important;
  }

  /* Modal docente */
  .ded-modal { width: calc(100vw - 20px) !important; }
  .ded-header { flex-wrap: wrap; gap: 10px; padding: 16px 16px 14px; }
  .ded-header-info { min-width: 0; width: 100%; }
  .ded-hname { font-size: 15px; }
  .ded-body { padding: 14px 16px 0; }
  .ded-footer { padding: 12px 16px 14px; }

  /* Modal doc usuario */
  .doc-modal { width: calc(100vw - 20px) !important; }
  .doc-modal-hd { flex-wrap: wrap; padding: 14px 16px 12px; gap: 10px; }
  .doc-modal-hd-info { width: 100%; }
  .doc-modal-bd { padding: 14px 16px 4px; }
  .doc-modal-ft { padding: 10px 16px 14px; flex-wrap: wrap; gap: 8px; }
  .doc-modal-ft .btn { flex: 1 1 auto; justify-content: center; min-width: 90px; }

  /* Modal responder solicitud */
  .resp-modal { width: calc(100vw - 20px) !important; }
  .resp-mf { flex-wrap: wrap !important; padding: 10px 16px 14px; }
  .resp-decision-btns { flex-wrap: wrap; gap: 6px; width: 100%; }
  .resp-decision-btns .btn { flex: 1 1 auto; justify-content: center; min-width: 80px; }
  .resp-mf > .btn { width: 100%; }
  .sol-detail-grid { grid-template-columns: 1fr; }

  /* Tablas */
  .tbl { font-size: 12px; }
  .tbl th { padding: 0 10px 12px; font-size: 9.5px; }
  .tbl td { padding: 11px 10px; }

  /* Barra de búsqueda */
  .srow { flex-direction: column; gap: 10px; }
  .srow .fi { min-width: 0 !important; width: 100% !important; }

  /* Stat bars */
  .sb-label { width: 90px; font-size: 11px; }

  /* Book grid */
  .book-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 14px; }
  .bc { height: 190px; }

  /* Cart item */
  .cart-item { flex-wrap: wrap; }

  /* Paginación */
  #visPaginacion { flex-direction: column; align-items: flex-start; gap: 8px; }
  #solPaginacion { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pag-btns { flex-wrap: wrap; }

  /* Toast centrado */
  .toast { bottom: 12px; right: 12px; left: 12px; font-size: 12px; padding: 12px 16px; }

  /* Doc stats */
  .doc-stats { flex-direction: column; }
  .doc-stat-card { flex: none; width: 100%; min-width: 0; }

  /* Filter bars */
  .sol-filter-bar { flex-direction: column; }
  .sol-filter-bar .fi { width: 100% !important; }
  .vis-filter-bar { flex-direction: column; align-items: flex-start; }
  .vis-filter-bar .fi { width: 100%; }
  .vis-filter-bar .ml-auto { margin-left: 0; }
}

/* ── Teléfonos pequeños (≤ 430px) — iPhone SE, Android estándar ── */
@media (max-width: 430px) {
  /* Topbar más compacta */
  .topbar { padding: 0 10px; height: 54px; }
  .logo-mep { width: 36px; height: 36px; }
  .logo-name { font-size: 15px; }
  .logo-sub { display: none; }
  .user-chip { display: none; }

  /* Ajuste sidebar */
  .sidebar { top: 54px !important; height: calc(100vh - 54px) !important; height: calc(100dvh - 54px) !important; }

  /* Contenido */
  .main { padding: 12px 12px; gap: 14px; }
  .pt { font-size: 20px; }
  .card { padding: 14px 12px; }

  /* Métricas: 2 columnas compactas */
  .metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .metric { padding: 12px; }
  .mv { font-size: 26px; }
  .ml { font-size: 9px; }
  .ms { font-size: 11px; }

  /* Sol metrics: 2 columnas (Visitas ya usa .metrics, ajustado arriba) */
  .sol-metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sol-metric { padding: 14px 12px 12px; }
  .sol-metric-num { font-size: 24px; }

  /* Quick actions */
  .qa { padding: 12px 14px; gap: 10px; }
  .qi { width: 38px; height: 38px; font-size: 17px; border-radius: 10px; }
  .ql { font-size: 13px; }
  .qd { font-size: 11.5px; }

  /* Botones */
  .btn { font-size: 12px; padding: 10px 14px; }
  .btn.sm { font-size: 11px; padding: 7px 11px; }

  /* Book grid: 2 columnas fijas */
  .book-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bc { height: 170px; }
  .bt { font-size: 12.5px; }
  .bm { font-size: 10.5px; }

  /* Modal */
  .modal { padding: 20px 14px; width: calc(100vw - 16px) !important; border-radius: 14px; }
  .modal-title { font-size: 18px; }

  /* Tabla más compacta */
  .tbl { font-size: 11.5px; }
  .tbl th { padding: 0 8px 10px; font-size: 9px; }
  .tbl td { padding: 9px 8px; }

  /* Fila agregar libro en modal solicitud */
  #ns-libro-sel { min-width: 0 !important; }

  /* Hero banner */
  .hero-banner { padding: 16px 14px; }
  .hero-title { font-size: 16px; }
}

/* ── Teléfonos muy pequeños (≤ 360px) ── */
@media (max-width: 360px) {
  .topbar { padding: 0 8px; }
  .logo-name { font-size: 14px; }
  .main { padding: 10px 10px; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 6px; }
  .mv { font-size: 24px; }
  .book-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .bc { height: 155px; }
  .modal { padding: 16px 12px; border-radius: 12px; }
}

/* ── Landscape móvil (altura < 500px) ── */
@media (max-height: 500px) and (orientation: landscape) {
  .topbar { height: 48px; }
  .sidebar { top: 48px !important; height: calc(100dvh - 48px) !important; }
  .main { padding: 10px 14px; gap: 12px; }
  .hero-banner { padding: 14px 16px; }
  .hero-deco { display: none; }
  .modal { max-height: 96dvh; padding: 16px 20px; }
  .modal-overlay { padding: 8px; }
  /* Métricas en fila horizontal */
  .metrics { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .metric { padding: 10px 12px; }
  .mv { font-size: 24px; }
}

/* ── Landscape tablet (768px–1024px, height < 700px) ── */
@media (min-width: 601px) and (max-width: 1024px) and (max-height: 700px) and (orientation: landscape) {
  .main { padding: 14px 20px; }
  .metrics { grid-template-columns: repeat(4, 1fr); }
}

/* ── Safe area insets (iPhone X+, notch/punch-hole) ── */
@supports (padding: max(0px)) {
  .topbar {
    padding-left: max(28px, env(safe-area-inset-left));
    padding-right: max(28px, env(safe-area-inset-right));
  }
  @media (max-width: 800px) {
    .topbar {
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
    }
    .sidebar {
      padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    .main {
      padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    .toast {
      bottom: max(12px, env(safe-area-inset-bottom));
    }
  }
}

/* ── Prevenir doble-tap zoom en botones (iOS) ── */
button, .btn, .nav-item, .btn-ico {
  touch-action: manipulation;
}

/* ── Texto no seleccionable en elementos interactivos ── */
.nav-item, .btn, .btn-ico, .topbar {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* ── Performance: desactivar animaciones neon en móvil ── */
/* Las animaciones continuas en tablas con muchos avatares
   causan jank y drenaje de batería en dispositivos de gama media/baja */
@media (max-width: 768px) {
  .av-neon,
  .profile-foto,
  .profile-foto-sm,
  .profile-foto-lg,
  .profile-foto-placeholder,
  .user-chip-foto img,
  .logo-neon,
  .config-preview {
    animation: none !important;
    box-shadow: none;
    border-color: var(--blue-light);
  }
  .logo-mep { animation: none; }
  .logo-mep::before { animation: none; }
}

/* ── Accesibilidad: respetar preferencia de movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .logo-mep, .logo-mep::before, .logo-mep::after,
  .av-neon, .profile-foto, .profile-foto-lg,
  .profile-foto-sm, .user-chip-foto img,
  .logo-neon, .config-preview {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   NOTIFICACIONES — campana del topbar + modal
   ════════════════════════════════════════════════════════════ */

/* Botón campana (mismo tamaño/lenguaje visual que .btn-logout) */
.ntf-bell {
  position: relative;
  background: rgba(255,255,255,0.12);
  color: white;
  border: 1px solid rgba(255,255,255,0.18);
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
}
.ntf-bell:hover { background: rgba(255,255,255,0.22); }
.ntf-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 20px;
  background: var(--danger);
  color: #fff;
  font-size: 10.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--blue-dark);
  line-height: 1;
}

/* ── Modal: lista + detalle ── */
.ntf-overlay { padding: 20px; }
.ntf-modal {
  background: #fff; border-radius: 20px; overflow: hidden;
  width: min(960px, 100%); height: min(84vh, 640px);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px -12px rgba(10,30,70,.35), 0 1px 2px rgba(20,30,60,.05);
  animation: modalIn .22s cubic-bezier(.4,0,.2,1);
}
.ntf-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; flex-shrink: 0; border-bottom: 1.5px solid var(--border);
}
.ntf-hd-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ntf-hd-ico {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue); color: #fff;
  box-shadow: 0 4px 10px -2px rgba(0,61,165,.4);
}
.ntf-hd-title { font-family: var(--font-head); font-size: 19px; color: var(--text); }
.ntf-hd-sub   { font-size: 12px; color: var(--text3); margin-top: 1px; }
.ntf-hd-right { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.ntf-hd-right .btn.sm { white-space: nowrap; }
.ntf-hd-right .btn.sm:disabled { opacity: .5; cursor: not-allowed; }
/* .np-close nació para cabeceras azules (es blanca): aquí el fondo es claro */
.ntf-hd .np-close {
  background: var(--off-white); border-color: var(--border); color: var(--text2);
}
.ntf-hd .np-close:hover { background: var(--danger-bg); border-color: #F3C9C9; color: var(--danger); }

.ntf-split { flex: 1; display: grid; grid-template-columns: 330px minmax(0, 1fr); min-height: 0; }
/* Sin avisos: una sola columna (no hay nada que detallar) */
.ntf-modal.sin-items .ntf-split { grid-template-columns: minmax(0, 1fr); }
.ntf-modal.sin-items .ntf-col-det { display: none; }
.ntf-modal.sin-items .ntf-col-list { border-right: none; background: #fff; }

/* ── Columna izquierda: la cola de trabajo ── */
.ntf-col-list {
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1.5px solid var(--border); background: #FCFDFF;
}
/* Cuatro pestañas en todo el ancho del modal (960px): caben en una sola fila,
   cada una con su ancho natural — ya no viven dentro de la columna angosta
   de la lista, sino a nivel del panel completo, debajo del header. */
.ntf-tabs {
  display: flex; gap: 8px; flex-shrink: 0;
  padding: 14px 18px; border-bottom: 1.5px solid var(--border);
}
.ntf-tab {
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 15px; font-size: 12px; font-weight: 700; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text2); white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.ntf-tab:hover { background: var(--off-white); color: var(--blue); border-color: var(--blue-light); }
.ntf-tab.active { background: var(--blue); color: #fff; border-color: var(--blue); }

/* Punto de "hay algo sin leer" en esta pestaña — display:none por defecto,
   notificaciones.js lo muestra solo si noLeidasPorTab() > 0. */
.ntf-tab-dot {
  display: none; position: absolute; top: -2px; right: 2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); border: 1.5px solid var(--surface);
}

/* ── Selección múltiple (bandeja de correo) ──
   Barra propia, siempre a plena opacidad (no hereda el atenuado de .ntf-chk
   en las filas): aquí el checkbox es el control principal de "seleccionar
   todo", no un accesorio secundario. */
.ntf-selbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; flex-shrink: 0;
  padding: 10px 16px; border-bottom: 1.5px solid var(--border);
  background: var(--off-white); min-height: 48px;
}
.ntf-selbar .ntf-chk { opacity: 1; padding: 2px; flex-shrink: 0; }
.ntf-selbar-txt {
  font-size: 12.5px; font-weight: 600; color: var(--text2);
  white-space: nowrap; flex-shrink: 0;
}
.ntf-selbar-txt b { color: var(--blue); font-weight: 800; }
/* Si no cabe junto al contador, el grupo de acciones baja a su propia línea
   en vez de desbordar el panel — nunca se recorta ni se sale del margen. */
.ntf-selbar-acts { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.ntf-selbar-acts .btn.sm { padding: 6px 12px; font-size: 11.5px; gap: 6px; white-space: nowrap; }
.ntf-b-del {
  background: var(--danger-bg); color: var(--danger); border-color: #F3C9C9;
  display: inline-flex; align-items: center;
}
.ntf-b-del:hover:not(:disabled) { background: var(--danger); color: #fff; border-color: var(--danger); }
.ntf-b-del:disabled { opacity: .45; cursor: not-allowed; }

/* Discreta por defecto en las FILAS (opacidad baja): se nota solo al pasar
   el mouse por la fila o si ya está marcada, para no competir con el avatar
   y el texto. La barra de selección de arriba queda excluida (regla previa). */
.ntf-chk {
  display: flex; align-items: center; padding: 4px; cursor: pointer; flex-shrink: 0;
  opacity: .35; transition: opacity .12s;
}
.ntf-li:hover .ntf-chk, .ntf-li.marcada .ntf-chk { opacity: 1; }
.ntf-chk input {
  width: 15px; height: 15px; cursor: pointer;
  accent-color: var(--blue);   /* la casilla toma el azul de la marca */
}

.ntf-list { flex: 1; overflow-y: auto; min-height: 0; padding: 6px; }

/* Fila de la lista: casilla + zona pulsable que abre el detalle */
.ntf-li {
  display: flex; align-items: flex-start; gap: 2px;
  padding: 9px 9px 9px 7px; border-radius: 10px; margin-bottom: 2px;
  position: relative; transition: background .14s;
}
.ntf-li:hover { background: var(--blue-xlight); }
.ntf-li.sel { background: var(--off-white); }
.ntf-li.marcada { background: var(--blue-xlight); }
.ntf-li.sel::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 3px;
  background: var(--blue);
}
.ntf-li .ntf-chk { margin-top: 8px; }
.ntf-li-b {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px;
  text-align: left; font-family: inherit; background: none; border: none;
  padding: 4px; cursor: pointer; border-radius: 8px;
}
.ntf-li-b:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--blue); }

/* Avatar circular con iniciales — mismo patrón de color que el resto del
   sistema (B.avc por índice), no por severidad: la severidad se lee en el
   texto de abajo, no en el color del avatar. */
.ntf-li-av {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}

.ntf-li-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ntf-li-t {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ntf-li.procesada .ntf-li-t { color: var(--text2); }

/* Segunda línea: "Vencido · N días" coloreado por severidad real
   (n.urgencia), "Solicitó N libros" en azul, o "Procesada" en verde. */
.ntf-li-w {
  display: block; font-size: 11.5px; font-weight: 700; color: var(--text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ntf-li-w.ok       { color: var(--ok); }
.ntf-li-w.sev-alta { color: var(--danger); }
.ntf-li-w.sev-media{ color: var(--warn); }
.ntf-li-w.sev-baja { color: var(--ok); }
.ntf-li-w.sev-sol  { color: var(--blue); }

/* Punto de "no leída" en línea junto al nombre, no al final de la fila. */
.ntf-li-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); flex-shrink: 0;
}

/* ── Columna derecha: todo el contexto, sin salir del panel ──
   El scroll vive en .ntf-d-scroll (no en .ntf-col-det ni en .ntf-d): así
   .ntf-d-acts queda siempre fijo abajo, sin depender de position:sticky ni
   de que el contenido sea más alto que el viewport. */
.ntf-col-det { overflow: hidden; min-height: 0; display: flex; flex-direction: column; }
.ntf-d { padding: 0; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ntf-d-scroll { padding: 24px 26px; overflow-y: auto; min-height: 0; flex: 1; }
.ntf-d-back { display: none; }          /* solo en móvil */
.ntf-d-pill {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 20px;
  background: var(--blue-xlight); color: var(--blue-dark);
}
.ntf-d-pill.da { background: var(--danger); color: #fff; }
.ntf-d-pill.ok { background: var(--ok); color: #fff; }
.ntf-d-t {
  font-family: var(--font-head); font-size: 24px; font-weight: 700;
  color: var(--text); margin: 13px 0 4px; line-height: 1.25;
}
.ntf-d-s { font-size: 13px; color: var(--text3); }
.ntf-d-persona {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
  padding: 14px; background: var(--off-white); border-radius: 14px;
}
.ntf-d-persona .av { width: 44px; height: 44px; font-size: 14px; }
.ntf-d-pn { display: block; font-size: 14.5px; font-weight: 800; color: var(--text); }
.ntf-d-pm { display: block; font-size: 12px; color: var(--text3); margin-top: 1px; }
.ntf-d-lbl {
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text3); margin: 22px 0 4px;
}
.ntf-d-bk { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.ntf-d-bk:last-of-type { border-bottom: none; }
.ntf-d-bk .lote-book-thumb { width: 34px; height: 46px; }
.ntf-d-bt { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); }
.ntf-d-ba { display: block; font-size: 11.5px; color: var(--text3); margin-top: 2px; }
.ntf-d-bn {
  margin-left: auto; flex-shrink: 0; font-size: 11px; font-weight: 800; color: var(--text2);
  background: var(--off-white); border: 1px solid var(--border); border-radius: 20px; padding: 3px 9px;
}
.ntf-d-alert {
  display: flex; align-items: center; gap: 10px; margin-top: 18px;
  background: var(--danger-bg); border: 1.5px solid #F3C9C9; border-radius: 13px;
  padding: 13px 14px; color: var(--danger); font-size: 12.5px; font-weight: 700;
}
.ntf-d-alert.info {
  background: var(--blue-xlight); border-color: var(--blue-light); color: var(--blue-dark);
}
.ntf-d-alert.ok {
  background: var(--ok-bg); border-color: #BCE3D1; color: var(--ok);
}
.ntf-d-alert svg { flex-shrink: 0; }
/* Acciones fijas al pie: al vivir fuera de .ntf-d-scroll (hermano, no hijo),
   nunca se mueven con el scroll del contenido de la notificación. */
.ntf-d-acts {
  display: flex; align-items: center; gap: 9px; flex-shrink: 0;
  padding: 16px 26px; border-top: 1px solid var(--border);
  background: var(--surface);
}
.ntf-d-acts .btn { flex: 1 1 auto; font-size: 13px; padding: 10px 16px; border-radius: 10px; white-space: nowrap; text-align: center; justify-content: center; }
.ntf-d-acts .btn.ntf-b-dev { background: var(--danger); color: #fff; border-color: var(--danger); }
.ntf-d-acts .btn.ntf-b-dev:hover { background: #7E1414; border-color: #7E1414; }
.ntf-descartar {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; background: none; border: none; color: var(--text3);
  font-size: 12px; font-weight: 600; padding: 8px 8px; border-radius: 8px;
}
.ntf-descartar:hover:not(:disabled) { color: var(--blue); background: var(--blue-xlight); }
.ntf-descartar + .ntf-descartar { margin-left: 0; }
.ntf-descartar:disabled { opacity: .45; cursor: not-allowed; }
.ntf-descartar.ntf-del:hover { color: var(--danger); background: var(--danger-bg); }

/* Estados: carga / vacío / error */
.ntf-estado {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  flex: 1; padding: 40px 20px; text-align: center;
}
.ntf-estado-ico {
  width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-xlight); color: var(--blue);
  margin-bottom: 6px;
}
.ntf-estado b     { font-size: 14px; color: var(--text2); }
.ntf-estado small { font-size: 12px; color: var(--text3); max-width: 320px; line-height: 1.6; }
.ntf-estado .btn  { margin-top: 10px; }
.ntf-skel {
  height: 72px; border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, #FCFDFF 25%, var(--off-white) 37%, #FCFDFF 63%);
  background-size: 400% 100%;
  animation: ntfShimmer 1.4s ease infinite;
}
@keyframes ntfShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* ── Móvil: una columna a la vez ── */
@media (max-width: 760px) {
  .ntf-overlay { padding: 0; }
  .ntf-modal { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .ntf-hd { padding: 12px 14px; flex-wrap: wrap; row-gap: 8px; }
  .ntf-hd-sub { display: none; }
  /* "Marcar todas..." y la X no caben junto al título: .ntf-hd-right deja de
     ser caja y sus botones pasan a ser ítems directos de la cabecera. */
  .ntf-hd-right { display: contents; }
  #ntfCerrar { order: 1; flex-shrink: 0; }
  #ntfMarcarTodas { order: 2; flex: 1 1 100%; }

  .ntf-split { grid-template-columns: minmax(0, 1fr); }
  .ntf-col-list { border-right: none; }
  .ntf-col-det { display: none; }
  .ntf-modal.det-abierto .ntf-col-list { display: none; }
  .ntf-modal.det-abierto .ntf-col-det { display: flex; }
  /* Los tabs ahora viven fuera de .ntf-col-list (a nivel de todo el panel):
     hay que ocultarlos aparte cuando el detalle está abierto en móvil. */
  .ntf-modal.det-abierto .ntf-tabs { display: none; }
  .ntf-tabs { flex-wrap: wrap; padding: 10px; }
  .ntf-tab { flex: 1 1 46%; }

  .ntf-d-scroll { padding: 16px 16px 20px; }
  .ntf-d-back {
    display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
    font-size: 12.5px; font-weight: 700; color: var(--blue);
    background: var(--blue-xlight); border-radius: 10px; padding: 8px 12px; margin-bottom: 14px;
  }
  .ntf-d-t { font-size: 21px; }
  .ntf-d-acts { flex-wrap: wrap; padding: 14px 16px; }
  .ntf-d-acts .btn { flex: 1 1 100%; justify-content: center; }
  .ntf-descartar { margin-left: 0; flex: 1; text-align: center; }
}

/* ══════════════════════════════════════════
   Modal Crear / Editar usuario
   ══════════════════════════════════════════ */
/* Se escribe como `.modal.fu-modal` a propósito: la regla base `.modal` fija
   width:540px, padding:34px y overflow-y:auto, y con una sola clase tendría la
   misma especificidad. Sin este refuerzo el diálogo se encoge al ancho base,
   el grid de dos columnas se apila y aparece una barra de scroll externa. */
.modal.fu-modal {
  padding: 0;
  width: 1020px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  border-radius: 20px;
  overflow: hidden;          /* el scroll vive en .fu-body, no en el diálogo */
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  /* `minmax(0, 100%)` en la fila impide que el contenido estire el diálogo por
     encima de su max-height. Sin esto la columna del formulario crece a su
     altura natural y el pie con los botones queda fuera del recorte. */
  grid-template-rows: minmax(0, 100%);
  align-items: stretch;
}
.fu-x {
  position: absolute; right: 18px; top: 18px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--text2); cursor: pointer;
  display: grid; place-items: center; transition: .15s;
}
.fu-x:hover { background: var(--danger-bg); border-color: #EFC0C0; color: var(--danger); }

/* ── Columna de identidad ── */
.fu-lado {
  background: #F4F7FC; border-right: 1px solid var(--border);
  padding: 30px 24px; display: flex; flex-direction: column; align-items: center; text-align: center;
  min-width: 0; overflow-y: auto; overscroll-behavior: contain;
}
/* El contenedor fija el tamaño del retrato: al cargar una foto real el JS
   sustituye el contenido por un <img>, y así no depende de la clase que quede
   en el elemento interno. */
.fu-foto-wrap {
  position: relative; width: 132px; height: 132px; margin-bottom: 16px; flex-shrink: 0;
}
.fu-foto-wrap > #u-foto-preview { width: 100%; height: 100%; margin: 0; }
/* Iniciales del retrato: mismo tratamiento que en las fichas de la grilla,
   con la tipografía de la interfaz en lugar de la serif del navegador. */
.fu-ini {
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  font-family: inherit; font-size: 44px; font-weight: 700; letter-spacing: 1px;
  color: #fff; user-select: none; transition: background .18s;
}
/* Sin nombre todavía: círculo neutro con un signo de suma, en vez de un
   bloque de color sin contenido. El fondo lo decide el JS mediante estilo
   inline, así que aquí solo se ajustan borde y tipografía. */
.fu-ini.vacio {
  background: var(--off-white);
  color: var(--text3); font-size: 38px; font-weight: 400;
  border: 2px dashed var(--border);
}
.fu-foto-wrap .profile-foto-placeholder,
.fu-foto-wrap .profile-foto-lg,
.fu-foto-wrap img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; margin: 0; display: block;
  cursor: pointer;
  /* `.profile-foto-lg` arrastra un borde celeste y la animación `neonGlow`
     heredados del diseño anterior. Aquí se anulan para que el retrato se vea
     limpio, sin alterar esa clase en el resto de la aplicación. */
  border: none;
  animation: none;
  box-shadow: 0 4px 14px -6px rgba(0,20,60,.35);
}
/* Botón de cámara anclado al borde del retrato */
.fu-cam {
  position: absolute; right: 4px; bottom: 4px; width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid var(--surface); background: var(--blue); color: #fff; cursor: pointer;
  display: grid; place-items: center; transition: .15s;
  box-shadow: 0 6px 14px -6px rgba(0,61,165,.8);
}
.fu-cam:hover { background: var(--blue-dark); }
.fu-nombre {
  font-size: 17px; font-weight: 800; letter-spacing: -.3px; color: var(--text); line-height: 1.35;
  max-width: 100%; overflow-wrap: break-word;
}
.fu-alias { font-size: 13px; color: var(--text3); margin-top: 3px; }
.fu-estado {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-size: 12.5px; font-weight: 700; color: var(--ok); background: var(--ok-bg);
  border: 1px solid #BCE3D1; padding: 6px 14px; border-radius: 20px;
}
.fu-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.fu-cambiar {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 10px 18px; border-radius: 10px; border: 1.5px solid var(--blue-light);
  background: var(--surface); color: var(--blue); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; transition: .15s;
}
.fu-cambiar:hover { background: var(--blue-xlight); border-color: var(--blue); }
.fu-nota {
  display: flex; align-items: flex-start; gap: 9px; margin-top: auto; padding-top: 22px;
  border-top: 1px solid var(--border); width: 100%;
  font-size: 12px; color: var(--text2); line-height: 1.5; text-align: left;
}
.fu-nota svg { color: var(--blue); flex-shrink: 0; margin-top: 1px; }

/* ── Columna del formulario ── */
.fu-main {
  display: flex; flex-direction: column;
  min-width: 0;    /* permite que el contenido se ajuste a la columna */
  min-height: 0;   /* habilita el scroll interno de .fu-body */
  overflow: hidden;
}
.fu-hd { padding: 30px 60px 0 32px; flex-shrink: 0; } /* deja aire para la ✕ */
.fu-t {
  font-family: var(--font-head); font-size: 27px; font-weight: 700;
  color: var(--blue-dark); letter-spacing: -.4px; margin: 0;
  text-wrap: balance;
}
.fu-s { font-size: 13.5px; color: var(--text2); margin: 5px 0 0; }

.fu-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px 32px 8px; overscroll-behavior: contain; }
.fu-body::-webkit-scrollbar { width: 9px; }
.fu-body::-webkit-scrollbar-track { background: transparent; }
.fu-body::-webkit-scrollbar-thumb { background: #C7D4EA; border-radius: 20px; border: 2px solid var(--surface); }

/* Encabezado de sección con filete que ocupa el ancho sobrante */
.fu-sec {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 16px;
  font-size: 14.5px; font-weight: 700; color: var(--blue);
}
.fu-sec:not(:first-child) { margin-top: 26px; }
.fu-sec i { flex: 1; height: 1px; background: var(--border); }

.fu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.fu-f { min-width: 0; }
.fu-f.full { grid-column: 1 / -1; }
.fu-l { display: block; font-size: 12.5px; font-weight: 600; color: var(--text2); margin-bottom: 7px; }
.fu-l b { color: var(--danger); font-weight: 700; }
.fu-i {
  width: 100%; height: 46px; padding: 0 14px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--surface);
  font-family: inherit; font-size: 14px; color: var(--text); transition: .15s;
}
.fu-i::placeholder { color: var(--text3); }
.fu-i:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-xlight); }
.fu-i:disabled { background: var(--off-white); color: var(--text3); cursor: not-allowed; }
.fu-i.sel {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2354637C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.fu-hint { display: block; font-size: 11.5px; color: var(--text3); margin-top: 6px; }

/* Campo de contraseña con ícono y botón de revelar */
.fu-pass { position: relative; display: flex; align-items: center; }
.fu-pass-ic { position: absolute; left: 14px; color: var(--text3); pointer-events: none; }
.fu-i.pass { padding-left: 40px; padding-right: 44px; }
.fu-ojo {
  position: absolute; right: 6px; width: 34px; height: 34px; border-radius: 8px;
  border: none; background: none; color: var(--text3); cursor: pointer;
  display: grid; place-items: center; transition: .15s;
}
.fu-ojo:hover { background: var(--blue-xlight); color: var(--blue); }
.fu-ojo.on { color: var(--blue); }

.fu-ft {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: 18px 32px; border-top: 1px solid var(--border); background: var(--surface);
}
.fu-req { font-size: 12.5px; color: var(--text3); margin-right: auto; }
.fu-req b { color: var(--danger); }
.fu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 24px; border-radius: 11px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text2);
  font-family: inherit; font-size: 14.5px; font-weight: 700; transition: .15s;
}
.fu-btn:hover { background: #F4F7FC; }
.fu-btn.ok {
  border: none; color: #fff;
  background: linear-gradient(135deg, var(--blue-mid), var(--blue));
  box-shadow: 0 10px 24px -8px rgba(0,61,165,.6);
}
.fu-btn.ok:hover { filter: brightness(1.08); }
.fu-btn:disabled {
  cursor: not-allowed; opacity: .55; filter: none;
  box-shadow: none; background: var(--border); color: var(--text3);
}
.fu-btn:disabled:hover { filter: none; background: var(--border); }

/* Checklist de requisitos de la nueva contraseña: cada ítem se marca en
   verde en tiempo real conforme se cumple, en vez de un solo mensaje de
   error genérico al enviar. */
.sp-reqs {
  list-style: none; display: flex; flex-direction: column; gap: 6px;
  margin: 4px 0 16px; padding: 12px 14px; background: var(--off-white);
  border-radius: 10px; border: 1px solid var(--border);
}
.sp-reqs li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text3); transition: color .15s;
}
.sp-reqs li::before {
  content: ""; width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--border); background: var(--surface);
  transition: background .15s, border-color .15s;
}
.sp-reqs li.ok { color: var(--ok); font-weight: 600; }
.sp-reqs li.ok::before {
  border-color: var(--ok); background: var(--ok);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

@media (max-width: 860px) {
  .fu-modal { grid-template-columns: 1fr; max-height: calc(100vh - 24px); }
  .fu-lado { border-right: none; border-bottom: 1px solid var(--border); padding: 24px; }
  .fu-nota { margin-top: 18px; }
  .fu-grid { grid-template-columns: 1fr; }
  .fu-hd, .fu-body, .fu-ft { padding-left: 22px; padding-right: 22px; }
  .fu-ft { flex-wrap: wrap; }
  .fu-req { width: 100%; margin-bottom: 4px; }
}

/* ══════════════════════════════════════════
   Configuración — tarjetas numeradas
   ══════════════════════════════════════════ */
/* Retícula fija de dos columnas: con `auto-fit` el zoom de la app permitía una
   tercera columna y las cuatro tarjetas quedaban desparejas.
   `align-items: stretch` (el valor por defecto, explícito aquí) iguala la
   altura de las dos tarjetas de cada fila. */
.cfg-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px; align-items: stretch;
}
.cfg-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 24px 26px 26px; display: flex; flex-direction: column;
}
/* Las áreas de contenido mantienen su altura propia (no absorben el sobrante)
   para que midan lo mismo en las cuatro tarjetas. El espacio restante lo toma
   la nota del pie, que es la que se separa hacia abajo. */
.cfg-card > .cfg-drop,
.cfg-card > .cfg-fav-zona,
.cfg-card > .cfg-input { flex: 0 0 auto; }
.cfg-card > .cfg-nota:last-child { margin-top: auto; padding-top: 14px; }

/* Encabezado con el número de paso: ordena la lectura de la página */
.cfg-hd { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.cfg-n {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--blue); color: #fff; display: grid; place-items: center;
  font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.cfg-t { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -.2px; margin: 0; }

/* Zona de carga: el borde punteado comunica que admite un archivo */
.cfg-drop {
  border: 2px dashed #C9D6EA; border-radius: 14px; background: var(--surface);
  padding: 30px 20px; text-align: center; cursor: pointer; transition: .16s;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 190px;
}
.cfg-drop:hover, .cfg-drop:focus-visible {
  border-color: var(--blue); background: var(--blue-xlight); outline: none;
}
.cfg-drop-ic { color: #A8BCD8; margin-bottom: 14px; }
.cfg-drop:hover .cfg-drop-ic { color: var(--blue); }
.cfg-drop-t { font-size: 15px; font-weight: 700; color: var(--text); }
.cfg-drop-s { font-size: 12.5px; color: var(--text3); margin-top: 6px; line-height: 1.5; }
/* Con imagen cargada la zona la muestra en lugar del texto de invitación */
.cfg-drop.con-img { padding: 18px; border-style: solid; border-color: var(--border); }
.cfg-drop img { max-width: 100%; max-height: 150px; object-fit: contain; display: block; }

/* Favicon: vista previa cuadrada + botón, centrados */
/* `justify-content: center` y el mismo alto mínimo que las zonas de carga
   mantienen el favicon proporcionado respecto a las demás tarjetas. */
.cfg-fav-zona {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; min-height: 190px;
}
.cfg-fav {
  width: 92px; height: 92px; border-radius: 18px; background: var(--off-white);
  border: 1px solid var(--border); display: grid; place-items: center;
  color: var(--blue-dark); cursor: pointer; transition: .16s; overflow: hidden;
}
.cfg-fav:hover, .cfg-fav:focus-visible {
  border-color: var(--blue); background: var(--blue-xlight); outline: none;
}
.cfg-fav img { width: 56px; height: 56px; object-fit: contain; }
.cfg-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px;
  border-radius: 10px; border: 1.5px solid var(--blue); background: var(--surface);
  color: var(--blue); cursor: pointer; font-family: inherit; font-size: 13.5px;
  font-weight: 700; transition: .15s;
}
.cfg-btn:hover { background: var(--blue-xlight); }

.cfg-input {
  width: 100%; height: 48px; padding: 0 16px; border-radius: 11px;
  border: 1.5px solid var(--border); background: var(--surface);
  font-family: inherit; font-size: 14px; color: var(--text); transition: .15s;
}
.cfg-input::placeholder { color: var(--text3); }
.cfg-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-xlight); }

.cfg-nota {
  font-size: 12.5px; color: var(--text3); line-height: 1.6; text-align: center;
  margin: 14px 0 0;
}
.cfg-nota + .cfg-nota { margin-top: 8px; }

@media (max-width: 1000px) {
  .cfg-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .cfg-grid { gap: 16px; }
  .cfg-card { padding: 20px; }
}