/* Práctica guiada de BUSCARX (muestras/practica-buscarx/). Se carga después de base.css.
   La hoja sigue la estética del video del tutorial: ventana blanca sobre la banda de gris cálido, cabeceras grises,
   celda activa en verde y un color por argumento, el mismo en la fórmula, en la ayuda y en los rangos de la hoja.
   No imita la interfaz de Microsoft: sin cinta de opciones, sin iconos y con las fuentes del sitio.
   Índice: 1 tokens de la hoja · 2 barra superior · 3 cabecera · 4 zona de trabajo · 5 panel de pasos ·
   6 hoja · 7 marcas sobre la hoja · 8 pie · 9 pantallas pequeñas · 10 colores forzados · 11 impresión */

/* 1. Tokens de la hoja. Los argumentos tienen al menos 4,5:1 sobre el fondo de la hoja y sobre la franja de ayuda. */
:root {
  --hoja-fondo: #ffffff;
  --hoja-marco: #f3f3f1;
  --hoja-cabecera: #f5f5f3;
  --hoja-linea: #e6e6e3;
  --hoja-borde: #d6d6d1;
  --hoja-texto: #22282e;
  --hoja-texto-2: #5b5f63;
  --hoja-enc: #e8f0ea;
  --hoja-activa: #1e7145;
  --hoja-activa-fondo: #d9eadf;
  --hoja-error: rgba(192, 57, 43, .13);
  --hoja-copia: rgba(46, 139, 87, .26);
  --hoja-seleccion: rgba(43, 102, 196, .22);
  --hoja-sombra: 0 18px 44px rgba(40, 32, 20, .13), 0 4px 12px rgba(40, 32, 20, .07);
  --arg-1: #2b66c4;
  --arg-2: #c0392b;
  --arg-3: #8e44ad;
  --arg-4: #237a4b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hoja-fondo: #221d1e; --hoja-marco: #2b2526; --hoja-cabecera: #282223; --hoja-linea: #362e2f; --hoja-borde: #443b3c;
    --hoja-texto: #eee8e8; --hoja-texto-2: #b9afb0; --hoja-enc: #24332a; --hoja-activa: #5cc28a; --hoja-activa-fondo: #233a2c;
    --hoja-error: rgba(240, 122, 112, .18); --hoja-copia: rgba(92, 194, 138, .24); --hoja-seleccion: rgba(126, 168, 242, .3);
    --hoja-sombra: 0 18px 44px rgba(0, 0, 0, .42), 0 4px 12px rgba(0, 0, 0, .3);
    --arg-1: #8db3f4; --arg-2: #f39488; --arg-3: #d2a2e8; --arg-4: #6ccb96;
  }
}
:root[data-theme="dark"] {
  --hoja-fondo: #221d1e; --hoja-marco: #2b2526; --hoja-cabecera: #282223; --hoja-linea: #362e2f; --hoja-borde: #443b3c;
  --hoja-texto: #eee8e8; --hoja-texto-2: #b9afb0; --hoja-enc: #24332a; --hoja-activa: #5cc28a; --hoja-activa-fondo: #233a2c;
  --hoja-error: rgba(240, 122, 112, .18); --hoja-copia: rgba(92, 194, 138, .24); --hoja-seleccion: rgba(126, 168, 242, .3);
  --hoja-sombra: 0 18px 44px rgba(0, 0, 0, .42), 0 4px 12px rgba(0, 0, 0, .3);
  --arg-1: #8db3f4; --arg-2: #f39488; --arg-3: #d2a2e8; --arg-4: #6ccb96;
}
.arg-1 { color: var(--arg-1); }
.arg-2 { color: var(--arg-2); }
.arg-3 { color: var(--arg-3); }
.arg-4 { color: var(--arg-4); }

/* 2. Barra superior: volver a los trabajos y el nombre, que lleva al inicio */
.barra-demo { background: var(--bg); border-bottom: 1px solid var(--rule); }
.barra-demo-interior { display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; min-height: 56px; }
.barra-volver, .barra-marca { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.barra-volver { gap: 10px; font: 700 .95rem/1.2 var(--font-display); }
.barra-volver::before {
  content: ""; width: 8px; height: 8px; margin-left: 2px; flex: none;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-hover) ease;
}
.barra-marca { font: 800 1rem/1.15 var(--font-display); letter-spacing: -.01em; }
/* Solo con ratón: en una pantalla táctil, el :hover se queda pegado después de tocar */
@media (hover: hover) and (pointer: fine) {
  .barra-volver:hover { color: var(--accent-ink); }
  .barra-volver:hover::before { transform: translateX(-3px) rotate(45deg); }
  .barra-marca:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }
}
/* Al pulsar, el mismo aspecto que con el ratón encima: sin esta regla, el a:active de base.css pondría el nombre en
   rojo. «Volver a los trabajos» ya se pone rojo con el ratón, así que a:active le sirve. */
.barra-marca:active { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }

/* 3. Cabecera de la práctica: más corta que la portada de las páginas, para que la hoja quede cerca */
.practica-portada { padding-block: clamp(28px, 4.5vw, 52px) clamp(24px, 3.5vw, 40px); }
.practica-portada-interior { display: grid; gap: 14px; }
.practica-portada h1 { max-width: 22ch; }
.practica-portada .entradilla { max-width: 40rem; }

/* 4. Zona de trabajo: panel y hoja. En pantallas anchas, el panel a la izquierda y fijo mientras se baja. */
.practica-zona { padding-block: clamp(20px, 3.4vw, 40px) clamp(36px, 5vw, 64px); }
.practica-rejilla { display: grid; gap: clamp(16px, 2.4vw, 28px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1040px) {
  .practica-rejilla { grid-template-columns: minmax(0, 25.5rem) minmax(0, 1fr); }
}
@media (min-width: 1040px) and (min-height: 760px) {
  .panel { position: sticky; top: 16px; }
}

/* 5. Panel de pasos */
.panel { display: grid; gap: 18px; align-content: start; min-width: 0; padding: clamp(18px, 2.6vw, 26px); border-radius: var(--radio-grande); background: var(--bg); }
.panel-cabecera { display: grid; gap: 10px; }
.panel-contador { font: 700 .95rem/1.2 var(--font-display); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.progreso { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.progreso li { height: 6px; border-radius: 999px; background: var(--track); transition: background-color .3s ease; }
.progreso li.hecho { background: var(--ink); }
.progreso li.actual { background: var(--accent); }
.pasos-practica { margin: 0; padding-left: 1.3em; display: grid; gap: 16px; }
.pasos-practica > li { display: list-item; } /* list-item y no grid: sin JavaScript se ve el número de cada paso */
.pasos-practica > li > p + p { margin-top: 8px; }
.pasos-practica > li::marker { font: 700 1rem/1 var(--font-display); color: var(--muted); }
.paso-instruccion { font: 400 1.12rem/1.5 var(--font-body); color: var(--ink); text-wrap: pretty; }
.paso-pista { font: 500 .94rem/1.5 var(--font-display); color: var(--ink-2); }
.paso-pista-rotulo { font-weight: 700; color: var(--ink); }
.panel > * { min-width: 0; }
.panel code { font-size: .88em; white-space: nowrap; }
.panel code.codigo-largo { white-space: normal; overflow-wrap: break-word; }
/* Con JavaScript se ve solo el paso actual, y su pista cuando se pide */
.js .pasos-practica { padding-left: 0; list-style: none; }
.js .pasos-practica > li:not(.actual) { display: none; }
.js .paso-pista { display: none; padding: 11px 14px; border-radius: 12px; background: var(--surface); }
.js .paso-pista.visible { display: block; }
.panel-acciones { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.panel-resultado:empty { display: none; }
.panel-resultado .aviso { max-width: none; }
/* El título del resultado mezcla texto y <code>: va como un párrafo, con el punto a la izquierda, y no como una fila
   flexible (base.css), que ponía cada trozo en su columna */
.panel-resultado .aviso-titulo { display: block; position: relative; padding-left: 17px; }
.panel-resultado .aviso-titulo::before { position: absolute; left: 0; top: calc(.675em - 4px); }
.panel-resultado code { background: var(--bg); }
.practica-final:focus { outline: none; }
.panel-pie { display: flex; flex-wrap: wrap; gap: 8px; }
.practica-final { display: grid; gap: 12px; padding: 16px 18px; border-radius: 14px; background: var(--surface); }
.practica-final-texto { font: 600 1.02rem/1.5 var(--font-display); color: var(--ink); }
.practica-final-formula code { display: inline-block; padding: 7px 10px; background: var(--bg); white-space: normal; overflow-wrap: break-word; font-weight: 600; }
.ayuda-uso { border-top: 1px solid var(--rule); padding-top: 12px; }
.ayuda-uso summary { display: flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; font: 700 .92rem/1.3 var(--font-display); color: var(--ink); list-style: none; }
.ayuda-uso summary::-webkit-details-marker { display: none; }
.ayuda-uso summary::before { content: ""; width: 7px; height: 7px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s ease; }
.ayuda-uso[open] summary::before { transform: rotate(45deg); }
.ayuda-uso ul { margin: 8px 0 0; padding-left: 1.1em; display: grid; gap: 7px; font: 500 .88rem/1.5 var(--font-display); color: var(--ink-2); }
.ayuda-uso li::marker { color: var(--muted); }

/* 6. Hoja. El tamaño de letra y el alto de fila siguen al ancho de la hoja (unidades de contenedor). */
.hoja-figura { display: grid; gap: 12px; min-width: 0; margin: 0; }
.hoja {
  --fila: 34px; --letra: 14px;
  container-type: inline-size;
  position: relative; min-width: 0; overflow: hidden; border-radius: 14px;
  background: var(--hoja-fondo); color: var(--hoja-texto); box-shadow: var(--hoja-sombra), 0 0 0 1px var(--hoja-borde);
  font-family: var(--font-display);
}
@supports (width: 1cqi) {
  .hoja { --fila: clamp(28px, 4.6cqi, 36px); --letra: clamp(11px, 1.95cqi, 15px); }
}
.hoja-archivo { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 4px 10px; background: var(--hoja-marco); border-bottom: 1px solid var(--hoja-borde); }
.hoja-archivo-nombre { font: 500 .86rem/1.2 var(--font-display); color: var(--hoja-texto-2); }
.hoja-copiar, .hoja-tecla {
  min-height: 30px; padding: 5px 13px; border-radius: 999px; cursor: pointer;
  font: 700 .8rem/1 var(--font-display); color: var(--hoja-texto); background: var(--hoja-fondo);
  border: 1px solid var(--hoja-borde); transition: border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .hoja-copiar:hover, .hoja-tecla:hover { border-color: var(--hoja-texto-2); }
}
/* Respuesta al pulsar, también con el dedo (sin escala: «Copiar» ya lleva un transform para centrarse) */
.hoja-copiar:active, .hoja-tecla:active { border-color: var(--hoja-texto-2); }
.hoja-copiar { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.hoja-barra { display: flex; align-items: stretch; min-height: 46px; border-bottom: 1px solid var(--hoja-borde); }
.hoja-nombre { flex: none; width: 4.4rem; display: grid; place-items: center; border-right: 1px solid var(--hoja-borde); font: 600 .95rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.hoja-fx { flex: none; width: 2.5rem; display: grid; place-items: center; font: italic 400 1.15rem/1 var(--font-body); color: var(--hoja-texto-2); }
.hoja-formula { position: relative; flex: 1; min-width: 0; }
/* La entrada lleva el texto transparente y, debajo, una copia con cada argumento en su color. Las dos usan la misma
   fuente, el mismo tamaño y el mismo relleno, y la copia se desplaza con la entrada cuando la fórmula no cabe. */
.hoja-entrada, .hoja-espejo {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 10px 0 2px; border: 0; border-radius: 0;
  font: 400 16px/46px var(--font-mono); letter-spacing: 0; font-variant-ligatures: none; white-space: pre; text-align: left;
}
.hoja-entrada { z-index: 1; background: transparent; color: transparent; caret-color: var(--hoja-texto); -webkit-text-fill-color: transparent; }
.hoja-entrada::selection { background: var(--hoja-seleccion); color: transparent; -webkit-text-fill-color: transparent; }
.hoja-entrada:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hoja-entrada:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.hoja-entrada[readonly] { cursor: default; }
.hoja-espejo { overflow: hidden; color: var(--hoja-texto); pointer-events: none; }
.hoja-espejo-texto { display: inline-block; white-space: pre; }
/* Sin JavaScript no hay copia en color: la entrada muestra su propio texto */
.sin-js .hoja-entrada { color: var(--hoja-texto); -webkit-text-fill-color: currentColor; }
.hoja-tecla { flex: none; align-self: center; margin: 0 8px; min-width: 44px; border-radius: 8px; border-bottom-width: 3px; font-variant-numeric: tabular-nums; }
.hoja-ayuda { margin: 0; min-height: 34px; padding: 7px 12px; border-bottom: 1px solid var(--hoja-borde); background: var(--hoja-cabecera); font: 500 .84rem/1.45 var(--font-display); color: var(--hoja-texto-2); }
.hoja-ayuda-funcion { color: var(--hoja-texto); font-weight: 600; }
/* El argumento que se está escribiendo toma su color y un subrayado: sin cambiar de grosor, para que la línea no salte */
.hoja-ayuda-arg.actual { text-decoration: underline 2px; text-underline-offset: 3px; }
.hoja-ayuda-arg.actual[data-arg="1"] { color: var(--arg-1); }
.hoja-ayuda-arg.actual[data-arg="2"] { color: var(--arg-2); }
.hoja-ayuda-arg.actual[data-arg="3"] { color: var(--arg-3); }
.hoja-ayuda-arg.actual[data-arg="4"] { color: var(--arg-4); }

.hoja-rejilla { position: relative; overflow: hidden; }
.hoja-tabla { width: 100%; table-layout: fixed; border-collapse: collapse; font: 500 var(--letra)/1.2 var(--font-display); color: var(--hoja-texto); font-variant-numeric: tabular-nums; }
.hoja-tabla th, .hoja-tabla td { height: var(--fila); padding: 0 .55em; border-right: 1px solid var(--hoja-linea); border-bottom: 1px solid var(--hoja-linea); white-space: nowrap; overflow: visible; text-align: left; vertical-align: middle; }
/* Sin transición: el rótulo de la fila y el de la columna cambian en el mismo cuadro que el borde de la celda activa,
   que se coloca al instante, como en una hoja de cálculo (las flechas se pulsan decenas de veces) */
.hoja-tabla th { background: var(--hoja-cabecera); color: var(--hoja-texto-2); font-weight: 500; font-size: .9em; text-align: center; }
.hoja-tabla thead th { height: calc(var(--fila) * .82); border-bottom-color: var(--hoja-borde); }
.hoja-tabla tbody th { border-right-color: var(--hoja-borde); }
.hoja-tabla th.activa { background: var(--hoja-activa-fondo); color: var(--hoja-texto); }
.hoja-tabla thead th.activa { box-shadow: inset 0 -2px 0 var(--hoja-activa); }
.hoja-tabla tbody th.activa { box-shadow: inset -2px 0 0 var(--hoja-activa); }
/* Anchos de columna: los da la fila de cabecera (table-layout: fixed) */
.esquina { width: 7%; }
.col-a { width: 12%; }
.col-b { width: 23%; }
.col-c { width: 9.5%; }
.col-d { width: 4%; }
.col-e { width: 12%; }
.col-f { width: 17%; }
.col-g { width: 8%; }
.col-h { width: 7.5%; }
.hoja-tabla td { position: relative; cursor: cell; }
.hoja-tabla td:focus { outline: none; }
.hoja-tabla td.num, .hoja-tabla td.der { text-align: right; }
.hoja-tabla td.enc { background: var(--hoja-enc); font-weight: 700; }
.hoja-tabla td.titulo-hoja { font-weight: 700; }
.hoja-tabla td.texto-aviso { color: var(--arg-4); font-weight: 600; }
.hoja-tabla td.error, .hoja-tabla td.no-encontrado { background: var(--hoja-error); }
/* El triángulo de la esquina que marca un error */
.hoja-tabla td.error::before { content: ""; position: absolute; left: 1px; top: 1px; border-top: 8px solid var(--hoja-activa); border-right: 8px solid transparent; }
.hoja-tabla td.copiada { animation: copiada 1.4s ease-out both; }
@keyframes copiada { from { background-color: var(--hoja-copia); } }
/* Las celdas son controles de una cuadrícula, no texto: una pulsación larga no selecciona su texto ni abre el menú del
   sistema, y el segundo toque (que abre la edición) no se toma como doble toque para ampliar */
.hoja-tabla td, .hoja-tabla th { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Mientras se escribe una fórmula, arrastrar sobre la hoja marca un rango también con el dedo; con dos dedos se sigue
   pudiendo ampliar */
.hoja-tabla.senalando td { touch-action: pinch-zoom; }
/* Con el dedo, la celda se elige al levantarlo (practica.js): al apoyarlo, el fondo responde en lugar del destello del
   navegador. Con el ratón no hace falta, porque la celda activa cambia al pulsar. */
@media (pointer: coarse) {
  .hoja-tabla:not(.senalando) td:active { background-color: var(--hoja-activa-fondo); }
}
.hoja-pestanas { display: flex; align-items: flex-start; gap: 2px; min-height: 36px; padding-left: 7%; background: var(--hoja-marco); border-top: 1px solid var(--hoja-borde); font: 600 .84rem/1 var(--font-display); }
.hoja-pestana { padding: 9px 20px 10px; background: var(--hoja-fondo); color: var(--hoja-activa); box-shadow: inset 0 -3px 0 var(--hoja-activa); }
.hoja-pestana-mas { padding: 9px 14px; color: var(--hoja-texto-2); }

/* 7. Marcas sobre la hoja: celda activa con su asa de relleno, rangos de la fórmula, celda que se escribe,
   puntero del teclado y arrastre de la copia. Se colocan con JavaScript sobre las celdas. */
.hoja-capa { position: absolute; inset: 0; pointer-events: none; }
.hoja-capa > * { position: absolute; box-sizing: border-box; }
.marca-activa { border: 2px solid var(--hoja-activa); z-index: 3; }
/* Anillo de foco del teclado: en la celda activa o, mientras se escribe una fórmula, en el puntero */
.hoja-rejilla:not(.con-puntero):has(td:focus-visible) .marca-activa { outline: 2px solid var(--accent); outline-offset: 2px; }
.marca-puntero { outline: 2px solid var(--accent); outline-offset: 2px; }
.marca-rango { border: 2px solid var(--c, var(--arg-1)); background: color-mix(in srgb, var(--c, var(--arg-1)) 9%, transparent); z-index: 2; }
.marca-rango i { position: absolute; width: 6px; height: 6px; background: var(--c, var(--arg-1)); }
.marca-rango i:nth-child(1) { left: -4px; top: -4px; }
.marca-rango i:nth-child(2) { right: -4px; top: -4px; }
.marca-rango i:nth-child(3) { left: -4px; bottom: -4px; }
.marca-rango i:nth-child(4) { right: -4px; bottom: -4px; }
.marca-rango[data-arg="1"] { --c: var(--arg-1); }
.marca-rango[data-arg="2"] { --c: var(--arg-2); }
.marca-rango[data-arg="3"] { --c: var(--arg-3); }
.marca-rango[data-arg="4"] { --c: var(--arg-4); }
.marca-puntero { border: 2px dashed var(--hoja-activa); z-index: 4; }
.marca-arrastre { border: 2px dashed var(--hoja-texto-2); z-index: 4; }
.marca-edicion {
  z-index: 3; display: flex; align-items: center; padding: 0 .5em; overflow: hidden;
  background: var(--hoja-fondo); box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  font: 400 calc(var(--letra) * .98)/1 var(--font-mono); white-space: pre; color: var(--hoja-texto);
}
.asa { z-index: 5; width: 10px; height: 10px; background: var(--hoja-activa); box-shadow: 0 0 0 2px var(--hoja-fondo); pointer-events: auto; cursor: crosshair; touch-action: pinch-zoom; }
/* Zona de toque de 30 px alrededor del cuadrado */
.asa::before { content: ""; position: absolute; inset: -10px; }

/* 8. Pie de la práctica */
.pie-demo { margin-top: auto; border-top: 1px solid var(--rule); padding-block: 22px; font: 500 .88rem/1.5 var(--font-display); color: var(--muted); }
.pie-demo-interior { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }

/* 9. Pantallas pequeñas: la hoja cabe entera sin desplazarse de lado. Se quitan las columnas G y H y se reparten los anchos. */
@media (max-width: 559px) {
  .c-extra { display: none; }
  .esquina { width: 7%; }
  .col-a { width: 14%; }
  .col-b { width: 28%; }
  .col-c { width: 11%; }
  .col-d { width: 3%; }
  .col-e { width: 14%; }
  .col-f { width: 23%; }
  .hoja-tabla th, .hoja-tabla td { padding: 0 .4em; }
  .hoja { --letra: 12px; --fila: 30px; }
  @supports (width: 1cqi) {
    .hoja { --letra: clamp(11.5px, 3.4cqi, 12.5px); --fila: clamp(28px, 8.6cqi, 32px); }
  }
  .hoja-archivo { justify-content: space-between; }
  .hoja-copiar { position: static; transform: none; }
  .hoja-nombre { width: 3.4rem; }
  .hoja-fx { width: 2rem; }
  .hoja-ayuda { min-height: calc(2 * 1.45em + 14px); font-size: .8rem; }
  .pie-tema { width: 100%; }
}
@media (pointer: coarse) {
  .hoja-copiar, .hoja-tecla { min-height: 36px; }
}

/* 10. Colores forzados: sin la copia en color, la entrada muestra su texto; las marcas usan colores del sistema */
@media (forced-colors: active) {
  .hoja-espejo { display: none; }
  .hoja-entrada { color: FieldText; -webkit-text-fill-color: FieldText; }
  .marca-activa, .marca-rango, .marca-puntero, .marca-arrastre { border-color: Highlight; }
  .asa, .marca-rango i { forced-color-adjust: none; background: Highlight; }
  .progreso li { border: 1px solid CanvasText; }
  .progreso li.hecho, .progreso li.actual { forced-color-adjust: none; background: Highlight; }
  .hoja-ayuda-arg.actual { color: Highlight; }
}

/* 11. Impresión: la hoja y los pasos, sin barra ni controles */
@media print {
  .barra-demo, .panel-acciones, .panel-pie, .ayuda-uso, .hoja-copiar, .hoja-tecla, .hoja-capa, .pie-demo .pie-tema { display: none !important; }
  .js .pasos-practica > li:not(.actual) { display: grid; }
  .hoja { box-shadow: none; border: 1px solid #bbb; }
  .hoja-espejo { display: none; }
  .hoja-entrada { color: #000; -webkit-text-fill-color: #000; }
}