/* =====================================================
   SISTEMA DE CALIFICACIONES UNIVERSITARIAS
   Paleta: Guinda #670000 + Azul institucional #090c29
   Modo claro y oscuro
   ===================================================== */

:root, [data-theme="light"] {
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2rem);

  --space-1:2px; --space-2:4px; --space-3:8px; --space-4:12px; --space-5:16px;
  --space-6:20px; --space-8:28px; --space-10:36px; --space-12:48px; --space-16:64px;

  /* Identidad institucional */
  --color-primary:      #670000;
  --color-primary-hover:#4f0000;
  --color-primary-soft: rgba(103,0,0,.08);
  --color-blue:         #090c29;
  --color-blue-hover:   #121843;
  --color-blue-soft:    rgba(9,12,41,.08);

  /* Superficies */
  --color-bg:        #f5f2f2;
  --color-surface:   #ffffff;
  --color-surface-2: #f9f4f4;
  --color-border:    rgba(103,0,0,.14);
  --color-divider:   rgba(9,12,41,.1);

  /* Texto */
  --color-text:        #161826;
  --color-text-muted:  #5b6072;
  --color-text-faint:  #9399ad;
  --color-text-inverse:#ffffff;

  /* Semánticos */
  --color-success: #1f7a45;
  --color-error:   #a21f38;
  --color-warning: #b45309;

  /* Badges */
  --badge-ok-bg:   rgba(31,122,69,.12);
  --badge-ok-text: #1f7a45;
  --badge-fail-bg: rgba(162,31,56,.12);
  --badge-fail-text:#a21f38;
  --badge-pend-bg: rgba(180,83,9,.1);
  --badge-pend-text:#b45309;

  --radius-sm: .375rem; --radius-md: .75rem; --radius-lg: 1.1rem; --radius-xl: 1.5rem; --radius-full:999px;
  --shadow-sm: 0 4px 20px rgba(9,12,41,.07);
  --shadow-md: 0 16px 36px rgba(9,12,41,.12);

  --font-display: 'Montserrat','Segoe UI',sans-serif;
  --font-body:    'Inter','Segoe UI',sans-serif;
}

[data-theme="dark"] {
  --color-primary:     #a83232;
  --color-primary-hover:#c24444;
  --color-primary-soft:rgba(168,50,50,.18);
  --color-blue:        #1a2060;
  --color-blue-hover:  #2a3280;
  --color-blue-soft:   rgba(70,91,210,.16);
  --color-bg:        #0d0f1e;
  --color-surface:   #13172e;
  --color-surface-2: #1a1f3a;
  --color-border:    rgba(255,255,255,.1);
  --color-divider:   rgba(255,255,255,.07);
  --color-text:       #e8eaf5;
  --color-text-muted: #9299b2;
  --color-text-faint: #636880;
  --color-text-inverse:#ffffff;
  --color-success: #4caf82;
  --color-error:   #e05c74;
  --color-warning: #e09a3d;
  --badge-ok-bg:   rgba(76,175,130,.15);
  --badge-ok-text: #4caf82;
  --badge-fail-bg: rgba(224,92,116,.15);
  --badge-fail-text:#e05c74;
  --badge-pend-bg: rgba(224,154,61,.12);
  --badge-pend-text:#e09a3d;
  --shadow-sm:0 4px 20px rgba(0,0,0,.4);
  --shadow-md:0 16px 36px rgba(0,0,0,.55);
}

/* BASE */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:none;text-size-adjust:none}
body{
  min-height:100vh;
  font-family:var(--font-body);
  font-size:var(--text-base);
  color:var(--color-text);
  background:
    radial-gradient(ellipse at 0% 0%,var(--color-primary-soft) 0,transparent 55%),
    radial-gradient(ellipse at 100% 100%,var(--color-blue-soft) 0,transparent 55%),
    var(--color-bg);
  line-height:1.6
}
a{text-decoration:none;color:inherit}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
table{width:100%;border-collapse:collapse}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15}

/* UTILITARIOS */
.skip-link{position:absolute;left:-999px;top:auto;z-index:999}
.skip-link:focus{left:1rem;top:1rem;background:var(--color-primary);color:#fff;padding:.5rem 1rem;border-radius:.5rem}
.eyebrow{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.16em;color:var(--color-text-muted);font-weight:700;margin-bottom:.25rem}
.eyebrow.guinda{color:var(--color-primary)}
.required{color:var(--color-error)}

/* LOGIN SHELL */
.auth-shell{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  min-height:100vh
}

/* Lado izquierdo – panel de marca */
.brand-panel{
  background:linear-gradient(155deg, var(--color-blue) 0%, #0e1445 60%, #1a0000 100%);
  color:#fff;
  padding:var(--space-12) var(--space-10);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-10)
}
.brand-top{display:flex;justify-content:space-between;align-items:flex-start}
.logo-wrap{color:#fff}
.brand-copy h1{
  font-size:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  margin:.7rem 0 1rem;
  color:#fff
}
.brand-copy p{max-width:50ch;color:rgba(255,255,255,.8);font-size:var(--text-base)}
.accent-card{
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-xl);
  padding:var(--space-8)
}
.accent-card h2{font-size:var(--text-lg);margin-bottom:.7rem;color:#fff}
.accent-card p{color:rgba(255,255,255,.82);font-size:var(--text-sm);margin:.25rem 0}
.accent-card code{background:rgba(255,255,255,.15);padding:.1em .4em;border-radius:.3em;font-size:.88em}
.mini-note{font-size:var(--text-xs)!important;opacity:.8;margin-top:.7rem!important}

/* Lado derecho – login */
.auth-main{display:grid;place-items:center;padding:var(--space-8)}
.login-card{
  width:min(100%,520px);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md);
  padding:var(--space-10)
}
.card-head{margin-bottom:.25rem}
.card-head h2,.card-head h3{font-size:var(--text-xl);margin:.4rem 0}
.card-head p{color:var(--color-text-muted);font-size:var(--text-sm);max-width:55ch}

/* FORMULARIO */
.auth-form,.admin-form{display:grid;gap:var(--space-6);margin-top:var(--space-8)}
.field{display:grid;gap:.4rem}
.field label{font-size:var(--text-sm);font-weight:600;color:var(--color-text)}
.field input,.field select{
  height:52px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:0 1rem;
  background:var(--color-surface-2);
  color:var(--color-text);
  transition:border-color .18s,box-shadow .18s
}
.field input:focus,.field select:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 4px rgba(103,0,0,.1)
}
.field input::placeholder{color:var(--color-text-faint)}

/* FIELDSET */
.fieldset-group{
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  display:grid;gap:var(--space-5)
}
.fieldset-group legend{
  padding:0 .5rem;
  font-size:var(--text-sm);
  font-weight:700;
  color:var(--color-primary)
}

/* GRID 2 COLUMNAS */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}

/* MATERIAS */
.subjects-wrap{display:grid;gap:var(--space-4)}
.subjects-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.subjects-hint{font-size:var(--text-xs);color:var(--color-text-muted)}
.subject-row{
  display:grid;
  grid-template-columns:2.5fr 1fr 1fr auto;
  gap:.6rem;
  align-items:center
}
.subject-row input{
  height:46px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:0 .75rem;
  background:var(--color-surface);
  color:var(--color-text)
}
.subject-row input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(103,0,0,.08)}
.btn-remove-row{
  width:34px;height:34px;
  border:none;border-radius:var(--radius-full);
  background:var(--badge-fail-bg);
  color:var(--color-error);
  cursor:pointer;font-size:.85rem;font-weight:700
}
.form-actions{padding-top:var(--space-4)}

/* BOTONES */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.9rem 1.4rem;
  border:none;border-radius:var(--radius-md);
  font-size:var(--text-sm);font-weight:700;
  cursor:pointer;transition:background .18s,box-shadow .18s;
  line-height:1
}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-hover);box-shadow:0 4px 16px rgba(103,0,0,.25)}
.btn-secondary{background:var(--color-blue);color:#fff}
.btn-secondary:hover{background:var(--color-blue-hover)}
.btn-ghost{background:transparent;border:1px solid var(--color-border);color:var(--color-text)}
.btn-ghost:hover{background:var(--color-surface-2)}
.full{width:100%}
.theme-toggle{
  width:42px;height:42px;
  border:none;border-radius:var(--radius-full);
  background:rgba(255,255,255,.1);
  color:#fff;cursor:pointer;font-size:1.1rem;
  display:grid;place-items:center
}
.theme-toggle.alt{background:var(--color-surface-2);color:var(--color-text)}

/* ALERTAS */
.alert{
  padding:.9rem 1.1rem;
  border-radius:var(--radius-md);
  margin-top:var(--space-5);
  font-size:var(--text-sm);
  line-height:1.5
}
.alert.success{background:rgba(31,122,69,.1);color:var(--color-success);border:1px solid rgba(31,122,69,.2)}
.alert.error  {background:rgba(162,31,56,.1);color:var(--color-error);  border:1px solid rgba(162,31,56,.2)}

/* NOTA FOOTER LOGIN */
.login-footer-note{
  margin-top:var(--space-8);
  padding-top:var(--space-5);
  border-top:1px solid var(--color-divider);
  color:var(--color-text-muted);
  font-size:var(--text-xs)
}

/* DASHBOARD SHELL */
.dashboard-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}

/* SIDEBAR */
.sidebar{
  background:linear-gradient(180deg, var(--color-blue) 0%, #060817 100%);
  color:#fff;
  padding:var(--space-8) var(--space-6);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-6);
  position:sticky;top:0;height:100vh;overflow:auto
}
.sidebar-brand{display:flex;align-items:center;gap:.85rem}
.sidebar-brand h1{font-size:var(--text-base);font-weight:700;color:#fff}
.sidebar-logo{
  width:54px;height:54px;min-width:54px;
  border-radius:14px;
  background:rgba(255,255,255,.1);
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:1rem;font-weight:800;color:#fff
}
.side-nav{display:grid;gap:.5rem;margin-top:var(--space-8)}
.side-nav a{
  display:block;
  padding:.85rem 1rem;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.85);
  font-size:var(--text-sm);font-weight:500;
  transition:background .15s
}
.side-nav a:hover{background:rgba(255,255,255,.12)}
.sidebar-actions{display:grid;gap:.8rem}

/* MAIN CONTENT */
.dashboard-main{
  padding:var(--space-8) var(--space-10);
  overflow:auto
}
.dashboard-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:var(--space-8)
}
.dashboard-header h2{font-size:var(--text-xl)}

/* STAT CARDS */
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);margin-bottom:var(--space-8)}
.student-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
  padding:var(--space-8)
}
.stat-card span{display:block;color:var(--color-text-muted);font-size:var(--text-sm);font-weight:500}
.stat-card strong{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(1.8rem,1rem + 1.5vw,2.8rem);
  margin-top:.35rem;
  line-height:1
}
.stat-card.blue{
  background:linear-gradient(140deg, var(--color-blue) 0%, #1e2969 100%);
  color:#fff
}
.stat-card.blue span{color:rgba(255,255,255,.75)}

/* PANEL CARD */
.panel-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
  padding:var(--space-8) var(--space-8);
  margin-bottom:var(--space-8)
}

/* DATOS ALUMNO */
.student-data-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-5);
  margin-top:var(--space-6)
}
.data-field{
  padding:var(--space-5) var(--space-6);
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg)
}
.data-field span{display:block;color:var(--color-text-muted);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.data-field strong{display:block;margin-top:.3rem;font-size:var(--text-base)}

/* TABLA */
.table-wrap{
  overflow:auto;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  margin-top:var(--space-5)
}
th{
  padding:.9rem 1.1rem;
  text-align:left;
  font-size:var(--text-xs);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  background:var(--color-surface-2);
  color:var(--color-text-muted);
  border-bottom:1px solid var(--color-divider)
}
td{
  padding:.9rem 1.1rem;
  border-bottom:1px solid var(--color-divider);
  font-size:var(--text-sm);
  vertical-align:middle
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--color-primary-soft)}

/* BADGES */
.badge{
  display:inline-flex;align-items:center;
  padding:.2rem .7rem;
  border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:700;
  letter-spacing:.05em
}
.badge-ok  {background:var(--badge-ok-bg);  color:var(--badge-ok-text)}
.badge-fail{background:var(--badge-fail-bg);color:var(--badge-fail-text)}
.badge-pending{background:var(--badge-pend-bg);color:var(--badge-pend-text)}

/* RESPONSIVE */
@media (max-width: 1100px){
  .auth-shell{grid-template-columns:1fr}
  .brand-panel{display:none}
  .dashboard-shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:-100%;width:260px;z-index:100;transition:left .25s}
  .sidebar.open{left:0}
  .dashboard-main{padding:var(--space-5)}
}
@media (max-width: 768px){
  .grid-2{grid-template-columns:1fr}
  .subject-row{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .subject-row input:first-child{grid-column:1/-1}
  .stats-grid,.student-stats{grid-template-columns:1fr}
  .student-data-grid{grid-template-columns:1fr}
  .panel-card,.login-card{padding:var(--space-6)}
  .dashboard-header{flex-direction:column;gap:.5rem}
}