/* O the big — estilos
   Paleta sobria: fondo cálido, tinta oscura y un solo color de acento. */

:root {
  --fondo: #f6f4ef;
  --superficie: #fffdf9;
  --borde: #e4dfd5;
  --tinta: #1f1d1a;
  --tinta-suave: #6b665d;
  --acento: #4a3fc4;
  --acento-suave: #ece9fb;
  --sobre-acento: #ffffff;
  --codigo-fondo: #fbfaf6;
  --resaltado: #fff2c7;

  --alta: #1f7a4d;
  --alta-fondo: #e3f3ea;
  --media: #9a6200;
  --media-fondo: #fbf0d9;
  --nodet: #8a3b3b;
  --nodet-fondo: #f7e6e4;

  /* Colores de la sintaxis de Python */
  --sx-palabra: #8b3fa8;
  --sx-cadena: #2f7a3a;
  --sx-numero: #b5541c;
  --sx-comentario: #9a958b;
  --sx-funcion: #2b5fb3;
  --sx-builtin: #2b6f8a;

  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --radio: 14px;
  --sombra: 0 1px 2px rgba(31, 29, 26, 0.04), 0 8px 24px rgba(31, 29, 26, 0.04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #15141a;
    --superficie: #1c1b22;
    --borde: #2e2c36;
    --tinta: #ecebf2;
    --tinta-suave: #a19fae;
    --acento: #9d93ff;
    --acento-suave: #2a2744;
    --sobre-acento: #15141a;
    --codigo-fondo: #18171d;
    --resaltado: #3a3420;

    --alta: #6fd0a0;
    --alta-fondo: #1d3328;
    --media: #f0c060;
    --media-fondo: #3a2f17;
    --nodet: #f0a39b;
    --nodet-fondo: #3b2222;

    --sx-palabra: #d6a2f0;
    --sx-cadena: #8fd19a;
    --sx-numero: #f2a36e;
    --sx-comentario: #77738a;
    --sx-funcion: #8ab6ff;
    --sx-builtin: #7cc8e0;

    --sombra: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); }
code, kbd { font-family: var(--mono); font-size: 0.88em; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.saltar {
  position: absolute; left: 16px; top: -48px;
  background: var(--acento); color: #fff; padding: 8px 12px; border-radius: 8px;
}
.saltar:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---- Cabecera ---- */

.cabecera {
  max-width: 1200px; margin: 0 auto; padding: 22px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.marca { display: flex; align-items: baseline; gap: 6px; }
.marca-o {
  font-family: var(--serif); font-style: italic; font-size: 34px; line-height: 1;
  color: var(--acento);
}
.marca-texto { font-family: var(--serif); font-size: 24px; letter-spacing: 0.01em; }
.enlace-repo {
  color: var(--tinta-suave); text-decoration: none; font-size: 14px;
  padding: 6px 12px; border: 1px solid var(--borde); border-radius: 999px;
}
.enlace-repo:hover { color: var(--tinta); border-color: var(--tinta-suave); }

/* ---- Contenido ---- */

.contenido { max-width: 1200px; margin: 0 auto; padding: 8px 24px 40px; }

.intro { max-width: 640px; margin: 12px 0 32px; }
.intro h1 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5vw, 48px);
  line-height: 1.1; margin: 0 0 12px; letter-spacing: -0.01em;
}
.intro p { margin: 0; color: var(--tinta-suave); font-size: 16px; }

.paneles {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px;
  align-items: start;
}

.panel {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 20px; min-width: 0;
}
.panel-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.panel h2 {
  margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinta-suave);
}

/* ---- Editor ---- */

.ejemplos select {
  font: inherit; font-size: 13px; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px;
  padding: 5px 28px 5px 10px; cursor: pointer;
}

.editor { border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.editor .CodeMirror {
  height: 420px; font-family: var(--mono); font-size: 13.5px; line-height: 1.65;
  background: var(--codigo-fondo); color: var(--tinta);
}
.editor .CodeMirror-gutters { background: var(--codigo-fondo); border-right: 1px solid var(--borde); }
.editor .CodeMirror-linenumber { color: var(--sx-comentario); padding: 0 10px 0 8px; }
.editor .CodeMirror-cursor { border-left: 2px solid var(--acento); }
.editor .CodeMirror-selected { background: var(--acento-suave) !important; }
.editor .CodeMirror-lines { padding: 12px 0; }
.editor .CodeMirror pre.CodeMirror-placeholder { color: var(--sx-comentario); }
.editor .cm-keyword { color: var(--sx-palabra); }
.editor .cm-def { color: var(--sx-funcion); font-weight: 500; }
.editor .cm-builtin { color: var(--sx-builtin); }
.editor .cm-string { color: var(--sx-cadena); }
.editor .cm-number { color: var(--sx-numero); }
.editor .cm-comment { color: var(--sx-comentario); font-style: italic; }
.editor .cm-operator, .editor .cm-variable, .editor .cm-variable-2 { color: var(--tinta); }
.editor .cm-property { color: var(--sx-funcion); }
.editor .CodeMirror-matchingbracket { color: var(--acento) !important; text-decoration: underline; }
.editor .linea-resaltada { background: var(--resaltado); }

.opciones { margin-top: 12px; font-size: 14px; }
.opciones summary { cursor: pointer; color: var(--tinta-suave); }
.opciones summary:hover { color: var(--tinta); }
.opciones label { display: block; margin: 8px 0 6px; color: var(--tinta-suave); font-size: 13px; }
.opciones input {
  width: 100%; font-family: var(--mono); font-size: 13px; color: var(--tinta);
  background: var(--codigo-fondo); border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px;
}

.acciones { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

.boton {
  font: inherit; font-weight: 500; border-radius: 10px; padding: 10px 18px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px; border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.boton:disabled { opacity: 0.5; cursor: not-allowed; }
.boton-principal { background: var(--acento); color: var(--sobre-acento); }
.boton-principal:not(:disabled):hover { filter: brightness(1.08); }
.boton-secundario { background: transparent; color: var(--tinta-suave); border-color: var(--borde); }
.boton-secundario:hover { color: var(--tinta); border-color: var(--tinta-suave); }
.atajo {
  font-size: 11px; padding: 1px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--sobre-acento) 18%, transparent); color: inherit;
}
.estado { margin: 0; color: var(--tinta-suave); font-size: 13px; }

.progreso { height: 2px; margin-top: 14px; background: var(--borde); border-radius: 2px; overflow: hidden; }
.progreso-barra { height: 100%; width: 0; background: var(--acento); transition: width 0.4s ease; }
.progreso.oculto { visibility: hidden; }

/* ---- Resultado ---- */

.aviso {
  margin: -6px 0 16px; font-size: 13px; color: var(--tinta-suave);
  padding-left: 10px; border-left: 2px solid var(--borde);
}

.vacio { text-align: center; padding: 48px 12px 40px; color: var(--tinta-suave); }
.vacio-o { font-family: var(--serif); font-size: 64px; line-height: 1; margin: 0 0 12px; color: var(--borde); }

.cifra { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 6px; }
.cifra-o {
  font-family: var(--serif); font-size: clamp(48px, 7vw, 68px); line-height: 1; letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.cifra-o.sin-resultado { font-size: 34px; color: var(--tinta-suave); }

.insignia {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  letter-spacing: 0.02em; white-space: nowrap;
}
.insignia-alta { color: var(--alta); background: var(--alta-fondo); }
.insignia-media { color: var(--media); background: var(--media-fondo); }
.insignia-nodet { color: var(--nodet); background: var(--nodet-fondo); }

.definiciones { margin: 6px 0 0; color: var(--tinta-suave); font-size: 14px; }
.definiciones code { color: var(--tinta); }
.analizada { margin: 4px 0 0; font-size: 13px; color: var(--tinta-suave); }

.errores {
  background: var(--nodet-fondo); color: var(--nodet); border-radius: 10px;
  padding: 12px 14px; margin: 0; font-size: 14px;
}

.seccion-titulo {
  margin: 26px 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinta-suave);
}

.pasos { list-style: none; margin: 0; padding: 0; }
.paso {
  display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 9px 0;
  border-top: 1px solid var(--borde); font-size: 14px;
}
.paso:first-child { border-top: none; }
.paso-texto { min-width: 0; overflow-wrap: anywhere; }
.paso-texto code {
  background: var(--codigo-fondo); border: 1px solid var(--borde); border-radius: 5px;
  padding: 0 4px;
}
.paso-final .paso-texto { font-weight: 600; }

.linea {
  font-family: var(--mono); font-size: 11.5px; color: var(--tinta-suave);
  background: transparent; border: 1px solid var(--borde); border-radius: 6px;
  padding: 1px 0; height: fit-content; cursor: pointer; text-align: center;
}
.linea:hover { color: var(--acento); border-color: var(--acento); }
.linea-vacia { border-color: transparent; cursor: default; }

.funciones { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.funciones li {
  font-size: 13px; border: 1px solid var(--borde); border-radius: 999px; padding: 4px 12px;
}
.funciones code { color: var(--tinta); }

/* ---- Pie ---- */

.pie {
  max-width: 1200px; margin: 0 auto; padding: 24px; text-align: center;
  color: var(--tinta-suave); font-size: 13px; border-top: 1px solid var(--borde);
}
.pie p { margin: 0; }

/* ---- Pantallas pequeñas ---- */

@media (max-width: 880px) {
  .paneles { grid-template-columns: 1fr; }
  .editor .CodeMirror { height: 320px; }
}

@media (max-width: 520px) {
  .cabecera, .contenido { padding-left: 16px; padding-right: 16px; }
  .panel { padding: 16px; }
  .atajo { display: none; }
  .paso { grid-template-columns: 36px 1fr; }
}