/* =========================================================================
   bioBIR · campus-estilo.css
   -------------------------------------------------------------------------
   LA HOJA DE ESTILO COMÚN DEL CAMPUS.

   Antes cada página llevaba su propio bloque <style> con sus propios
   colores, sus propios radios y su propia tipografía. Resultado: 78
   páginas que se parecían pero no eran iguales, y cambiar un color
   significaba abrir 78 archivos.

   Ahora la tipografía, los colores, los radios, las sombras y los
   componentes comunes (barra lateral, tarjetas, botones, tablas, avisos,
   toasts) viven AQUÍ. Cada página solo escribe lo que tiene de particular.

   PARA USARLA, en el <head> de cualquier página:

     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="campus-estilo.css">

   TIPOGRAFÍA (la misma familia en todo el campus):
     --display  Fraunces   → titulares. Serif moderna, con carácter.
     --texto    Manrope    → todo el texto corrido.
     --dato     DM Mono    → números: cuentas atrás, notas, horas, contadores.
                             Monoespaciada para que las cifras no bailen.
     --logo     Quicksand  → solo el logotipo y la barra lateral.

   COLOR: el verde de bioBIR. Los nombres son los de siempre
   (--verde, --lima, --naranja) para no romper nada, y además están los
   tonos numerados por si necesitas un intermedio.
   ========================================================================= */

:root{
  /* ── Verdes de la marca ── */
  --g900:#0f2412; --g800:#1a3d1e; --g700:#2e6b35; --g600:#3a8642;
  --g500:#4cb848; --g400:#72cc6e; --g300:#a3dfa0; --g100:#eaf5ea; --g50:#f4faf4;

  /* ── Neutros ── */
  --n900:#111714; --n700:#2a3a2d; --n500:#4d6451; --n300:#8ca390;
  --n100:#dce8dd; --n50:#f8faf8;

  /* ── Acento ── */
  --naranja:#e8793a; --naranja-cl:#fdf0e8; --naranja-txt:#a84d1c;

  /* ── Alias de siempre (para que el código antiguo siga funcionando) ── */
  --verde:var(--g900); --verde-m:var(--g800); --verde-l:var(--g700);
  --lima:var(--g500); --lima-cl:var(--g400);
  --tinta:var(--g900); --gris:var(--n500); --gris-2:var(--n300);
  --papel:#f2f8f2; --niebla:#fff; --blanco:#fff; --crema:var(--g50);
  --borde:var(--n100); --borde-2:#c7d8c9; --bg:var(--papel);
  --error:#c2334a; --ok:var(--g600);

  /* ── Tipografía ── */
  --display:'Fraunces',Georgia,serif;
  --texto:'Manrope',system-ui,-apple-system,sans-serif;
  --dato:'DM Mono',ui-monospace,SFMono-Regular,monospace;
  --logo:'Quicksand','Manrope',sans-serif;
  --font-display:var(--display);   /* alias antiguos de bioBIR */
  --font-body:var(--texto);
  --font-mono:var(--dato);

  /* ── Forma ── */
  --r:14px; --r-s:10px; --r-l:18px; --r-xl:24px;
  --radius-sm:var(--r-s); --radius-md:12px; --radius-lg:var(--r-l); --radius-xl:var(--r-xl);
  --lateral-w:262px; --sidebar-w:var(--lateral-w);

  /* ── Sombras ── */
  --sombra:0 1px 2px rgba(15,36,18,.05),0 8px 24px rgba(15,36,18,.06);
  --sombra-lg:0 12px 40px rgba(15,36,18,.12);
  --shadow-sm:0 1px 3px rgba(15,36,18,.06),0 1px 2px rgba(15,36,18,.04);
  --shadow-md:0 4px 16px rgba(15,36,18,.08),0 2px 6px rgba(15,36,18,.05);
  --shadow-lg:var(--sombra-lg);
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  font-family:var(--texto); color:var(--n900); background:var(--papel);
  line-height:1.55; min-height:100vh; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.015em;line-height:1.25}
:focus-visible{outline:3px solid var(--g500);outline-offset:2px;border-radius:6px}

/* La trama de puntos del fondo. Va en un div .malla a pantalla completa
   (o directamente en el body con la clase .con-malla). */
.malla{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle at 1px 1px,rgba(46,107,53,.10) 1px,transparent 0);
  background-size:26px 26px}

/* ── Tipos de letra de apoyo ──────────────────────────────────────────── */
.dato{font-family:var(--dato);font-weight:500;font-variant-numeric:tabular-nums}
.eyebrow{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--g600);font-weight:800;font-family:var(--texto)}

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;font-size:.92rem;border-radius:999px;padding:.65rem 1.2rem;
  transition:transform .15s,box-shadow .2s,background .2s,border-color .2s}
.btn:active{transform:translateY(1px)}
.btn-lima,.btn-verde{background:var(--g500);color:#fff}
.btn-lima:hover,.btn-verde:hover{background:var(--g600);box-shadow:0 6px 18px rgba(76,184,72,.32)}
.btn-oscuro{background:var(--g900);color:#fff}
.btn-oscuro:hover{background:var(--g800)}
.btn-naranja{background:var(--naranja);color:#fff}
.btn-naranja:hover{background:#d46a2e}
.btn-linea{background:transparent;border:1.5px solid var(--borde-2);color:var(--n700)}
.btn-linea:hover{border-color:var(--g500);color:var(--g700)}
.btn[disabled],.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* ── Barra lateral ────────────────────────────────────────────────────── */
.con-lateral{display:grid;grid-template-columns:var(--lateral-w) 1fr;min-height:100vh}
.lateral{position:sticky;top:0;height:100vh;overflow-y:auto;z-index:30;
  background:var(--g900);color:#dbe8dc;display:flex;flex-direction:column;
  padding:1.3rem 1rem}
.lateral .logo{font-family:var(--logo);font-weight:700;font-size:1.5rem;
  padding:.2rem .4rem 1.2rem;letter-spacing:-.01em}
.lateral .logo .a{color:var(--g400)}
.lateral .logo .b{color:var(--naranja)}
.lateral .logo-sub{font-size:.72rem;color:#8fae94;margin-top:-1rem;padding:0 .4rem 1rem}
.perfil{display:flex;align-items:center;gap:.7rem;padding:.6rem;border-radius:var(--r-s);
  background:rgba(255,255,255,.06);margin-bottom:1.2rem;transition:background .15s}
.perfil:hover{background:rgba(255,255,255,.12)}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--g600);display:grid;
  place-items:center;font-weight:800;color:#fff;font-size:1.05rem;overflow:hidden;flex:0 0 auto}
.avatar img{width:100%;height:100%;object-fit:cover}
.perfil .quien{line-height:1.2;overflow:hidden}
.perfil .quien b{display:block;font-size:.92rem;color:#fff;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.perfil .quien span{font-size:.74rem;color:#93b398}
.nav-tit{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:#7d9b83;
  margin:1.1rem .5rem .4rem;font-weight:700}
.lateral nav a{display:flex;align-items:center;gap:.7rem;padding:.6rem .65rem;
  border-radius:var(--r-s);font-size:.92rem;font-weight:600;color:#c6d8c9;
  transition:background .15s,color .15s}
.lateral nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.lateral nav a.activo{background:rgba(76,184,72,.18);color:#fff}
.lateral nav a .ic{width:20px;text-align:center}
.salir{margin-top:auto;padding-top:1rem}
.salir button{width:100%;display:flex;justify-content:center;color:#c6d8c9;
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-s);padding:.6rem;
  font-weight:700;font-size:.88rem}
.salir button:hover{background:rgba(255,255,255,.08);color:#fff}
.abrir-menu{display:none}

/* ── Contenido ────────────────────────────────────────────────────────── */
.principal{position:relative;z-index:1;padding:2rem 2.2rem 3rem;max-width:1080px}
.saludo{font-family:var(--display);font-weight:600;font-size:2rem;letter-spacing:-.02em}
.saludo .nom{color:var(--g600)}
.hoy{color:var(--n500);font-size:.92rem;margin-top:.15rem;text-transform:capitalize}
.lead{color:var(--n500);font-size:1rem;max-width:62ch;margin-top:.4rem}
.sec-tit{display:flex;align-items:baseline;gap:.6rem;margin:0 0 1rem;flex-wrap:wrap}
.sec-tit h2{font-family:var(--display);font-weight:600;font-size:1.35rem}
.sec-tit span{font-size:.82rem;color:var(--n500)}
.sec-tit .hint{margin-left:auto;font-size:.76rem;color:var(--n300);
  display:inline-flex;align-items:center;gap:.35rem}

/* ── Barra superior (páginas sin lateral: login, pago, index) ─────────── */
.topbar{background:var(--g900);padding:.9rem 2rem;display:flex;align-items:center;
  justify-content:space-between;color:#fff}
.topbar .logo{font-family:var(--logo);font-weight:700;font-size:1.35rem;letter-spacing:-.02em}
.topbar .logo .bio,.topbar .logo .a{color:var(--g400)}
.topbar .logo .bir,.topbar .logo .b{color:var(--naranja)}
.topbar-sub{font-size:.72rem;color:rgba(255,255,255,.45)}

/* ── Tarjetas ─────────────────────────────────────────────────────────── */
.card,.bloque-card{background:var(--niebla);border:1px solid var(--borde);
  border-radius:var(--r);box-shadow:var(--sombra)}
.bloque-card{padding:1.3rem 1.4rem}
.bloque-card h3{font-family:var(--display);font-weight:600;font-size:1.1rem;margin-bottom:.9rem}
.grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.fila2{display:grid;grid-template-columns:1.4fr 1fr;gap:1.2rem;margin-top:2rem}
.fila3{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.2rem}

/* Tarjeta de acceso (las del hub del campus) */
.acceso-card{position:relative;overflow:hidden;background:var(--niebla);
  border:1px solid var(--borde);border-radius:var(--r);box-shadow:var(--sombra);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.acceso-card:hover{transform:translateY(-3px);box-shadow:var(--sombra-lg);border-color:var(--borde-2)}
.acceso-card .barra{position:absolute;top:0;left:0;right:0;height:3px;background:var(--g400);
  transform:scaleX(0);transform-origin:left;transition:transform .25s}
.acceso-card:hover .barra{transform:scaleX(1)}
.acceso{padding:1.2rem;display:flex;flex-direction:column;gap:.5rem}
.acceso .em{font-size:1.7rem}
.acceso h3{font-size:1.02rem;font-weight:700;font-family:var(--texto)}
.acceso p{font-size:.84rem;color:var(--n500);flex:1}
.acceso .ir{font-size:.82rem;font-weight:700;color:var(--g600)}

/* Bloqueada por el goteo de contenido (data-asig) */
.bloqueado{opacity:.5;filter:grayscale(.7);cursor:not-allowed;position:relative}
.bloqueado::after{content:"🔒";position:absolute;top:.6rem;right:.7rem;font-size:1rem;opacity:.85}
.bloqueado:hover{transform:none;box-shadow:var(--sombra)}

/* ── Etiquetas y badges ───────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;
  padding:.22rem .6rem;border-radius:999px;line-height:1.5}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.b-ok{background:var(--g100);color:var(--g700)}
.b-info{background:#e8f0f7;color:#26536f}
.b-warn{background:var(--naranja-cl);color:var(--naranja-txt)}
.b-off{background:#eef1ee;color:var(--n500)}

/* Punto del color de la asignatura (calendario, listas de clases) */
.bolo{width:9px;height:9px;border-radius:50%;flex:0 0 auto;display:inline-block;
  background:var(--n300);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}

/* ── Notas y avisos ───────────────────────────────────────────────────── */
.nota{display:flex;gap:.7rem;align-items:flex-start;background:var(--g100);
  border:1px solid #cfe6d0;border-left:4px solid var(--g500);border-radius:var(--r-s);
  padding:.85rem 1.1rem;font-size:.88rem;color:var(--n700);line-height:1.6}
.nota-aviso{background:var(--naranja-cl);border-color:#f6d6c2;border-left-color:var(--naranja);
  color:var(--naranja-txt)}
.nota-error{background:#fdeef0;border-color:#f3ccd3;border-left-color:var(--error);color:#8f2436}

/* ── Tablas ───────────────────────────────────────────────────────────── */
.tabla{width:100%;border-collapse:collapse;font-size:.9rem}
.tabla th{text-align:left;font-family:var(--texto);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--n500);font-weight:800;padding:.6rem .7rem;
  border-bottom:1px solid var(--borde)}
.tabla td{padding:.65rem .7rem;border-bottom:1px solid var(--borde);vertical-align:top}
.tabla tbody tr:hover{background:var(--g50)}
.tabla .num{font-family:var(--dato);font-variant-numeric:tabular-nums}

/* ── Formularios ──────────────────────────────────────────────────────── */
.campo{width:100%;border:1.5px solid var(--borde);border-radius:var(--r-s);
  padding:.7rem .9rem;font-size:.94rem;background:#fff;transition:border-color .15s,box-shadow .15s}
.campo:focus{outline:none;border-color:var(--g500);box-shadow:0 0 0 3px rgba(76,184,72,.16)}
.campo::placeholder{color:var(--n300)}
.etiqueta{display:block;font-size:.78rem;font-weight:700;color:var(--n500);margin-bottom:.3rem}
.error-txt{display:none;color:var(--error);font-size:.8rem;margin-top:.35rem}
.error-txt.show{display:block}

/* ── Toast ────────────────────────────────────────────────────────────── */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--g900);color:#fff;padding:.65rem 1.3rem;border-radius:999px;
  font-size:.85rem;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.2);
  z-index:9999;opacity:0;transition:opacity .3s,transform .3s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Cuenta atrás del examen ──────────────────────────────────────────── */
.cuenta{margin:1.5rem 0;background:linear-gradient(135deg,var(--g900),var(--g800) 55%,var(--g700));
  color:#fff;border-radius:var(--r-l);padding:1.4rem 1.8rem 1.6rem;position:relative;
  overflow:hidden;box-shadow:var(--sombra-lg)}
.cuenta::after{content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;
  background:radial-gradient(circle,rgba(76,184,72,.38),transparent 70%);pointer-events:none}
.cuenta .et{font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--g400);font-weight:700}
.cuenta .reloj{display:flex;gap:1.4rem;margin-top:.7rem;flex-wrap:wrap;position:relative;z-index:2}
.cuenta .bloque{text-align:center}
.cuenta .bloque .n{font-family:var(--dato);font-size:2.6rem;font-weight:500;line-height:1;
  font-variant-numeric:tabular-nums}
.cuenta .bloque .l{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  color:#b3ccb6;margin-top:.3rem}
.cuenta .meta{margin-top:.9rem;font-size:.9rem;color:#cfe3d1;text-transform:capitalize}

/* ── Animación de entrada ─────────────────────────────────────────────── */
@keyframes surge{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.surge{opacity:0;animation:surge .5s ease forwards}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media(max-width:900px){
  .con-lateral{grid-template-columns:1fr}
  /* min-width:0 es lo que le permite encoger: como es una celda de la
     rejilla, por defecto se niega a bajar del ancho de su contenido más
     largo y empuja la página hacia fuera en pantallas de 320 px.
     Y overflow-x:clip corta adornos y animaciones que asomen, sin romper
     los sticky (a diferencia de overflow:hidden). */
  .principal{padding:3.2rem 1.1rem 2.5rem;min-width:0;overflow-x:clip}
  .lateral{position:fixed;inset:0 auto 0 0;width:var(--lateral-w);
    transform:translateX(-100%);transition:transform .25s}
  .lateral.abierta{transform:none;box-shadow:0 0 0 100vmax rgba(15,36,18,.45)}
  /* Arriba a la DERECHA: es donde llega el pulgar sin cambiar de mano. */
  .abrir-menu{display:inline-flex;position:fixed;top:.7rem;right:.7rem;left:auto;z-index:70;
    background:var(--g900);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:11px;
    padding:.55rem .7rem;font-size:1.2rem;box-shadow:0 4px 14px rgba(15,36,18,.28)}
  .topbar{padding:.9rem 1.1rem}
}
@media(max-width:760px){ .fila2,.fila3{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── Impresión ────────────────────────────────────────────────────────── */
@media print{
  .lateral,.abrir-menu,.toast,.malla,.topbar{display:none!important}
  .con-lateral{grid-template-columns:1fr}
  .principal{padding:0;max-width:none}
  body{background:#fff}
}
