/* =============================
   Millennials - Responsive Drop-in CSS
   Safe: only CSS. No JS or layout logic touched.
   Author: ChatGPT
   v1.1 (cleaned)
   ============================= */

/* 1) Root tokens */
:root{
  /* Colors */
  --brand:#9c0f10;
  --brand-600:#800000;
  --bg:#0e0e10;
  --surface:#17171a;
  --text:#e7e7ea;
  --muted:#b5b5bd;
  --ok:#16a34a;
  --warn:#f59e0b;
  --err:#ef4444;

  /* Spacing (4px grid) */
  --s-1:.25rem;  /* 4px */
  --s-2:.5rem;   /* 8px */
  --s-3:.75rem;  /* 12px */
  --s-4:1rem;    /* 16px */
  --s-5:1.25rem; /* 20px */
  --s-6:1.5rem;  /* 24px */
  --s-8:2rem;    /* 32px */
  --radius:1.25rem;

  /* Fluid type */
  --fs-xs: clamp(.75rem,.72rem + .25vw,.875rem);
  --fs-sm: clamp(.875rem,.82rem + .35vw,.975rem);
  --fs-md: clamp(1rem,.9rem + .6vw,1.125rem);
  --fs-lg: clamp(1.125rem,1rem + .9vw,1.375rem);
  --fs-xl: clamp(1.35rem,1.1rem + 1.5vw,1.9rem);
  --fs-2xl: clamp(1.75rem,1.35rem + 2.4vw,2.65rem);

  /* Layout */
  --container:1200px;
  --shadow:0 8px 30px rgba(0,0,0,.25);
}

/* 2) Base reset */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 var(--fs-md)/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video,canvas{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
button,input,select,textarea{ font:inherit; color:inherit; }

/* 3) Utilities */
.hidden{ display:none !important; }
.center{ display:grid; place-items:center; }
.mt-2{ margin-top:var(--s-2);} .mt-4{ margin-top:var(--s-4);} .mt-6{ margin-top:var(--s-6);}
.mb-2{ margin-bottom:var(--s-2);} .mb-4{ margin-bottom:var(--s-4);} .mb-6{ margin-bottom:var(--s-6);}
.gap-2{ gap:var(--s-2);} .gap-4{ gap:var(--s-4);} .gap-6{ gap:var(--s-6);}
.w-full{ width:100%; }
.text-muted{ color:var(--muted); }
.text-lg{ font-size:var(--fs-lg);} .text-xl{ font-size:var(--fs-xl); }

/* 4) Container */
.container{
  width:100%; max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(12px,4vw,32px);
}

/* 5) Grid helpers */
.grid{ display:grid; gap:clamp(12px,2.5vw,24px); }
.grid-auto{ grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:960px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

/* 6) Card */
.card{
  background:var(--surface); border-radius:var(--radius);
  padding:var(--s-6); box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.06);
}
.card h2,.card h3{ margin:0 0 var(--s-4); font-size:var(--fs-lg); }

/* 7) Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.62rem 1rem;
  border-radius:999px; border:1px solid transparent;
  background:var(--brand); color:#fff;
  font-weight:600; letter-spacing:.2px;
  transition:transform .05s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 4px 14px rgba(156,15,16,.35); cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--ghost{ background:transparent; color:var(--text); border-color:rgba(255,255,255,.12); box-shadow:none; }
.btn--muted{ background:#2a2a30; color:var(--text); }
.btn--ok{ background:var(--ok); }
.btn--warn{ background:var(--warn); color:#000; }
.btn--danger{ background:var(--err); }

/* 8) Forms */
.input,.select,.textarea{
  width:100%; background:#0f0f12;
  border:1px solid rgba(255,255,255,.12);
  color:var(--text); border-radius:.8rem;
  padding:.7rem .9rem; outline:none;
}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(156,15,16,.25);
}

/* form rows */
.form-row{ display:flex; gap:var(--s-4); align-items:center; flex-wrap:wrap; }
.form-row>*{ flex:1 1 280px; }

/* 9) Tables */
.table-wrap{ width:100%; overflow:auto; border-radius:var(--radius); box-shadow:var(--shadow); }
.table{
  width:100%; border-collapse:collapse; background:var(--surface);
  min-width:720px;
}
.table th,.table td{
  padding:.75rem .9rem; text-align:left; border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:top;
}
.table thead th{ position:sticky; top:0; background:#1c1c20; z-index:1; font-size:var(--fs-sm); }
.table tr:hover td{ background:rgba(255,255,255,.03); }
.table .cell-actions{ white-space:nowrap; }

/* 10) Layout: navbar / sidebar */
.navbar{
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem 1rem; background:#111114;
  border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky; top:0; z-index:1000; /* arriba del contenido */
}
.nav-left{ display:flex; align-items:center; gap:.75rem; min-width:0; }
.nav-left .logo{ width:32px; height:32px; border-radius:6px; object-fit:cover; }
.nav-title h3{ margin:0; font-weight:800; letter-spacing:.2px; }
.nav-title .user-name{ display:block; font-size:var(--fs-sm); opacity:.8; }

/* Menú principal tipo píldoras */
.nav-menu{
  display:flex; align-items:center; gap:.5rem;
  margin-left:auto; flex-wrap:wrap; position:relative; z-index:1001;
}
.nav-menu a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .9rem; border-radius:999px;
  background:#242428; border:1px solid rgba(255,255,255,.08);
  color:var(--text); font-weight:600; white-space:nowrap; text-decoration:none;
}
.nav-menu a:hover{ background:#2a2a30; }

/* Botón Salir */
.btn-logout{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem 1rem; border-radius:999px;
  background:var(--brand); color:#fff; border:1px solid transparent;
  font-weight:700; letter-spacing:.2px; box-shadow:0 4px 14px rgba(156,15,16,.35);
  text-decoration:none;
}

/* Hamburguesa */
.menu-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  border:1px solid rgba(255,255,255,.1);
  background:#1a1a1e; color:var(--text);
}

/* Sidebar + content */
.sidebar{
  width:280px; flex:0 0 auto;
  background:#121215; border-right:1px solid rgba(255,255,255,.08);
  padding:var(--s-4); position:sticky; top:64px; align-self:flex-start; border-radius:1rem;
}
.layout{ display:flex; gap:var(--s-6); }
.layout>.content{ flex:1 1 auto; min-width:0; }
@media (max-width:1100px){
  .layout{ flex-direction:column; }
  .sidebar{ width:100%; position:static; }
}

/* 11) Navbar: móvil */
@media (max-width:992px){
  .nav-left{ order:1; }
  .nav-right{ order:2; margin-left:auto; }
  #menu-toggle{ order:3; }
  .nav-menu{
    order:4; width:100%; margin:.5rem 0 0;
    flex-wrap:nowrap; overflow:auto; scrollbar-width:thin;
    gap:.5rem; padding-bottom:.25rem;
  }
  .nav-menu::-webkit-scrollbar{ height:6px; }
  .nav-menu::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:999px; }
  .btn-logout{ white-space:nowrap; }
}

/* 12) Layers / Backdrop */
[hidden]{ display:none !important; }
.nav-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  z-index:900; pointer-events:auto;
}

/* 13) Home (cards grid) */
.home-cards{
  display:grid; gap:clamp(16px,3vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  align-items:stretch; justify-items:center;
  padding-block:clamp(8px,3vw,16px);
}
.home-card{
  width:100%; max-width:380px;
  background:var(--surface); border-radius:24px;
  padding:clamp(16px,2.5vw,24px);
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.06);
}
.home-card .icon{ font-size:clamp(48px,8vw,96px); line-height:1; margin:8px auto 16px; }
.home-card .btn{ width:max-content; margin-inline:auto; }

/* 14) Footer */
.site-footer{
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.75));
  border-top:1px solid rgba(255,255,255,.08);
  padding:16px 0;
}
.site-footer .footer-inner{
  width:100%; max-width:var(--container); margin-inline:auto;
  padding-inline:clamp(12px,4vw,32px);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px 24px; flex-wrap:wrap;
}
.footer-left,.footer-center,.footer-right{ flex:1 1 240px; min-width:0; }
.footer-left{ display:flex; align-items:center; gap:.75rem; }
.footer-logo{ width:28px; height:28px; border-radius:6px; object-fit:cover; }
.footer-school .school-name{ font-weight:700; }
.footer-school .school-sub{ font-size:var(--fs-sm); opacity:.8; }
.footer-center{ text-align:center; opacity:.9; }
.footer-right{ display:flex; flex-direction:column; align-items:flex-end; gap:.25rem; }
.footer-links{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.footer-links a{ color:var(--text); opacity:.9; text-decoration:none; }
.footer-links a:hover{ text-decoration:underline; }

/* Footer: no fijo y compacto en móvil */
@media (max-width:992px){
  .site-footer{
    position:static !important; inset:auto !important;
    height:auto !important; z-index:1 !important;
    box-shadow:none !important; border-radius:0 !important;
    padding:12px 0;
  }
  body,.main{ padding-bottom:0 !important; margin-bottom:0 !important; }
}
@media (max-width:768px){
  .site-footer{ background:rgba(0,0,0,.65) !important; padding:8px 0 !important; }
  .site-footer .footer-inner{ flex-direction:column; gap:6px !important; text-align:center; }
  .footer-right{ align-items:center; }
  .footer-left{ justify-content:center; }
  .footer-logo{ width:22px; height:22px; }
  .footer-school .school-sub,.copyright{ font-size:.75rem; opacity:.7; }
}

/* 15) Motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* 16) Light mode */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f9fafb; --surface:#ffffff; --text:#111013; --muted:#565865;
    --shadow:0 8px 24px rgba(2,6,23,.08);
  }
  .navbar{ background:#ffffff; }
  .table thead th{ background:#fafafa; }
}

/* 17) Print */
@media print{
  .navbar,.sidebar,.btn,.no-print{ display:none !important; }
  body{ background:#fff; color:#000; }
  .card{ box-shadow:none; border:1px solid #ddd; }
}

/* ----- Footer: corregir estiramiento en móvil ----- */
@media (max-width: 768px){
  .site-footer .footer-inner{
    /* evita “space-between” que alarga el alto */
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column;
    gap: 6px !important;
    min-height: 0 !important;
  }
  .site-footer,
  .site-footer .footer-inner{
    margin: 0 !important;
    padding-block: 8px !important; /* compacto */
  }
}

/* ============================
   UI: ajuste responsivo 2025-09-18
   Alcance: utilidades opt-in y salvaguardas para móvil
   ============================ */

/* Medios fluidos y foco visible (a11y) */
img, svg, video, canvas { max-width: 100%; height: auto; }
:where(a, button, input, select, textarea):focus-visible{
  outline: 2px solid var(--accent, #9c0f10);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Tap targets razonables */
:where(button, .btn, [role="button"], input[type="submit"], input[type="button"]){
  min-height: 40px;
}

/* Formularios fluidos */
form :where(input, select, textarea){ width: 100%; max-width: 100%; }

/* Grillas opt-in (no rompen IDs/names) */
.r-grid-2 { display: grid; gap: 12px; grid-template-columns: 1fr; }
.r-grid-3 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 768px){
  .r-grid-2 { grid-template-columns: 1fr 1fr; }
  .r-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 1024px){
  .r-grid-3 { grid-template-columns: 2fr 1fr 1fr; }
}

/* Botoneras adaptables */
.btn-group{ display:flex; flex-wrap:wrap; gap:.5rem; }
@media (max-width: 767.98px){ .btn-group > * { flex: 1 1 140px; } }

/* Tablas: contenedor scrollable opt-in */
.r-table-scroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
/* Salvaguarda en pantallas pequeñas */
@media (max-width: 767.98px){
  table { display: block; width: 100%; overflow-x: auto; }
  thead, tbody, tr { width: max-content; }
}

/* Encabezados/acciones pegajosos bajo navbar */
.header-actions{
  position: sticky; top: var(--navbar-height, 76px); z-index: 40;
  background: inherit; padding-block: .5rem;
}

/* Espaciado vertical fluido */
.r-stack > * + * { margin-top: .75rem; }
@media (min-width: 768px){ .r-stack > * + * { margin-top: 1rem; } }

/* Cards responsivas */
.r-cards{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width: 768px){ .r-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px){ .r-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px){ .r-cards{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }