/* ============== Calendario Familiar — Dark UI ============== */
:root{
  --bg:#0b0f1a; --bg2:#0f1524; --card:#141b2d; --card2:#1a2236;
  --line:#243049; --ink:#e7ecf6; --muted:#8c98b3; --soft:#aab4cc;
  --brand:#6366f1; --brand2:#818cf8; --brand-d:#4f46e5;
  --danger:#ef4444; --danger-d:#dc2626; --ok:#22c55e;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.45);
  --c:#6366f1;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:
    radial-gradient(900px 500px at 100% -10%, rgba(99,102,241,.18), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(129,140,248,.12), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
/* fondo familiar ilustrado */
body.with-bg{
  background:
    linear-gradient(rgba(11,15,26,.58), rgba(11,15,26,.74)),
    url('fondo.svg') center center / cover fixed no-repeat;
}
/* en páginas con contenido, las tarjetas mantienen buena legibilidad */
body.with-bg .card{ background:linear-gradient(180deg, rgba(20,27,45,.96), rgba(15,21,36,.97)); }
a{color:var(--brand2);text-decoration:none;}
.muted{color:var(--muted);}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 20px; background:rgba(15,21,36,.85);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.brand-min{display:flex; align-items:center; gap:12px; min-width:0;}
.brand-min strong{display:block; font-size:15px; line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:55vw;}
.code{color:var(--muted); font-size:11.5px;}
.brand-logo{font-size:26px;}
.brand-logo.sm{font-size:22px; filter:drop-shadow(0 4px 10px rgba(99,102,241,.5));}

.mainnav{display:flex; align-items:center; gap:6px; background:var(--bg2);
  padding:5px; border-radius:14px; border:1px solid var(--line);}
.mainnav a{
  color:var(--soft); padding:9px 16px; border-radius:10px; font-size:13.5px; font-weight:600;
  transition:.15s; white-space:nowrap;
}
.mainnav a:hover{background:var(--card2); color:var(--ink);}
.mainnav a.active{background:linear-gradient(180deg,var(--brand2),var(--brand-d)); color:#fff;
  box-shadow:0 6px 16px rgba(99,102,241,.4);}
.mainnav a.logout{color:var(--muted); background:none;}
.mainnav a.logout:hover{color:#fff; background:var(--danger);}

/* hamburguesa */
.hamb{display:none; flex-direction:column; gap:5px; background:none; border:none;
  cursor:pointer; padding:8px;}
.hamb span{width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.2s;}

/* ---------- Layout ---------- */
.layout{
  display:grid; grid-template-columns:1fr; gap:20px;
  max-width:1200px; margin:0 auto; padding:22px 20px 60px;
}
.card{
  background:linear-gradient(180deg, var(--card), var(--bg2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow);
}
h2{margin:0 0 16px; font-size:19px;}
h3{margin:0 0 14px; font-size:16px;}

.msg{max-width:1200px; margin:14px auto 0; padding:12px 18px;
  background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.35);
  color:#86efac; border-radius:12px;}

/* ---------- Calendario ---------- */
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.cal-head h2{margin:0; font-size:18px;}
.nav-btn{width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:var(--card2); border:1px solid var(--line); border-radius:12px;
  color:var(--ink); font-size:22px; transition:.15s;}
.nav-btn:hover{background:var(--brand); border-color:var(--brand);}

.grid{display:grid; grid-template-columns:repeat(7,1fr); gap:8px;}
.grid-head{margin-bottom:8px;}
.dow{text-align:center; font-size:12px; font-weight:600; color:var(--muted);
  letter-spacing:.5px;}
.cell{min-height:92px; background:var(--card2); border:1px solid var(--line);
  border-radius:12px; padding:7px; position:relative; display:flex; flex-direction:column; gap:5px;
  cursor:pointer; transition:border-color .12s, transform .08s; overflow:hidden;}
.cell:not(.empty):hover{border-color:var(--brand);}
.cell:not(.empty):active{transform:scale(.97);}
.cell.empty{background:transparent; border:none; cursor:default;}
.cell.today{border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand);}
.cell.feriado{background:rgba(220,38,38,.12); border-color:rgba(220,38,38,.5);}
.cell.feriado .daynum{color:#fca5a5;}
/* días que ya pasaron: atenuados */
.cell.pasado{opacity:.45; background:#0d1320;}
.cell.pasado:hover{opacity:.7;}
.cell.today.pasado{opacity:1;}
.daynum{font-size:13px; color:var(--soft); font-weight:600;}
.cell.today .daynum{color:var(--brand2); font-weight:800;}

/* barritas de eventos (estilo agenda) */
.ev-barras{display:flex; flex-direction:column; gap:3px; overflow:hidden;}
.ev-barra{display:flex; align-items:center; gap:4px; padding:2px 5px; border-radius:5px;
  color:#fff; font-size:10.5px; line-height:1.3; white-space:nowrap; overflow:hidden;}
.ev-barra .bi{flex:none; font-size:10px;}
.ev-barra .bt{overflow:hidden; text-overflow:ellipsis; font-weight:500;}
.ev-mas{font-size:10px; color:var(--muted); padding-left:3px;}
.dia-resumen{display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  padding:10px; margin-bottom:6px; background:var(--card2); border:1px solid var(--line);
  border-radius:12px;}
.ev-tipo{display:inline-flex; align-items:center; gap:2px; font-size:12px; line-height:1;}
.ev-tipo b{font-size:11px; color:var(--soft); font-weight:700;}
.ev-tipo.big{font-size:18px;} .ev-tipo.big b{font-size:14px; color:var(--ink);}

.badge{font-size:10px; opacity:.8;}

/* lista de eventos del día (modal) */
.dia-lista{display:flex; flex-direction:column; gap:8px; margin:6px 0 18px; max-height:50vh; overflow:auto;}
.dia-item{background:var(--card2); border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius:10px; padding:11px 13px; cursor:pointer; transition:.12s;}
.dia-item:hover{background:rgba(255,255,255,.05); border-color:var(--brand);}
.dia-item small{color:var(--muted);}
.dia-item.lleno{color:#fff; border-left:none;}
.dia-item.lleno strong{color:#fff;}
.dia-item.lleno small{color:rgba(255,255,255,.85);}
.dia-item.lleno:hover{filter:brightness(1.08); background:inherit;}

/* selector de iconos de actividad */
.icono-pick{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 14px;}
.icono-opt{width:40px; height:40px; font-size:19px; background:var(--bg2);
  border:1px solid var(--line); border-radius:10px; cursor:pointer; transition:.12s;
  display:flex; align-items:center; justify-content:center;}
.icono-opt:hover{border-color:var(--brand);}
.icono-opt.sel{background:var(--brand); border-color:var(--brand); transform:scale(1.05);}
.sep{height:1px; background:var(--line); margin:16px 0;}

/* chips de filtro (legacy, ya no se usan) */
.filtros{display:none;}

/* cabecera del calendario */
.cal-head{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px;}
.cal-nav{display:flex; align-items:center; gap:8px;}
.btn-hoy{display:inline-flex; align-items:center; padding:0 14px; height:40px;
  background:var(--card2); border:1px solid var(--line); border-radius:12px;
  color:var(--ink); font-size:13px; font-weight:600; text-decoration:none; transition:.15s;}
.btn-hoy:hover{background:var(--brand); border-color:var(--brand); color:#fff;}

/* filtro desplegable */
.filtro-box{position:relative;}
.filtro-btn{display:inline-flex; align-items:center; gap:9px; height:40px; padding:0 14px;
  background:var(--card2); border:1px solid var(--line); border-radius:12px;
  color:var(--ink); font-size:13.5px; cursor:pointer; transition:.15s;}
.filtro-btn:hover{border-color:var(--brand);}
.filtro-btn .caret{color:var(--muted); font-size:11px;}
.fdot{width:13px; height:13px; border-radius:50%; flex:none; display:inline-block;}
.filtro-menu{position:absolute; right:0; top:48px; z-index:30; min-width:210px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:6px; display:none; max-height:320px; overflow:auto;}
.filtro-menu.open{display:block;}
.fopt{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px; background:none; border:none; border-radius:9px;
  color:var(--soft); font-size:13.5px; cursor:pointer; transition:.12s;}
.fopt:hover{background:var(--card2); color:var(--ink);}
.fopt.active{background:var(--brand); color:#fff;}

.hint-add{text-align:center; color:var(--muted); font-size:12.5px; margin:16px 0 0;}

/* leyenda de colores */
.leyenda{display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:center;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);}
.ley-item{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--soft);}
.ley-dot{width:12px; height:12px; border-radius:50%; flex:none;}

/* actividades */
.act-list{display:flex; flex-direction:column; gap:12px;}
.act-card{background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:14px;}
.act-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.act-head strong{font-size:15px;}
.act-int{display:inline-block; margin-left:8px; font-size:12px; color:var(--muted);}
.act-btns{display:flex; gap:8px; align-items:center;}
.act-btns form{margin:0;}
.act-actual{margin-top:8px; font-size:13.5px; color:var(--ink);}
.act-actual small{color:var(--muted);}
.act-hist{margin-top:8px;}
.act-hist summary{cursor:pointer; color:var(--brand2); font-size:12.5px;}
.act-tramo{font-size:12.5px; color:var(--soft); padding:4px 0 0 12px;}
.act-tramo small{color:var(--muted); margin-left:6px;}

/* selector de días (chips) */
.dias-pick{display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:13px;}
.dias-lbl{font-size:12.5px; color:var(--muted); width:100%; margin-bottom:2px;}
.dia-chip{position:relative; cursor:pointer;}
.dia-chip input{position:absolute; opacity:0; width:0; height:0;}
.dia-chip span{display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; padding:8px 6px; background:var(--bg2); border:1px solid var(--line);
  border-radius:9px; font-size:12.5px; color:var(--soft); transition:.12s;}
.dia-chip input:checked + span{background:var(--brand); color:#fff; border-color:var(--brand);}

/* pestañas (tabs) */
.tabs{display:flex; gap:6px; background:var(--bg2); padding:5px; border-radius:12px;
  border:1px solid var(--line); margin:6px 0 16px;}
.tab{flex:1; padding:9px 10px; border:none; background:none; color:var(--soft);
  font-size:13px; font-weight:600; border-radius:9px; cursor:pointer; transition:.12s;}
.tab:hover{color:var(--ink);}
.tab.active{background:var(--brand); color:#fff;}
.tab-panel{animation:fadeIn .15s ease;}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}

/* secciones del modal de gestión de actividad */
.actg-sec{display:flex; flex-direction:column; gap:10px;}
.actg-sec strong{font-size:13.5px; color:var(--ink);}
.actg-sec form{margin:0;}

/* caja de avisos WhatsApp */
.wa-box{background:rgba(37,211,102,.08); border:1px solid rgba(37,211,102,.3);
  border-radius:12px; padding:12px; margin:6px 0 14px;}
.wa-tit{font-size:13.5px; font-weight:600; color:#86efac; margin-bottom:8px;}
.wa-tit small{color:var(--muted); font-weight:400;}
.wa-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 12px;}
@media (max-width:560px){ .wa-grid{grid-template-columns:1fr;} }

/* botón-enlace de ayuda */
.link-ayuda{background:none; border:none; color:#86efac; cursor:pointer;
  font-size:12.5px; padding:0; text-decoration:underline; font-weight:600;}
.link-ayuda:hover{color:#bbf7d0;}

/* pasos del modal de ayuda */
.ayuda-pasos{display:flex; flex-direction:column; gap:14px; margin:6px 0 14px;}
.ayuda-paso{display:flex; gap:12px; align-items:flex-start; font-size:13.5px; color:var(--soft);}
.ap-num{flex:none; width:26px; height:26px; border-radius:50%; background:var(--brand);
  color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:14px;}
.ap-dato{background:var(--bg2); border:1px solid var(--line); border-radius:8px;
  padding:8px 10px; margin:6px 0; font-weight:700; color:var(--ink); font-size:14px;
  user-select:all; word-break:break-word;}
.ap-lista{margin:6px 0 0; padding-left:18px;}
.ap-lista li{margin-bottom:4px;}
.ayuda-paso small{display:block; color:var(--muted); margin-top:4px; font-size:11.5px;}
.badge-acc{font-size:12px; margin-left:4px;}

/* recortador de foto */
.crop-stage{position:relative; width:320px; max-width:100%; height:320px; margin:0 auto 14px;
  border-radius:14px; overflow:hidden; background:#000; touch-action:none;}
#crop-canvas{display:block; width:100%; height:100%; cursor:grab;}
#crop-canvas:active{cursor:grabbing;}
.crop-mask{position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 9999px rgba(0,0,0,.35); border:2px dashed rgba(255,255,255,.5);
  border-radius:14px;}
.crop-zoom{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--soft); margin-bottom:14px;}
.crop-zoom input{flex:1;}

/* visor de foto grande */
#modal-foto{align-items:center;}
.foto-grande-box{position:relative; max-width:90vw; max-height:85vh;}
.foto-grande-box img{max-width:90vw; max-height:85vh; border-radius:16px; display:block;
  box-shadow:0 20px 60px rgba(0,0,0,.6);}
.foto-grande-box .close{top:-6px; right:-6px; background:var(--card); border-radius:50%;
  width:36px; height:36px; border:1px solid var(--line);}

/* botón de mes (abre selector) */
.mes-btn{background:none; border:none; color:var(--ink); font-size:18px; font-weight:700;
  cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:10px;}
.mes-btn:hover{background:var(--card2);}
.mes-btn .caret{color:var(--muted); font-size:12px;}

/* selector de mes */
.mes-anio{display:flex; align-items:center; justify-content:center; gap:16px; margin:6px 0 16px;}
.mes-anio span{font-size:20px; font-weight:700; min-width:70px; text-align:center;}
.meses-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.mes-opt{padding:14px 6px; background:var(--card2); border:1px solid var(--line);
  border-radius:10px; color:var(--soft); font-size:13px; cursor:pointer; transition:.12s;}
.mes-opt:hover{border-color:var(--brand); color:var(--ink);}
.mes-opt.active{background:var(--brand); color:#fff; border-color:var(--brand);}

/* acciones alineadas (compartir / eliminar) */
.acciones-ev{display:flex; gap:10px;}
.acciones-ev .btn{flex:1; margin:0;}
/* eliminar discreto en el modal de evento */
.acciones-ev .btn.danger{flex:none; background:transparent; border:1px solid var(--line);
  color:var(--muted); box-shadow:none; padding:0 16px;}
.acciones-ev .btn.danger:hover{background:rgba(239,68,68,.15); border-color:var(--danger);
  color:#fca5a5; transform:none;}

/* popover vista rápida */
.pop{position:absolute; z-index:80; display:none; width:230px; max-width:80vw;
  background:var(--card); border:1px solid var(--brand); border-radius:12px;
  box-shadow:var(--shadow); padding:10px; font-size:12.5px;}
.pop-row{display:flex; align-items:center; gap:7px; padding:3px 0; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pop-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.pop-empty{color:var(--muted); text-align:center;}
.pop-more{color:var(--muted); font-size:11px; margin-top:4px;}

/* sigla de familia compartida dentro del evento */
.ev .sigla{flex:none; min-width:18px; height:16px; padding:0 4px; border-radius:5px;
  background:var(--c); color:#fff; font-size:9.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; letter-spacing:.3px;}
.ev:hover .sigla{background:rgba(255,255,255,.25);}

/* punto de color del integrante en la tabla */
.ci-dot{display:inline-block; width:11px; height:11px; border-radius:50%;
  margin-right:7px; vertical-align:middle;}

/* tarjeta de familia */
.familia-card{display:flex; align-items:center; gap:18px;}
.familia-avatar{width:74px; height:74px; border-radius:18px; overflow:hidden; flex:none;
  background:var(--brand); display:flex; align-items:center; justify-content:center;
  border:2px solid var(--brand2);}
.familia-avatar img{width:100%; height:100%; object-fit:cover;}
.familia-avatar span{font-size:26px; font-weight:800; color:#fff;}
.familia-info{flex:1; min-width:0;}
.familia-info h2{margin:0 0 4px;}
.foto-form{margin-top:8px;}

/* grid de integrantes */
.int-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px;}
.int-card{background:var(--card2); border:1px solid var(--line); border-radius:14px;
  padding:16px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px;}
.int-avatar{width:72px; height:72px; border-radius:16px; overflow:hidden;
  border:3px solid var(--brand); display:flex; align-items:center; justify-content:center; margin-bottom:4px;}
.int-avatar img{width:100%; height:100%; object-fit:cover;}
.int-avatar span{width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:800; color:#fff;}
.int-nombre{font-weight:600; font-size:15px;}
.int-sub{font-size:12px; color:var(--muted);}
.int-meta{font-size:12px; color:var(--soft);}
.int-acciones{display:flex; gap:6px; margin-top:auto; padding-top:12px; align-items:center; justify-content:center; width:100%;}
.int-acciones form{margin:0; display:flex;}
.int-acciones .btn.small{display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 12px; margin:0; font-size:12.5px; flex:1;}
/* botón borrar discreto: icono gris que se pone rojo al pasar el mouse */
.int-acciones .btn.danger{flex:none; width:36px; padding:0; background:transparent;
  border:1px solid var(--line); color:var(--muted); box-shadow:none;}
.int-acciones .btn.danger:hover{background:rgba(239,68,68,.15); border-color:var(--danger);
  color:#fca5a5; transform:none;}
@media (max-width:680px){
  .int-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .familia-card{flex-direction:column; text-align:center;}
}

/* hint */
.hint{font-size:12px; color:var(--muted); margin:-6px 0 14px;}

/* feriados en tarjetas */
.fer-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;}
.fer-card{background:var(--card2); border:1px solid var(--line); border-radius:14px;
  padding:12px; cursor:pointer; opacity:.5; transition:.15s; display:flex; flex-direction:column; gap:8px;}
.fer-card.on{opacity:1; border-color:var(--brand); box-shadow:0 4px 14px rgba(99,102,241,.25);}
.fer-card-top{display:flex; align-items:flex-start; justify-content:space-between;}
.fer-fecha-big{font-size:24px; font-weight:800; color:var(--ink); line-height:1;}
.fer-fecha-big small{font-size:13px; font-weight:600; color:var(--muted);}
.fer-sel{width:20px; height:20px; accent-color:var(--brand); cursor:pointer;}
.fer-card-dia{font-size:12px; color:var(--muted); margin-top:-4px;}
.fer-card .fer-nombre{width:100%; padding:7px 9px; background:var(--bg2); color:var(--ink);
  border:1px solid var(--line); border-radius:9px; font-size:13px;}
.fer-card-foot{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.fer-fecha-edit{flex:1; padding:6px; background:var(--bg2); color:var(--soft);
  border:1px solid var(--line); border-radius:8px; font-size:12px;}
.fer-del{background:none; border:none; cursor:pointer; font-size:16px; padding:4px;}
.fer-tag{font-size:11px; color:var(--ok); background:rgba(34,197,94,.12);
  padding:3px 8px; border-radius:8px;}
@media (max-width:680px){
  .fer-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
}

/* ---------- Formularios ---------- */
.form label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:13px; font-weight:500;}
.form input,.form select,.form textarea,.form-share input{
  width:100%; margin-top:6px; padding:11px 12px; font-size:14px;
  background:var(--bg2); color:var(--ink);
  border:1px solid var(--line); border-radius:11px; outline:none; transition:.15s;
}
.form input:focus,.form select:focus,.form textarea:focus,.form-share input:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(99,102,241,.25);
}
.form input[type=color]{height:44px; padding:5px; cursor:pointer;}
.form label.check{display:flex; align-items:center; gap:10px; margin-bottom:13px;
  font-size:13px; color:var(--soft); cursor:pointer;}
.form label.check input{width:auto; margin:0; width:18px; height:18px; accent-color:var(--brand); cursor:pointer;}
.form label.check span{flex:1;}
.row{display:flex; gap:12px;} .row label{flex:1;}
.btn{width:100%; padding:12px 16px; font-size:14px; font-weight:600; cursor:pointer;
  color:#fff; border:none; border-radius:12px;
  background:linear-gradient(180deg,var(--brand2),var(--brand-d));
  box-shadow:0 8px 20px rgba(99,102,241,.35); transition:.15s;}
.btn:hover{filter:brightness(1.08); transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn.small{width:auto; padding:8px 14px; font-size:13px;}
.btn.danger{background:linear-gradient(180deg,#f87171,var(--danger-d));
  box-shadow:0 8px 20px rgba(239,68,68,.3);}
.btn.ghost{background:var(--card2); border:1px solid var(--line); color:var(--ink);
  box-shadow:none;}
.btn.ghost:hover{background:var(--brand); border-color:var(--brand);}
.acciones{display:flex; gap:8px; align-items:center;}
.acciones form{margin:0;}

/* ---------- Tabla ---------- */
.tabla-wrap{overflow-x:auto;}
.tabla{width:100%; border-collapse:collapse;}
.tabla th,.tabla td{text-align:left; padding:13px 12px; border-bottom:1px solid var(--line);
  font-size:14px;}
.tabla th{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.6px;}
.tabla tr:hover td{background:rgba(255,255,255,.02);}

/* ---------- Modal ---------- */
.modal{position:fixed; inset:0; z-index:60; display:none; padding:20px;
  align-items:flex-start; justify-content:center; background:rgba(2,6,16,.7); backdrop-filter:blur(4px);
  overflow-y:auto;}
.modal.open{display:flex;}
.modal-box{max-width:460px; width:100%; position:relative; margin:auto;
  max-height:calc(100vh - 40px); overflow-y:auto;}
/* el modal de crear/editar evento es más ancho para entrar en 2 columnas */
#modal-ev .modal-box{max-width:600px;}
#modal-actg .modal-box{max-width:560px;}
#modal .modal-box{max-width:580px;}
.modal-box .meta{color:var(--muted); font-size:13px; margin-top:-4px;}
.close{position:absolute; top:14px; right:16px; background:none; border:none;
  font-size:26px; color:var(--muted); cursor:pointer; line-height:1; z-index:2;}
.close:hover{color:var(--ink);}
.form-share{margin:16px 0; border-top:1px solid var(--line); padding-top:16px;}

/* formulario en 2 columnas (modal de evento) */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px; align-items:start;}
.form-grid > label{margin-bottom:13px;}
.form-grid .col-2{grid-column:1 / -1;}
@media (max-width:560px){
  .form-grid{grid-template-columns:1fr;}
  .form-grid .col-2{grid-column:auto;}
}
.form-share label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px;}
#m-acciones form:last-child{margin-top:10px;}

/* ---------- Auth (login/registro) ---------- */
.auth-body{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px;}
.auth-wrap{display:grid; grid-template-columns:1.05fr .95fr; width:100%; max-width:860px;
  background:linear-gradient(180deg,var(--card),var(--bg2));
  border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:var(--shadow);}
.auth-wrap.solo{grid-template-columns:1fr; max-width:430px;}

.auth-hero{padding:40px 36px; color:#fff; display:flex; flex-direction:column; justify-content:center;
  background:
    radial-gradient(500px 300px at 80% 0%, rgba(129,140,248,.5), transparent 60%),
    linear-gradient(160deg,#4f46e5,#312e81);}
.hero-logo{width:72px; height:72px; margin-bottom:18px; filter:drop-shadow(0 10px 24px rgba(0,0,0,.4));}
.auth-hero h2{font-size:24px; margin:0 0 10px;}
.auth-hero p{color:rgba(255,255,255,.82); font-size:14px; line-height:1.55; margin:0 0 22px;}
.hero-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px;}
.hero-list li{display:flex; align-items:center; gap:11px; font-size:13.5px; color:rgba(255,255,255,.95);}
.hero-list li span{width:30px; height:30px; flex:none; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.16); border-radius:9px; font-size:15px;}

.auth-card{padding:40px 34px; display:flex; flex-direction:column; justify-content:center;}
.brand{text-align:center; margin-bottom:24px;}
.brand-logo-img{width:54px; height:54px; margin:0 auto 10px; display:block;}
.brand h1{font-size:23px; margin:0 0 4px;}
.alert{background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.4);
  color:#fca5a5; padding:11px 14px; border-radius:11px; font-size:13.5px; margin-bottom:16px;}
.auth-foot{text-align:center; color:var(--muted); font-size:13.5px; margin:18px 0 0;}

.brand-logo-img.sm{width:34px; height:34px;}

/* ============== Responsive / Celular ============== */
@media (max-width:760px){
  .auth-wrap{grid-template-columns:1fr; max-width:420px;}
  .auth-hero{display:none;}
  .auth-card{padding:34px 26px;}
}
@media (max-width:880px){
  .layout{grid-template-columns:1fr; gap:16px;}
  .side{order:-1;} /* el formulario arriba en movil */
}
@media (max-width:680px){
  .hamb{display:flex;}
  .mainnav{position:absolute; top:64px; right:12px; left:12px;
    flex-direction:column; align-items:stretch; gap:4px;
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:8px; box-shadow:var(--shadow); display:none;}
  body.nav-open .mainnav{display:flex;}
  .mainnav a{padding:12px 14px;}
  .brand-min strong{max-width:60vw;}

  .layout{padding:16px 10px 50px;}
  .card{padding:14px 12px; border-radius:14px;}
  .cal-head{gap:10px;}
  .cal-head h2{font-size:16px; order:-1; width:auto;}
  .grid{gap:4px;}
  .grid-head{margin-bottom:4px;}
  .dow{font-size:11px;}
  .cell{min-height:58px; padding:4px; border-radius:8px; gap:3px;}
  .daynum{font-size:12px;}
  .ev-barra{padding:1px 3px; font-size:9px; border-radius:4px;}
  .ev-barra .bt{display:none;}
  .ev-barra .bi{font-size:11px; margin:0 auto;}
  .ev-barras{flex-direction:row; flex-wrap:wrap; gap:2px;}
  .ev-mas{font-size:8.5px;}
  .nav-btn{width:34px; height:34px; font-size:19px;}
  .btn-hoy{height:34px; padding:0 10px;}
  .filtro-btn{height:34px; padding:0 10px; font-size:12.5px;}
  .modal{padding:0; align-items:flex-end;}
  .modal-box{max-width:100%; border-radius:18px 18px 0 0;}

  /* tabla en tarjetas para movil */
  .tabla thead{display:none;}
  .tabla,.tabla tbody,.tabla tr,.tabla td{display:block; width:100%;}
  .tabla tr{background:var(--card2); border:1px solid var(--line);
    border-radius:12px; margin-bottom:10px; padding:6px 4px;}
  .tabla td{border:none; padding:8px 12px; display:flex; justify-content:space-between; gap:12px;}
  .tabla td::before{content:attr(data-l); color:var(--muted); font-size:12px; font-weight:600;}
  .tabla td[data-l=""]{justify-content:flex-end;}
}
@media (max-width:380px){
  .cell{min-height:50px;}
  .ev-barra:nth-child(n+3){display:none;}
}