/* BESÒS CANALLA v2 — app.css (COMPLETO ACTUALIZADO) */

:root {
  --bg:#0d0d0f;
  --surface:#141418;
  --surface2:#1c1c22;
  --surface3:#242430;
  --border:#2a2a36;
  --border2:#383848;
  --accent:#e8ff47;
  --accent2:#ff4757;
  --accent3:#47c8ff;
  --text:#f0f0f5;
  --text2:#a0a0b8;
  --text3:#606078;
  --green:#2ecc71;
  --red:#e74c3c;
  --orange:#f39c12;
  --radius:8px;
  --radius-lg:14px;
  --font-head: 'Archivo', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono: 'Space Mono', 'Courier New', Courier, monospace;
  --font-body: 'Archivo', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --sidebar-w:240px;
  --tr:.18s cubic-bezier(.4,0,.2,1);
}

[data-tema="clar"], .tema-clar {
  --bg:#f0ede8;
  --surface:#faf8f5;
  --surface2:#ece9e3;
  --surface3:#e2ddd6;
  --border:#d5cfc6;
  --border2:#c0b8ac;
  --text:#1a1814;
  --text2:#4a4540;
  --text3:#8a837a;
  --accent:#1a1814;
  --green:#1a7a3a;
  --red:#c0392b;
  --orange:#c47a1a;
}

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

html{
  font-size:15px
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  min-height:100vh;
  transition:background .2s,color .2s
}

/* ── LOGIN (rediseño) ─────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;background:var(--bg)}

/* Panel de marca — siempre oscuro, look premium */
.login-left{
  position:relative;flex:0 0 46%;max-width:560px;
  padding:56px 52px;display:flex;flex-direction:column;gap:36px;justify-content:space-between;
  color:#f3f4f6;overflow:hidden;border-right:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(232,255,71,.12), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(232,255,71,.07), transparent 60%),
    linear-gradient(160deg,#0c0d10 0%,#16181d 100%)
}
.login-brand{display:flex;align-items:center;gap:16px;position:relative;z-index:1}
.login-logo{
  width:58px;height:58px;flex-shrink:0;border-radius:15px;
  background:var(--accent,#e8ff47);color:#0c0d10;
  font-family:var(--font-head);font-weight:800;font-size:20px;letter-spacing:-1px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(232,255,71,.28)
}
.tema-clar .login-logo{background:var(--accent,#e8ff47);color:#0c0d10}
.login-brand h1{font-family:var(--font-head);font-weight:800;font-size:1.55rem;letter-spacing:-.5px;line-height:1.15;color:#fff}
.login-brand p{color:#aeb2bb;font-size:.84rem;margin-top:3px}

.login-junta{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:20px;position:relative;z-index:1
}
.login-junta-title{font-family:var(--font-mono);font-size:.64rem;text-transform:uppercase;letter-spacing:1.8px;color:#8b909b;margin-bottom:14px}
.login-junta-item{display:flex;flex-direction:column;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.login-junta-item:last-child{border-bottom:none}
.login-junta-carrec{font-family:var(--font-mono);font-size:.66rem;color:var(--accent,#e8ff47);text-transform:uppercase;letter-spacing:.5px}
.tema-clar .login-junta-carrec{color:var(--accent,#e8ff47)}
.login-junta-nom{font-size:.9rem;font-weight:500;margin-top:2px;color:#e9eaed}
.login-left-foot{position:relative;z-index:1;font-size:.74rem;color:#6b7280}

/* Formulario */
.login-right{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--bg)}
.login-form-wrap{width:100%;max-width:400px}
.login-form-wrap h2{font-family:var(--font-head);font-weight:800;font-size:1.7rem;letter-spacing:-.8px;margin-bottom:6px}
.login-sub{color:var(--text2);font-size:.88rem;margin-bottom:26px}
.login-form-wrap .field{margin-bottom:16px;position:relative}
.login-form-wrap label{font-size:.7rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.6px;color:var(--text2);display:block;margin-bottom:6px}
.login-input{padding:12px 42px 12px 14px !important;font-size:.92rem;border-radius:11px !important;transition:border-color .15s,box-shadow .15s}
.login-input:focus{box-shadow:0 0 0 3px rgba(232,255,71,.18)}
.tema-clar .login-input:focus{box-shadow:0 0 0 3px rgba(17,17,17,.08)}
#loginBtn{margin-top:6px;padding:13px;font-size:.95rem;border-radius:11px;font-weight:700}
.login-error{color:var(--red);font-size:.82rem;min-height:18px;margin:4px 0}
.login-hint-box{background:var(--surface2);border:1px dashed var(--border);border-radius:12px;padding:14px;margin-top:18px;text-align:center}
.login-hint{font-size:.72rem;color:var(--text3);margin:0}
.hint-code{display:inline-block;background:var(--surface3);padding:5px 12px;border-radius:7px;font-family:var(--font-mono);font-size:.74rem;margin-top:7px;color:var(--text)}
.login-footer-links{margin-top:18px;text-align:center}
.forgot-link{font-size:.78rem;color:var(--text2);text-decoration:none}
.forgot-link:hover{color:var(--accent);text-decoration:underline}
.login-extras{display:flex;align-items:center;justify-content:center;margin-top:24px;padding-top:18px;border-top:1px solid var(--border)}
.lang-toggle{display:none}
.portal-link{font-size:.82rem;color:var(--text2);text-decoration:none;padding:8px 16px;border:1px solid var(--border);border-radius:10px;transition:var(--tr)}
.portal-link:hover{background:var(--surface2);color:var(--accent);border-color:var(--accent)}
.toggle-password{position:absolute;right:12px;top:auto;bottom:11px;background:none;border:none;cursor:pointer;font-size:1rem;opacity:.55;transition:opacity .15s}
.toggle-password:hover{opacity:1}
@media (max-width:860px){
  .login-left{display:none}
  .login-right{padding:32px 20px}
}

/* ── Login centrado (admin + portal) ── */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1100px 520px at 50% -8%, rgba(232,255,71,.10), transparent 60%), var(--bg)}
.login-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:38px 32px;box-shadow:0 24px 70px rgba(0,0,0,.40)}
.tema-clar .login-card{box-shadow:0 24px 70px rgba(0,0,0,.10)}
.login-card .login-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:26px}
.login-card .login-logo{width:74px;height:74px;border-radius:20px;font-size:25px}
.login-card .bc-logo-img{margin:0 auto}
.login-card h1{font-family:var(--font-head);font-weight:800;font-size:1.45rem;letter-spacing:-.5px;line-height:1.2;margin:0;color:var(--text)}
.login-card .login-head p{color:var(--text2);font-size:.84rem;margin-top:5px}
.login-card .field{margin-bottom:16px;position:relative}
.login-card label{font-size:.7rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.6px;color:var(--text2);display:block;margin-bottom:6px}
.login-card .btn-primary.full{margin-top:6px;padding:13px;font-size:.95rem;border-radius:11px;font-weight:700}
.login-card-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.login-card-foot a{font-size:.8rem;color:var(--text2);text-decoration:none}
.login-card-foot a:hover{color:var(--accent)}
@media(max-width:480px){.login-card{padding:30px 22px;border-radius:16px}}


/* ── LAYOUT ─────────────────────────────────────────────────── */
.app-layout{
  display:flex;
  min-height:100vh
}

.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  z-index:99;
  backdrop-filter:blur(2px)
}

.sidebar{
  width:var(--sidebar-w);
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  overflow-y:auto;
  z-index:100;
  scrollbar-width:none;
  transition:transform .25s ease
}

.sidebar::-webkit-scrollbar{
  display:none
}

.sidebar-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 6px 0 0
}

.sidebar-close{
  display:none;
  background:none;
  border:none;
  color:var(--text2);
  font-size:1rem;
  cursor:pointer;
  padding:8px
}

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 16px
}

.brand-logo{
  width:36px;
  height:36px;
  background:var(--accent);
  color:#000;
  font-family:var(--font-head);
  font-weight:800;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  flex-shrink:0;
  letter-spacing:-.5px
}

.tema-clar .brand-logo{
  background:#111;
  color:#e8ff47
}

.brand-text strong{
  display:block;
  font-family:var(--font-head);
  font-weight:700;
  font-size:.85rem;
  line-height:1.2
}

.brand-text span{
  font-size:.68rem;
  color:var(--text3)
}

.sidebar-search{
  padding:0 12px 10px;
  position:relative
}

.sidebar-search input{
  width:100%;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  font-size:.82rem;
  padding:7px 10px;
  outline:none;
  transition:var(--tr)
}

.sidebar-search input:focus{
  border-color:var(--accent)
}

.search-results{
  position:absolute;
  left:12px;
  right:12px;
  top:100%;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:var(--radius);
  z-index:200;
  overflow:hidden;
  display:none
}

.search-results.show{
  display:block
}

.search-result-item{
  padding:8px 12px;
  cursor:pointer;
  transition:var(--tr);
  border-bottom:1px solid var(--border);
  font-size:.82rem
}

.search-result-item:last-child{
  border-bottom:none
}

.search-result-item:hover{
  background:var(--surface2)
}

.search-result-item .sr-type{
  font-family:var(--font-mono);
  font-size:.65rem;
  color:var(--text3);
  text-transform:uppercase;
  margin-bottom:1px
}

.search-result-item .sr-titol{
  font-weight:500
}

.search-result-item .sr-sub{
  font-size:.75rem;
  color:var(--text2)
}

.nav-section{
  padding:14px 16px 4px;
  font-size:.62rem;
  font-family:var(--font-mono);
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:1.5px
}

.nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 16px;
  color:var(--text2);
  text-decoration:none;
  font-size:.85rem;
  border-left:2px solid transparent;
  transition:var(--tr)
}

.nav-item svg{
  width:17px;
  height:17px;
  fill:currentColor;
  flex-shrink:0;
  opacity:.7
}

.nav-item:hover{
  color:var(--text);
  background:var(--surface2)
}

.nav-item.active{
  color:var(--accent);
  background:rgba(232,255,71,.06);
  border-left-color:var(--accent)
}

.tema-clar .nav-item.active{
  color:#111;
  background:rgba(0,0,0,.06);
  border-left-color:#111
}

.nav-item.active svg{
  opacity:1
}

.sidebar-footer{
  margin-top:auto;
  padding:14px;
  border-top:1px solid var(--border)
}

.user-info{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px
}

.user-avatar{
  width:30px;
  height:30px;
  background:var(--surface3);
  border:1px solid var(--border2);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head);
  font-weight:700;
  font-size:.75rem;
  flex-shrink:0
}

.user-info strong{
  display:block;
  font-size:.8rem;
  line-height:1.2
}

.user-info span{
  font-size:.68rem;
  color:var(--text3)
}

.footer-actions{
  display:flex;
  gap:5px;
  flex-wrap:wrap
}

.main-content{
  flex:1;
  min-width:0;
  margin-left:var(--sidebar-w);
  padding:28px 32px;
  max-width:1400px
}

.mobile-header{
  display:none;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  margin:-28px -32px 24px;
  position:sticky;
  top:0;
  z-index:50
}

.hamburger{
  background:none;
  border:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:4px
}

.hamburger span{
  display:block;
  width:22px;
  height:2px;
  background:var(--text);
  border-radius:1px;
  transition:var(--tr)
}

.mobile-brand{
  font-family:var(--font-head);
  font-weight:800;
  font-size:1rem
}

/* ── PAGE ───────────────────────────────────────────────────── */
.page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px;
  flex-wrap:wrap
}

.page-title{
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.8rem;
  letter-spacing:-1px;
  line-height:1.1
}

.page-subtitle{
  color:var(--text2);
  font-size:.85rem;
  margin-top:3px
}

.page-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap
}

/* ── DASHBOARD MEJORADO ──────────────────────────────────────── */
.dashboard-container{
  animation:fadeIn 0.3s ease
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(10px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }
}

.stats-grid-enhanced{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;
  margin-bottom:24px
}

.stat-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:22px 20px;
  display:flex;
  align-items:center;
  gap:16px;
  transition:all var(--tr);
  position:relative;
  overflow:hidden
}

.stat-card:hover{
  transform:translateY(-2px);
  border-color:var(--border2);
  box-shadow:0 4px 12px rgba(0,0,0,0.1)
}

.stat-card-primary{
  background:linear-gradient(135deg,var(--surface) 0%,var(--surface2) 100%);
  border-left:3px solid var(--accent)
}

.stat-icon{
  font-size:28px;
  line-height:1
}

.stat-content{
  flex:1
}

.stat-label{
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--text3);
  font-family:var(--font-mono);
  margin-bottom:6px
}

.stat-value{
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.8rem;
  line-height:1.1;
  letter-spacing:-1px
}

.stat-value.green{
  color:var(--green)
}

.stat-value.red{
  color:var(--red)
}

.stat-value.orange{
  color:var(--orange)
}

.stat-value.accent{
  color:var(--accent)
}

.tema-clar .stat-value.accent{
  color:#111
}

.stat-sub{
  font-size:0.7rem;
  color:var(--text3);
  margin-top:4px
}

.stat-trend{
  font-size:0.7rem;
  margin-top:6px;
  padding:2px 8px;
  border-radius:12px;
  display:inline-block
}

.trend-up{
  background:rgba(46,204,113,0.15);
  color:var(--green)
}

.trend-down{
  background:rgba(231,76,60,0.15);
  color:var(--red)
}

/* Chart mejorado */
.chart-wrap-enhanced{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  margin-bottom:24px
}

.chart-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  flex-wrap:wrap;
  gap:12px
}

.chart-title{
  font-family:var(--font-head);
  font-weight:700;
  font-size:0.95rem
}

.chart-legend{
  display:flex;
  gap:16px
}

.legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.75rem;
  color:var(--text2)
}

.legend-color{
  width:12px;
  height:12px;
  border-radius:2px
}

.legend-color.ingresos{
  background:rgba(46,204,113,0.7)
}

.legend-color.despeses{
  background:rgba(231,76,60,0.7)
}

.legend-color.altes{
  background:rgb(243,156,18)
}

.chart-container{
  min-height:300px
}

/* Dos columnas */
.dashboard-two-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:24px
}

@media (max-width:768px){
  .dashboard-two-columns{
    grid-template-columns:1fr
  }
}

/* Tarjetas de sección mejoradas */
.section-card-enhanced{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden
}

.section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  background:var(--surface2)
}

.section-title{
  font-family:var(--font-head);
  margin-bottom:18px;
  font-weight:700;
  font-size:0.9rem
}

.section-link{
  font-size:0.75rem;
  color:var(--accent);
  text-decoration:none;
  cursor:pointer
}

.section-link:hover{
  text-decoration:underline
}

/* Lista de movimientos */
.movements-list{
  max-height:400px;
  overflow-y:auto
}

.movement-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 20px;
  border-bottom:1px solid var(--border);
  transition:background var(--tr)
}

.movement-item:hover{
  background:var(--surface2)
}

.movement-icon{
  font-size:20px;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface3);
  border-radius:8px
}

.movement-info{
  flex:1
}

.movement-concept{
  font-weight:500;
  font-size:0.85rem
}

.movement-date{
  font-size:0.7rem;
  color:var(--text3);
  font-family:var(--font-mono)
}

.movement-category{
  font-size:0.65rem;
  color:var(--text3);
  margin-top:2px
}

.movement-amount{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.9rem
}

.movement-amount.positive{
  color:var(--green)
}

.movement-amount.negative{
  color:var(--red)
}

/* Tarjeta de próxima reunión */
.next-meeting-card{
  display:flex;
  gap:16px;
  padding:20px;
  background:var(--surface2);
  margin:16px;
  border-radius:var(--radius)
}

.meeting-date-large{
  text-align:center;
  min-width:60px;
  background:var(--surface3);
  border-radius:12px;
  padding:10px
}

.meeting-day{
  display:block;
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.8rem;
  line-height:1
}

.meeting-month{
  display:block;
  font-size:0.7rem;
  text-transform:uppercase;
  color:var(--text3)
}

.meeting-details{
  flex:1
}

.meeting-title{
  font-weight:600;
  font-size:0.95rem;
  margin-bottom:6px
}

.meeting-datetime,.meeting-location{
  font-size:0.75rem;
  color:var(--text2);
  margin-top:4px
}

/* Alerta */
.alert-card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  border-radius:var(--radius-lg);
  margin-bottom:24px
}

.alert-warning{
  background:rgba(243,156,18,0.1);
  border:1px solid rgba(243,156,18,0.3)
}

.alert-icon{
  font-size:24px
}

.alert-content{
  flex:1
}

.alert-content strong{
  display:block;
  margin-bottom:4px
}

.alert-content p{
  font-size:0.8rem;
  color:var(--text2);
  margin:0
}

.btn-primary.small{
  padding:6px 14px;
  font-size:0.75rem
}

.empty-state-message{
  text-align:center;
  padding:40px 20px;
  color:var(--text3);
  font-size:0.85rem
}

/* Gráfico de barras simple (fallback) */
.chart-bars-simple{
  display:flex;
  align-items:flex-end;
  justify-content:space-around;
  height:200px;
  gap:4px;
  padding:10px 0
}

.bar-group{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px
}

.bars{
  display:flex;
  gap:3px;
  align-items:flex-end;
  height:150px
}

.bar{
  width:100%;
  min-width:20px;
  border-radius:3px 3px 0 0;
  transition:height 0.3s ease;
  cursor:pointer
}

.bar-ing{
  background:rgba(46,204,113,0.7)
}

.bar-des{
  background:rgba(231,76,60,0.5)
}

.bar-label{
  font-size:0.65rem;
  color:var(--text3);
  font-family:var(--font-mono)
}

/* ── STATS ORIGINAL (legacy) ─────────────────────────────────── */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:16px;
  margin-bottom:24px
}

.stat-card.legacy{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
  position:relative;
  overflow:hidden;
  transition:var(--tr)
}

.stat-card.legacy:hover{
  border-color:var(--border2);
  transform:translateY(-1px)
}

.stat-card.legacy::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:var(--accent);
  opacity:0;
  transition:var(--tr)
}

.stat-card.legacy:hover::before{
  opacity:1
}

/* ── TABLE ──────────────────────────────────────────────────── */
.table-wrap{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  margin-bottom:20px
}

.table-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap
}

.search-input{
  flex:1;
  min-width:160px
}

table{
  width:100%;
  border-collapse:collapse
}

th{
  text-align:left;
  padding:9px 14px;
  font-family:var(--font-mono);
  font-size:.68rem;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:1px;
  background:var(--surface2);
  border-bottom:1px solid var(--border);
  white-space:nowrap
}

td{
  padding:11px 14px;
  border-bottom:1px solid var(--border);
  font-size:.85rem;
  vertical-align:middle
}

tr:last-child td{
  border-bottom:none
}

tr:hover td{
  background:rgba(255,255,255,.02)
}

.td-actions{
  display:flex;
  gap:5px;
  justify-content:flex-end
}

.empty-state{
  text-align:center;
  padding:50px 20px;
  color:var(--text3)
}

/* ── PAGINACIÓ ──────────────────────────────────────────────── */
.pagination{
  display:flex;
  align-items:center;
  gap:6px;
  justify-content:center;
  padding:14px;
  border-top:1px solid var(--border)
}

.pag-btn{
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text2);
  border-radius:var(--radius);
  padding:5px 12px;
  font-size:.8rem;
  cursor:pointer;
  transition:var(--tr);
  font-family:var(--font-mono)
}

.pag-btn:hover,.pag-btn.active{
  background:var(--accent);
  color:#000;
  border-color:var(--accent)
}

.tema-clar .pag-btn:hover,.tema-clar .pag-btn.active{
  background:#111;
  color:#fff;
  border-color:#111
}

.pag-btn:disabled{
  opacity:.35;
  cursor:default
}

.pag-info{
  font-size:.75rem;
  color:var(--text3);
  font-family:var(--font-mono)
}

/* ── BADGES ─────────────────────────────────────────────────── */
.badge{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:100px;
  font-size:.68rem;
  font-family:var(--font-mono);
  font-weight:500;
  white-space:nowrap
}

.badge-green{
  background:rgba(46,204,113,.15);
  color:var(--green)
}

.badge-red{
  background:rgba(231,76,60,.15);
  color:var(--red)
}

.badge-orange{
  background:rgba(243,156,18,.15);
  color:var(--orange)
}

.badge-blue{
  background:rgba(71,200,255,.15);
  color:var(--accent3)
}

.badge-yellow{
  background:rgba(232,255,71,.12);
  color:#b8c800
}

.tema-clar .badge-yellow{
  color:#6b7400
}

.badge-gray{
  background:var(--surface3);
  color:var(--text3)
}

/* ── FORMS ──────────────────────────────────────────────────── */
.field{
  display:flex;
  flex-direction:column;
  gap:5px
}

label{
  font-size:.72rem;
  font-family:var(--font-mono);
  color:var(--text2);
  text-transform:uppercase;
  letter-spacing:.5px
}

input,select,textarea{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  font-family:var(--font-body);
  font-size:.85rem;
  padding:8px 11px;
  width:100%;
  transition:var(--tr);
  outline:none
}

input:focus,select:focus,textarea:focus{
  border-color:var(--accent);
  background:var(--surface3)
}

.tema-clar input:focus,.tema-clar select:focus,.tema-clar textarea:focus{
  border-color:#111
}

textarea{
  resize:vertical;
  min-height:80px
}

select option{
  background:var(--surface2)
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

.form-grid .full{
  grid-column:1/-1
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn-primary{
  background:var(--accent);
  color:#000;
  border:none;
  border-radius:var(--radius);
  padding:8px 16px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:.85rem;
  cursor:pointer;
  transition:var(--tr);
  white-space:nowrap
}

.btn-primary:hover{
  filter:brightness(1.1);
  transform:translateY(-1px)
}

.btn-primary.full{
  width:100%;
  padding:10px
}

.tema-clar .btn-primary{
  background:#111;
  color:#fff
}

.btn-secondary{
  background:var(--surface2);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:8px 16px;
  font-family:var(--font-body);
  font-size:.85rem;
  cursor:pointer;
  transition:var(--tr);
  white-space:nowrap
}

.btn-secondary:hover{
  border-color:var(--border2);
  background:var(--surface3)
}

.btn-danger{
  background:rgba(231,76,60,.12);
  color:var(--red);
  border:1px solid rgba(231,76,60,.25);
  border-radius:var(--radius);
  padding:6px 12px;
  font-size:.78rem;
  cursor:pointer;
  transition:var(--tr)
}

.btn-danger:hover{
  background:rgba(231,76,60,.22)
}

.btn-ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text2);
  border-radius:var(--radius);
  padding:6px 12px;
  font-size:.78rem;
  cursor:pointer;
  transition:var(--tr)
}

.btn-ghost:hover{
  border-color:var(--border2);
  color:var(--text)
}

.btn-ghost.sm{
  padding:4px 10px;
  font-size:.72rem
}

.btn-icon{
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text2);
  border-radius:6px;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:var(--tr);
  flex-shrink:0;
  font-size:.8rem
}

.btn-icon:hover{
  border-color:var(--border2);
  color:var(--text)
}

/* ── MODAL ───────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:16px;
  backdrop-filter:blur(4px)
}

.modal-box{
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:var(--radius-lg);
  width:100%;
  max-width:540px;
  max-height:90vh;
  overflow-y:auto;
  scrollbar-width:thin
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--border)
}

.modal-title{
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-.3px
}

.modal-body{
  padding:24px 26px;
  display:flex;
  flex-direction:column;
  gap:13px
}

.modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:14px 22px;
  border-top:1px solid var(--border)
}

/* ── TOAST ───────────────────────────────────────────────────── */
.toast{
  position:fixed;
  bottom:22px;
  right:22px;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:var(--radius);
  padding:11px 16px;
  font-size:.85rem;
  z-index:9999;
  transform:translateY(60px);
  opacity:0;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  max-width:300px
}

.toast.show{
  transform:translateY(0);
  opacity:1
}

.toast.ok{
  border-color:var(--green)
}

.toast.err{
  border-color:var(--red)
}

/* ── JUNTA CARDS ─────────────────────────────────────────────── */
.junta-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px
}

.junta-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
  transition:var(--tr);
  position:relative
}

.junta-card:hover{
  border-color:var(--border2);
  transform:translateY(-2px)
}

.junta-carrec{
  font-family:var(--font-mono);
  font-size:.67rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--accent);
  margin-bottom:6px
}

.tema-clar .junta-carrec{
  color:#333
}

.junta-nom{
  font-family:var(--font-head);
  font-weight:700;
  font-size:1rem;
  margin-bottom:3px
}

.junta-email{
  font-size:.75rem;
  color:var(--text3)
}

.junta-data{
  font-size:.7rem;
  color:var(--text3);
  margin-top:7px;
  font-family:var(--font-mono)
}

.junta-actions{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  gap:4px;
  opacity:0;
  transition:var(--tr)
}

.junta-card:hover .junta-actions{
  opacity:1
}

/* ── DOCS GRID ───────────────────────────────────────────────── */
.docs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px
}

.doc-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:7px;
  transition:var(--tr)
}

.doc-card:hover{
  border-color:var(--border2)
}

.doc-icon{
  width:34px;
  height:34px;
  background:var(--surface3);
  border-radius:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:.6rem;
  color:var(--text3);
  text-transform:uppercase;
  flex-shrink:0
}

.doc-title{
  font-weight:500;
  font-size:.88rem;
  line-height:1.3
}

.doc-meta{
  font-size:.72rem;
  color:var(--text3);
  font-family:var(--font-mono)
}

.doc-actions{
  display:flex;
  gap:5px;
  margin-top:auto;
  padding-top:7px;
  border-top:1px solid var(--border)
}

/* ── REUNIONS ────────────────────────────────────────────────── */
.reunio-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:16px 18px;
  display:flex;
  align-items:flex-start;
  gap:14px;
  transition:var(--tr);
  margin-bottom:10px
}

.reunio-item:hover{
  border-color:var(--border2)
}

.reunio-date{
  text-align:center;
  min-width:48px;
  background:var(--surface2);
  border-radius:7px;
  padding:7px
}

.reunio-date .day{
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.3rem;
  line-height:1;
  color:var(--accent)
}

.tema-clar .reunio-date .day{
  color:#111
}

.reunio-date .mon{
  font-family:var(--font-mono);
  font-size:.6rem;
  color:var(--text3);
  text-transform:uppercase
}

.reunio-info{
  flex:1
}

.reunio-title{
  font-weight:600;
  font-size:.9rem;
  margin-bottom:3px
}

.reunio-meta{
  font-size:.75rem;
  color:var(--text3)
}

.reunio-actions{
  flex-shrink:0;
  display:flex;
  gap:5px
}

/* ── TABS ────────────────────────────────────────────────────── */
.tabs{
  display:flex;
  gap:2px;
  background:var(--surface2);
  padding:3px;
  border-radius:var(--radius);
  margin-bottom:18px;
  width:fit-content;
  flex-wrap:wrap
}

.tab{
  padding:6px 14px;
  border-radius:5px;
  font-size:.78rem;
  cursor:pointer;
  color:var(--text2);
  border:none;
  background:transparent;
  transition:var(--tr);
  font-family:var(--font-body)
}

.tab.active{
  background:var(--surface);
  color:var(--text);
  box-shadow:0 1px 3px rgba(0,0,0,.3)
}

/* ── SECTION CARD ─────────────────────────────────────────────── */
.section-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px 28px 24px;
  margin-bottom:20px
}
@media(max-width:600px){.section-card{padding:18px 16px}}

.section-title{
  font-family:var(--font-head);
  margin-bottom:18px;
  font-weight:700;
  font-size:.95rem;
  margin-bottom:14px;
  letter-spacing:-.3px
}

.filter-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap
}

.filter-row select,.filter-row input{
  width:auto;
  min-width:110px
}

/* ── FINANCES ────────────────────────────────────────────────── */
.finance-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:20px
}

.finance-bar{
  height:5px;
  background:var(--surface3);
  border-radius:3px;
  margin-top:7px;
  overflow:hidden
}

.finance-bar-fill{
  height:100%;
  border-radius:3px;
  transition:width .6s ease
}

.fil-green{
  background:var(--green)
}

.fil-red{
  background:var(--red)
}

.fil-acc{
  background:var(--accent)
}

/* ── CUOTES ──────────────────────────────────────────────────── */
.cuota-estat-pendent{
  color:var(--orange)
}

.cuota-estat-pagat{
  color:var(--green)
}

.cuota-estat-retard{
  color:var(--red)
}

/* ── PORTAL ──────────────────────────────────────────────────── */
.portal-layout{
  min-height:100vh;
  display:flex;
  flex-direction:column
}

.portal-header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:50
}

.portal-header-inner{
  max-width:900px;
  margin:0 auto;
  padding:12px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap
}

.portal-main{
  max-width:900px;
  margin:0 auto;
  padding:28px 24px;
  width:100%
}

.portal-soci-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  gap:16px
}

.portal-avatar{
  width:56px;
  height:56px;
  background:var(--surface2);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.4rem;
  flex-shrink:0;
  border:2px solid var(--border2)
}

.portal-num{
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--text3);
  margin-bottom:4px
}

.portal-nom{
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.2rem
}

.portal-tipus{
  font-size:.8rem;
  color:var(--text2);
  margin-top:2px
}

/* ── MISC ────────────────────────────────────────────────────── */
.amount-positive{
  color:var(--green);
  font-family:var(--font-mono)
}

.amount-negative{
  color:var(--red);
  font-family:var(--font-mono)
}

.mono{
  font-family:var(--font-mono)
}

.loading{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:50px;
  color:var(--text3);
  gap:10px
}

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

.spinner{
  width:18px;
  height:18px;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .7s linear infinite
}

::-webkit-scrollbar{
  width:5px;
  height:5px
}

::-webkit-scrollbar-track{
  background:transparent
}

::-webkit-scrollbar-thumb{
  background:var(--border2);
  border-radius:3px
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:860px){
  .login-left{
    display:none
  }
  .login-right{
    flex:1;
    background:var(--bg)
  }
  .mobile-header{
    display:flex
  }
  .main-content{
    margin-left:0;
    padding:28px 32px
  }
  .sidebar{
    transform:translateX(-100%)
  }
  .sidebar.open{
    transform:translateX(0)
  }
  .sidebar-close{
    display:block
  }
  .sidebar-overlay.show{
    display:block
  }
  .stats-grid{
    grid-template-columns:repeat(2,1fr)
  }
  .stats-grid-enhanced{
    grid-template-columns:repeat(2,1fr)
  }
  .finance-summary{
    grid-template-columns:1fr
  }
  .form-grid{
    grid-template-columns:1fr
  }
  .form-grid .full{
    grid-column:1
  }
  .junta-grid,.docs-grid{
    grid-template-columns:1fr
  }
}


/* ═══════════════════════════════════════════════════════════
   SISTEMA DE TARJETAS — p-card, p-row, p-label
   ═══════════════════════════════════════════════════════════ */

/* Tarjeta genérica */
.p-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  margin-bottom: 20px;
  overflow: hidden;
}

.p-card-title {
  font-weight: 700;
  font-size: .9rem;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
}

/* Fila de dato */
.p-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}

.p-row:last-child {
  border-bottom: none;
}

.p-row:hover {
  background: var(--surface2);
}

.p-label {
  font-size: .78rem;
  font-family: var(--font-mono);
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .4px;
  flex-shrink: 0;
  min-width: 160px;
  padding-top: 1px;
}

.p-val {
  font-size: .88rem;
  font-weight: 500;
  text-align: right;
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════
   GOBERNANZA — tabla de obligaciones y alertas
   ═══════════════════════════════════════════════════════════ */

.gov-alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border2);
  background: var(--surface);
  margin-bottom: 10px;
}

.gov-alert-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.gov-alert-text {
  font-size: .88rem;
  line-height: 1.5;
  font-weight: 500;
}

.gov-alert.ok   { border-left-color: var(--green); background: rgba(46,204,113,.05); }
.gov-alert.warn { border-left-color: var(--orange); background: rgba(243,156,18,.05); }
.gov-alert.err  { border-left-color: var(--red); background: rgba(231,76,60,.05); }

/* Obligation table */
.gov-table {
  width: 100%;
  border-collapse: collapse;
}

.gov-table tr {
  border-bottom: 1px solid var(--border);
}

.gov-table tr:last-child {
  border-bottom: none;
}

.gov-table tr:hover td {
  background: var(--surface2);
}

.gov-table td {
  padding: 12px 20px;
  vertical-align: top;
  line-height: 1.5;
}

.gov-table td:first-child {
  font-size: .78rem;
  font-family: var(--font-mono);
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
  width: 220px;
  padding-right: 12px;
}

.gov-table td:last-child {
  font-size: .88rem;
  color: var(--text);
}

.gov-table td .art {
  font-size: .72rem;
  color: var(--text3);
  font-family: var(--font-mono);
  margin-left: 6px;
}

/* Status mini cards */
.gov-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.gov-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 16px;
  text-align: center;
}

.gov-stat .num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  font-family: var(--font-head);
}

.gov-stat .lbl {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text3);
  font-family: var(--font-mono);
  margin-top: 6px;
}

.gov-stat .sub {
  font-size: .75rem;
  color: var(--text2);
  margin-top: 4px;
  line-height: 1.3;
}

.gov-stat.ok  { border-color: rgba(46,204,113,.4); }
.gov-stat.err { border-color: rgba(231,76,60,.4); }
.gov-stat.warn{ border-color: rgba(243,156,18,.4); }

/* ═══════════════════════════════════════════════════════════
   SANCIONES
   ═══════════════════════════════════════════════════════════ */

.sancio-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border2);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 12px;
  transition: box-shadow .15s;
}

.sancio-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.sancio-card.lleu     { border-left-color: var(--orange); }
.sancio-card.greu     { border-left-color: var(--red); }
.sancio-card.molt-greu{ border-left-color: #8e0000; }
.sancio-card.resolt   { border-left-color: var(--green); opacity: .85; }

.sancio-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.sancio-membre {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sancio-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .95rem;
  flex-shrink: 0;
}

.sancio-nom {
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
}

.sancio-num {
  font-size: .72rem;
  color: var(--text3);
  font-family: var(--font-mono);
}

.sancio-body {
  background: var(--surface2);
  border-radius: 8px;
  padding: 13px 16px;
  margin-bottom: 12px;
}

.sancio-motiu {
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 4px;
  line-height: 1.4;
}

.sancio-desc {
  font-size: .82rem;
  color: var(--text2);
  line-height: 1.5;
}

.sancio-sancio {
  background: rgba(231,76,60,.07);
  border: 1px solid rgba(231,76,60,.2);
  border-radius: 7px;
  padding: 10px 14px;
  font-size: .83rem;
  margin-bottom: 10px;
  line-height: 1.5;
}

.sancio-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════
   CALENDARIO
   ═══════════════════════════════════════════════════════════ */

.cal-year-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cal-upcoming {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}

.cal-event-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border2);
  border-radius: 8px;
  padding: 13px 16px;
  display: flex;
  gap: 14px;
  align-items: center;
  transition: box-shadow .15s;
}

.cal-event-row:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}

.cal-event-row.urgente { border-left-color: var(--red); }
.cal-event-row.proximo { border-left-color: var(--orange); }
.cal-event-row.normal  { border-left-color: var(--green); }

.cal-day-badge {
  min-width: 46px;
  height: 52px;
  border-radius: 8px;
  background: var(--surface2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.cal-day-badge .day  { font-weight: 800; font-size: 1.3rem; line-height: 1; }
.cal-day-badge .mon  { font-size: .6rem; text-transform: uppercase; color: var(--text3); margin-top: 2px; }

.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

/* Monthly calendar grid cells */
.cal-grid-cell {
  min-height: 90px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px;
  transition: background .1s;
}

.cal-grid-cell:hover {
  background: var(--surface2);
}

.cal-grid-cell.today-cell {
  background: rgba(232,255,71,.1);
}

.tema-clar .cal-grid-cell.today-cell {
  background: rgba(0,0,0,.04);
}

.cal-grid-event {
  font-size: .7rem;
  padding: 2px 5px;
  border-radius: 4px;
  margin-bottom: 2px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  background: rgba(71,200,255,.15);
  color: var(--text);
  transition: background .1s;
}

.cal-grid-event:hover {
  background: rgba(71,200,255,.3);
}

.cal-grid-event.privat {
  background: rgba(231,76,60,.12);
}

.cal-grid-event.statutory {
  background: rgba(243,156,18,.15);
}

.cal-month-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.cal-month-header {
  padding: 10px 14px;
  background: var(--surface2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: .88rem;
}

.cal-month-header.actual {
  background: var(--accent);
  color: #000;
  border-bottom-color: transparent;
}

.cal-month-body {
  padding: 8px 0;
  min-height: 48px;
}

.cal-event-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 14px;
  border-bottom: 1px solid var(--border);
  font-size: .78rem;
  line-height: 1.4;
}

.cal-event-line:last-child { border-bottom: none; }
.cal-event-line:hover { background: var(--surface2); }

.cal-day-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--text2);
}

.cal-day-num.today {
  background: var(--accent);
  color: #000;
}

.cal-event-empty {
  padding: 14px;
  font-size: .78rem;
  color: var(--text3);
  text-align: center;
}


@media(max-width:500px){
  .main-content{
    padding:80px 16px 20px
  }
  .mobile-header{
    margin:-28px -16px 0
  }
  .stats-grid{
    grid-template-columns:1fr 1fr
  }
  .stats-grid-enhanced{
    grid-template-columns:1fr
  }
  .page-title{
    font-size:1.4rem
  }
  .modal-box{
    max-height:95vh
  }
}

/* ── Votaciones: modal crear/editar ──────────────────────────── */
.vot-toggle{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:12px;background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 14px;cursor:pointer;text-transform:none
}
.vot-toggle:hover{border-color:var(--border2)}
.vot-toggle .vt-txt{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:.88rem;color:var(--text);font-weight:500}
.vot-toggle .vt-sub{display:block;color:var(--text3);font-size:.74rem;margin-top:2px;font-weight:400}
.vot-toggle input[type=checkbox]{width:20px !important;height:20px;flex:none;accent-color:var(--accent);cursor:pointer}
.vot-op-row{display:flex;gap:8px;margin-bottom:8px;align-items:center}
.vot-op-row input{flex:1;width:auto}
.vot-op-num{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--surface3);border-radius:50%;font-size:.72rem;color:var(--text2);font-family:var(--font-mono)}
.vot-op-del{flex:none;width:34px;height:34px;border:1px solid var(--border);background:var(--surface2);border-radius:var(--radius);color:var(--text3);cursor:pointer;font-size:.9rem;line-height:1}
.vot-op-del:hover{color:var(--red);border-color:var(--red)}
.vot-aviso{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:11px 13px;font-size:.8rem;color:var(--text2);margin-bottom:16px;line-height:1.5}
.vot-group-label{font-size:.72rem;font-family:var(--font-mono);color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin:18px 0 8px}