/* EDA - demos de practicas. Hoja unica, sin dependencias externas. */

:root {
  --fondo:        #f6f7f9;
  --fondo-panel:  #ffffff;
  --fondo-hueco:  #eceef2;
  --texto:        #1a1d23;
  --texto-suave:  #5a6270;
  --borde:        #d8dce3;
  --acento:       #1f5fd0;
  --acento-suave: #e8effb;
  /* las lineas resaltadas: tiene que verse tambien en un proyector */
  --resaltado:    #d9e5fa;
  /* translucida: por debajo asoma el codigo coloreado */
  --seleccion:    rgba(31, 95, 208, .22);

  --ok:      #1a7f4b;
  --mal:     #c0292b;
  --caro:    #9a6207;  --caro-fondo:    #fdf3e0;
  --nocomp:  #6b3fa0;  --nocomp-fondo:  #f2ecfb;

  --c-coment: #56616d;
  --c-clave:  #b5197c;
  --c-tipo:   #1f5fd0;
  --c-cadena: #1a7f4b;
  --c-num:    #9a6207;
  --c-pre:    #7a5c00;

  --mono: "Cascadia Code", "JetBrains Mono", Consolas, ui-monospace, monospace;
  --sans: "Titillium Web", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r: 10px;
  --escala: 1;
  --cuerpo: .94rem;
  --codigo: .875rem;
  --salida: .97rem;
}

/* Un unico sitio del que cuelga el tamanyo de letra de toda la pagina: las
   teclas + y - solo tocan --escala.  Cada aula pide un tamanyo distinto. */
html { font-size: calc(16px * var(--escala)); }

html[data-tema="oscuro"] {
  --fondo:        #14171c;
  --fondo-panel:  #1b1f26;
  --fondo-hueco:  #22272f;
  --texto:        #e6e9ee;
  --texto-suave:  #9aa4b2;
  --borde:        #2e3540;
  --acento:       #6fa8ff;
  --acento-suave: #1c2a41;
  --resaltado:    #22375a;
  --seleccion:    rgba(111, 168, 255, .30);

  --ok:      #52d08a;
  --mal:     #ff8080;
  --caro:    #f0b45e;  --caro-fondo:    #33270f;
  --nocomp:  #bfa0ef;  --nocomp-fondo:  #271d38;

  --c-coment: #a3adb9;
  --c-clave:  #ff8ad0;
  --c-tipo:   #6fa8ff;
  --c-cadena: #6fd694;
  --c-num:    #f0b45e;
  --c-pre:    #d9b55c;
}

* { box-sizing: border-box; }
/* display:block de .editor le ganaba al atributo hidden */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--cuerpo);
  color: var(--texto);
  background: var(--fondo);
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.saltar {
  position: absolute; left: -9999px;
  background: var(--acento); color: #fff; padding: 8px 14px;
  border-radius: 0 0 var(--r) 0; z-index: 100;
}
.saltar:focus { left: 0; top: 0; }

/* ---------- cabecera ---------- */
.cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 20px;
  background: var(--fondo-panel);
  border-bottom: 1px solid var(--borde);
}
.marca { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.marca-eda { font-weight: 700; letter-spacing: .08em; font-size: 1.05rem; color: var(--acento); }
.marca-sub { color: var(--texto-suave); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acciones { display: flex; gap: 8px; flex-shrink: 0; }

.btn {
  font: inherit; font-size: .88rem;
  padding: 6px 12px;
  color: var(--texto);
  background: var(--fondo-hueco);
  border: 1px solid var(--borde);
  border-radius: 7px;
  cursor: pointer;
}
.btn:hover { border-color: var(--acento); color: var(--acento); }
.btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- disposicion ---------- */
.disposicion { display: flex; flex: 1 1 auto; min-height: 0; align-items: stretch; }

.lateral {
  width: 260px; flex-shrink: 0;
  padding: 18px 12px 30px;
  border-right: 1px solid var(--borde);
  background: var(--fondo-panel);
  overflow: auto;
}
.lat-practica { margin: 0 0 6px; padding: 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-suave); }
.lat-lista { list-style: none; margin: 0 0 20px; padding: 0; }
.lat-lista a {
  display: block; padding: 7px 10px; margin-bottom: 2px;
  color: var(--texto); text-decoration: none;
  border-radius: 7px; font-size: .93rem; line-height: 1.3;
  border-left: 3px solid transparent;
}
.lat-lista a:hover { background: var(--fondo-hueco); }
.lat-lista a[aria-current="true"] { background: var(--acento-suave); color: var(--acento); font-weight: 600; border-left-color: var(--acento); }
.lat-lista code { font-family: var(--mono); font-size: .88em; background: none; padding: 0; }
html[data-lateral="oculto"] .lateral { display: none; }

/* ---------- principal ---------- */
/* La columna llega hasta abajo y son los paneles los que se comen el hueco
   que sobra: asi el codigo y la salida usan toda la altura de la ventana. */
.principal { flex: 1 1 auto; min-width: 0; min-height: 0; padding: 22px 34px 26px;
             display: flex; flex-direction: column; }
.cargando { color: var(--texto-suave); padding: 40px 0; }

.serie-cab { margin-bottom: 16px; }
.serie-cab h1 { margin: 0 0 6px; font-size: 1.5rem; line-height: 1.2; font-weight: 700; }

/* ---------- pestanyas ---------- */
.pestanyas { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 14px; }
.pest {
  font: inherit; font-size: .9rem;
  padding: 7px 14px;
  background: var(--fondo-panel);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.pest:hover { border-color: var(--acento); }
.pest[aria-selected="true"] { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
.pest .punto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pest[aria-selected="true"] .punto { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.punto-ok { background: var(--ok); }
.punto-mal { background: var(--mal); }
.punto-caro { background: var(--caro); }
.punto-nocomp { background: var(--nocomp); }

/* ---------- paneles ---------- */
.paneles { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 14px; }
/* mismo tope para los dos: la rejilla los estira a la misma altura y cada uno
   se desplaza por dentro.  Sin el tope, una salida larga estiraba la fila. */
.demo { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.paneles { flex: 0 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.panel-codigo,
.panel-salida { display: flex; flex-direction: column; min-height: 0; }
.codigo-scroll,
.panel-salida pre.salida { flex: 1 1 auto; min-height: 0; overflow: auto; }

.panel { background: var(--fondo-panel); border: 1px solid var(--borde); border-radius: var(--r); overflow: hidden; }
.panel-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--borde); background: var(--fondo-hueco);
}
.panel-cab h2 { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.panel-cab h2,
.panel-cab .mini { height: 1.75rem; display: inline-flex; align-items: center; }

pre.codigo, pre.salida {
  margin: 0; padding: 14px 16px; overflow-x: auto;
  font-family: var(--mono); font-size: var(--codigo); line-height: 1.55; tab-size: 4;
}

pre.salida { background: var(--fondo-panel); white-space: pre; min-height: 6em; font-size: var(--salida); }
/* pre (y no pre-wrap): los  ^~~~~  de g++ tienen que caer bajo el token que senyalan */

.lin { display: block; padding: 0 4px; margin: 0 -4px; border-radius: 3px; }
.lin-clave { background: var(--resaltado); box-shadow: inset 3px 0 0 var(--acento); }
/* sobre el resaltado del tema claro, cadenas y numeros se quedaban por debajo
   de 4.5:1; un punto mas oscuros ahi y solo ahi */
html:not([data-tema="oscuro"]) .lin-clave {
  --c-cadena: #15693e; --c-num: #815205; --c-clave: #a8166f; --c-tipo: #1a54bb;
}

.tk-coment { color: var(--c-coment); font-style: italic; }
.tk-clave  { color: var(--c-clave); }
.tk-tipo   { color: var(--c-tipo); }
.tk-cadena { color: var(--c-cadena); }
.tk-num    { color: var(--c-num); }
.tk-pre    { color: var(--c-pre); }

.sal-diag  { color: var(--mal); }
.sal-instr { color: var(--texto-suave); }
.sal-dir   { color: var(--c-tipo); font-weight: 700; }
.sal-dir-b { color: var(--mal); font-weight: 700; }

.procedencia { margin: 0; padding: 7px 14px; border-top: 1px solid var(--borde); font-size: .74rem; color: var(--texto-suave); font-family: var(--mono); }


/* ---------- pie ---------- */
.pie { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 10px 20px; border-top: 1px solid var(--borde); background: var(--fondo-panel); font-size: .78rem; color: var(--texto-suave); }
kbd { font-family: var(--mono); font-size: .92em; border: 1px solid var(--borde); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; margin: 0 1px; background: var(--fondo-hueco); }

/* ---------- modo presentacion ---------- */
html[data-pres="1"] { --cuerpo: 1.05rem; --codigo: 1rem; --salida: 1.1rem; }
html[data-pres="1"] .cabecera,
html[data-pres="1"] .lateral,
html[data-pres="1"] .pie { display: none; }
html[data-pres="1"] .serie-cab h1 { font-size: 1.65rem; }
html[data-pres="1"] .pest { font-size: .95rem; padding: 8px 16px; }
html[data-pres="1"] .principal { padding: 26px 40px 30px; }

/* ---------- la clase: laminas a pantalla completa ----------
   La lamina es una imagen, asi que --escala no le hace nada: para agrandarla,
   F.  El fondo es oscuro en los dos temas porque proyectado un marco blanco
   alrededor de la diapositiva deslumbra. */
/* OJO: el padding 0 es de la LAMINA, no de la clase.  Colgado de data-clase
   se lo comia tambien la vista de codigo, y el codigo salia pegado a los cuatro
   bordes de la ventana. */
html[data-vista="lamina"] .principal { padding: 0; }
.lamina {
  margin: 0; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: #0b0d10;
}
.lamina img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- mosaico (M) ---------- */
/* opaco del todo: con un poco de transparencia se lee la lamina de debajo y las
   miniaturas se vuelven ilegibles */
.mosaico { position: fixed; inset: 0; z-index: 50; overflow: auto; padding: 24px;
           background: #0b0d10; }
.mosaico-rejilla { display: grid; gap: 12px;
                   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.mosaico-rejilla button {
  padding: 0; border: 2px solid transparent; border-radius: 6px;
  background: none; cursor: pointer; font: inherit;
}
.mosaico-rejilla button:hover,
.mosaico-rejilla button:focus-visible { border-color: var(--acento); outline: none; }
.mosaico-rejilla img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; }
.mosaico-demo {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 16 / 9; border-radius: 4px; padding: 10px;
  background: var(--acento); color: #fff; font-weight: 600;
}

@media (max-width: 900px) {
  body { height: auto; min-height: 100vh; }
  .paneles { grid-template-columns: 1fr; flex: none; }
  .panel-codigo, .panel-salida { max-height: 70vh; }
  .lateral { display: none; }
  .principal { padding: 16px 14px 30px; }
  .marca-sub { display: none; }
}
@media print { .cabecera, .lateral, .pie { display: none; } }


/* ---------- codigo siempre editable ----------
   El textarea va encima del <pre> coloreado, con el texto transparente: se
   escribe en el textarea y se ve el coloreado de debajo.  Para que el cursor
   caiga donde toca, los dos tienen exactamente la misma tipografia, el mismo
   padding y el mismo interlineado. */
.codigo-caja { display: flex; align-items: stretch; min-width: 100%; }
.codigo-texto { position: relative; flex: 1 0 auto; }

.codigo-caja pre.codigo,
.codigo-caja textarea,
.codigo-caja pre.codigo code,
.numeros {
  margin: 0;
  border: 0;
  font-family: var(--mono);
  font-size: var(--codigo);
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  tab-size: 4;
  white-space: pre;
  letter-spacing: normal;
}

/* OJO: el <code> de dentro del <pre> hereda del navegador font-family: monospace,
   que NO es la misma fuente que la del textarea de encima.  Con eso el ancho de
   caracter no coincide (medido: 7,70 px contra 8,20 px) y el cursor cae cada vez
   mas a la izquierda segun avanza la linea.  Por eso el selector de arriba. */
.codigo-caja pre.codigo code { padding: 0; background: none; }

.codigo-caja pre.codigo,
.codigo-caja textarea { padding: 14px 16px; }

.codigo-caja pre.codigo { overflow: visible; pointer-events: none; }

.codigo-caja textarea {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  min-height: 100%;
  height: 100%;
  background: transparent;
  color: transparent;
  caret-color: var(--acento);
  resize: none;
  outline: none;
  overflow: hidden;
}

/* La columna de numeros se queda quieta aunque el codigo se desplace a lo ancho. */
.numeros {
  position: sticky;
  left: 0;
  z-index: 2;
  flex: 0 0 auto;
  padding: 14px 10px 14px 14px;
  text-align: right;
  color: var(--texto-suave);
  background: var(--fondo-hueco);
  border-right: 1px solid var(--borde);
  user-select: none;
  pointer-events: none;
}
.numeros span { display: block; }
/* El textarea va ENCIMA del codigo coloreado, con el texto transparente.  Un
   fondo de seleccion opaco tapaba justo lo seleccionado. */
.codigo-caja textarea::selection { background: var(--seleccion); color: transparent; }

/* ---------- compilador en el navegador (opcional) ---------- */
.cab-btns { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mini {
  font: inherit; font-size: .74rem; font-weight: 600;
  padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--fondo-panel); color: var(--texto-suave);
  cursor: pointer; white-space: nowrap;
}
.mini:hover { border-color: var(--acento); color: var(--acento); }
.mini-accion { background: var(--acento); border-color: var(--acento); color: #fff; }
.mini-accion:hover { color: #fff; filter: brightness(1.1); }
.mini[disabled] { opacity: .5; cursor: progress; }



.progreso { position: relative; height: 20px; background: var(--fondo-hueco); border-top: 1px solid var(--borde); }
#progreso-barra { height: 100%; width: 0; background: var(--acento); transition: width .15s linear; }
#progreso-txt {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .7rem; color: var(--texto);
}
.viva { color: var(--acento); font-weight: 700; }
html[data-pres="1"] .mini { font-size: .85rem; padding: 0 14px; }