/* =====================================================================
   Cuadrícula — sistema de diseño
   Concepto: cuaderno de cuadrícula, tinta de bolígrafo azul,
   marcatextos y el sello de "¡Hecho!" de la maestra.
   ===================================================================== */

@font-face { font-family: "Bricolage"; src: url("../vendor/fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("../vendor/fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("../vendor/fonts/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains"; src: url("../vendor/fonts/jetbrains.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  /* Papel y tinta */
  --papel:        #F6F8FB;
  --hoja:         #FFFFFF;
  --reticula:     rgba(31, 79, 216, .075);
  --reticula-f:   rgba(31, 79, 216, .14);
  --tinta:        #14213D;
  --tinta-2:      #3B4A6B;
  --tinta-3:      #6A7896;
  --linea:        #D9E0EC;
  --linea-f:      #B9C4D8;

  /* Bolígrafo azul (acción principal) */
  --azul:         #1F4FD8;
  --azul-osc:     #163BA6;
  --azul-claro:   #E6EDFF;

  /* Marcatextos (identidad de cada curso) */
  --mt-naranja:   #FFB067;
  --mt-verde:     #7EE8A1;
  --mt-cielo:     #82D4FF;
  --mt-amarillo:  #FFE25A;

  /* Estados: pluma roja de corrección y paloma verde */
  --rojo:         #D93636;
  --rojo-claro:   #FDECEC;
  --verde:        #0F8F4E;
  --verde-claro:  #E3F7EC;
  --ambar:        #B86E00;
  --ambar-claro:  #FFF4DD;

  /* Tipografía */
  --f-display: "Bricolage", "Atkinson", system-ui, sans-serif;
  --f-texto:   "Atkinson", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-codigo:  "JetBrains", ui-monospace, "Cascadia Code", Consolas, monospace;

  --t-xs: .8125rem;   /* 13 */
  --t-sm: .9375rem;   /* 15 */
  --t-md: 1.0625rem;  /* 17 base */
  --t-lg: 1.3125rem;  /* 21 */
  --t-xl: 1.625rem;   /* 26 */
  --t-2xl: 2.0625rem; /* 33 */
  --t-3xl: 2.5625rem; /* 41 */
  --t-4xl: 3.25rem;   /* 52 */

  /* Espacio (múltiplos de la cuadrícula de 8) */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;

  /* Radios: chico para controles, mediano para hojas; las "estampas" son círculos */
  --r-s: 6px; --r-m: 12px; --r-l: 20px;

  /* Sombras: hoja apoyada sobre el escritorio */
  --sombra-hoja: 0 1px 0 var(--linea), 0 8px 24px -12px rgba(20, 33, 61, .18);
  --sombra-boton: 0 3px 0 var(--azul-osc);
  --sombra-flotante: 0 18px 50px -18px rgba(20, 33, 61, .35);

  --curso: var(--mt-cielo);
  --ease-salto: cubic-bezier(.34, 1.56, .64, 1);
  --ease-suave: cubic-bezier(.22, .8, .24, 1);

  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--tinta);
  background-color: var(--papel);
  background-image:
    linear-gradient(var(--reticula) 1px, transparent 1px),
    linear-gradient(90deg, var(--reticula) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--azul); text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.12; margin: 0; letter-spacing: -.015em; font-weight: 750; }
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }
p { margin: 0 0 var(--e3); }
code, kbd, pre { font-family: var(--f-codigo); font-size: .92em; }
:not(pre) > code {
  background: var(--azul-claro); color: var(--azul-osc);
  padding: .08em .38em; border-radius: 4px; white-space: nowrap;
}
::selection { background: var(--mt-amarillo); color: var(--tinta); }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Íconos (sprite Lucide) ---------- */
.ic { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-s { width: 1em; height: 1em; }
.ic-l { width: 1.6em; height: 1.6em; }

/* ---------- Botones ---------- */
.btn {
  --b-fondo: var(--hoja); --b-texto: var(--tinta); --b-borde: var(--linea-f); --b-sombra: var(--linea-f);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 44px; padding: 0 var(--e5);
  border: 2px solid var(--b-borde); border-radius: var(--r-m);
  background: var(--b-fondo); color: var(--b-texto);
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-md); letter-spacing: .005em;
  box-shadow: 0 3px 0 var(--b-sombra);
  transition: transform .12s var(--ease-suave), box-shadow .12s var(--ease-suave), background-color .15s;
  text-decoration: none; white-space: nowrap; user-select: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--b-sombra); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--b-sombra); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn-primario { --b-fondo: var(--azul); --b-texto: #fff; --b-borde: var(--azul); --b-sombra: var(--azul-osc); }
.btn-exito { --b-fondo: var(--verde); --b-texto: #fff; --b-borde: var(--verde); --b-sombra: #0A6537; }
.btn-peligro { --b-fondo: var(--hoja); --b-texto: var(--rojo); --b-borde: #F0B5B5; --b-sombra: #F0B5B5; }
.btn-fantasma { --b-fondo: transparent; --b-borde: transparent; --b-sombra: transparent; box-shadow: none; }
.btn-fantasma:hover { background: var(--azul-claro); box-shadow: none; transform: none; }
.btn-chico { min-height: 36px; padding: 0 var(--e4); font-size: var(--t-sm); border-radius: var(--r-s); }
.btn-grande { min-height: 56px; padding: 0 var(--e6); font-size: var(--t-lg); }
.btn-icono { padding: 0; width: 44px; }
.btn-icono.btn-chico { width: 36px; }
.btn-ancho { width: 100%; }

/* ---------- Campos ---------- */
.campo { display: grid; gap: var(--e2); }
.campo > span { font-weight: 700; font-size: var(--t-sm); color: var(--tinta-2); }
.entrada, .selector, .area {
  width: 100%; min-height: 46px; padding: var(--e2) var(--e3);
  background: var(--hoja); border: 2px solid var(--linea-f); border-radius: var(--r-s);
  transition: border-color .15s, box-shadow .15s;
}
.area { min-height: 110px; resize: vertical; line-height: 1.5; }
.entrada:focus, .selector:focus, .area:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px var(--azul-claro); }
.entrada[aria-invalid="true"] { border-color: var(--rojo); box-shadow: 0 0 0 4px var(--rojo-claro); }
.ayuda { font-size: var(--t-sm); color: var(--tinta-3); }
.error-campo { font-size: var(--t-sm); color: var(--rojo); font-weight: 700; display: flex; gap: 6px; align-items: center; }

.interruptor { display: inline-flex; align-items: center; gap: var(--e3); cursor: pointer; font-weight: 700; }
.interruptor input { appearance: none; width: 46px; height: 28px; border-radius: 999px; background: var(--linea-f); position: relative; transition: background .2s; margin: 0; flex: none; }
.interruptor input::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease-salto); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.interruptor input:checked { background: var(--verde); }
.interruptor input:checked::after { transform: translateX(18px); }

/* ---------- Hoja (superficie principal) ---------- */
.hoja {
  background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r-l);
  box-shadow: var(--sombra-hoja);
}

/* ---------- Etiquetas tipo marcatextos ---------- */
.marca {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 4px;
  background: color-mix(in srgb, var(--curso) 55%, transparent);
  font-weight: 700; font-size: var(--t-xs); color: var(--tinta);
}
.curso-html  { --curso: var(--mt-naranja); }
.curso-python{ --curso: var(--mt-verde); }
.curso-sql   { --curso: var(--mt-cielo); }
.curso-pysql { --curso: var(--mt-amarillo); }

/* ---------- Avisos (toasts) ---------- */
.avisos { position: fixed; z-index: 90; left: 50%; bottom: var(--e5); transform: translateX(-50%); display: grid; gap: var(--e2); width: min(92vw, 440px); pointer-events: none; }
.aviso {
  display: flex; gap: var(--e3); align-items: flex-start; padding: var(--e3) var(--e4);
  background: var(--tinta); color: #fff; border-radius: var(--r-m); box-shadow: var(--sombra-flotante);
  font-weight: 700; pointer-events: auto; animation: aviso-entra .35s var(--ease-salto) both;
}
.aviso.sale { animation: aviso-sale .25s ease-in both; }
.aviso .ic { margin-top: 2px; }
.aviso-exito .ic { color: var(--mt-verde); }
.aviso-error .ic { color: #FF9A9A; }
.aviso-info .ic { color: var(--mt-cielo); }

/* ---------- Diálogo ---------- */
.dialogo {
  border: none; padding: 0; border-radius: var(--r-l); background: var(--hoja); color: var(--tinta);
  width: min(94vw, 520px); max-height: 90vh; box-shadow: var(--sombra-flotante);
}
.dialogo::backdrop { background: rgba(20, 33, 61, .45); backdrop-filter: blur(2px); }
.dialogo[open] { animation: dialogo-entra .3s var(--ease-salto); }
.dialogo-cuerpo { padding: var(--e6); display: grid; gap: var(--e4); }
.dialogo-acciones { display: flex; gap: var(--e3); justify-content: flex-end; flex-wrap: wrap; }

/* ---------- Carga ---------- */
.cargando { display: grid; place-items: center; gap: var(--e3); padding: var(--e8) var(--e4); color: var(--tinta-3); font-weight: 700; }
.lapiz { width: 52px; height: 52px; }
.lapiz path { stroke: var(--azul); stroke-width: 3; fill: none; stroke-linecap: round; stroke-dasharray: 120; animation: garabato 1.4s ease-in-out infinite; }

.vacio { text-align: center; padding: var(--e7) var(--e4); color: var(--tinta-2); display: grid; justify-items: center; gap: var(--e3); }
.vacio .ic { width: 40px; height: 40px; color: var(--tinta-3); }

/* ---------- Texto con formato (lecciones) ---------- */
.prosa { max-width: 68ch; }
.prosa p { margin-bottom: var(--e3); }
.prosa ul, .prosa ol { margin: 0 0 var(--e3); padding-left: 1.3em; }
.prosa li { margin-bottom: 4px; }
.prosa strong { font-weight: 700; background: linear-gradient(transparent 58%, color-mix(in srgb, var(--mt-amarillo) 75%, transparent) 58%); }

pre.bloque {
  margin: 0; padding: var(--e4); background: #FBFCFE; border: 1px solid var(--linea); border-radius: var(--r-m);
  overflow-x: auto; line-height: 1.6; font-size: var(--t-sm); tab-size: 4;
  background-image: linear-gradient(90deg, transparent 38px, rgba(217,54,54,.18) 38px, rgba(217,54,54,.18) 39px, transparent 39px);
  padding-left: 52px; counter-reset: ln; position: relative;
}
pre.bloque .ln { display: block; position: relative; }
pre.bloque .ln::before { counter-increment: ln; content: counter(ln); position: absolute; left: -44px; width: 28px; text-align: right; color: var(--tinta-3); opacity: .6; }
pre.salida { margin: 0; padding: var(--e3) var(--e4); background: var(--tinta); color: #E7ECF8; border-radius: var(--r-m); font-size: var(--t-sm); white-space: pre-wrap; word-break: break-word; }

/* resaltado mínimo para bloques de solo lectura */
.tk-c { color: #6A7896; font-style: italic; }
.tk-s { color: #0F7A45; }
.tk-k { color: #1F4FD8; font-weight: 700; }
.tk-n { color: #B5520B; }
.tk-t { color: #B42C6B; }
.tk-a { color: #8A5A00; }
.tk-f { color: #0B6E99; }

/* ---------- Utilidades ---------- */
.fila { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }
.pila { display: grid; gap: var(--e4); }
.entre { justify-content: space-between; }
.tenue { color: var(--tinta-3); }
.chico { font-size: var(--t-sm); }
.mono { font-family: var(--f-codigo); }
.centro { text-align: center; }

/* ---------- Marca de la app (compartida) ---------- */
.marca-app { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); }
.logo { display: grid; grid-template-columns: repeat(2, 13px); gap: 3px; transform: rotate(-6deg); }
.logo i { width: 13px; height: 13px; border: 2px solid var(--tinta); border-radius: 3px; }
.logo i:nth-child(2) { background: var(--mt-amarillo); }
.logo i:nth-child(3) { background: var(--azul); border-color: var(--azul); }
.logo-texto { font-family: var(--f-display); font-weight: 800; font-size: var(--t-lg); letter-spacing: -.02em; }

/* ---------- Campos de cuenta (contraseña con ojo, medidor, casillas) ---------- */
.con-ojo { position: relative; }
.con-ojo .entrada { padding-right: 52px; }
.ojo {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 42px; height: 38px;
  display: grid; place-items: center; border: 0; background: transparent; border-radius: var(--r-s); color: var(--tinta-3); cursor: pointer;
}
.ojo:hover { background: var(--azul-claro); color: var(--azul); }
.ojo:focus-visible { outline: 3px solid var(--azul); }
.con-prefijo { display: flex; align-items: stretch; }
.con-prefijo b {
  display: grid; place-items: center; padding: 0 12px; background: var(--papel); border: 2px solid var(--linea-f); border-right: 0;
  border-radius: var(--r-s) 0 0 var(--r-s); font-family: var(--f-codigo); color: var(--tinta-3);
}
.con-prefijo .entrada { border-radius: 0 var(--r-s) var(--r-s) 0; }

/* Medidor de contraseña: cuatro rayitas que se llenan como una barra de lápiz */
.fuerza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; height: 6px; }
.fuerza i { border-radius: 3px; background: var(--linea); position: relative; overflow: hidden; }
.fuerza i::after { content: ""; position: absolute; inset: 0; background: var(--f-color, var(--rojo)); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-suave); }
.fuerza[data-nivel="1"] { --f-color: var(--rojo); }
.fuerza[data-nivel="2"] { --f-color: var(--ambar); }
.fuerza[data-nivel="3"] { --f-color: #2E9E5B; }
.fuerza[data-nivel="4"] { --f-color: var(--verde); }
.fuerza[data-nivel="1"] i:nth-child(-n+1)::after,
.fuerza[data-nivel="2"] i:nth-child(-n+2)::after,
.fuerza[data-nivel="3"] i:nth-child(-n+3)::after,
.fuerza[data-nivel="4"] i::after { transform: scaleX(1); }
.fuerza i:nth-child(2)::after { transition-delay: .05s; }
.fuerza i:nth-child(3)::after { transition-delay: .1s; }
.fuerza i:nth-child(4)::after { transition-delay: .15s; }

.casilla { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: var(--t-sm); color: var(--tinta-2); cursor: pointer; }
.casilla input {
  appearance: none; width: 24px; height: 24px; margin: 0; border: 2px solid var(--linea-f); border-radius: 6px; background: var(--hoja);
  display: grid; place-items: center; cursor: pointer; transition: border-color .15s, background .15s;
}
.casilla input::after {
  content: ""; width: 12px; height: 7px; border: solid #fff; border-width: 0 0 3px 3px; transform: rotate(-45deg) scale(0); margin-top: -3px;
  transition: transform .25s var(--ease-salto);
}
.casilla input:checked { background: var(--verde); border-color: var(--verde); }
.casilla input:checked::after { transform: rotate(-45deg) scale(1); }
.casilla input:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.casilla input[aria-invalid="true"] { border-color: var(--rojo); animation: temblor .4s; }
.casilla a { font-weight: 700; }