:root{
  --bg: #F5F3ED;
  --surface: #FFFFFF;
  --surface-2: #FBFAF6;
  --ink: #26271F;
  --ink-soft: #6B6A5E;
  --line: #E5E1D3;
  --teal: #4E837F;
  --teal-deep: #33564F;
  --teal-wash: #E8F0EE;
  --orange: #D8632A;
  --orange-wash: #FBEBE0;
  --olive: #AFA632;
  --olive-wash: #F5F2DC;
  --red: #8B1D1E;
  --red-wash: #F5E2E1;
  --shadow: 0 1px 2px rgba(38,39,31,0.06), 0 6px 20px rgba(38,39,31,0.05);
  --radius: 14px;
}

:root[data-theme="dark"]{
  --bg: #1C1D18;
  --surface: #24251F;
  --surface-2: #2A2B24;
  --ink: #EDEBDF;
  --ink-soft: #A6A392;
  --line: #3A3B32;
  --teal-wash: #23332F;
  --orange-wash: #33261D;
  --olive-wash: #302E1C;
  --red-wash: #331F1F;
  --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 6px 20px rgba(0,0,0,0.3);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; overflow-x:hidden; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: background .2s ease, color .2s ease;
}
h1,h2,h3,.brand,.nav-item,.stat-label,.tag{ font-family: 'Space Grotesk', 'Inter', sans-serif; }
img{ max-width:100%; }

/* ---------- BARRA DE IDIOMA / TEMA (visible en todas las pantallas) ---------- */
.app-toolbar{
  position: sticky; top:0; z-index: 300;
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
  padding: 10px 14px; padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.toolbar-btn{
  display:flex; align-items:center; gap:6px;
  height:38px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight:600; cursor:pointer;
}
.toolbar-btn:hover{ background: var(--teal-wash); }
.lang-switch{ position:relative; }
.lang-menu{
  position:absolute; top: 44px; right:0; min-width: 150px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); display:none; flex-direction:column; overflow:hidden;
}
.lang-menu.show{ display:flex; }
.lang-menu button{
  background:none; border:none; padding: 10px 14px; text-align:left;
  font-size: 13.5px; color: var(--ink); cursor:pointer; font-family:inherit;
}
.lang-menu button:hover{ background: var(--surface-2); }
.lang-menu button.active{ color: var(--teal-deep); font-weight:700; }

.screen{ display:none; }
.screen.active{ display:block; }

/* ---------- LOGIN ---------- */
#screen-login.active{
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  padding: 40px 20px;
}
.login-card{
  width: 100%; max-width: 380px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 32px;
  text-align:center;
}
.login-icon{ width:56px; margin-bottom: 14px; }
.login-card h1{ font-size: 22px; margin: 0 0 4px; }
.login-sub{ color: var(--ink-soft); font-size: 14px; margin: 0 0 26px; }
.field{ text-align:left; margin-bottom: 16px; }
.field label{ display:block; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 6px; }
.field input, .field select, .field textarea{
  width: 100%; padding: 11px 12px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  font-family: 'Inter', sans-serif; font-size: 14px;
}
.field input:focus, .field select:focus, .field textarea:focus, button:focus-visible{
  outline: 2px solid var(--teal); outline-offset: 1px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 11px 18px; border-radius: 9px; border: none;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; cursor: pointer;
}
.btn-primary{ background: var(--teal); color: #fff; width: 100%; }
.btn-primary:hover{ background: var(--teal-deep); }
.btn-ghost{ background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover{ background: var(--surface-2); }
.login-error{
  display:none; background: var(--red-wash); color: var(--red); font-size: 13px;
  padding: 9px 12px; border-radius: 8px; margin-bottom: 16px; text-align:left;
}
.login-error.show{ display:block; }
.remember-row{ display:flex; align-items:center; justify-content:space-between; font-size: 13px; color: var(--ink-soft); margin: -6px 0 18px; }
.remember-row a{ color: var(--teal-deep); text-decoration: none; }
.login-hint{ margin-top:16px; font-size:11.5px; color:var(--ink-soft); background:var(--surface-2); border-radius:8px; padding:8px 10px; }

/* ---------- APP SHELL ---------- */
.app-shell{ display:flex; min-height: 100vh; }
.sidebar{
  width: 220px; flex-shrink:0; background: var(--surface); border-right: 1px solid var(--line);
  padding: 22px 16px; display:flex; flex-direction:column; gap: 24px;
}
.brand{ display:flex; align-items:center; gap:10px; padding: 0 6px; }
.brand img{ width: 26px; }
.brand b{ font-size: 16px; letter-spacing: .01em; }
.nav-group .nav-title{ font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); padding: 0 10px 8px; }
.nav-item{
  display:flex; align-items:center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  font-size: 14px; color: var(--ink-soft); margin-bottom: 2px; cursor:pointer; background:none; border:none; width:100%; text-align:left; font-family:inherit;
}
.nav-item.current{ background: var(--teal-wash); color: var(--teal-deep); font-weight: 600; }
.nav-item .dot{ width:6px; height:6px; border-radius:50%; background: currentColor; opacity:.55; flex-shrink:0; }
.nav-item .soon{ margin-left:auto; font-size:10px; background:var(--olive-wash); color:#7c7420; padding:2px 6px; border-radius:999px; }
.sidebar-user{
  margin-top: auto; display:flex; align-items:center; gap: 10px; padding: 10px; border-radius: 10px;
  background: var(--surface-2); font-size: 13px;
}
.avatar{
  width: 30px; height:30px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  background: var(--olive); color:#2a2a1a; font-weight:700; font-size: 13px; flex-shrink:0;
}
.logout-link{ margin-left:auto; font-size:12px; color:var(--ink-soft); background:none; border:none; cursor:pointer; text-decoration:underline; font-family:inherit; }
.main{ flex:1; min-width:0; padding: 26px 32px 60px; }
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap;}
.page-head h1{ font-size: 22px; margin: 0 0 4px; }
.page-head p{ margin:0; color: var(--ink-soft); font-size: 14px; }

.stat-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.stat-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat-card .stat-num{ font-size: 26px; font-weight: 700; }
.stat-card .stat-label{ font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.stat-card.accent-orange{ border-top: 3px solid var(--orange); }
.stat-card.accent-teal{ border-top: 3px solid var(--teal); }
.stat-card.accent-olive{ border-top: 3px solid var(--olive); }
.stat-card.accent-red{ border-top: 3px solid var(--red); }

.panel{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 22px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; gap:10px; flex-wrap:wrap; }
.panel-head h2{ font-size: 16px; margin:0; }

.tag{ display:inline-flex; align-items:center; gap:6px; font-size: 12px; font-weight:600; padding: 4px 10px; border-radius: 999px; white-space:nowrap; }
.tag .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.tag-orange{ background: var(--orange-wash); color: var(--orange); }
.tag-teal{ background: var(--teal-wash); color: var(--teal-deep); }
.tag-olive{ background: var(--olive-wash); color: #7c7420; }
.tag-red{ background: var(--red-wash); color: var(--red); }

.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -2px; }
table{ width:100%; min-width: 480px; border-collapse: collapse; font-size: 13.5px; }
th{ text-align:left; color: var(--ink-soft); font-weight:600; font-size: 12px; text-transform: uppercase; letter-spacing:.04em; padding: 8px 10px; border-bottom: 1px solid var(--line); }
td{ padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td{ border-bottom:none; }
.cell-note{ color: var(--ink-soft); max-width: 320px; }
.row-new{ animation: highlight 1.8s ease; }
@keyframes highlight{ 0%{ background: var(--teal-wash);} 100%{ background: transparent; } }

.class-options{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.class-opt{ border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor:pointer; display:flex; flex-direction:column; gap:4px; background:var(--surface); text-align:left; font-family:inherit; }
.class-opt b{ font-size: 13.5px; }
.class-opt span{ font-size: 12px; color: var(--ink-soft); }
.class-opt.picked{ border-color: var(--teal); background: var(--teal-wash); }
.class-opt.picked b{ color: var(--teal-deep); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.donut-wrap{ display:flex; align-items:center; gap: 26px; flex-wrap: wrap; }
.donut{
  width: 150px; height: 150px; border-radius: 50%; flex-shrink:0;
  background: conic-gradient(var(--orange) 0% 44.4%, var(--teal) 44.4% 66.6%, var(--olive) 66.6% 88.8%, var(--red) 88.8% 100%);
  display:flex; align-items:center; justify-content:center;
}
.donut-hole{ width: 96px; height:96px; border-radius:50%; background: var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.donut-hole b{ font-size: 22px; }
.donut-hole span{ font-size: 11px; color: var(--ink-soft); }
.legend{ display:flex; flex-direction:column; gap: 10px; font-size: 13.5px; flex:1; min-width: 200px; }
.legend-row{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.legend-row .lk{ display:flex; align-items:center; gap:8px; color: var(--ink-soft); }
.legend-dot{ width:10px; height:10px; border-radius:3px; }
.bars-mini{ display:flex; gap:2px; width: 90px; height: 8px; border-radius: 4px; overflow:hidden; }

.table-toolbar{ display:flex; gap:10px; align-items:center; margin-bottom: 14px; flex-wrap: wrap; }
.table-toolbar input[type=text]{ padding: 8px 12px; border-radius: 8px; border:1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size:13px; flex:1; min-width: 160px; }
select.filter{ padding: 8px 12px; border-radius: 8px; border:1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size:13px; }

.banner-soon{
  display:flex; align-items:center; gap:10px; background: var(--olive-wash); color:#6d6519;
  border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 22px;
}
.banner-soon b{ color:#54501a; }

.toast{
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 10px;
  font-size: 13.5px; box-shadow: var(--shadow); opacity:0; pointer-events:none; transition: all .25s ease;
  z-index: 200; display:flex; align-items:center; gap:8px;
}
.toast.show{ opacity:1; transform: translate(-50%, 0); }

@media (max-width: 860px){
  .app-shell{ flex-direction: column; }
  .sidebar{ width:auto; flex-direction:row; align-items:center; overflow-x:auto; border-right:none; border-bottom:1px solid var(--line); }
  .nav-group{ display:flex; gap:4px; }
  .nav-group .nav-title{ display:none; }
  .sidebar-user{ margin-top:0; }
  .stat-grid{ grid-template-columns: repeat(2,1fr); }
  .form-row{ grid-template-columns: 1fr; }
  .main{ padding: 18px; }
  .donut-wrap{ justify-content:center; }
}