/* =========================================================
   AulaGest · Sistema de diseño
   © 2025 — UI kit base para "Gestión del Alumnado/Profesorado"
   Tipografías: Inter / Source Sans 3 / Roboto Mono
   ========================================================= */

/* 1) Tipografías (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Sans+3:wght@400;600&family=Roboto+Mono:wght@500&display=swap');

/* 2) Variables de tema */
:root{
  --brand-700:#1D4ED8; --brand-600:#2563EB; --brand-500:#38BDF8;
  --bg:#F8FAFC; --surface:#FFFFFF; --line:#E5E7EB;
  --text:#0F172A; --muted:#64748B;
  --success:#16A34A; --warning:#F59E0B; --danger:#DC2626; --info:#0EA5E9;
  --radius-lg:1.25rem; --radius-md:.875rem; --radius-sm:.5rem;
  --shadow-sm:0 1px 1px rgba(2,8,23,.06);
  --shadow-md:0 4px 14px rgba(2,8,23,.08);
  --ring: 0 0 0 3px rgba(37,99,235,.15);
}

/* 3) Reset suave + base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: linear-gradient(140deg, var(--bg) 0%, #F1F5F9 30%, #EEF6FF 100%);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;display:block}
a{color:var(--brand-600);text-decoration:none}
a:hover{text-decoration:underline}

/* 4) Contenedor y cabecera */
.container{max-width:1280px;margin:0 auto;padding-left:1rem;padding-right:1rem}
.app-header{
  background: linear-gradient(90deg, var(--brand-700), var(--brand-600), var(--brand-500));
  color:#fff; position:sticky; top:0; z-index:40; box-shadow:var(--shadow-md);
}
.app-title{font-weight:700;letter-spacing:.2px}
.app-subtitle{opacity:.85;font-size:.75rem}

/* 5) Tarjetas */
.card{
  background:var(--surface);
  border:1px solid rgba(2,8,23,.06);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
}
.card--kpi{padding:1rem}
.kpi-title{color:var(--muted);font-size:.75rem}
.kpi-value{font-size:2rem;font-weight:700}

/* 6) Botones (elevan las clases existentes) */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .9rem;border-radius:.8rem;
  font-size:.875rem;font-weight:600;
  box-shadow:var(--shadow-sm); border:1px solid transparent;
  transition:transform .04s ease, background .2s ease, color .2s ease, border .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn-brand{background:var(--brand-600);color:#fff}
.btn-brand:hover{background:#1F4EDB}
.btn-white{background:#fff;color:var(--text);border-color:rgba(15,23,42,.08)}
.btn-white:hover{background:#F8FAFC}
.btn-ghost{background:#fff;border-color:rgba(15,23,42,.08)}
.btn-ghost:hover{background:#F8FAFC}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#B91C1C}
.btn-icon{padding:.4rem .55rem;border-radius:.6rem}
.btn-chip{
  padding:.25rem .6rem;border-radius:9999px;font-size:.75rem;
  background:#EEF2FF;color:#3730A3;border:1px solid #E0E7FF
}

/* 7) Campos de formulario */
.field{min-width:0}
.field label{display:block;font-size:.85rem;font-weight:600;color:var(--text);margin:0 0 .35rem}
.field .help{font-size:.75rem;color:var(--muted)}
input,select,textarea{
  width:100%;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:.55rem .7rem;
  transition:border .2s ease, box-shadow .2s ease;
}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:var(--ring);border-color:var(--brand-500)}

/* 8) Tabla */
.table{
  width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);
  border-radius:var(--radius-md);overflow:hidden;background:#fff
}
.table thead th{
  background:#F1F5F9;color:#334155;font-weight:600;font-size:.85rem;
  text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--line)
}
.table td{padding:.6rem .7rem;border-bottom:1px solid #EEF2F7;vertical-align:top}
.table tr:nth-child(even) td{background:#FCFDFF}
.table tr:hover td{background:#F8FAFE}
.table .actions{white-space:nowrap;text-align:right}
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .5rem;border-radius:999px;font-size:.7rem}
.badge--yes{background:#E7F9EE;color:#065F46}
.badge--no{background:#FEE2E2;color:#7F1D1D}

/* 9) Pestañas */
.tab-btn{
  border-bottom:2px solid transparent;color:rgba(255,255,255,.92);
  padding:.5rem .75rem;border-radius:.5rem .5rem 0 0;transition:opacity .2s ease, border .2s ease
}
.tab-btn:hover{opacity:.95;border-color:rgba(255,255,255,.4)}
.tab-btn.active{border-color:var(--brand-500);color:#fff}

/* 10) Modales (compatibles con tus clases) */
.modal-enter{transform:translateY(14px) scale(.98);opacity:0}
.modal-enter-active{transform:translateY(0) scale(1);opacity:1;transition:all .2s ease}

/* 11) Utilidades y estados */
.text-muted{color:var(--muted)}
.hidden-sm{display:none}
@media (min-width:768px){ .hidden-sm{display:initial} }
.grid-2{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:1024px){ .grid-2{grid-template-columns:repeat(2,1fr)} }
.toolbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.toolbar .spacer{flex:1}

/* 12) Login (pantalla de acceso) */
#loginBox .card{border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
#loginBox input{border-radius:.8rem}
#loginBox button{width:100%}

/* 13) Chips y archivos */
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .5rem;border-radius:9999px;background:#EEF2FF;font-size:.75rem}
.filebox{border:1px solid rgba(2,8,23,.08);border-radius:.75rem;padding:.75rem;background:#fff}

/* 14) Estados de acceso */
body.needs-login main, body.needs-login header { display:none }
body.needs-login #loginBox { display:block !important }
body.readonly .btn-admin{ display:none !important }

/* 15) Ajustes visuales integradores (compatibilidad con tu HTML) */
header.bg-gradient-to-r{box-shadow:var(--shadow-md)}
main .card{padding:1rem}
#viewerModal .btn-ghost{border:1px solid var(--line)}
/* Botones de acciones de Usuario (tabla) */
.table .btn-admin{font-size:.75rem;padding:.35rem .55rem;border-radius:.6rem}
.table .btn-admin[data-action="edit"]{background:var(--brand-600);color:#fff}
.table .btn-admin[data-action="edit"]:hover{background:#2149d0}
.table .btn-admin[data-action="delete"]{background:var(--danger);color:#fff}
.table .btn-admin[data-action="delete"]:hover{background:#b81d1d}

/* 16) Scrollbar sutil (Webkit) */
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:#94A3B8}

/* 17) Mensajes (toasts básicos opcionales) */
.toast{
  position:fixed;right:1rem;top:1rem;z-index:9999;display:flex;gap:.6rem;
  padding:.6rem .8rem;border-radius:.75rem;color:#052E16;background:#DCFCE7;
  box-shadow:var(--shadow-md);border:1px solid #86EFAC;font-size:.85rem
}
.toast--error{background:#FEE2E2;border-color:#FCA5A5;color:#7F1D1D}
.toast--info{background:#E0F2FE;border-color:#7DD3FC;color:#0C4A6E}

/* ===== Login (hero) ===== */
.login-hero{
  background: url('static/A_flat-style_digital_illustration_depicts_a_profes.png') no-repeat center center;
  background-size: cover;
  display: none;
  min-height: 100vh;
  position: relative;
  place-items: start center;
  padding: clamp(1.25rem, 2vw, 2rem);
}

/* Cuando no hay sesión (tu checkAuth pone needs-login en el <body>) */
body.needs-login .login-hero{ display: grid !important; }
body.needs-login header,
body.needs-login main{ display: none !important; }

.login-wrap{
  position:relative;
  width: min(640px, 92vw);
  margin-top: clamp(2rem, 6vh, 5rem);
  text-align: center;
}
.login-hero::before{
  content:"";
  position:absolute;inset:0;
  background: rgba(255,255,255,.85); /* velo blanco translúcido */
}
.login-title{
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: .2px;
  color: #0F172A;
  margin: 0 0 .35rem;
}
.login-sub{
  color: #64748B;
  margin: 0 0 1.1rem;
}
.login-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 1.25rem;
  padding: clamp(1rem, 2vw, 1.25rem);
  margin: 0 auto;
  width: min(560px, 100%);
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
  text-align: left;
}
.login-footer{
  margin-top: .9rem;
  font-size: .85rem;
  color: #94A3B8;
}

/* Inputs del login (coherentes con el resto de la app) */
.input{
  width: 100%;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: .8rem;
  padding: .6rem .8rem;
  font-size: .95rem;
  transition: border .2s ease, box-shadow .2s ease, background .2s ease;
}
.input::placeholder{ color:#9CA3AF; }
.input:focus{
  outline: none;
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* Botón principal del login (reutiliza .btn .btn-brand) */
.login-card .btn-brand{
  display:inline-flex; justify-content:center; align-items:center;
  width: 100%;
  border-radius: .8rem;
  padding: .65rem .9rem;
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
}
.login-card .btn-brand:hover{
  filter: brightness(1.03);
}

/* Mostrar / ocultar cuando no hay sesión (usa tu clase needs-login) */
body.needs-login #loginHero{ display:block !important; }
body.needs-login header,
body.needs-login main{ display:none !important; }

/* Accesibilidad: ocultar texto visible solo para lectores */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}