/* KLASSROOM — Tema global claro/oscuro. La apariencia normal existente es el modo claro. */
:root{
  color-scheme:light;
  --km-surface:#ffffff;
  --km-surface-2:#f8fafc;
  --km-surface-3:#eaf2ff;
  --km-ink:#0f172a;
  --km-muted:#475569;
  --km-border:#94a3b8;
  --km-field:#ffffff;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg-main:
    radial-gradient(1100px 700px at 70% 20%,rgba(37,99,235,.24),transparent 60%),
    radial-gradient(900px 600px at 20% 80%,rgba(79,70,229,.18),transparent 55%),
    linear-gradient(135deg,#050816 0%,#0b1224 48%,#111a38 100%);
  --card-bg:rgba(15,23,42,.92);
  --card-bg-strong:#172033;
  --text:#e5edf9;
  --muted:#aebbd0;
  --line:rgba(148,163,184,.28);
  --line-strong:rgba(148,163,184,.42);
  --hover-bg:rgba(37,99,235,.30);
  --active-bg:rgba(37,99,235,.46);
  --km-surface:#111827;
  --km-surface-2:#172033;
  --km-surface-3:#1d2a42;
  --km-ink:#e5edf9;
  --km-muted:#aebbd0;
  --km-border:#52627a;
  --km-field:#0b1220;
}

html[data-theme="dark"] body.app .sidebar{
  background:linear-gradient(180deg,#080e1d,#111c35)!important;
  border-color:#334155!important;
}

html[data-theme="dark"] body.app .topbar{
  background:rgba(5,8,22,.86)!important;
  border-color:#334155!important;
}

html[data-theme="dark"] body.app .content{
  color:var(--km-ink)!important;
}

/* Superficies utilizadas por los distintos módulos. */
html[data-theme="dark"] body.app .content :where(
  .card,
  [class$="-card"],
  [class*="-card "],
  [class$="-panel"],
  [class*="-panel "],
  [class$="-box"],
  [class*="-box "],
  [role="dialog"],
  details
){
  background-color:var(--km-surface)!important;
  color:var(--km-ink)!important;
  border-color:var(--km-border)!important;
}

html[data-theme="dark"] body.app .content :where(
  [class$="-body"],
  [class*="-body "],
  [class$="-content"],
  [class*="-content "],
  [class$="-inside"],
  [class*="-inside "]
){
  background-color:var(--km-surface)!important;
  color:var(--km-ink)!important;
}

html[data-theme="dark"] body.app .content :where(
  table,
  tbody,
  tr,
  td
){
  background-color:var(--km-surface)!important;
  color:var(--km-ink)!important;
  border-color:var(--km-border)!important;
}

html[data-theme="dark"] body.app .content :where(thead,th){
  background-color:var(--km-surface-3)!important;
  color:#dbeafe!important;
  border-color:var(--km-border)!important;
}

html[data-theme="dark"] body.app .content tbody tr:hover td{
  background-color:#24344f!important;
}

html[data-theme="dark"] body.app .content :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
){
  background:var(--km-field)!important;
  color:var(--km-ink)!important;
  -webkit-text-fill-color:var(--km-ink)!important;
  border-color:#64748b!important;
}

html[data-theme="dark"] body.app .content :where(input,textarea)::placeholder{
  color:#8fa0b8!important;
  opacity:1;
}

html[data-theme="dark"] body.app .content :where(
  [class$="-muted"],
  [class*="-muted "],
  .muted,
  small
){
  color:var(--km-muted)!important;
}

html[data-theme="dark"] body.app .content :where(
  [class$="-head"],
  [class*="-head "],
  summary
){
  border-color:var(--km-border)!important;
}

/* Botón global del tema. */
.topbar-actions{display:flex;align-items:center;gap:8px}

.theme-toggle{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:7px 11px!important;
  border:1px solid var(--line-strong)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.08)!important;
  color:var(--text)!important;
  -webkit-text-fill-color:var(--text)!important;
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

.theme-toggle:hover,.theme-toggle:focus-visible{
  background:var(--hover-bg)!important;
  border-color:#60a5fa!important;
  outline:none;
}

.theme-toggle-icon{font-size:16px;line-height:1}

/* El selector del acceso se mantiene visible sobre la imagen. */
.login-theme-toggle{
  position:fixed;
  z-index:20;
  top:18px;
  right:18px;
  background:rgba(9,25,52,.82)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:rgba(255,255,255,.45)!important;
  backdrop-filter:blur(10px);
}

html[data-theme="dark"] .login-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:rgba(1,5,15,.28);
}

html[data-theme="dark"] .login-box,
html[data-theme="dark"] .login-footer{
  position:relative;
  z-index:2;
}

@media(max-width:620px){
  .theme-toggle-label{display:none}
  .theme-toggle{padding:7px 10px!important}
  .login-theme-toggle .theme-toggle-label{display:inline}
}

/* Los documentos destinados a impresión nunca heredan el modo oscuro. */
@media print{
  html,body,body.app,.main,.content{
    color-scheme:light!important;
    background:#fff!important;
    color:#000!important;
  }
  .sidebar,.topbar,.theme-toggle{display:none!important}
  .main{margin:0!important;width:100%!important}
  .content{padding:0!important}
}