@font-face { font-family: "Chivo"; src: url("/fuentes/chivo-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: optional; }
@font-face { font-family: "Chivo"; src: url("/fuentes/chivo-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: optional; }
@font-face { font-family: "Chivo"; src: url("/fuentes/chivo-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: optional; }
@font-face { font-family: "Chivo Mono"; src: url("/fuentes/chivo-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: optional; }
@font-face { font-family: "Chivo Mono"; src: url("/fuentes/chivo-mono-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: optional; }
:root {
  --alto-mesa: clamp(230px, 52vh, 470px);
  --letra: 16px;
  --sans: "Chivo", "Segoe UI", Arial, sans-serif;
  --mono: "Chivo Mono", Consolas, "Courier New", monospace;
  --contenido: 1200px;
  --margen: 20px;
  --lectura: 750px;
  --bloque: 56px;
  --t-pagina: clamp(1.625rem, 1.25rem + 1.5vw, 2.25rem);
  --t-seccion: clamp(1.375rem, 1.25rem + .55vw, 1.625rem);
  --t-panel: 1.1875rem;
  --t-tarjeta: 1.0625rem;
  --t-lectura: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --t-ui: .9375rem;
  --r-caja: 12px;
  --r-control: 8px;
  --r-etiqueta: 6px;
  --sobre-plano: #ffffff;
  --sobre-plano-2: #cfdef2;
  --plano-trazo: #8fb3e2;
  --velo: rgba(255, 255, 255, .12);
  --velo-fuerte: rgba(255, 255, 255, .22);
  --clave: #ffc42e;
  --sobre-clave: #2a1e00;
  --plano: #11407e;
  --plano-fuerte: #0b2f61;
  --fondo: #e6edf7;
  --hoja: #ffffff;
  --cabecera: #f0f5fb;
  --reja: #d4dfed;
  --reja-fuerte: #a3b7d1;
  --tinta: #0d2240;
  --tinta-2: #43566e;
  --marca: #15509b;
  --marca-fuerte: #0f3f7d;
  --marca-suave: #e0ebf8;
  --sobre-marca: #ffffff;
  --resalte: #ffe7a3;
  --sobre-resalte: #2a1e00;
  --ok: #0c7a55;
  --error: #ad231b;
  --error-suave: #fbe3df;
  --aviso: #6f4b00;
  --aviso-suave: #fff2cc;
  --f-csv: #0b7a6b;
  --f-json: #8f5400;
  --f-jsonl: #76620a;
  --f-xlsx: #1b7540;
  --f-xml: #7339a8;
  --f-sql: #1b62ad;
  --sombra-1: 0 1px 2px rgba(13, 34, 64, .1);
  --sombra-2: 0 1px 2px rgba(13, 34, 64, .07), 0 4px 12px rgba(13, 34, 64, .08);
  --sombra-3: 0 1px 2px rgba(13, 34, 64, .08), 0 8px 20px rgba(13, 34, 64, .1), 0 24px 48px rgba(13, 34, 64, .12);
  color-scheme: light;
}
:root[data-tema="oscuro"] {
  --plano: #143768;
  --plano-fuerte: #0e2a52;
  --fondo: #0a1526;
  --hoja: #111f36;
  --cabecera: #172a47;
  --reja: #27405f;
  --reja-fuerte: #41597f;
  --tinta: #e8eef8;
  --tinta-2: #adbed6;
  --marca: #8fbaf3;
  --marca-fuerte: #b8d3f8;
  --marca-suave: #1b3358;
  --sobre-marca: #0a1526;
  --resalte: #5a4a0c;
  --sobre-resalte: #fff3b8;
  --ok: #5fd0a4;
  --error: #ff9c92;
  --error-suave: #3f1c19;
  --aviso: #f3d27e;
  --aviso-suave: #3a2f10;
  --f-csv: #5fd0bd;
  --f-json: #f0b45e;
  --f-jsonl: #dcc65a;
  --f-xlsx: #72d39a;
  --f-xml: #c9a2f2;
  --f-sql: #8fc0f5;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-2: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .3);
  --sombra-3: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .35), 0 24px 48px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --plano: #143768;
    --plano-fuerte: #0e2a52;
    --fondo: #0a1526;
    --hoja: #111f36;
    --cabecera: #172a47;
    --reja: #27405f;
    --reja-fuerte: #41597f;
    --tinta: #e8eef8;
    --tinta-2: #adbed6;
    --marca: #8fbaf3;
    --marca-fuerte: #b8d3f8;
    --marca-suave: #1b3358;
    --sobre-marca: #0a1526;
    --resalte: #5a4a0c;
    --sobre-resalte: #fff3b8;
    --ok: #5fd0a4;
    --error: #ff9c92;
    --error-suave: #3f1c19;
    --aviso: #f3d27e;
    --aviso-suave: #3a2f10;
    --f-csv: #5fd0bd;
    --f-json: #f0b45e;
    --f-jsonl: #dcc65a;
    --f-xlsx: #72d39a;
    --f-xml: #c9a2f2;
    --f-sql: #8fc0f5;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra-2: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .3);
    --sombra-3: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .35), 0 24px 48px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-letra="grande"] { --letra: 18px; }
:root[data-letra="mayor"] { --letra: 20px; }
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--letra); -webkit-text-size-adjust: 100%; scroll-padding-top: 12px; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--sans); font-size: var(--t-lectura); line-height: 1.55; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
a { color: var(--marca); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--marca-fuerte); text-decoration-thickness: 2px; }
img, svg { max-width: 100%; height: auto; }
code, kbd, pre { font-family: var(--mono); font-size: max(.9em, var(--t-ui)); }
code { background: var(--hoja); border: 1px solid var(--reja); padding: 0 .3em; border-radius: var(--r-etiqueta); }
kbd { background: var(--hoja); border: 1px solid var(--reja-fuerte); border-bottom-width: 2px; border-radius: var(--r-etiqueta); padding: 0 .36em; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
strong, b { font-weight: 600; }
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.saltar { position: absolute; left: 8px; top: -60px; background: var(--clave); color: var(--sobre-clave); padding: 8px 12px; border-radius: var(--r-control); z-index: 20; }
.saltar:focus { top: 8px; }
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.marco { width: 100%; max-width: calc(var(--contenido) + 2 * var(--margen)); margin: 0 auto; padding: 0 var(--margen); }
.cabeza { background: var(--plano-fuerte); color: var(--sobre-plano); }
.cabeza .marco { display: flex; align-items: center; gap: 20px; min-height: 60px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--sobre-plano); text-decoration: none; font-size: 1.1875rem; line-height: 1; }
.logo:hover { color: var(--sobre-plano); }
.logo b { font-weight: 800; letter-spacing: -.012em; }
.logo span { color: var(--clave); font-weight: 400; }
.marca { width: 32px; height: 32px; flex: none; }
.marca-fondo { fill: var(--clave); }
.marca-linea { fill: none; stroke: #0b2f61; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.marca-nodo { fill: #0b2f61; }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--r-control); color: var(--sobre-plano-2); text-decoration: none; font-size: var(--t-ui); font-weight: 600; }
.nav a:hover { background: var(--velo); color: var(--sobre-plano); }
.nav a[aria-current] { background: var(--velo); color: var(--sobre-plano); box-shadow: inset 0 -2px 0 var(--clave); }
.sello { display: none; align-items: center; gap: 8px; margin: 0 0 0 8px; padding-left: 20px; border-left: 1px solid var(--velo-fuerte); color: var(--sobre-plano-2); font-size: var(--t-ui); white-space: nowrap; }
.sello .ico { color: var(--clave); }
.menu-movil { display: none; margin-left: auto; position: relative; }
.menu-movil summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--velo-fuerte); border-radius: var(--r-control); color: var(--sobre-plano); font-size: var(--t-ui); font-weight: 600; }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil[open] summary { background: var(--velo); }
.menu-movil nav { position: absolute; right: 0; top: calc(100% + 8px); background: var(--hoja); border: 1px solid var(--reja); border-radius: var(--r-caja); box-shadow: var(--sombra-3); min-width: 220px; overflow: hidden; z-index: 10; }
.menu-movil nav a { display: block; padding: 12px 16px; border-bottom: 1px solid var(--reja); color: var(--tinta); text-decoration: none; font-size: var(--t-ui); }
.menu-movil nav a:hover { background: var(--cabecera); }
.menu-movil nav a[aria-current] { font-weight: 600; box-shadow: inset 3px 0 0 var(--clave); }
.menu-movil nav a:last-child { border-bottom: 0; }
.banda { background: var(--plano); color: var(--sobre-plano); }
.banda.solapa { padding-bottom: 36px; }
.banda :focus-visible { outline-color: var(--clave); }
.migas { padding-top: 12px; font-size: var(--t-ui); color: var(--sobre-plano-2); }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; }
.migas li + li::before { content: "/"; margin-right: 8px; color: var(--plano-trazo); }
.migas a { color: var(--sobre-plano-2); }
.migas a:hover { color: var(--sobre-plano); }
.titular { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 12px; padding-bottom: 24px; }
.banda.solapa .titular { padding-bottom: 12px; }
.titular-texto { min-width: 0; }
.titular h1 { margin: 0; font-size: var(--t-pagina); line-height: 1.12; font-weight: 800; letter-spacing: -.016em; text-wrap: balance; }
.titular p { margin: 8px 0 0; color: var(--sobre-plano-2); font-size: 1.0625rem; line-height: 1.4; max-width: 78ch; text-wrap: pretty; }
.inicio .titular { padding-top: 20px; }
.relacion { display: none; align-items: center; flex: none; }
.pata { width: 88px; height: 28px; margin: 0 -1px; fill: none; stroke: var(--plano-trazo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plano { display: none; flex: none; width: 264px; height: auto; font-family: var(--mono); font-size: 13.5px; }
.plano text { fill: var(--sobre-plano-2); }
.plano .plano-titulo { fill: var(--sobre-plano); font-weight: 600; }
.plano-tabla rect, .plano-tabla path { fill: none; stroke: var(--plano-trazo); stroke-width: 1.5; }
.plano-tabla .plano-cabeza { fill: var(--velo); }
.plano-linea { fill: none; stroke: var(--sobre-plano); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.plano-clave { fill: var(--clave); }
[data-fmt="csv"] { --tono: var(--f-csv); }
[data-fmt="json"] { --tono: var(--f-json); }
[data-fmt="jsonl"] { --tono: var(--f-jsonl); }
[data-fmt="xlsx"] { --tono: var(--f-xlsx); }
[data-fmt="xml"] { --tono: var(--f-xml); }
[data-fmt="sql"] { --tono: var(--f-sql); }
.fmt { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: var(--t-ui); font-weight: 600; color: var(--tono, var(--marca)); white-space: nowrap; }
.relacion .fmt { min-height: 36px; padding: 0 12px; border: 1.5px solid var(--plano-trazo); border-radius: var(--r-control); background: var(--velo); color: var(--sobre-plano); }
.relacion .fmt .ico { color: var(--clave); }
.vuelta { display: inline-flex; margin-left: 12px; color: var(--plano-trazo); }
.vuelta .ico { width: 28px; height: 28px; }
.azulejo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: var(--r-etiqueta); background: var(--tono, var(--marca)); color: var(--hoja); }
.azulejo .ico { width: 18px; height: 18px; stroke-width: 2; }
.mesa { position: relative; background: var(--hoja); border: 1px solid var(--reja); border-radius: var(--r-caja); box-shadow: var(--sombra-3); overflow: hidden; font-size: var(--t-ui); }
.banda.solapa + .marco > .mesa { margin-top: -24px; }
.mesa[data-soltando]::after { content: "Suelta el archivo aquí"; position: absolute; inset: 8px; z-index: 5; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--marca); border-radius: var(--r-control); background: var(--marca-suave); color: var(--marca-fuerte); font-weight: 600; pointer-events: none; }
.paneles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: var(--alto-mesa); }
.panel { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.panel + .panel { border-left: 1px solid var(--reja); }
.panel-cabeza { display: flex; align-items: center; gap: 8px; flex: none; min-height: 52px; padding: 8px 12px; background: var(--cabecera); border-bottom: 1px solid var(--reja); flex-wrap: wrap; }
.panel-cabeza > label:not(.campo-linea), .panel-cabeza > .rotulo { font-weight: 600; font-size: var(--t-ui); margin-right: auto; }
.panel-cabeza select { min-height: 36px; padding-top: 0; padding-bottom: 0; }
.panel-cabeza > .rotulo.pegado { margin-right: 0; }
.panel-cabeza .campo-linea + .btn, .panel-cabeza .campo-linea + .btn-texto { margin-left: auto; }
.panel-cuerpo { position: relative; flex: 1; display: flex; min-height: 0; }
.panel + .panel::before { content: ""; position: absolute; left: -15px; top: 11px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--reja-fuerte); background: var(--hoja); box-shadow: var(--sombra-1); }
.panel + .panel::after { content: ""; position: absolute; left: -8px; top: 18px; z-index: 3; width: 16px; height: 16px; background: var(--marca); -webkit-mask: var(--m-flecha) center / contain no-repeat; mask: var(--m-flecha) center / contain no-repeat; }
.panel:first-child > .panel-cabeza { padding-right: 24px; }
.panel + .panel > .panel-cabeza { padding-left: 28px; }
.mesa textarea, .area { display: block; width: 100%; height: 100%; padding: 12px; border: 0; border-radius: 0; resize: none; background: var(--hoja); color: var(--tinta); font-family: var(--mono); font-size: var(--t-ui); line-height: 1.5; tab-size: 2; white-space: pre; overflow: auto; overflow-wrap: normal; }
.mesa textarea:focus, .area:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--marca); }
.mesa textarea::placeholder { color: var(--tinta-2); opacity: 1; }
.mesa textarea:disabled { background: var(--cabecera); }
.mesa textarea[readonly] { background: var(--cabecera); }
.mesa textarea[data-salida]:placeholder-shown { background: var(--cabecera) var(--m-vacio) right 20px bottom 16px / 72px no-repeat; }
.con-canaleta { display: flex; width: 100%; height: 100%; min-height: 0; }
.canaleta { flex: none; width: 48px; height: 100%; padding: 12px 8px 12px 0; margin: 0; overflow: hidden; text-align: right; background: var(--cabecera); border-right: 1px solid var(--reja); color: var(--tinta-2); font-family: var(--mono); font-size: var(--t-ui); line-height: 1.5; user-select: none; white-space: pre; }
.nota-archivo { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 12px; background: var(--hoja); border: 1px solid var(--reja); border-radius: var(--r-control); box-shadow: var(--sombra-2); font-size: var(--t-ui); }
.formula { display: flex; align-items: stretch; border-top: 1px solid var(--reja); background: var(--hoja); min-height: 44px; }
.formula-fx { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; background: var(--marca-suave); color: var(--marca-fuerte); font-family: var(--mono); font-weight: 600; font-style: italic; font-size: var(--t-ui); }
.formula output, .formula-texto { flex: 1; align-self: center; padding: 8px 12px; font-size: var(--t-ui); line-height: 1.35; min-width: 0; }
.formula[data-clase="ok"] .formula-fx { background: var(--ok); color: var(--hoja); }
.formula[data-clase="error"] { background: var(--error-suave); }
.formula[data-clase="error"] .formula-fx { background: var(--error); color: var(--hoja); }
.formula[data-clase="error"] output { color: var(--tinta); }
.formula-acciones { display: flex; align-items: center; gap: 8px; padding: 4px 8px; }
.avisos { list-style: none; margin: 0; padding: 0; }
.avisos:empty { display: none; }
.avisos li { padding: 8px 12px 8px 56px; font-size: var(--t-ui); line-height: 1.35; background: var(--aviso-suave); color: var(--tinta); border-top: 1px solid var(--reja); }
.opciones { border-top: 1px solid var(--reja); }
.opciones:not(:has(.opciones-rejilla > :not([hidden]))) { display: none; }
.opciones > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; padding: 0 12px; font-size: var(--t-ui); font-weight: 600; color: var(--marca); list-style: none; }
.opciones > summary::-webkit-details-marker { display: none; }
.opciones > summary::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--m-ajustes) center / contain no-repeat; mask: var(--m-ajustes) center / contain no-repeat; }
.opciones > summary:hover { background: var(--cabecera); }
.opciones[open] > summary { border-bottom: 1px solid var(--reja); }
.opciones-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px 20px; padding: 12px; background: var(--cabecera); }
.campo-linea { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-ui); color: var(--tinta-2); }
.campo-marca { display: flex; align-items: center; gap: 8px; font-size: var(--t-ui); min-height: 40px; cursor: pointer; }
.campo-marca input { width: 20px; height: 20px; accent-color: var(--marca); margin: 0; }
select, input[type="text"] { min-height: 40px; padding: 4px 12px; border: 1px solid var(--reja-fuerte); border-radius: var(--r-control); background: var(--hoja); color: var(--tinta); font: inherit; font-size: var(--t-ui); max-width: 100%; box-shadow: var(--sombra-1); }
select { -webkit-appearance: none; appearance: none; padding-right: 32px; background-image: var(--m-abre); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; cursor: pointer; }
select:hover, input[type="text"]:hover { border-color: var(--marca); }
select:focus, input[type="text"]:focus { outline: 2px solid var(--marca); outline-offset: -1px; }
.dinamico { display: flex; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--reja); }
.dinamico:empty { display: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 4px 12px; border: 1px solid var(--reja-fuerte); border-radius: var(--r-control); background: var(--hoja); color: var(--tinta); font: inherit; font-size: var(--t-ui); font-weight: 600; line-height: 1.2; cursor: pointer; box-shadow: var(--sombra-1); text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--marca); color: var(--marca-fuerte); box-shadow: var(--sombra-2); }
.btn:active { box-shadow: none; transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; box-shadow: none; border-color: var(--reja-fuerte); color: var(--tinta); }
.btn-marca { background: var(--marca); border-color: var(--marca-fuerte); color: var(--sobre-marca); }
.btn-marca:hover { background: var(--marca-fuerte); border-color: var(--marca-fuerte); color: var(--sobre-marca); }
.btn-marca:disabled { border-color: var(--marca-fuerte); color: var(--sobre-marca); }
.btn-texto { border-color: transparent; background: transparent; box-shadow: none; color: var(--marca); padding: 4px 8px; }
.btn-texto:hover { background: var(--marca-suave); border-color: transparent; box-shadow: none; }
.btn-texto:active { transform: none; }
[data-copiar] { min-width: 96px; }
[data-elegir]::before, [data-bajar]::before, [data-copiar]::before, [data-ejecutar]::before, [data-elegir-csv]::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; }
[data-elegir], [data-elegir-csv] { --icono: var(--m-subir); }
[data-bajar] { --icono: var(--m-bajar); }
[data-copiar] { --icono: var(--m-copiar); }
[data-ejecutar] { --icono: var(--m-play); }
.hojas { display: flex; gap: 4px; align-items: center; padding: 4px 8px; background: var(--cabecera); border-top: 1px solid var(--reja); min-height: 40px; }
.hoja-tab { border: 1px solid transparent; border-radius: var(--r-etiqueta); background: transparent; color: var(--tinta-2); font: inherit; font-size: var(--t-ui); line-height: 1.2; padding: 4px 12px; cursor: pointer; min-height: 30px; white-space: nowrap; }
.hoja-tab:hover { background: var(--marca-suave); color: var(--tinta); }
.hoja-tab[aria-selected="true"] { background: var(--hoja); color: var(--tinta); font-weight: 600; border-color: var(--reja); box-shadow: var(--sombra-1); }
.vista-tabla { height: 100%; overflow: auto; width: 100%; background: var(--hoja); }
.desliza { overflow-x: auto; }
.celdas { border-collapse: separate; border-spacing: 0; font-family: var(--mono); font-size: var(--t-ui); font-variant-numeric: tabular-nums; min-width: 100%; }
.celdas th, .celdas td { border-right: 1px solid var(--reja); border-bottom: 1px solid var(--reja); padding: 4px 12px; text-align: left; white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.celdas thead th { background: var(--cabecera); font-weight: 600; position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -2px 0 var(--reja-fuerte); }
.celdas tbody tr:hover td { background: var(--marca-suave); }
.celdas th.num { background: var(--cabecera); color: var(--tinta-2); font-weight: 400; text-align: right; width: 1%; }
.celdas .der { text-align: right; }
.celdas .nulo { color: var(--tinta-2); font-style: italic; }
.nota-tabla { margin: 0; padding: 8px 12px; font-size: var(--t-ui); color: var(--tinta-2); }
.diagnostico { border-top: 1px solid var(--reja); }
.diagnostico table { width: 100%; border-collapse: collapse; font-size: var(--t-ui); }
.diagnostico th, .diagnostico td { padding: 8px 12px; border-bottom: 1px solid var(--reja); text-align: left; vertical-align: top; }
.diagnostico tr:last-child th, .diagnostico tr:last-child td { border-bottom: 0; }
.diagnostico th { font-weight: 600; width: 190px; }
.diagnostico td:nth-child(2) { font-family: var(--mono); width: 190px; }
.diagnostico td[data-estado="ok"] { color: var(--ok); }
.diagnostico td[data-estado="ojo"] { background: var(--aviso-suave); color: var(--aviso); }
.diagnostico td[data-estado="arreglado"] { background: var(--resalte); color: var(--sobre-resalte); }
.contenido { padding-top: 40px; }
.bloque { padding-top: var(--bloque); }
.texto { max-width: var(--lectura); }
.texto h2, .doble h2 { margin: 40px 0 8px; font-size: var(--t-seccion); line-height: 1.2; font-weight: 800; letter-spacing: -.012em; }
.texto h3 { margin: 24px 0 4px; font-size: var(--t-panel); line-height: 1.3; font-weight: 600; }
.texto p, .texto ul, .texto ol { margin: 0 0 12px; }
.texto ul, .texto ol { padding-left: 24px; }
.texto li { margin-bottom: 4px; }
.texto li::marker { color: var(--marca); }
.texto > :first-child { margin-top: 0; }
.fecha-revision { color: var(--tinta-2); font-size: var(--t-ui); }
.doble { display: grid; grid-template-columns: minmax(0, var(--lectura)) minmax(0, 1fr); gap: 56px; align-items: start; }
.lateral { position: sticky; top: 16px; background: var(--hoja); border: 1px solid var(--reja); border-radius: var(--r-caja); box-shadow: var(--sombra-2); overflow: hidden; font-size: var(--t-ui); }
.doble .lateral h2 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px; background: var(--cabecera); border-bottom: 1px solid var(--reja); font-size: var(--t-tarjeta); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.lateral h2 .ico { color: var(--marca); }
.lateral ul { list-style: none; margin: 0; padding: 0; }
.lateral li { border-bottom: 1px solid var(--reja); }
.lateral li:last-child { border-bottom: 0; }
.lateral a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; color: var(--tinta); text-decoration: none; line-height: 1.3; }
.lateral a .ico { color: var(--marca); width: 18px; height: 18px; }
.lateral a:hover { background: var(--marca-suave); color: var(--marca-fuerte); }
pre.codigo { position: relative; background: var(--plano-fuerte); color: var(--sobre-plano); border-radius: var(--r-control); box-shadow: var(--sombra-2); padding: 12px 16px; overflow-x: auto; margin: 0 0 16px; font-size: var(--t-ui); line-height: 1.5; white-space: pre; overflow-wrap: normal; }
.tabla-texto { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--reja); border-radius: var(--r-caja); background: var(--hoja); box-shadow: var(--sombra-1); }
.tabla-texto table { border-collapse: collapse; width: 100%; font-size: 1rem; line-height: 1.4; overflow-wrap: break-word; }
.tabla-texto code { white-space: nowrap; }
.tabla-texto th, .tabla-texto td { border-bottom: 1px solid var(--reja); padding: 8px 12px; text-align: left; vertical-align: top; }
.tabla-texto tbody tr:last-child td { border-bottom: 0; }
.tabla-texto thead th { background: var(--cabecera); font-weight: 600; }
.nota-caja { display: flow-root; background: var(--aviso-suave); border-radius: var(--r-control); box-shadow: inset 4px 0 0 var(--clave); padding: 12px 16px 12px 20px; margin: 0 0 16px; }
.fuentes { font-size: var(--t-ui); }
.fuentes li { margin-bottom: 4px; }
.preguntas { border-top: 1px solid var(--reja); }
.preguntas details { border-bottom: 1px solid var(--reja); }
.preguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: 12px 0; font-weight: 600; list-style: none; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ""; flex: none; width: 18px; height: 18px; background: var(--marca); -webkit-mask: var(--m-mas) center / contain no-repeat; mask: var(--m-mas) center / contain no-repeat; }
.preguntas details[open] summary::after { -webkit-mask-image: var(--m-menos); mask-image: var(--m-menos); }
.preguntas summary:hover { color: var(--marca); }
.preguntas details p { margin: 0 0 16px; }
.titulo-bloque { margin: 0 0 16px; font-size: var(--t-seccion); line-height: 1.2; font-weight: 800; letter-spacing: -.012em; }
.matriz-marco { overflow-x: auto; background: var(--hoja); border: 1px solid var(--reja); border-radius: var(--r-caja); box-shadow: var(--sombra-2); }
.matriz { border-collapse: collapse; width: 100%; }
.matriz th, .matriz td { border-bottom: 1px solid var(--reja); border-left: 1px solid var(--reja); text-align: center; padding: 0; height: 48px; }
.matriz tr:last-child th, .matriz tr:last-child td { border-bottom: 0; }
.matriz th:first-child { border-left: 0; }
.matriz thead th, .matriz tbody th { background: var(--cabecera); padding: 0 16px; }
.matriz thead th:first-child { text-align: left; font-weight: 400; color: var(--tinta-2); font-size: var(--t-ui); white-space: nowrap; }
.matriz tbody th { text-align: left; }
.matriz tbody tr:hover th { box-shadow: inset 3px 0 0 var(--clave); }
.matriz a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 4px; color: var(--marca); text-decoration: none; }
.matriz a .ico { width: 22px; height: 22px; }
.matriz a:hover { background: var(--resalte); color: var(--sobre-resalte); box-shadow: inset 0 0 0 2px var(--clave); }
.matriz td.misma a { color: var(--tinta); background: var(--marca-suave); }
.matriz td.misma a:hover { background: var(--resalte); color: var(--sobre-resalte); }
.matriz td.nada { color: var(--reja-fuerte); background: var(--cabecera); }
.leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--t-ui); color: var(--tinta-2); margin: 12px 0 0; }
.leyenda .ico { color: var(--marca); }
.esquema { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: start; }
.esquema-pata { align-self: center; width: 64px; height: 120px; fill: none; stroke: var(--marca); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tabla-er { background: var(--hoja); border: 1px solid var(--reja); border-radius: var(--r-caja); box-shadow: var(--sombra-2); overflow: hidden; }
.tabla-er h3 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 16px; background: var(--plano); color: var(--sobre-plano); font-family: var(--mono); font-size: var(--t-tarjeta); font-weight: 600; }
.tabla-er h3 .ico { color: var(--clave); }
.tabla-er ul { list-style: none; margin: 0; padding: 0; }
.tabla-er li { border-bottom: 1px solid var(--reja); }
.tabla-er li:last-child { border-bottom: 0; }
.tabla-er a { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; color: var(--tinta); text-decoration: none; }
.tabla-er a > .ico { color: var(--marca); width: 24px; height: 24px; margin-top: 1px; }
.tabla-er .azulejo { margin-top: 1px; }
.tabla-er a:hover { background: var(--marca-suave); }
.tabla-er strong { display: block; color: var(--marca); font-size: var(--t-tarjeta); line-height: 1.3; }
.tabla-er small { display: block; color: var(--tinta-2); font-size: var(--t-ui); line-height: 1.4; }
.franja { margin-top: var(--bloque); background: var(--plano); color: var(--sobre-plano); }
.franja-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 40px; padding-bottom: 40px; }
.franja h2 { margin: 0 0 8px; font-size: var(--t-seccion); line-height: 1.2; font-weight: 800; letter-spacing: -.012em; }
.franja p { margin: 0 0 12px; color: var(--sobre-plano-2); }
.franja-texto p:last-child { margin-bottom: 0; }
.franja a { color: var(--sobre-plano); }
.franja a:hover { color: var(--clave); }
.lamina { margin: 0 0 16px; padding: 16px; background: var(--plano); border-radius: var(--r-caja); box-shadow: var(--sombra-2); color: var(--sobre-plano-2); }
.ruta-datos { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 148px); align-items: center; margin: 0; font-size: var(--t-ui); }
.ruta-navegador, .ruta-afuera { border: 1.5px solid var(--plano-trazo); border-radius: var(--r-caja); padding: 12px 16px; }
.ruta-navegador { background: var(--velo); }
.ruta-afuera { border-style: dashed; }
.ruta-datos p { margin: 0; line-height: 1.35; }
.ruta-titulo { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--sobre-plano) !important; }
.ruta-titulo .ico { color: var(--clave); }
.ruta-pasos { list-style: none; display: grid; gap: 4px; margin: 8px 0 0; padding: 0; }
.ruta-pasos li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--plano-fuerte); border-radius: var(--r-control); color: var(--sobre-plano); }
.ruta-pasos .ico { color: var(--plano-trazo); }
.ruta-corte svg { display: block; width: 100%; fill: none; stroke: var(--plano-trazo); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 6; }
.ruta-corte .ruta-x { stroke: var(--clave); stroke-width: 3; stroke-dasharray: none; }
.ruta-afuera p + p { margin-top: 8px; }
.faq-doble { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 40px; align-items: start; }
.faq-doble h2 { margin: 0; font-size: var(--t-seccion); line-height: 1.2; font-weight: 800; letter-spacing: -.012em; }
.diagrama { margin: 8px 0 16px; background: var(--hoja); border: 1px solid var(--reja); border-radius: var(--r-caja); box-shadow: var(--sombra-1); padding: 12px; }
.diagrama svg { display: block; width: 100%; min-width: 680px; max-width: none; }
.diagrama figcaption { font-size: var(--t-ui); color: var(--tinta-2); margin-top: 8px; }
.er-caja rect { fill: var(--cabecera); stroke: var(--reja-fuerte); stroke-width: 1; }
.er-caja text { fill: var(--tinta); font-family: var(--mono); font-size: 14px; font-weight: 600; text-anchor: middle; }
.er-caja .er-col { font-size: 13px; font-weight: 400; fill: var(--tinta-2); }
.er-linea path { stroke: var(--marca); stroke-width: 2; fill: none; }
.er-card text { fill: var(--marca); font-family: var(--mono); font-size: 13px; font-weight: 600; }
.sql-cuerpo { display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sql-lado { border-right: 1px solid var(--reja); background: var(--cabecera); min-width: 0; }
.tablas { list-style: none; margin: 0; padding: 0; overflow: auto; height: clamp(120px, 26vh, 300px); }
.tablas li { padding: 4px 12px 8px; border-bottom: 1px solid var(--reja); }
.tabla-nombre { border: 0; background: none; min-height: 26px; padding: 2px 0; color: var(--marca); font-family: var(--mono); font-weight: 600; font-size: var(--t-ui); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tabla-filas { margin-left: 8px; font-size: var(--t-ui); color: var(--tinta-2); }
.tabla-columnas { margin: 0; font-size: var(--t-ui); line-height: 1.35; font-family: var(--mono); color: var(--tinta-2); }
.mesa textarea.area-sql { height: clamp(120px, 26vh, 300px); }
.barra { display: flex; gap: 8px; align-items: center; padding: 8px 12px; flex-wrap: wrap; background: var(--cabecera); border-bottom: 1px solid var(--reja); }
.barra .empuja { margin-left: auto; }
.barra .campo-linea { min-width: 0; max-width: 100%; }
.barra select { width: 100%; min-height: 36px; padding-top: 0; padding-bottom: 0; }
.resultados { min-height: 120px; max-height: 58vh; overflow: auto; border-top: 1px solid var(--reja); }
.resultados:empty { display: flex; align-items: center; justify-content: center; background: var(--cabecera); color: var(--tinta-2); }
.resultados:empty::before { content: "Aquí aparece el resultado."; padding: 12px; }
.resultados .desliza + .desliza { border-top: 3px solid var(--reja-fuerte); }
.ejercicio { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ejercicio-texto { padding: 12px 16px; border-right: 1px solid var(--reja); min-width: 0; font-size: 1rem; }
.ejercicio-texto h2 { margin: 0 0 4px; font-size: var(--t-panel); line-height: 1.3; font-weight: 600; }
.ejercicio-texto p { margin: 0 0 8px; }
.ejercicio-nivel { color: var(--tinta-2); font-size: var(--t-ui); margin: 0 0 4px !important; }
.ejercicio-pista { background: var(--aviso-suave); border-radius: var(--r-etiqueta); padding: 8px 12px; font-size: var(--t-ui); }
.ejercicio-area { min-height: clamp(130px, 26vh, 280px); }
.lista-ejercicios { list-style: none; margin: 0 0 20px; padding: 0; border: 1px solid var(--reja); border-radius: var(--r-caja); background: var(--hoja); box-shadow: var(--sombra-1); overflow: hidden; font-size: 1rem; }
.lista-ejercicios li { display: flex; gap: 12px; align-items: baseline; padding: 8px 12px; border-bottom: 1px solid var(--reja); margin: 0; }
.lista-ejercicios li:last-child { border-bottom: 0; }
.lista-ejercicios .n { font-family: var(--mono); color: var(--tinta-2); min-width: 2ch; text-align: right; }
.lista-ejercicios .cuerpo { flex: 1; min-width: 0; }
.lista-ejercicios details { margin-top: 4px; }
.lista-ejercicios summary { cursor: pointer; color: var(--marca); font-size: var(--t-ui); }
.hecho { color: var(--ok); font-family: var(--mono); font-size: var(--t-ui); }
.pasos-cuerpo { padding: 12px 16px; font-size: 1rem; }
.pasos-cuerpo h2 { margin: 0 0 4px; font-size: var(--t-panel); line-height: 1.3; font-weight: 600; }
.pasos-cuerpo p { margin: 0 0 12px; max-width: 86ch; }
.pasos-tablas { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.tabla-paso { min-width: 0; max-width: 100%; }
.tabla-paso h3 { margin: 0 0 4px; font-family: var(--mono); font-size: var(--t-tarjeta); font-weight: 600; }
.tabla-paso .desliza { border: 1px solid var(--reja); border-radius: var(--r-control); }
.tabla-paso .celdas td { max-width: none; }
.celdas .repetido { background: var(--resalte); color: var(--sobre-resalte); }
.celdas .clave { text-decoration: underline; text-underline-offset: 3px; }
.paso-pie { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pestanas-pasos { display: flex; gap: 4px; padding: 4px 8px; background: var(--cabecera); border-bottom: 1px solid var(--reja); overflow-x: auto; }
.pestanas-pasos .hoja-tab { white-space: nowrap; }
.hallazgos { padding: 4px 16px 12px; min-height: 40px; font-size: 1rem; }
.hallazgo h3 { margin: 12px 0 4px; font-size: var(--t-tarjeta); font-weight: 600; }
.hallazgo p, .hallazgo ul { margin: 0 0 4px; }
.hallazgo.ojo h3 { color: var(--aviso); }
.hallazgo.propuesta h3 { color: var(--marca); }
noscript p { margin: 8px 0; padding: 12px; background: var(--aviso-suave); border-radius: var(--r-control); }
.pie { margin-top: var(--bloque); background: var(--plano-fuerte); color: var(--sobre-plano-2); font-size: var(--t-ui); }
.franja + .bloque + .pie, .inicio .pie { margin-top: var(--bloque); }
.pie-rejilla { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 24px; padding-top: 40px; padding-bottom: 24px; }
.pie h2 { margin: 0 0 8px; font-size: var(--t-tarjeta); font-weight: 600; color: var(--sobre-plano); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 4px; }
.pie a { color: var(--sobre-plano-2); text-decoration: none; }
.pie a:hover { color: var(--clave); text-decoration: underline; }
.pie .logo { color: var(--sobre-plano); }
.pie .logo:hover { color: var(--sobre-plano); text-decoration: none; }
.pie p { margin: 12px 0 0; line-height: 1.45; max-width: 34ch; }
.pie-util { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 12px; padding-bottom: 20px; }
.pie-util::before { content: ""; flex-basis: 100%; height: 1px; margin-bottom: 8px; background: var(--velo-fuerte); }
.pie-util .btn { border-color: var(--velo-fuerte); background: var(--velo); color: var(--sobre-plano); box-shadow: none; }
.pie-util .btn:hover { border-color: var(--clave); color: var(--sobre-plano); }
.pie-util .empuja { margin-left: auto; }
.nota-instalar { flex-basis: 100%; margin: 0; }
:root {
  --m-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --m-subir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V5M7 9.5l5-5 5 5M4.5 20h15'/%3E%3C/svg%3E");
  --m-bajar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10.5l5 5 5-5M4.5 20h15'/%3E%3C/svg%3E");
  --m-copiar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11.5' height='11.5' rx='2'/%3E%3Cpath d='M5.5 15H5a1.5 1.5 0 0 1-1.5-1.5V5A1.5 1.5 0 0 1 5 3.5h8.5A1.5 1.5 0 0 1 15 5v.5'/%3E%3C/svg%3E");
  --m-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12.5-7.5z'/%3E%3C/svg%3E");
  --m-ajustes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h9M18 7h2M4 17h2M11 17h9'/%3E%3Ccircle cx='15.5' cy='7' r='2.5'/%3E%3Ccircle cx='8.5' cy='17' r='2.5'/%3E%3C/svg%3E");
  --m-mas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --m-menos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --m-abre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%235f7796' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4.5l4 4 4-4'/%3E%3C/svg%3E");
  --m-vacio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 56' fill='none' stroke='%235f7796' stroke-opacity='.45' stroke-width='2'%3E%3Crect x='1' y='1' width='70' height='54' rx='6'/%3E%3Cpath d='M1 17h70M1 31h70M1 44h70M24 1v54M48 1v54'/%3E%3C/svg%3E");
}
@media (min-width: 922px) {
  .relacion { display: flex; }
  .plano { display: block; }
}
@media (min-width: 721px) {
  .panel-cabeza { flex-wrap: nowrap; }
  .panel-cabeza > label:not(.campo-linea), .panel-cabeza > .rotulo { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .panel-cabeza .btn { flex: none; }
  .panel-cabeza .campo-linea { flex: 0 1 auto; min-width: 104px; }
  .panel-cabeza select { width: 100%; }
  .panel-cabeza:has(.campo-linea) [data-etiqueta-salida] { display: none; }
}
@media (min-width: 1160px) {
  .sello { display: inline-flex; }
}
@media (min-width: 721px) and (max-width: 921px) {
  .panel-cabeza .sin-celular { display: none; }
  .panel-cabeza .btn-texto { padding: 4px; }
}
@media (min-width: 721px) and (max-width: 1040px) {
  .panel-cabeza .azulejo, .panel-cabeza:has(.campo-linea) > .rotulo, [data-etiqueta-salida] { display: none; }
}
@media (min-width: 721px) and (max-width: 800px) {
  .panel-cabeza:has([data-invertir]) > .rotulo { display: none; }
}
@media (min-width: 721px) and (max-width: 1160px) {
  .panel-cabeza .btn::before, .panel-cabeza .rotulo.pegado { display: none; }
  [data-copiar] { min-width: 0; }
}
@media (max-width: 1100px) {
  .doble { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lateral { position: static; max-width: var(--lectura); }
  .pie-rejilla { grid-template-columns: repeat(4, 1fr); }
  .pie-marca { grid-column: 1 / -1; }
  .pie p { max-width: 60ch; }
}
@media (max-width: 921px) {
  :root { --bloque: 40px; }
  .nav { display: none; }
  .menu-movil { display: block; }
  .sql-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .sql-lado { border-right: 0; border-top: 1px solid var(--reja); }
  .tablas { height: auto; max-height: 220px; }
  .ejercicio { grid-template-columns: minmax(0, 1fr); }
  .ejercicio-texto { border-right: 0; border-bottom: 1px solid var(--reja); }
  .esquema { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .esquema-pata { display: none; }
  .franja-rejilla { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .faq-doble { grid-template-columns: minmax(0, 1fr); }
  .pie-rejilla { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .cabeza .marco { min-height: 52px; }
  .logo { font-size: 1.0625rem; }
  .marca { width: 28px; height: 28px; }
  .titular { padding-top: 8px; padding-bottom: 16px; }
  .inicio .titular { padding-top: 12px; }
  .titular p { font-size: 1rem; margin-top: 4px; }
  .banda.solapa { padding-bottom: 24px; }
  .banda.solapa .titular { padding-bottom: 8px; }
  .banda.solapa + .marco > .mesa { margin-top: -16px; }
  .migas { padding-top: 8px; }
  .paneles { grid-template-columns: minmax(0, 1fr); }
  .panel + .panel { border-left: 0; }
  .panel + .panel::before, .panel + .panel::after { display: none; }
  .panel:first-child > .panel-cabeza, .panel + .panel > .panel-cabeza { padding-left: 12px; padding-right: 8px; }
  .paneles { height: auto; display: contents; }
  .mesa { display: flex; flex-direction: column; }
  .mesa > * { order: 5; }
  .mesa > .paneles > .panel:first-child { order: 1; }
  .mesa > .formula { order: 2; }
  .mesa > .avisos { order: 3; }
  .mesa > .paneles > .panel:last-child { order: 4; border-top: 1px solid var(--reja); }
  .panel-cuerpo { height: 128px; flex: none; }
  .mesa textarea.area-sql { height: 120px; }
  .ejercicio-area { min-height: 124px; height: 124px; flex: none; }
  .mesa[data-sql-online] > .barra, .mesa[data-ejercicios] > .barra { order: 0; }
  .mesa[data-ejercicios] > .ejercicio { order: 1; }
  .mesa[data-sql-online] > .sql-cuerpo { display: contents; }
  .mesa[data-sql-online] .sql-principal { order: 1; height: auto; }
  .mesa[data-sql-online] > .resultados { order: 3; max-height: 46vh; }
  .mesa[data-sql-online] .sql-lado { order: 4; }
  .mesa[data-ejercicios] > .resultados { order: 3; }
  .ejercicio-nivel { display: none; }
  [data-analisis].mesa > .panel-cabeza { order: 0; }
  [data-analisis].mesa > .panel-cuerpo { order: 1; }
  [data-analisis].mesa > .formula { order: 2; }
  [data-pasos].mesa { display: block; }
  .sin-celular { display: none; }
  .formula { flex-wrap: wrap; }
  .formula output { flex: 1 1 60%; }
  .formula-acciones { flex: 1 1 100%; justify-content: flex-end; border-top: 1px solid var(--reja); }
  .lista-ejercicios li { flex-wrap: wrap; }
  .lista-ejercicios .cuerpo { flex: 1 1 calc(100% - 4ch); }
  .lista-ejercicios li > .btn { margin-left: auto; }
  .panel-cabeza { min-height: 48px; }
  .diagnostico th, .diagnostico td:nth-child(2) { width: auto; }
  .pie-util .empuja { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 544px) {
  :root { --margen: 16px; }
  .matriz thead th, .matriz tbody th { padding: 0 6px; }
  .matriz .fmt .ico { display: none; }
  .ruta-datos { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ruta-corte { display: none; }
  .avisos li { padding-left: 12px; }
}
.tabla-er a:focus-visible, .lateral a:focus-visible, .matriz a:focus-visible, .opciones > summary:focus-visible, .menu-movil nav a:focus-visible { outline-offset: -3px; }
@media (max-width: 420px) {
  .panel-cabeza { gap: 4px; }
  .panel-cabeza select { max-width: 124px; }
  .panel-cabeza .btn { padding: 4px 8px; }
  [data-copiar] { min-width: 0; }
  .diagnostico tr { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--reja); }
  .diagnostico th, .diagnostico td { border-bottom: 0; padding: 4px 12px; }
  .diagnostico th { padding-top: 8px; }
  .diagnostico td:last-child { padding-bottom: 8px; }
  .formula-fx { width: 36px; }
}
@media (max-width: 360px) {
  .panel-cabeza .azulejo, .panel-cabeza .btn::before { display: none; }
  .panel-cabeza select { max-width: 104px; }
}
@media (min-width: 721px) and (max-height: 620px) {
  :root { --alto-mesa: 270px; }
  .mesa textarea.area-sql, .tablas { height: 118px; }
  .ejercicio-area { min-height: 118px; }
  .resultados { min-height: 90px; }
}
@media (min-width: 721px) and (max-height: 560px) {
  :root { --alto-mesa: 248px; }
}
@media (max-width: 720px) and (max-height: 700px) {
  .panel-cuerpo { height: 112px; }
  .ejercicio-area { min-height: 104px; height: 104px; }
}
@media print {
  .cabeza, .pie, .mesa, .saltar, .migas, .relacion, .plano, .esquema-pata, .ruta-datos { display: none; }
  body { background: #fff; color: #000; }
  .banda, .franja { background: none; color: #000; }
  .titular p, .franja p { color: #000; }
  pre.codigo { background: none; color: #000; box-shadow: none; border: 1px solid #000; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}