/*
 * Aristas © 2026 LM_Teo. Todos los derechos reservados.
 * Estilos base de la interfaz.
 */

/* ---------- Tokens ---------- */
:root {
  --fondo: #f4f6fb;
  --superficie: #ffffff;
  --borde: #dfe3ec;
  --texto: #1d2433;
  --texto-suave: #5b6476;
  --primario: #3b5bdb;
  --primario-suave: #e7ecff;

  /* Estados de nodos y aristas (los usa tambien main.js) */
  --estado-novisitado: #adb5bd;
  --estado-encola: #f59f00;
  --estado-actual: #3b5bdb;
  --estado-visitado: #2f9e44;
  --estado-camino: #e03131;

  --radio: 10px;
  --sombra: 0 1px 3px rgba(20, 30, 60, .08), 0 4px 16px rgba(20, 30, 60, .05);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.5 var(--fuente);
}

h1, h2, p { margin: 0; }

button, select, input, textarea { font: inherit; color: inherit; }

code { font-family: var(--mono); font-size: .9em; background: var(--fondo); padding: 1px 4px; border-radius: 4px; }

/* ---------- Cabecera ---------- */
.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

.marca { display: flex; align-items: center; gap: 10px; }

.marca__logo svg line { stroke: var(--primario); stroke-width: 2; }
.marca__logo svg circle { fill: var(--superficie); stroke: var(--primario); stroke-width: 2.5; }

.marca__nombre { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.marca__lema { font-size: .8rem; color: var(--texto-suave); }

.modos { display: flex; gap: 4px; background: var(--fondo); padding: 4px; border-radius: var(--radio); }

.modo {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--texto-suave);
  font-weight: 500;
}
.modo:hover { color: var(--texto); }
.modo.activo { background: var(--superficie); color: var(--primario); box-shadow: var(--sombra); }
.modo--aprender[aria-pressed="true"] { background: var(--estado-encola); color: #fff; }

.btn-glosario {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto-suave);
  font-weight: 500;
  cursor: pointer;
}
.btn-glosario svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.btn-glosario:hover { color: var(--primario); border-color: var(--primario); }

/* ---------- Distribucion principal ---------- */
.principal {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  padding: 16px 20px;
  min-height: 0;
}

.zona-grafo {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

/* ---------- Barra de herramientas ---------- */
.barra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
}

.barra__sep { width: 1px; height: 22px; background: var(--borde); }
/* Ancho fijo: si no, crece con el titulo mas largo y empuja los botones a otra linea. */
#sel-ejemplo { width: 120px; }

.interruptor { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.interruptor input { accent-color: var(--primario); width: 16px; height: 16px; }

select, .btn {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--borde);
  border-radius: 7px;
  background: var(--superficie);
  cursor: pointer;
}

.btn { background: var(--primario); border-color: var(--primario); color: #fff; font-weight: 500; }
.btn:hover { filter: brightness(1.08); }
.btn--sutil { background: var(--superficie); border-color: var(--borde); color: var(--texto); }
.btn--sutil:hover { background: var(--fondo); filter: none; }

/* ---------- Lienzo ---------- */
.lienzo-contenedor { position: relative; flex: 1; min-height: 360px; }

.lienzo {
  position: absolute;
  inset: 0;
  background-color: #fbfcfe;
  background-image: radial-gradient(#dfe3ec 1px, transparent 1px);
  background-size: 22px 22px;
}

.lienzo__ayuda {
  position: absolute;
  left: 12px;
  bottom: 10px;
  right: 12px;
  font-size: .78rem;
  color: var(--texto-suave);
  pointer-events: none;
}

.lienzo-vacio {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(320px, 80%);
  text-align: center;
  font-size: .9rem;
  color: var(--texto-suave);
  pointer-events: none;
}
.lienzo-vacio strong { display: block; margin-bottom: 4px; font-size: 1.05rem; color: var(--texto); }
body[data-modo="resolver"] .lienzo-vacio { display: none; }

.aviso {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: max-content;
  max-width: calc(100% - 100px);
  padding: 8px 14px;
  pointer-events: none;
  border-radius: 8px;
  background: var(--texto);
  color: #fff;
  font-size: .85rem;
  box-shadow: var(--sombra);
}

.editor-inline {
  position: absolute;
  z-index: 3;
  width: 110px;
  height: 32px;
  padding: 0 8px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--primario);
  border-radius: 7px;
  background: var(--superficie);
  text-align: center;
  font-weight: 600;
  box-shadow: var(--sombra);
}
.editor-inline:focus { outline: none; }

.btn-ayuda {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--primario);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--sombra);
}
.btn-ayuda:hover { background: var(--primario); border-color: var(--primario); color: #fff; }

/* Herramientas sobre el lienzo: sirven tambien en celular, donde no hay teclas */
.herramientas {
  position: absolute;
  top: 48px;
  right: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.herramientas button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--sombra);
}
.herramientas button:hover:not(:disabled) { color: var(--primario); border-color: var(--primario); }
.herramientas button:disabled { opacity: .4; cursor: default; }
body[data-modo="resolver"] .solo-editar { display: none; }

kbd {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  border: 1px solid var(--borde);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--fondo);
  font-family: var(--mono);
  font-size: .8em;
  text-align: center;
  color: var(--texto);
}

/* ---------- Dialogo de ayuda ---------- */
.ayuda {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0 22px 18px;
  border: 0;
  border-radius: 14px;
  background: var(--superficie);
  color: var(--texto);
  box-shadow: 0 20px 60px rgba(20, 30, 60, .25);
}
.ayuda::backdrop { background: rgba(20, 30, 60, .35); }

.ayuda__cabecera {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 8px;
  background: var(--superficie);
}
.ayuda__cabecera h2 { font-size: 1.15rem; }

.ayuda h3 {
  margin: 14px 0 6px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--primario);
}

.btn-cerrar {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--texto-suave);
}
.btn-cerrar:hover { background: var(--fondo); color: var(--texto); }

.atajos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  margin: 0;
  font-size: .88rem;
}
.atajos dt, .atajos dd { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--fondo); }
.atajos dt { padding-right: 12px; }
.atajos dd { color: var(--texto-suave); }

.accion { font-weight: 600; }

/* Exportar */
.ayuda--corta { width: min(420px, calc(100vw - 32px)); }
.opciones-exportar { display: grid; gap: 8px; margin-bottom: 10px; }
.opciones-exportar button {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 14px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--superficie);
  text-align: left;
  cursor: pointer;
}
.opciones-exportar button:hover:not(:disabled) { border-color: var(--primario); background: var(--primario-suave); }
.opciones-exportar button:disabled { opacity: .45; cursor: not-allowed; }
.opciones-exportar span { font-size: .8rem; color: var(--texto-suave); }

/* Glosario */
.glosario__buscar {
  width: 100%;
  height: 36px;
  margin: 4px 0 4px;
  padding: 0 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
}
.glosario__buscar:focus { outline: 2px solid var(--primario); outline-offset: 1px; }
.glosario { margin: 0; font-size: .88rem; }
.glosario__item { padding: 7px 0; border-bottom: 1px solid var(--fondo); }
.glosario dt { font-weight: 600; }
.glosario dd { margin: 2px 0 0; color: var(--texto-suave); }

/* ---------- Reproductor ---------- */
.reproductor {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--borde);
}

.btn-icono {
  width: 36px;
  height: 36px;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: var(--superficie);
  cursor: pointer;
  font-size: .85rem;
}
.btn-icono:hover { background: var(--fondo); }
.btn-icono--principal { width: 42px; height: 42px; background: var(--primario); border-color: var(--primario); color: #fff; }
.btn-icono--principal:hover { background: var(--primario); filter: brightness(1.08); }
.btn-icono:disabled { opacity: .4; cursor: default; }

.reproductor__contador { margin-left: 8px; font-family: var(--mono); font-size: .85rem; color: var(--texto-suave); }

.reproductor__velocidad { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--texto-suave); }
.reproductor__velocidad input { accent-color: var(--primario); width: 100px; }

/* ---------- Panel lateral ---------- */
.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.pestanas { display: flex; border-bottom: 1px solid var(--borde); }

.pestana {
  flex: 1;
  padding: 10px 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  color: var(--texto-suave);
  font-weight: 500;
}
.pestana:hover { color: var(--texto); }
.pestana.activa { color: var(--primario); border-bottom-color: var(--primario); }

.contenido { padding: 14px 16px; overflow-y: auto; flex: 1; }

.panel__titulo {
  display: block;
  margin: 16px 0 6px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
}
.contenido > .panel__titulo:first-child { margin-top: 0; }

.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.campo label { font-size: .8rem; color: var(--texto-suave); }
.campo select { width: 100%; }
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.explicacion {
  padding: 10px 12px;
  background: var(--primario-suave);
  border-left: 3px solid var(--primario);
  border-radius: 6px;
}

/* Tarjeta del algoritmo: resumen siempre visible, detalle al desplegar */
.info-algoritmo {
  margin: -2px 0 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo);
  font-size: .85rem;
}
.info-algoritmo summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}
.info-algoritmo summary::-webkit-details-marker { display: none; }
.info-algoritmo__usa { font-size: .78rem; color: var(--texto-suave); }
.info-algoritmo__mas { font-size: .78rem; font-weight: 600; color: var(--primario); }
.info-algoritmo__mas::after { content: ' ▾'; }
.info-algoritmo[open] .info-algoritmo__mas { font-size: 0; }
.info-algoritmo[open] .info-algoritmo__mas::after { content: 'Ver menos ▴'; font-size: .78rem; }
.info-algoritmo__detalle { margin: 0; padding: 0 12px 10px; }
.info-algoritmo__detalle dt { margin-top: 6px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.info-algoritmo__detalle dd { margin: 2px 0 0; }

.estructura { font-size: .85rem; }
.estructura__rotulo { color: var(--texto-suave); font-size: .78rem; overflow-wrap: anywhere; }
.estructura__chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; min-height: 28px; align-items: center; font-family: var(--mono); }
.chip { padding: 2px 9px; border-radius: 6px; background: var(--estado-encola); color: var(--texto); font-weight: 600; }
.estructura .mate__tabla { margin: 4px 0 0; }
.estructura .fila--fija td { background: #e6f4ea; color: #1b6e30; font-weight: 600; }
select:disabled { opacity: .5; cursor: not-allowed; }
/* En Resolver los clics no crean nodos: esta ayuda sobraria. */
body[data-modo="resolver"] .lienzo__ayuda { display: none; }

.vacio { color: var(--texto-suave); }

.leyenda { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: .85rem; }
.leyenda li { display: flex; align-items: center; gap: 8px; }

.punto { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.punto--novisitado { background: var(--estado-novisitado); }
.punto--encola { background: var(--estado-encola); }
.punto--actual { background: var(--estado-actual); }
.punto--visitado { background: var(--estado-visitado); }
.punto--camino { background: var(--estado-camino); }

textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--borde);
  border-radius: 7px;
  font-family: var(--mono);
  font-size: .85rem;
  resize: vertical;
}
textarea:focus, select:focus-visible, button:focus-visible { outline: 2px solid var(--primario); outline-offset: 1px; }

.formatos { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 8px 0 0; font-size: .8rem; }
.formatos dt { color: var(--texto-suave); }
.formatos dd { margin: 0; }

.nota { margin: 6px 0 10px; font-size: .8rem; color: var(--texto-suave); }
.error { margin-top: 8px; font-size: .85rem; color: var(--estado-camino); }
.error:empty { display: none; }

/* Vista matematica: secciones plegables para no saturar el panel */
.mate { font-size: .88rem; }
.mate__seccion { border-bottom: 1px solid var(--borde); }
.mate__seccion:last-child { border-bottom: 0; }
.mate__seccion summary {
  padding: 8px 0;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
}
.mate__seccion summary:hover { color: var(--primario); }
.mate__cuerpo { padding-bottom: 12px; }
.mate__tipo { margin-bottom: 8px; color: var(--texto-suave); font-size: .8rem; }
.mate__formula { font-family: var(--mono); overflow-wrap: anywhere; }
.mate__medida { margin: 2px 0 8px; font-family: var(--mono); color: var(--primario); font-size: .82rem; }
.mate__lista { margin: 0; padding: 0; list-style: none; font-family: var(--mono); overflow-wrap: anywhere; }
.mate__lista li { padding: 2px 0; }

.mate__tabla { overflow-x: auto; margin-bottom: 6px; }
.mate__tabla table { border-collapse: collapse; font-family: var(--mono); font-size: .82rem; }
.mate__tabla th, .mate__tabla td { min-width: 34px; padding: 4px 8px; border: 1px solid var(--borde); text-align: center; white-space: nowrap; }
.mate__tabla th { background: var(--fondo); font-weight: 600; }
.mate__tabla th:empty { background: transparent; border-color: transparent; }
.mate__nulo { color: var(--estado-novisitado); }

.aprender {
  margin: 0 12px 12px;
  padding: 12px 14px;
  border: 1px solid var(--estado-encola);
  border-radius: var(--radio);
  background: #fff8e6;
}
.aprender .panel__titulo { margin-top: 0; color: #a86b00; }
.aprender { max-height: 55%; overflow-y: auto; flex: none; font-size: .88rem; }
.aprender__datos { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 8px 0; }
.aprender__datos dt { color: var(--texto-suave); }
.aprender__datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.aprender .nota { margin-bottom: 0; }
body[data-aprendiendo="true"] .lienzo { cursor: help; }

/* ---------- Pie ---------- */
.pie {
  padding: 10px 20px;
  text-align: center;
  font-size: .8rem;
  color: var(--texto-suave);
}
.pie strong { color: var(--texto); }
.pie__autoria { display: block; margin-top: 2px; font-weight: 600; color: var(--texto); }
.pie__presentado { display: block; margin-top: 1px; }
.pie__desc { display: block; margin-top: 2px; font-size: .75rem; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* En pantallas pequenas la pagina hace scroll en vez de comprimir el lienzo */
  html, body { height: auto; }
  .principal { grid-template-columns: 1fr; padding: 12px; }
  .lienzo-contenedor { flex: none; height: 60vh; min-height: 320px; }
  /* La explicacion queda arriba del panel, lo mas cerca posible del lienzo. */
  .aprender { order: -1; margin: 12px 12px 0; max-height: none; }
}

@media (max-width: 520px) {
  .cabecera { padding: 10px 12px; }
  .modos { width: 100%; }
  .modo { flex: 1; padding: 6px 8px; }
  .barra__sep { display: none; }
  .reproductor__velocidad { margin-left: 0; width: 100%; }
  .lienzo__ayuda { display: none; }
  .atajos { grid-template-columns: 1fr; }
  .atajos dt { border-bottom: 0; padding-bottom: 0; }
}