@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap");
/* ===========================================================
   AcademIA — estilos base (marca propia)
   =========================================================== */
:root{
  --ink:#161a27; --muted:#5b6376; --faint:#8a91a3;
  --paper:#ffffff; --soft:#f5f6fb; --line:#e6e8f1;
  --ai1:#4f46e5; --ai2:#06b6d4;
  --doc:#0ea5a4; --pas:#e07a35; --bot:#6d5ce6;
  --ok:#0f9d6b; --danger:#dc2f45;
  --sidebar:#171b2e;
  --radius:13px;
  --shadow:0 1px 3px rgba(20,25,45,.06), 0 8px 24px rgba(20,25,45,.05);
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--ink); background:var(--soft);
  font-family:"Helvetica Neue",-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:14px; line-height:1.5;
}
a{color:var(--ai1); text-decoration:none}
h1,h2,h3{margin:0; letter-spacing:-.3px}

/* ---------- Layout con sidebar ---------- */
.app{display:grid; grid-template-columns:248px 1fr; min-height:100vh}
.sidebar{
  background:var(--sidebar); color:#cfd4ea; padding:20px 14px;
  display:flex; flex-direction:column; gap:6px; position:sticky; top:0; height:100vh;
}
.brand{display:flex; align-items:center; gap:11px; padding:6px 8px 18px}
.brand .logo{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:18px;
  background:linear-gradient(135deg,var(--ai1),var(--ai2));
  box-shadow:0 6px 18px rgba(79,70,229,.45);
}
.brand .logo img{width:40px; height:40px; display:block; object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(19,110,246,.45));}
.brand b{color:#fff; font-size:15px; display:block; line-height:1.1}
.brand span{font-size:9px; letter-spacing:1.5px; color:#7d85ad; text-transform:uppercase}
.nav-label{font-size:9px; letter-spacing:1.5px; color:#6b7297; text-transform:uppercase; padding:12px 10px 4px}
.nav a{
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px;
  color:#c3c9e4; font-size:13.5px; font-weight:500;
}
.nav a:hover{background:rgba(255,255,255,.06); color:#fff}
.nav a.active{background:linear-gradient(100deg,var(--ai1),var(--ai2)); color:#fff}
.nav a .ic{width:18px; text-align:center; font-size:15px}
.sidebar .spacer{flex:1}
.sidebar .foot{border-top:1px solid rgba(255,255,255,.08); padding-top:12px; font-size:12px}
.sidebar .foot a{color:#9aa1c6}

/* ---------- Contenido ---------- */
.main{padding:26px 30px 60px; min-width:0}  /* min-width:0: una tabla ancha hace scroll dentro, no estira la página */
.topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px}
.topbar h1{font-size:22px}
.topbar .who{font-size:12.5px; color:var(--muted)}
.badge-rol{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:3px 9px; border-radius:100px; background:var(--soft); border:1px solid var(--line); color:var(--muted)}
.badge-rol.admin{background:#eeeafc; color:var(--bot); border-color:#e0d9fb}
.badge-rol.docente{background:#e7f7f6; color:var(--doc); border-color:#cdeeec}
.badge-rol.pastor{background:#fdefe2; color:var(--pas); border-color:#f8ddc4}
.badge-rol.estudiante{background:#e9edff; color:var(--ai1); border-color:#d7deff}

/* ---------- Tarjetas ---------- */
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.card.pad{padding:20px 22px}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px}
.stat{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow)}
.stat .n{font-size:30px; font-weight:800; letter-spacing:-1px; line-height:1}
.stat .l{font-size:12px; color:var(--muted); margin-top:5px}
.stat.t-est .n{color:var(--ai1)} .stat.t-doc .n{color:var(--doc)}
.stat.t-pas .n{color:var(--pas)} .stat.t-adm .n{color:var(--bot)}

/* ---------- Tablas ---------- */
table{width:100%; border-collapse:collapse}
th,td{text-align:left; padding:11px 12px; font-size:13px}
th{font-size:11px; letter-spacing:.4px; text-transform:uppercase; color:var(--faint); border-bottom:1px solid var(--line)}
tbody tr{border-bottom:1px solid var(--line)}
tbody tr:hover{background:var(--soft)}
.avatar{width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--ai1),var(--ai2)); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:12px}

/* ---------- Formularios / botones ---------- */
label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin:0 0 5px}
input,select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:9px;
  font-size:14px; font-family:inherit; background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--ai1); box-shadow:0 0 0 3px rgba(79,70,229,.13)}
.field{margin-bottom:14px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:none;
  background:linear-gradient(100deg,var(--ai1),var(--ai2)); color:#fff;
  font-size:14px; font-weight:600; padding:10px 18px; border-radius:9px;
}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:#fff; color:var(--ink); border:1px solid var(--line)}
.btn.sm{padding:6px 12px; font-size:12.5px}
.msg{padding:10px 13px; border-radius:9px; font-size:13px; margin-bottom:12px; display:none}
.msg.err{background:#fdecef; color:var(--danger); display:block}
.msg.ok{background:#e7f7f0; color:var(--ok); display:block}

/* ---------- Barra superior móvil + overlay (ocultos en desktop) ---------- */
.mtopbar{display:none}
.sidebar-overlay{display:none}

/* Tablas con scroll horizontal en pantallas chicas (wrapper auto) */
.tbl-wrap{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ===========================================================
   RESPONSIVE — tablet e iPad (≤ 1000px) y celular (≤ 640px)
   =========================================================== */
@media (max-width: 1000px){
  .app{grid-template-columns:1fr}

  /* Barra superior con hamburguesa */
  .mtopbar{
    display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:850;
    background:var(--sidebar); color:#fff; padding:11px 16px;
  }
  .mtopbar-burger{
    background:rgba(255,255,255,.1); border:none; color:#fff; width:40px; height:40px;
    border-radius:10px; font-size:20px; cursor:pointer; line-height:1; flex:0 0 auto;
  }
  .mtopbar-brand{display:flex; align-items:center; gap:9px; font-weight:700; font-size:15px}
  .mtopbar-brand img{width:28px; height:28px; object-fit:contain}

  /* Sidebar como cajón deslizable */
  .sidebar{
    position:fixed; top:0; left:0; z-index:1100; width:264px; max-width:84vw; height:100vh;
    transform:translateX(-102%); transition:transform .25s ease; box-shadow:0 0 50px rgba(0,0,0,.45);
  }
  .app.nav-open .sidebar{transform:translateX(0)}
  .sidebar-overlay{
    position:fixed; inset:0; background:rgba(10,15,30,.5); z-index:1050; display:none;
  }
  .app.nav-open .sidebar-overlay{display:block}

  .main{padding:20px 20px 90px}
  .topbar{flex-wrap:wrap; gap:10px}
  .topbar h1{font-size:20px}
  .stats{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 640px){
  .main{padding:16px 13px 90px}
  .topbar h1{font-size:18px}
  .grid2{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr; gap:10px}
  .stat .n{font-size:24px}
  .card.pad{padding:15px 15px}
  /* botones y tablas más compactos */
  .btn{padding:9px 14px; font-size:13.5px}
  th,td{padding:9px 9px; font-size:12.5px}
  .tbl-wrap table{min-width:540px}   /* fuerza scroll horizontal en móvil */
}

/* ===========================================================
   TEMA UPeU (oct-2026) — el tono del anuncio «Hola, Camila»:
   azul marino + azul vivo + celeste + amarillo, tarjetas redondeadas,
   títulos gruesos y botón amarillo. Lo heredan TODAS las pantallas.
   =========================================================== */
:root{
  --marino:#013d84; --marino2:#012a5c; --azul:#056ce8; --celeste:#5fb6fe; --amarillo:#ffd23f; --amarillo2:#e3ae0a;
  --ink:#0f2347; --muted:#51607e; --faint:#8494b3;
  --soft:#eef4ff; --line:#d9e5f7;
  --ai1:#056ce8; --ai2:#5fb6fe;
  --doc:#0a8f8e; --pas:#f39c12; --bot:#056ce8;
  --ok:#2fa84f; --danger:#e0364f;
  --sidebar:#013d84;
  --radius:18px;
  --shadow:0 2px 6px rgba(1,61,132,.06), 0 12px 30px rgba(1,61,132,.08);
}
body{
  font-family:"Nunito","Helvetica Neue",-apple-system,"Segoe UI",Arial,sans-serif; font-size:14.5px;
  background:
    radial-gradient(900px 420px at 100% -8%, rgba(95,182,254,.28), transparent 70%),
    radial-gradient(700px 360px at -10% 105%, rgba(255,210,63,.16), transparent 70%),
    #eef4ff;
  background-attachment:fixed;
}
h1,h2,h3{font-weight:900; color:var(--marino); letter-spacing:-.4px}

/* menú lateral azul marino con el activo en amarillo */
.sidebar{background:linear-gradient(180deg,var(--marino) 0%,var(--marino2) 100%); color:#d6e6ff}
.brand .logo{background:linear-gradient(135deg,var(--azul),var(--celeste)); box-shadow:0 6px 18px rgba(5,108,232,.5)}
.brand span,.nav-label{color:#8fb2e6}
.nav a{color:#d6e6ff; border-radius:12px; font-weight:700}
.nav a:hover{background:rgba(255,255,255,.1)}
.nav a.active{background:var(--amarillo); color:var(--marino); box-shadow:0 4px 0 var(--amarillo2)}
.sidebar .foot{border-top-color:rgba(255,255,255,.14)}
.sidebar .foot a{color:#b9d2f5}
.mtopbar{background:var(--marino)}

/* títulos de página */
.topbar h1{font-size:26px; font-weight:900; color:var(--marino)}
.topbar .who{font-size:13.5px; color:var(--muted)}

/* tarjetas */
.card{border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.stat{border-radius:var(--radius)}
.stat .n{font-weight:900; color:var(--marino)}

/* tablas */
th{color:var(--marino); font-weight:800; opacity:.75}
tbody tr:hover{background:#f3f8ff}
.avatar{background:linear-gradient(135deg,var(--azul),var(--celeste))}

/* formularios */
input,select,textarea{border:1.5px solid var(--line); border-radius:12px; background:#fbfdff}
input:focus,select:focus,textarea:focus{border-color:var(--azul); box-shadow:0 0 0 4px rgba(5,108,232,.14); background:#fff}
label{color:var(--marino); font-weight:700}

/* botones: el principal es la píldora AMARILLA del anuncio */
.btn{background:var(--amarillo); color:var(--marino); font-weight:900; border-radius:999px; padding:11px 22px; white-space:nowrap;
     box-shadow:0 4px 0 var(--amarillo2), 0 8px 18px rgba(227,174,10,.25); transition:transform .1s, box-shadow .1s}
.btn:hover{filter:none; transform:translateY(-1px)}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--amarillo2)}
.btn.ghost{background:#fff; color:var(--marino); border:1.5px solid var(--line); box-shadow:0 2px 0 var(--line)}
.btn.sm{padding:7px 14px; font-size:12.5px; box-shadow:0 3px 0 var(--amarillo2)}
.btn.ghost.sm{box-shadow:0 2px 0 var(--line)}
.btn:disabled{opacity:.55; transform:none}
.msg{border-radius:12px}
.badge-rol{border-radius:999px}

/* ===========================================================
   VENTANA FLOTANTE común: cualquier tarjeta con class="ui-flotante"
   queda oculta y se abre con un botón data-abrir="#id" (o uiAbrir('id')).
   Así los formularios (editar perfil, crear curso…) no ocupan la página.
   =========================================================== */
.ui-fondo{position:fixed; inset:0; z-index:8000; background:rgba(1,24,61,.5); backdrop-filter:blur(3px);
  display:flex; align-items:flex-start; justify-content:center; padding:5vh 14px; overflow-y:auto}
.ui-fondo[hidden]{display:none!important}
.ui-fondo > .ui-flotante{position:relative; width:100%; max-width:680px; margin:0!important; border:0;
  border-radius:24px; box-shadow:0 30px 80px rgba(1,30,80,.4); animation:uiIn .25s ease; padding:26px 26px 22px}
.ui-fondo > .ui-flotante::before{content:''; position:absolute; left:0; right:0; top:0; height:7px; border-radius:24px 24px 0 0;
  background:linear-gradient(90deg,var(--marino),var(--azul),var(--amarillo))}
.ui-fondo > .ui-flotante > h3:first-of-type{font-size:20px!important; padding-right:40px}
.ui-cerrar{position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:#eef4ff; color:var(--marino); font-size:15px; font-weight:800}
.ui-cerrar:hover{background:#dbe8ff}
@keyframes uiIn{from{opacity:0; transform:translateY(14px) scale(.98)} to{opacity:1; transform:none}}
body.ui-modal-abierto{overflow:hidden}
.ui-acciones{display:flex; gap:8px; flex-wrap:wrap}
@media (max-width:640px){ .ui-fondo{padding:2vh 8px} .ui-fondo > .ui-flotante{padding:22px 16px 18px; border-radius:20px} }

/* ===========================================================
   MEDITACIÓN DEL DÍA con el tono UPeU (como el anuncio de la encuesta):
   franja azul marino con logo, saludo con el nombre, versículo en tarjeta cálida,
   partes en tarjetas de color con ícono y botón amarillo «Amén».
   («body …» para ganar a los estilos propios de cada página.)
   =========================================================== */
body .med-card{background:linear-gradient(120deg,var(--marino) 0%,var(--azul) 100%); box-shadow:0 14px 34px rgba(1,61,132,.32); border-radius:22px}
body .med-card:hover{box-shadow:0 20px 44px rgba(1,61,132,.42)}
body .med-c-glow{background:radial-gradient(circle,rgba(255,210,63,.45),transparent 70%)}
body .med-c-lbl{color:var(--amarillo)}
body .med-c-cta{background:var(--amarillo); color:var(--marino); box-shadow:0 3px 0 var(--amarillo2)}

body .med-modal{background:rgba(1,24,61,.55); backdrop-filter:blur(4px)}
body .med-sheet{max-width:560px; padding:0 0 22px; color:var(--ink); background:#f4f8ff; border-radius:26px; box-shadow:0 30px 80px rgba(1,30,80,.45)}
body .med-stars{display:none}
body .med-top{position:relative; display:flex; align-items:center; gap:12px; background:var(--marino); padding:16px 60px 30px 22px; border-bottom-right-radius:60% 46px}
body .med-logo{height:30px; display:block}
body .med-top-lbl{color:#cfe3ff; font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase}
body .med-x{background:rgba(255,255,255,.92); color:var(--marino)}
body .med-x:hover{background:#fff}
body .med-head{padding:0 22px 14px; margin-top:-18px}
body .med-head-ico{width:66px; height:66px; border-radius:50%; background:var(--amarillo); box-shadow:0 6px 0 var(--amarillo2), 0 12px 26px rgba(227,174,10,.35); font-size:32px}
body .med-hola{display:block; font-size:14px; color:var(--muted); margin-bottom:2px}
body .med-hola b{color:var(--azul)}
body .med-head-lbl{font-size:clamp(24px,5vw,30px); font-weight:900; color:var(--marino); letter-spacing:-.4px}
body .med-head-min{color:var(--muted)}
body .med-vers{margin:4px 22px 16px; background:#fff4d6; box-shadow:none; border-radius:20px; padding:22px 22px 18px}
body .med-quote{color:rgba(227,174,10,.55)}
body .med-vers p{color:var(--marino)}
body .med-vers cite{color:#a67800}
body .med-sec{margin:0 22px 12px; padding:14px 16px; border-radius:18px; background:#e1efff}
body .med-sec:has(.med-sec-lbl.verde){background:#e5f6e8}
body .med-sec-lbl{display:flex; align-items:center; gap:8px; color:var(--marino); font-size:12px; letter-spacing:.5px}
body .med-sec-lbl i{font-style:normal; width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#bcd9ff; font-size:15px}
body .med-sec-lbl.verde i{background:#a6dfb0}
body .med-body{color:var(--ink); font-size:14.5px}
body .med-llamado{margin:4px 22px 0; color:var(--marino); background:#fff; box-shadow:inset 0 0 0 2px var(--amarillo); border-radius:18px}
body .med-llamado-lbl{color:#a67800}
body .med-foot{color:var(--muted); margin-top:16px; padding:0 22px}
body .med-amen{display:block; margin:14px auto 0; border:0; border-radius:999px; padding:13px 34px; background:var(--amarillo); color:var(--marino);
  font:inherit; font-size:17px; font-weight:900; cursor:pointer; box-shadow:0 6px 0 var(--amarillo2), 0 10px 22px rgba(227,174,10,.3)}
body .med-amen:active{transform:translateY(3px); box-shadow:0 2px 0 var(--amarillo2)}