/* ============================================================
   VOTO ESCOLAR — Hoja de estilos
   Diseño moderno · Lic. Josué Balboa Cárdenas
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  --primary:        #1a237e;
  --primary-mid:    #283593;
  --primary-light:  #3949ab;
  --primary-soft:   #5c6bc0;
  --accent:         #e91e63;
  --accent2:        #ff6f00;
  --cyan:           #00bcd4;
  --success:        #2e7d32;
  --bg:             #eef1fa;
  --bg-2:           #e4e8f7;
  --surface:        #ffffff;
  --ink:            #1f2540;
  --ink-soft:       #5b6184;
  --line:           #e2e6f5;
  --radius:         18px;
  --radius-sm:      12px;
  --sidebar-w:      266px;
  --shadow-sm:      0 1px 3px rgba(26,35,126,.06), 0 1px 2px rgba(26,35,126,.04);
  --shadow:         0 4px 20px rgba(26,35,126,.08);
  --shadow-lg:      0 18px 50px rgba(26,35,126,.18);
  --grad-primary:   linear-gradient(135deg, #1a237e 0%, #3949ab 60%, #5c6bc0 100%);
  --grad-deep:      linear-gradient(175deg, #0c1769 0%, #1a237e 38%, #283593 72%, #1565c0 100%);
}

* , *::before, *::after { box-sizing: border-box; }

body {
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(92,107,192,.12), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(0,188,212,.10), transparent 55%),
    var(--bg);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6, .fw-bold { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--primary-light), var(--primary)); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--grad-deep);
  position: fixed; inset: 0 auto 0 0;
  z-index: 1040;
  display: flex; flex-direction: column;
  box-shadow: 6px 0 40px rgba(12,23,105,.30);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.sidebar::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(400px 200px at 80% 0%, rgba(0,188,212,.18), transparent 70%);
  pointer-events:none;
}

.sidebar-brand {
  padding: 24px 18px 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  text-align: center; position: relative;
  background: rgba(255,255,255,.03);
}
.sidebar-brand .insignia-wrap {
  width: 76px; height: 76px; border-radius: 22px;
  border: 2px solid rgba(255,255,255,.25);
  overflow: hidden; margin: 0 auto 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  background: rgba(255,255,255,.1);
  transition: transform .3s;
}
/* Logo del sistema (ONPE Voto Escolar) en el sidebar */
.sidebar-brand .sys-logo-wrap {
  width: 175px; max-width: 92%;
  background: #fff; border-radius: 16px;
  padding: 12px 14px; margin: 0 auto 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  color: #0d1b69; font-weight: 800; font-size: .9rem;
  transition: transform .3s;
}
.sidebar-brand .sys-logo-wrap:hover { transform: translateY(-3px) scale(1.02); }
.sidebar-brand .sys-logo-wrap img { width: 100%; height: auto; display: block; }
.sidebar-brand .insignia-wrap:hover { transform: translateY(-3px) rotate(-2deg); }
.sidebar-brand .insignia-wrap img { width:100%; height:100%; object-fit:cover; }
.sidebar-brand h5 { color:#fff; margin:0; font-size:.84rem; font-weight:800; line-height:1.3; letter-spacing:.2px; }
.sidebar-brand small { color:rgba(255,255,255,.55); font-size:.7rem; display:inline-block; margin-top:4px; }

.sidebar-nav { flex:1; overflow-y:auto; padding: 14px 12px; position:relative; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); }

.nav-section {
  padding: 14px 12px 6px;
  color: rgba(255,255,255,.4);
  font-size: .6rem; text-transform: uppercase;
  letter-spacing: 2.5px; font-weight: 800;
}

.sidebar-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; margin-bottom: 3px;
  color: rgba(255,255,255,.78);
  text-decoration: none; font-size: .85rem; font-weight: 500;
  border-radius: 12px;
  transition: all .22s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.sidebar-nav a .icon {
  width: 26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.sidebar-nav a .icon .ic { width:20px; height:20px; opacity:.85; transition: opacity .2s; }
.sidebar-nav a .lbl { flex:1; }
.sidebar-nav a:hover {
  background: rgba(255,255,255,.10);
  color:#fff; transform: translateX(3px);
}
.sidebar-nav a:hover .ic { opacity:1; }
.sidebar-nav a.active .ic { opacity:1; }
.sidebar-nav a.active {
  background: linear-gradient(100deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  color: #fff; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 4px 14px rgba(0,0,0,.2);
}
.sidebar-nav a.active::before {
  content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:4px; height:60%; border-radius:0 4px 4px 0;
  background: linear-gradient(var(--cyan), #fff);
}
.sidebar-nav a.nav-disabled {
  color: rgba(255,255,255,.28) !important;
  pointer-events: none; cursor: not-allowed;
}
.sidebar-nav a.nav-disabled .icon { opacity:.4; filter: grayscale(1); }
.sidebar-nav .lock-badge {
  font-size:.6rem; margin-left:auto;
  background: rgba(255,255,255,.12);
  padding: 2px 6px; border-radius: 8px;
}

.sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.12);
}
.btn-logout {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:10px 14px; border-radius:12px;
  background: rgba(255,255,255,.08); color:rgba(255,255,255,.85);
  text-decoration:none; font-weight:600; font-size:.85rem;
  border:1px solid rgba(255,255,255,.12); transition: all .2s;
}
.btn-logout .ic { width:18px; height:18px; }
.btn-logout:hover { background:#fff; color:var(--primary); transform: translateY(-1px); }

/* Overlay móvil */
.sidebar-overlay {
  position: fixed; inset:0; z-index:1035;
  background: rgba(12,23,105,.5); backdrop-filter: blur(2px);
  opacity:0; visibility:hidden; transition: opacity .3s;
}
.sidebar-overlay.show { opacity:1; visibility:visible; }

/* Botón hamburguesa */
.hamburger {
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border:none; border-radius:12px;
  background: linear-gradient(135deg,#eef1fb,#e2e6f5); color:var(--primary);
  cursor:pointer; transition: all .2s;
}
.hamburger .ic { width:22px; height:22px; }
.hamburger:hover { background: var(--grad-primary); color:#fff; }
.hamburger:active { transform: scale(.94); }

/* Marca en topbar */
.topbar-brand { align-items:center; gap:7px; font-weight:800; color:var(--primary-soft); font-size:.95rem; }
.topbar-brand span { background: var(--grad-primary); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */
.main-content { margin-left: var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; }

.topbar {
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100;
}
.topbar h4 {
  margin:0; font-size:1.15rem; font-weight:800; letter-spacing:-.3px;
  background: var(--grad-primary);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

.content-area { padding: 28px; flex:1; animation: fadeUp .5s ease; }
@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

/* ============================================================
   FOOTER (estilizado)
   ============================================================ */
.main-footer {
  background: var(--grad-deep);
  color: rgba(255,255,255,.78);
  position: relative; overflow: hidden;
  margin-top: auto;
}
.main-footer::before {
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background: linear-gradient(90deg, var(--cyan), var(--primary-soft), var(--accent));
}
.main-footer::after {
  content:''; position:absolute; right:-80px; bottom:-80px; width:240px; height:240px;
  background: radial-gradient(circle, rgba(0,188,212,.16), transparent 70%); border-radius:50%;
}
.footer-inner {
  max-width:1200px; margin:0 auto; padding:18px 28px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; position:relative; z-index:1;
}
.footer-brand { display:flex; align-items:center; gap:12px; }
.footer-logo {
  font-size:1.6rem; width:46px; height:46px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 0 12px rgba(255,255,255,.08);
}
.footer-brand strong { display:block; color:#fff; font-size:1rem; font-family:'Plus Jakarta Sans'; }
.footer-sub { font-size:.74rem; color:rgba(255,255,255,.5); }
.footer-credit { font-size:.82rem; color:rgba(255,255,255,.7); text-align:right; display:flex; align-items:center; gap:12px; }
.footer-credit strong { color:#fff; }
.footer-dot { color:var(--cyan); margin:0 4px; }
.footer-pipjb {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background:rgba(255,255,255,.92); padding:3px;
  opacity:.65; transition: opacity .2s, transform .2s;
}
.footer-pipjb:hover { opacity:1; transform: translateY(-2px); }
.footer-pipjb img { width:100%; height:100%; object-fit:contain; }
@media (max-width:560px){ .footer-credit { justify-content:center; } }
@media (max-width:560px){
  .footer-inner { flex-direction:column; text-align:center; }
  .footer-credit { text-align:center; }
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  position: relative; overflow: hidden;
  transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s;
}
.stat-card::before {
  content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background: var(--grad-primary);
}
.stat-card::after {
  content:''; position:absolute; right:-30px; top:-30px;
  width:120px; height:120px; border-radius:50%;
  background: radial-gradient(circle, rgba(57,73,171,.10), transparent 70%);
}
.stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.stat-card .fw-bold { font-family:'Plus Jakarta Sans'; letter-spacing:-1px; }
.stat-icon {
  width:54px; height:54px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}

/* ============================================================
   DASHBOARD — banner de bienvenida
   ============================================================ */
.welcome-banner {
  border-radius: 22px; overflow:hidden; position:relative;
  background: var(--grad-deep);
  box-shadow: var(--shadow-lg);
}
.welcome-banner::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(500px 240px at 90% -20%, rgba(0,188,212,.30), transparent 60%),
    radial-gradient(400px 200px at 10% 120%, rgba(233,30,99,.20), transparent 60%);
}
.wb-content { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:28px 32px; }
.wb-greeting { color:rgba(255,255,255,.75); font-size:.95rem; font-weight:600; }
.wb-title { color:#fff; font-weight:800; font-size:1.7rem; margin:4px 0; letter-spacing:-.5px; line-height:1.1; }
.wb-sub { color:rgba(255,255,255,.6); font-size:.85rem; margin:0; }
.wb-emoji { font-size:4.5rem; filter: drop-shadow(0 8px 20px rgba(0,0,0,.3)); animation: floaty 3s ease-in-out infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@media (max-width:576px){ .wb-content{padding:22px;} .wb-title{font-size:1.3rem;} .wb-emoji{font-size:3rem;} }

/* Stat cards de color */
.stat-card-color {
  position:relative; overflow:hidden;
  border-radius: var(--radius); padding:22px;
  color:#fff; box-shadow: var(--shadow);
  transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s;
  min-height:128px;
}
.stat-card-color:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-lg); }
.scc-icon { font-size:1.8rem; opacity:.95; margin-bottom:6px; }
.scc-num  { font-size:2.4rem; font-weight:800; font-family:'Plus Jakarta Sans'; line-height:1; letter-spacing:-1px; }
.scc-lbl  { font-size:.85rem; opacity:.85; font-weight:600; margin-top:4px; }
.scc-glow { position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.25), transparent 70%); }
@media (max-width:576px){ .scc-num{font-size:1.9rem;} .stat-card-color{min-height:108px; padding:16px;} }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--surface);
  transition: box-shadow .25s;
}
.card-header {
  background: linear-gradient(100deg, #f7f8ff, #eef1fb) !important;
  border-bottom: 1px solid var(--line) !important;
  font-weight: 800; font-size:.9rem; color: var(--primary);
  font-family:'Plus Jakarta Sans';
  padding: 14px 20px;
  letter-spacing:-.2px;
}

/* ============================================================
   TABLAS
   ============================================================ */
.table { font-size:.86rem; margin:0; }
.table th {
  font-size:.7rem; text-transform:uppercase; letter-spacing:1px;
  color: var(--ink-soft); font-weight:800;
  background: #f6f7fd; border:none; padding:13px 14px;
}
.table td { padding:12px 14px; vertical-align:middle; border-color:#f0f2fa; }
.table-hover tbody tr { transition: background .15s; }
.table-hover tbody tr:hover { background: #f3f5ff; }

/* ============================================================
   BOTONES
   ============================================================ */
.btn { border-radius:11px; font-weight:600; letter-spacing:.1px; transition: all .22s cubic-bezier(.4,0,.2,1); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--grad-primary); border:none; box-shadow: 0 4px 14px rgba(26,35,126,.30); }
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 8px 22px rgba(26,35,126,.40); transform: translateY(-2px); }
.btn-success { background: linear-gradient(135deg,#2e7d32,#43a047); border:none; box-shadow:0 4px 14px rgba(46,125,50,.28); }
.btn-success:hover { filter:brightness(1.08); transform: translateY(-2px); }
.btn-danger  { background: linear-gradient(135deg,#c62828,#e53935); border:none; box-shadow:0 4px 14px rgba(198,40,40,.25); }
.btn-danger:hover { filter:brightness(1.08); transform: translateY(-2px); }
.btn-outline-primary { border:1.5px solid var(--primary-light); color:var(--primary); }
.btn-outline-primary:hover { background: var(--grad-primary); border-color:transparent; transform: translateY(-2px); }
.btn-light { border-radius:11px; font-weight:700; }

/* ============================================================
   FORMULARIOS
   ============================================================ */
.form-control, .form-select {
  border-radius: 11px; border:1.5px solid var(--line);
  padding: .55rem .85rem; font-size:.88rem;
  transition: border-color .2s, box-shadow .2s;
}
/* Espacio para la flecha del select (evita que se superponga al texto) */
.form-select { padding-right: 2.5rem; background-position: right .85rem center; }
.form-select-sm { padding-right: 2.1rem; background-position: right .6rem center; background-size: 14px 11px; }
.form-control:focus, .form-select:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 4px rgba(57,73,171,.14);
}

/* Chips de plan */
.plan-chip { display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.8px; padding:3px 10px; border-radius:999px; }
.plan-demo { background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.25); }
.plan-premium { background:linear-gradient(90deg,#ffd54f,#ffb300); color:#5d4037; box-shadow:0 2px 8px rgba(255,179,0,.4); }
.plan-admin { background:linear-gradient(90deg,#26c6da,#00acc1); color:#063b42; box-shadow:0 2px 8px rgba(0,172,193,.4); }

/* Marca admin (sin insignia de colegio) */
.insignia-admin {
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem;
  background: linear-gradient(135deg, rgba(38,198,218,.25), rgba(0,172,193,.15)) !important;
}
.form-label { font-weight:700; font-size:.78rem; color:var(--ink-soft); margin-bottom:5px; letter-spacing:.2px; }
.form-control-color { padding:3px; border-radius:10px; cursor:pointer; }

/* ============================================================
   BADGES
   ============================================================ */
.badge { font-weight:700; letter-spacing:.3px; border-radius:8px; padding:.4em .65em; }
.badge-grado { background: linear-gradient(135deg,#e8eaf6,#c5cae9); color:var(--primary); }

/* ============================================================
   LOGIN
   ============================================================ */
.login-page {
  min-height:100vh; position:relative; overflow:hidden;
  background: var(--grad-deep);
  display:flex; align-items:center; justify-content:center;
}
.login-page::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(700px 400px at 18% 40%, rgba(92,107,192,.35), transparent 60%),
    radial-gradient(700px 400px at 82% 60%, rgba(0,188,212,.18), transparent 60%);
}
.login-page::after {
  content:''; position:absolute; width:520px; height:520px; right:-160px; top:-160px;
  background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%);
  border-radius:50%;
}
.login-card { border-radius:24px; box-shadow:0 40px 100px rgba(0,0,0,.4); border:none; overflow:hidden; position:relative; }

/* ============================================================
   MODALES (ventanas superpuestas)
   ============================================================ */
.modal-content {
  border:none; border-radius: var(--radius); overflow:hidden;
  box-shadow: 0 30px 90px rgba(12,23,105,.4);
}
.modal-header {
  background: var(--grad-primary); color:#fff; border-bottom:none;
  padding: 18px 24px;
}
.modal-header .modal-title { font-weight:800; font-size:1.05rem; font-family:'Plus Jakarta Sans'; }
.modal-header .btn-close { filter: invert(1) brightness(2); opacity:.85; }
.modal-body { padding: 24px; }
.modal-footer { background:#f7f8ff; border-top:1px solid var(--line); padding:16px 24px; }
.modal.fade .modal-dialog { transition: transform .3s cubic-bezier(.34,1.3,.64,1); transform: translateY(30px) scale(.97); }
.modal.show .modal-dialog { transform:none; }

/* ============================================================
   ALERTAS
   ============================================================ */
.alert { border-radius:14px; border:none; font-size:.86rem; box-shadow: var(--shadow-sm); }
.alert-success { background:linear-gradient(100deg,#e8f5e9,#f1f8e9); color:#2e7d32; border-left:4px solid #43a047; }
.alert-danger  { background:linear-gradient(100deg,#ffebee,#fce4ec); color:#c62828; border-left:4px solid #e53935; }
.alert-warning { background:linear-gradient(100deg,#fff8e1,#fff3e0); color:#e65100; border-left:4px solid #fb8c00; }
.alert-info    { background:linear-gradient(100deg,#e3f2fd,#e8eaf6); color:#1565c0; border-left:4px solid #1e88e5; }

/* ============================================================
   TARJETAS FOTOCHECK
   ============================================================ */
.tarjeta-toolbar {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  padding: 18px 22px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

@media print {
  .sidebar, .topbar, .no-print, .tarjeta-toolbar { display:none !important; }
  .main-content { margin-left:0 !important; }
  .content-area { padding:4mm !important; }
  body { background:#fff !important; }
  .tarjetas-grid { gap:3mm !important; padding:0 !important; background:transparent !important; }
  .card-tarjeta { break-inside: avoid; box-shadow:none !important; border:1px solid #bbb !important; }
}

.tarjetas-grid {
  display:flex; flex-wrap:wrap; gap:9mm; padding:6mm;
  background: linear-gradient(135deg, #f0f2fc, #e8ebf8);
  border-radius: var(--radius);
}

.card-tarjeta {
  width:85.6mm; height:54mm;
  border-radius:9px; overflow:hidden;
  display:flex; flex-direction:column;
  background:#fff;
  box-shadow: 0 6px 22px rgba(26,35,126,.18);
  border:1px solid #e0e0e0;
  font-family:'Inter', Arial, sans-serif;
  position:relative;
  transition: transform .2s, box-shadow .2s;
}
.card-tarjeta:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 16px 40px rgba(26,35,126,.28); }
.card-tarjeta::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:3;
}

.tarjeta-header {
  padding:6px 8px; display:flex; align-items:center; gap:7px;
  min-height:38px; position:relative; overflow:hidden;
}
.tarjeta-header::after {
  content:''; position:absolute; right:-20px; top:-20px; width:60px; height:60px;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); border-radius:50%;
}
.tarjeta-header img { height:34px; width:auto; max-width:46px; object-fit:contain; flex-shrink:0; }
.tarjeta-header .school-name { font-size:7.5px; font-weight:800; line-height:1.25; color:#fff; letter-spacing:.2px; z-index:1; text-shadow:0 1px 2px rgba(0,0,0,.2); }
.tarjeta-header .year-badge { margin-left:auto; background:rgba(255,255,255,.28); border-radius:5px; padding:2px 5px; font-size:7px; color:#fff; font-weight:800; white-space:nowrap; z-index:1; backdrop-filter:blur(2px); }

.tarjeta-body { display:flex; flex:1; padding:6px 7px; gap:6px; align-items:center; }
.tarjeta-info { flex:1; min-width:0; display:flex; flex-direction:column; }
/* Recuadro para foto tamaño carnet (proporción 3:4) */
.tarjeta-foto {
  width:68px; height:92px; align-self:center; flex-shrink:0;
  border:1.5px dashed #aab; border-radius:5px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:6.5px; font-weight:800; letter-spacing:.3px; line-height:1.5; color:#9aa;
  background:repeating-linear-gradient(45deg,#fafbff,#fafbff 5px,#f0f2f8 5px,#f0f2f8 10px);
}
.tarjeta-qr-col { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; flex-shrink:0; }
.tarjeta-qr-col .qr-wrap { width:86px; height:86px; display:flex; align-items:center; justify-content:center; padding:3px; background:#fff; border:1px solid #eee; border-radius:7px; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.tarjeta-qr-col .qr-wrap img { width:80px !important; height:80px !important; display:block !important; image-rendering: pixelated; }
.tarjeta-qr-col small { font-size:5.5px; text-align:center; font-weight:700; line-height:1.1; color:#555; }

.alumno-nombre { font-weight:800; font-size:9.5px; line-height:1.2; color:var(--ink); margin-bottom:4px; letter-spacing:-.1px; }
.alumno-dni { font-size:8px; color:#444; }
.alumno-dni span { font-weight:800; color:var(--ink); }
.votante-label { font-size:6.5px; color:#888; margin-top:2px; text-transform:uppercase; letter-spacing:.6px; font-weight:700; }
.grado-badge-card {
  display:inline-block; font-size:7.5px; font-weight:800;
  padding:3px 8px; border-radius:6px; margin-top:auto; color:#fff; align-self:flex-start;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}

.tarjeta-footer {
  background: linear-gradient(90deg, #f5f6fc, #eceef9);
  padding:3px 8px; font-size:5.8px; color:#777;
  text-align:center; border-top:1px solid rgba(0,0,0,.06);
  letter-spacing:.3px; font-weight:600;
}

/* ============================================================
   PARTIDOS / VOTACIÓN
   ============================================================ */
.partido-card {
  cursor:pointer; border:3px solid transparent;
  border-radius: var(--radius); transition:all .22s cubic-bezier(.4,0,.2,1);
  background:#fff; text-align:center;
}
.partido-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-lg); }
.partido-card.selected { border-color:var(--primary)!important; box-shadow:0 0 0 5px rgba(26,35,126,.18); }
.partido-logo { width:90px; height:90px; object-fit:contain; margin:0 auto; }

.partido-voto {
  cursor:pointer; border:3px solid var(--line);
  border-radius:20px; padding:24px 16px; background:#fff; text-align:center;
  transition: all .24s cubic-bezier(.4,0,.2,1);
}
.partido-voto:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.partido-voto.selected { box-shadow:0 0 0 5px rgba(26,35,126,.22); transform: translateY(-4px); }

#qr-reader { border-radius:16px; overflow:hidden; box-shadow: var(--shadow); }

/* ============================================================
   PAGINACIÓN
   ============================================================ */
.pagination .page-link { border:none; color: var(--primary); font-weight:600; border-radius:10px !important; margin:0 2px; }
.pagination .page-item.active .page-link { background: var(--grad-primary); box-shadow:0 4px 12px rgba(26,35,126,.3); }

/* ============================================================
   RESPONSIVE — tablets y celulares
   ============================================================ */

/* Tablet y menor: sidebar off-canvas */
@media (max-width: 992px) {
  .sidebar { transform: translateX(-100%); box-shadow:none; }
  .sidebar.open { transform: translateX(0); box-shadow: 12px 0 50px rgba(0,0,0,.4); }
  .main-content { margin-left: 0; }
  .hamburger { display: flex; }
  .content-area { padding: 20px; }
  .topbar { padding: 12px 18px; }
}

/* Celulares */
@media (max-width: 576px) {
  body { font-size: 13.5px; }
  .content-area { padding: 14px; }
  .topbar { padding: 10px 14px; }
  .topbar h4 { font-size: 1rem; }
  .card-header { padding: 12px 16px; font-size:.85rem; }
  .modal-body { padding: 18px; }
  .modal-header, .modal-footer { padding: 14px 18px; }
  .stat-card { padding: 16px; }
  .stat-card .fw-bold { font-size: 1.6rem !important; }
  .stat-icon { width:44px; height:44px; font-size:1.25rem; }

  /* Botones de acción a ancho completo y apilados */
  .btn { padding:.5rem .9rem; }

  /* Tablas con scroll horizontal suave */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table td, .table th { white-space: nowrap; }

  /* Tarjetas fotocheck centradas */
  .tarjetas-grid { justify-content:center; gap:6mm; padding:4mm; }

  /* Toolbar de tarjetas apila */
  .tarjeta-toolbar .row > * { width:100%; }

  /* Modales casi a pantalla completa */
  .modal-dialog { margin:.5rem; }

  /* Footer compacto */
  .footer-inner { padding:14px 18px; }
}

/* Evitar zoom no deseado en inputs iOS */
@media (max-width: 576px) {
  .form-control, .form-select { font-size: 16px; }
}

/* Pantallas grandes: limitar ancho de contenido para legibilidad */
@media (min-width: 1600px) {
  .content-area { max-width: 1500px; margin-left:auto; margin-right:auto; width:100%; }
}