/*
 * Maquetas de Educativa: tokens y componentes base.
 * Tema por defecto de ESTILO-EDUCATIVA.md §3.1 y §3.6 (paleta del logo de referencia),
 * sin Tailwind: las clases imitan a los primitivos de shadcn/ui new-york.
 */

:root {
  --radius: 0.625rem;

  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.416 0.113 149.6);            /* verde laurel */
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.919 0.021 112.6);          /* oliva claro */
  --secondary-foreground: oklch(0.269 0.004 84.6);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.518 0.010 84.6);    /* gris carbón */
  --accent: oklch(0.936 0.076 91.8);              /* dorado claro */
  --accent-foreground: oklch(0.269 0.004 84.6);   /* negro puma */
  --destructive: oklch(0.561 0.222 25.8);         /* rojo bandera */
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.416 0.113 149.6);

  --chart-1: oklch(0.416 0.113 149.6);            /* verde laurel */
  --chart-2: oklch(0.825 0.162 85.2);             /* dorado puma */
  --chart-3: oklch(0.418 0.060 118.6);            /* verde oliva */
  --chart-4: oklch(0.624 0.121 85.8);             /* ocre */
  --chart-5: oklch(0.518 0.010 84.6);             /* gris carbón */

  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.416 0.113 149.6);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.919 0.021 112.6);
  --sidebar-accent-foreground: oklch(0.418 0.060 118.6);
  --sidebar-border: oklch(0.922 0 0);

  /* Acento decorativo: dorado puma, nunca como texto sobre blanco */
  --gold: oklch(0.825 0.162 85.2);
  --gold-foreground: oklch(0.269 0.004 84.6);

  /* Tokens de estado (§3.1): no cambian con el color institucional */
  --success: oklch(0.527 0.154 150.069);
  --success-soft: oklch(0.962 0.044 156.743);
  --success-ink: oklch(0.448 0.119 151.328);
  --warning: oklch(0.666 0.179 58.318);
  --warning-soft: oklch(0.962 0.059 95.617);
  --warning-ink: oklch(0.473 0.137 46.201);
  --info: oklch(0.546 0.245 262.881);
  --info-soft: oklch(0.932 0.032 255.585);
  --info-ink: oklch(0.424 0.199 265.638);
  --danger-soft: oklch(0.936 0.032 17.717);
  --danger-ink: oklch(0.444 0.177 26.899);
  --neutral-soft: oklch(0.955 0 0);
  --neutral-ink: oklch(0.371 0 0);

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  color-scheme: light;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.65 0.113 149.6);             /* laurel aclarado a L 0.65 (§3.2) */
  --primary-foreground: oklch(0.145 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.65 0.113 149.6);

  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.65 0.113 149.6);
  --sidebar-primary-foreground: oklch(0.145 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);

  --success: oklch(0.723 0.219 149.579);
  --success-soft: oklch(0.723 0.219 149.579 / 0.16);
  --success-ink: oklch(0.871 0.15 154.449);
  --warning: oklch(0.828 0.189 84.429);
  --warning-soft: oklch(0.828 0.189 84.429 / 0.16);
  --warning-ink: oklch(0.879 0.169 91.605);
  --info: oklch(0.707 0.165 254.624);
  --info-soft: oklch(0.707 0.165 254.624 / 0.18);
  --info-ink: oklch(0.809 0.105 251.813);
  --danger-soft: oklch(0.704 0.191 22.216 / 0.18);
  --danger-ink: oklch(0.808 0.114 19.571);
  --neutral-soft: oklch(0.269 0 0);
  --neutral-ink: oklch(0.85 0 0);

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  color-scheme: dark;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 0.875rem;
  line-height: 1.25rem;
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-size: inherit; font-weight: inherit; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}

.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;
}

.icon {
  width: 16px; height: 16px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-18 { width: 18px; height: 18px; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }
.icon-32 { width: 32px; height: 32px; }
.icon-48 { width: 48px; height: 48px; stroke-width: 1.75; }

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-muted { color: var(--muted-foreground); }
.tabular { font-variant-numeric: tabular-nums; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.only-dark { display: none; }
.dark .only-dark { display: inline-flex; }
.dark .only-light { display: none; }

/* ---------- Button ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.875rem; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
.btn-outline { background: var(--background); border-color: var(--border); box-shadow: var(--shadow-xs); }
.dark .btn-outline { background: color-mix(in oklab, var(--input) 30%, transparent); border-color: var(--input); }
.btn-outline:hover, .btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); }
.btn-ghost { background: transparent; }
.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.btn-icon { width: 36px; padding: 0; }
.btn-sm { height: 32px; padding: 0 12px; gap: 6px; }
.btn-lg { height: 48px; padding: 0 20px; font-size: 1rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- Card ---------- */

.card {
  display: flex; flex-direction: column; gap: 24px;
  padding: 24px 0;
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-xs);
}
.card-header {
  display: grid; grid-template-columns: 1fr auto; grid-auto-rows: min-content;
  gap: 6px; padding: 0 24px; align-items: start;
}
.card-title { font-size: 1rem; font-weight: 600; line-height: 1.25rem; }
.card-description { color: var(--muted-foreground); font-size: 0.875rem; grid-column: 1; }
.card-action { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.card-content { padding: 0 24px; }

/* ---------- Badge (StatusBadge, GradeBadge) ---------- */

.badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 2px 8px; border-radius: calc(var(--radius) - 2px);
  font-size: 0.75rem; line-height: 1rem; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent;
}
.badge .icon { width: 12px; height: 12px; }
.tone-success { background: var(--success-soft); color: var(--success-ink); }
.tone-warning { background: var(--warning-soft); color: var(--warning-ink); }
.tone-info    { background: var(--info-soft);    color: var(--info-ink); }
.tone-danger  { background: var(--danger-soft);  color: var(--danger-ink); }
.tone-neutral { background: var(--neutral-soft); color: var(--neutral-ink); }
.badge-outline { border-color: var(--border); color: var(--foreground); }
.grade { min-width: 36px; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- Input ---------- */

.input {
  display: flex; align-items: center; height: 36px; width: 100%;
  padding: 4px 12px; border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--input); background: transparent; box-shadow: var(--shadow-xs);
  font-size: 0.875rem;
}
.dark .input { background: color-mix(in oklab, var(--input) 30%, transparent); }
.input::placeholder { color: var(--muted-foreground); }
.input:focus-visible { border-color: var(--ring); }
.input-icon { position: relative; }
.input-icon > .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; }
.input-icon > .input { padding-left: 36px; }

/* ---------- Avatar (StudentAvatar) ---------- */

.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--muted); color: var(--foreground);
  font-size: 0.75rem; font-weight: 500;
}
.avatar-lg { width: 48px; height: 48px; font-size: 1rem; }

/* ---------- Meter (misma rampa en relleno y pista) ---------- */

.meter { height: 8px; border-radius: 999px; background: color-mix(in oklab, var(--primary) 16%, var(--card)); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: var(--primary); }

/* ---------- Popover y menú ---------- */

.popover {
  position: absolute; z-index: 50;
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px);
  box-shadow: var(--shadow-lg); padding: 4px;
}
.popover[hidden] { display: none; }
.menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border-radius: calc(var(--radius) - 4px); text-align: left;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--accent); color: var(--accent-foreground); }
.menu-label { padding: 6px 8px; font-weight: 500; }
.menu-sep { height: 1px; margin: 4px -4px; background: var(--border); }

/* ---------- Toast (sonner) ---------- */

.toaster {
  position: fixed; right: 16px; bottom: 16px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 8px; min-width: 260px; max-width: 356px;
  padding: 14px 16px; border-radius: calc(var(--radius) - 2px);
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  font-size: 0.8125rem; animation: toast-in .2s ease-out;
}
.toast .icon { color: var(--success); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Pie (AppFooter, C8) ---------- */

.app-footer {
  border-top: 1px solid var(--border);
  padding: 12px 16px; text-align: center;
  font-size: 0.75rem; line-height: 1rem;
}
.app-footer .inst { color: var(--muted-foreground); }
.app-footer .sep { color: color-mix(in oklab, var(--muted-foreground) 40%, transparent); margin: 0 6px; }
.app-footer .credit { color: color-mix(in oklab, var(--muted-foreground) 50%, transparent); }
.app-footer .credit:hover { text-decoration: underline; }

/* ---------- Logo de la institución ---------- */

.brand-logo { background: #fff; border-radius: calc(var(--radius) - 2px); object-fit: contain; }

/* ---------- Marco de teléfono para las apps Android ---------- */

body.maqueta-movil {
  min-height: 100vh;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px;
  padding: 32px 16px;
  background: var(--muted);
}
.device {
  position: relative; width: 392px; height: 836px; flex-shrink: 0;
  border: 12px solid oklch(0.2 0 0); border-radius: 48px;
  background: var(--background); overflow: hidden;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.35);
}
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.statusbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 32px; padding: 0 20px; flex-shrink: 0;
  font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.statusbar .icons { display: flex; gap: 6px; align-items: center; }
.statusbar .icon { width: 14px; height: 14px; }
.screen .toaster { position: absolute; left: 16px; right: 16px; bottom: 88px; align-items: center; }
.screen .toast { min-width: 0; width: 100%; }

.demo-panel {
  width: 280px; display: flex; flex-direction: column; gap: 12px;
}
.demo-panel h1 { font-size: 1.125rem; font-weight: 600; }
.demo-panel p { color: var(--muted-foreground); }
.demo-panel .btn { justify-content: flex-start; }

@media (max-width: 480px) {
  body.maqueta-movil { padding: 0; gap: 0; background: var(--background); }
  .device { width: 100%; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  .statusbar { display: none; }
  .demo-panel { width: 100%; padding: 24px 16px; border-top: 1px solid var(--border); }
}