/*
 * BANDERITAS — interfaz central móvil v3.0
 * Reemplazar: /assets/css/portal.css
 */

:root{
  --red:#a52136;
  --red-dark:#791528;
  --blue:#0b438f;
  --blue-strong:#0757bd;
  --blue-soft:#eaf2ff;
  --ink:#0c2445;
  --muted:#63738a;
  --line:#dbe4f0;
  --surface:#ffffff;
  --background:#f4f7fd;
  --shadow:0 22px 60px rgba(24,43,74,.13);
  --shadow-soft:0 12px 34px rgba(24,43,74,.09);
  --radius:28px;
}

*{box-sizing:border-box}
html{
  min-width:280px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  min-height:100vh;
  min-height:100dvh;
  margin:0;
  overflow-x:hidden;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 100% 100%,rgba(238,181,192,.19),transparent 34rem),
    radial-gradient(circle at 0 0,rgba(189,211,255,.23),transparent 33rem),
    linear-gradient(135deg,#f6f9ff 0%,#f9f8fb 100%);
}
img{max-width:100%;height:auto}
a{color:var(--blue);text-decoration:none;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{touch-action:manipulation}

/* =========================
   ENCABEZADO CENTRAL
   ========================= */
.topbar{
  position:sticky;
  z-index:30;
  top:0;
  width:100%;
  min-height:72px;
  padding:9px max(14px,env(safe-area-inset-right)) 9px max(14px,env(safe-area-inset-left));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(210,220,234,.9);
  box-shadow:0 7px 25px rgba(30,48,77,.07);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.brand{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--ink);
}
.brand img{
  width:50px;
  height:50px;
  flex:0 0 50px;
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(17,42,83,.10));
}
.brand span{min-width:0}
.brand b{
  display:block;
  overflow:hidden;
  font-size:clamp(18px,5.4vw,23px);
  line-height:1.05;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.brand small{
  display:block;
  max-width:58vw;
  margin-top:4px;
  overflow:hidden;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.topbar nav{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:5px;
}
.topbar nav a{
  min-height:44px;
  padding:11px 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  color:var(--blue);
  font-size:14px;
  font-weight:800;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.topbar nav a:hover,.topbar nav a:focus-visible{background:var(--blue-soft);outline:none}
.topbar nav a:active{transform:scale(.97)}
.topbar nav a:last-child{color:var(--red)}

/* =========================
   CONTENIDO GENERAL
   ========================= */
.main{
  width:min(1180px,100%);
  margin:0 auto;
  padding:clamp(18px,4vw,38px) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));
}

.hero{
  width:min(760px,100%);
  margin:0 auto;
  padding:clamp(28px,7vw,48px) clamp(20px,7vw,52px);
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  justify-content:center;
  gap:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.95);
  border-radius:var(--radius);
  background:rgba(255,255,255,.96);
  color:var(--ink);
  text-align:center;
  box-shadow:var(--shadow);
}
.hero>div{width:100%;min-width:0}
.hero img{
  width:clamp(95px,25vw,128px);
  max-height:122px;
  object-fit:contain;
  filter:drop-shadow(0 9px 16px rgba(15,48,98,.10));
}
.eyebrow{
  display:block;
  margin-bottom:10px;
  color:var(--blue);
  font-size:12px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.hero h1,.page-head h1{
  margin:0 0 12px;
  overflow-wrap:anywhere;
  color:var(--blue);
  font-size:clamp(28px,7vw,45px);
  line-height:1.08;
  letter-spacing:-.025em;
}
.hero p,.page-head p{
  margin:0;
  color:var(--muted);
  font-size:clamp(15px,3.8vw,17px);
  line-height:1.55;
}

.module-grid{
  width:min(960px,100%);
  margin:22px auto 0;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.module-card{
  min-width:0;
  min-height:132px;
  padding:20px;
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  align-items:center;
  gap:15px;
  border:1px solid var(--line);
  border-radius:21px;
  background:rgba(255,255,255,.97);
  color:var(--ink);
  box-shadow:var(--shadow-soft);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.module-card:hover,.module-card:focus-visible{
  border-color:#b8c9e3;
  box-shadow:0 18px 42px rgba(24,43,74,.14);
  outline:none;
  transform:translateY(-3px);
}
.module-card:active{transform:scale(.985)}
.module-letter{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(145deg,var(--blue),var(--red));
  color:#fff;
  font-size:23px;
  font-weight:900;
  box-shadow:0 9px 18px rgba(23,58,111,.18);
}
.module-card h2{
  margin:0 0 5px;
  color:var(--blue);
  font-size:clamp(20px,5vw,25px);
  line-height:1.16;
}
.module-card p{
  min-height:0;
  margin:0 0 10px;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}
.module-card b{color:var(--red);font-size:14px}

.admin-note,.panel,.page-head{
  width:100%;
  min-width:0;
  padding:clamp(20px,5vw,28px);
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.97);
  box-shadow:var(--shadow-soft);
}
.admin-note{width:min(960px,100%);margin:18px auto 0}
.admin-note h2,.panel h2{margin-top:0;color:var(--blue)}
.page-head{margin-bottom:20px}

.button,button{
  min-height:44px;
  max-width:100%;
  padding:12px 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg,var(--blue-strong),var(--blue));
  color:#fff;
  font-weight:800;
  line-height:1.2;
  text-align:center;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(8,73,158,.17);
  transition:transform .17s ease,filter .17s ease,box-shadow .17s ease;
  -webkit-tap-highlight-color:transparent;
}
.button:hover,button:hover{filter:brightness(1.06);box-shadow:0 11px 24px rgba(8,73,158,.22)}
.button:focus-visible,button:focus-visible{outline:3px solid rgba(11,87,189,.23);outline-offset:3px}
.button:active,button:active{transform:scale(.98)}
.button.secondary{background:#edf2f9;color:var(--ink);box-shadow:none}

footer{
  width:100%;
  padding:26px 15px max(28px,env(safe-area-inset-bottom));
  color:#5e7088;
  font-size:14px;
  line-height:1.55;
  text-align:center;
}

/* =========================
   LOGIN — estilo solicitado
   ========================= */
.login-body{
  min-height:100vh;
  min-height:100dvh;
  padding:max(18px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 100% 100%,rgba(238,181,192,.19),transparent 31rem),
    radial-gradient(circle at 0 0,rgba(188,210,255,.22),transparent 31rem),
    linear-gradient(135deg,#f5f8ff 0%,#faf8fb 100%);
}
.login-card{
  position:relative;
  width:min(460px,100%);
  margin:auto;
  padding:clamp(30px,8vw,45px) clamp(22px,7vw,35px) clamp(28px,7vw,38px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.96);
  border-radius:28px;
  background:rgba(255,255,255,.97);
  box-shadow:0 24px 68px rgba(28,45,74,.13);
  text-align:center;
}
.login-card::before{
  content:"";
  width:clamp(100px,29vw,125px);
  height:clamp(100px,29vw,125px);
  margin:0 auto 12px;
  display:block;
  background:url('../img/logo.png') center/contain no-repeat;
  filter:drop-shadow(0 8px 13px rgba(21,56,110,.08));
}
.login-icon{display:none!important}
.login-card>.eyebrow{display:none}
.login-card h1{
  margin:0 0 8px;
  color:var(--blue);
  font-size:0;
  line-height:1.14;
  letter-spacing:0;
}
.login-card h1::before{
  content:"Programa";
  display:block;
  font-size:clamp(27px,8vw,32px);
  font-weight:900;
}
.login-card h1::after{
  content:"- BANDERITAS -";
  display:block;
  margin-top:5px;
  font-size:clamp(27px,8vw,32px);
  font-weight:900;
}
.login-card>p{
  margin:12px 0 24px;
  color:var(--muted);
  font-size:0;
}
.login-card>p::after{
  content:"Unidos Venceremos";
  font-size:16px;
}
.login-card form{
  width:100%;
  margin:0;
  display:grid;
  gap:15px;
  text-align:left;
}
label{
  min-width:0;
  display:block;
  color:#0a1425;
  font-weight:800;
  text-align:left;
}
input,select,textarea{
  width:100%;
  min-width:0;
  min-height:48px;
  margin-top:7px;
  padding:12px 14px;
  border:1px solid #c8d5e7;
  border-radius:13px;
  outline:0;
  background:#f6f9ff;
  color:var(--ink);
  font-size:16px; /* evita zoom automático en iPhone */
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
  appearance:none;
  -webkit-appearance:none;
}
textarea{min-height:112px;resize:vertical}
input:focus,select:focus,textarea:focus{
  border-color:var(--blue-strong);
  background:#edf4ff;
  box-shadow:0 0 0 3px rgba(7,87,189,.17);
}
.login-card input{
  min-height:47px;
  border-color:#bfd0e8;
  background:#edf4ff;
}
.login-card button{
  width:100%;
  min-height:48px;
  margin-top:4px;
  border-radius:12px;
  background:linear-gradient(90deg,#1244a1,#0862c8);
  box-shadow:none;
  font-size:15px;
}
.login-card>small{
  display:block;
  margin-top:22px;
  color:#60738c;
  font-size:0;
  line-height:1.5;
}
.login-card>small::after{
  content:"© 2026 Mtro. Luis Enrique Hernández García y MAC. Erika Hernández García - Todos los derechos reservados.";
  font-size:14px;
}
.alert{
  width:100%;
  margin:0 0 17px;
  padding:12px 14px;
  border-radius:12px;
  font-size:14px;
  line-height:1.4;
  text-align:left;
}
.alert.error{background:#fdebed;color:#8a1728}
.alert.success{background:#e7f6ee;color:#14643a}
.alert.info{background:#e8f1fc;color:#123f70}

/* =========================
   USUARIOS Y TABLAS
   ========================= */
.users-layout{display:grid;grid-template-columns:1fr;gap:18px}
.panel{overflow:hidden}
.form-grid{display:grid;grid-template-columns:1fr;gap:15px}
.check{display:flex;gap:9px;align-items:center}
.check input,.module-toggle input,.tab-list input{
  width:20px;
  min-height:20px;
  margin:0;
  flex:0 0 20px;
  appearance:auto;
  -webkit-appearance:auto;
}
.permissions{margin-top:22px;display:grid;gap:14px}
.permissions section{overflow:hidden;border:1px solid var(--line);border-radius:15px}
.module-toggle{padding:14px;display:flex;align-items:center;gap:9px;background:#edf3fa}
.tab-list{padding:14px;display:grid;grid-template-columns:1fr;gap:11px}
.tab-list label{display:flex;align-items:flex-start;gap:8px;font-weight:500;line-height:1.35}
.actions{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.actions>*{width:100%}
.table-wrap{
  width:100%;
  overflow-x:auto;
  border-radius:13px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
table{width:100%;min-width:620px;border-collapse:collapse}
th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{background:#f2f6fb;color:var(--blue)}
.status{padding:5px 9px;border-radius:99px;font-size:12px;font-weight:800}
.status.on{background:#e6f5ec;color:#17653b}
.status.off{background:#f6e7e9;color:#8b1c2c}
.danger-link{color:var(--red)}

/* =========================
   TELÉFONOS MUY PEQUEÑOS
   ========================= */
@media (max-width:390px){
  .topbar{gap:8px;padding-inline:9px}
  .brand{gap:7px}
  .brand img{width:42px;height:42px;flex-basis:42px}
  .brand b{font-size:18px}
  .brand small{display:none}
  .topbar nav a{padding-inline:8px;font-size:13px}
  .main{padding-inline:9px}
  .hero{padding:27px 17px;border-radius:23px}
  .module-card{padding:16px;grid-template-columns:46px minmax(0,1fr)}
  .module-letter{width:46px;height:46px;border-radius:14px;font-size:20px}
  .module-card p{font-size:13px}
  .login-body{padding-inline:9px}
  .login-card{padding-inline:18px;border-radius:24px}
  .login-card>small::after{font-size:13px}
}

/* =========================
   TABLETAS Y COMPUTADORAS
   ========================= */
@media (min-width:640px){
  .topbar{padding-inline:clamp(24px,5vw,58px)}
  .main{padding-inline:24px}
  .module-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .actions{flex-direction:row;flex-wrap:wrap}
  .actions>*{width:auto}
  .form-grid,.tab-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:960px){
  .topbar{min-height:82px}
  .brand img{width:55px;height:55px;flex-basis:55px}
  .main{padding-top:34px}
  .hero{width:min(820px,100%)}
  .module-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .module-card{display:flex;align-items:flex-start;min-height:225px;padding:25px}
  .module-card p{min-height:86px}
  .users-layout{grid-template-columns:minmax(0,1.35fr) minmax(360px,.85fr);gap:22px}
}

/* Pantallas horizontales de poca altura */
@media (max-height:620px) and (orientation:landscape){
  .login-body{align-items:flex-start;padding-block:12px}
  .login-card{padding-top:20px;padding-bottom:20px}
  .login-card::before{width:76px;height:76px;margin-bottom:2px}
  .login-card h1::before,.login-card h1::after{font-size:24px}
  .login-card>p{margin:7px 0 14px}
  .login-card form{gap:10px}
  .login-card>small{margin-top:14px}
}

/* Accesibilidad */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}