/* Rústicos. Mundo de la barraca: pino, grafito de lápiz, cabezal pintado y línea de tiza. */

@font-face { font-family: 'Atkinson'; src: url('/letras/atkinson-400.woff2') format('woff2'); font-weight: 400; font-display: optional; }
@font-face { font-family: 'Atkinson'; src: url('/letras/atkinson-700.woff2') format('woff2'); font-weight: 700; font-display: optional; }
@font-face { font-family: 'Bitter'; src: url('/letras/bitter-800.woff2') format('woff2'); font-weight: 800; font-display: optional; }

:root {
  --letra: 100%;
  --grafito: #231e19;
  --grafito-2: #362e26;
  --pino-claro: #f3e2c0;
  --pino: #e6cd9c;
  --pino-oscuro: #b98d4c;
  --cinta: #f2c230;
  --cabezal: #bf4408;
  --cabezal-fuerte: #e4570f;
  --tiza: #1c5aa6;
  --verde: #2c6a3a;
  --fondo: #f7f0e3;
  --hoja: #fffdf9;
  --texto: #231e19;
  --suave: #5a4f43;
  --linea: #dcccb0;
  --linea-fuerte: #a8967a;
  --campo: #ffffff;
  --respuesta: #231e19;
  --respuesta-texto: #fbf3e4;
  --respuesta-suave: #d6c7ae;
  --respuesta-cifra: #f6d487;
  --sombra: 0 1px 1px rgba(70, 45, 10, .12), 0 3px 8px -2px rgba(70, 45, 10, .16), 0 14px 30px -14px rgba(70, 45, 10, .34);
  --sombra-chica: 0 1px 1px rgba(70, 45, 10, .1), 0 2px 5px -1px rgba(70, 45, 10, .14);
  --textura: url('/texturas/pino.webp');
  --radio: 6px;
  color-scheme: light;
}

[data-tema='oscuro'] {
  --cabezal: #f39a5c;
  --cabezal-fuerte: #e4570f;
  --tiza: #8fbdf0;
  --verde: #86c896;
  --fondo: #17130f;
  --hoja: #221c16;
  --texto: #f4ecdf;
  --suave: #c8bba7;
  --linea: #443a2f;
  --linea-fuerte: #75664f;
  --campo: #17130f;
  --respuesta: #322a21;
  --respuesta-texto: #f8efdf;
  --respuesta-suave: #d6c7ae;
  --respuesta-cifra: #f6d487;
  --sombra: 0 1px 1px rgba(0, 0, 0, .4), 0 12px 26px -12px rgba(0, 0, 0, .7);
  --sombra-chica: 0 1px 2px rgba(0, 0, 0, .5);
  --textura: url('/texturas/pino-noche.webp');
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: var(--letra); -webkit-text-size-adjust: 100%; scroll-padding-top: 14px; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 1.0625rem/1.55 'Atkinson', 'Segoe UI', Verdana, sans-serif; overflow-wrap: break-word; }
h1, h2, h3 { font-family: 'Bitter', Georgia, 'Times New Roman', serif; font-weight: 800; line-height: 1.16; margin: 0; letter-spacing: -.01em; }
p, ul, ol { margin: 0; }
a { color: var(--tiza); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
svg { display: block; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--tiza); outline-offset: 2px; border-radius: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 40; background: var(--hoja); color: var(--texto); padding: 10px 14px; border-radius: var(--radio); }
.saltar:focus { top: 8px; }
.icono { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.ancho { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 32px); }

/* Cabecera */
.cabecera { background: var(--grafito); color: #fbf3e4; position: relative; z-index: 20; }
.cabecera-in { max-width: 1200px; margin-inline: auto; padding: 8px clamp(16px, 3vw, 32px); display: flex; align-items: center; gap: 22px; min-height: 54px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--pino); text-decoration: none; flex: none; }
.logo-testa { width: 36px; height: 36px; }
.lt-fondo { fill: var(--pino); }
.lt-anillos { fill: none; stroke: var(--pino-oscuro); stroke-width: 1.5; }
.lt-borde { fill: none; stroke: var(--cabezal-fuerte); stroke-width: 3; }
.logo-palabra { height: 25px; width: auto; fill: currentColor; }
.menu { display: flex; gap: 2px; margin-left: auto; }
.menu a { color: #f3e8d6; text-decoration: none; padding: 7px 11px; border-radius: 4px; }
.menu a:hover { background: var(--grafito-2); }
.menu a[aria-current='page'] { background: var(--grafito-2); box-shadow: inset 0 -3px 0 var(--cinta); }
.todo { position: relative; flex: none; }
.en-movil { display: none; }
.todo summary { list-style: none; cursor: pointer; border: 1.5px solid #6d5f4c; color: #fbf3e4; border-radius: 4px; padding: 6px 13px; min-height: 40px; display: flex; align-items: center; }
.todo summary::-webkit-details-marker { display: none; }
.todo[open] summary { background: var(--grafito-2); }
.todo-caja { position: absolute; right: 0; top: calc(100% + 10px); width: min(640px, calc(100vw - 32px)); background: var(--hoja); color: var(--texto); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; z-index: 30; }
.todo-grupo p { font-weight: 700; color: var(--suave); margin-bottom: 4px; }
.todo-grupo ul { list-style: none; padding: 0; }
.todo-grupo a { display: block; padding: 5px 0; line-height: 1.25; color: var(--texto); text-decoration: none; }
.todo-grupo a:hover { color: var(--tiza); text-decoration: underline; }

/* La cinta métrica bajo la cabecera */
.cinta { height: 11px; background-color: var(--cinta); background-image: repeating-linear-gradient(90deg, #231e19 0 1.5px, transparent 1.5px 50px), repeating-linear-gradient(90deg, #231e19 0 1px, transparent 1px 10px); background-size: 100% 11px, 100% 5px; background-repeat: no-repeat; background-position: 0 0, 0 0; box-shadow: 0 2px 3px rgba(35, 30, 25, .3); }

/* La tabla de pino sobre la que se trabaja */
.banco { background: var(--textura) center top / cover no-repeat, var(--pino-claro); padding-block: 14px 18px; border-bottom: 1px solid var(--linea); }
[data-tema='oscuro'] .banco { background-color: #231c15; }
.banco-herramienta { padding-bottom: 20px; }
.migas { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: .9375rem; color: var(--suave); margin-bottom: 4px; }
.migas a { color: var(--suave); }
.migas > * + *::before { content: '/'; margin-right: 8px; opacity: .6; }
h1 { font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.25rem); text-wrap: balance; max-width: 30ch; }
.con-herramienta h1 { max-width: none; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.bajada { color: var(--texto); font-size: 1.0625rem; max-width: 68ch; margin-top: 4px; }

/* Herramienta */
.herramienta { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); background: var(--hoja); border-radius: 8px; box-shadow: var(--sombra); border: 1px solid var(--linea-fuerte); overflow: clip; }
.herramienta.apilada { grid-template-columns: minmax(0, 1fr); }
.campos { padding: 14px 18px 16px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 12px; align-content: start; }
.campo { display: block; grid-column: span 3; min-width: 0; border: 0; padding: 0; margin: 0; }
.campo.c2 { grid-column: span 2; }
.campo.c4 { grid-column: span 4; }
.campo.c6 { grid-column: span 6; }
.rotulo { display: block; font-weight: 700; font-size: .9375rem; line-height: 1.25; margin-bottom: 3px; padding: 0; }
.caja { position: relative; display: flex; align-items: center; background: var(--campo); border: 1.5px solid var(--linea-fuerte); border-radius: 5px; min-height: 46px; box-shadow: inset 0 1px 2px rgba(70, 45, 10, .1); }
.caja:focus-within { border-color: var(--tiza); box-shadow: 0 0 0 2px var(--tiza); }
.caja input, .caja select { width: 100%; min-width: 0; min-height: 43px; border: 0; background: transparent; padding: 0 10px; outline: none; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.caja select { appearance: none; padding-right: 30px; cursor: pointer; text-overflow: ellipsis; }
.caja select option { background: var(--hoja); color: var(--texto); }
.caja-lista::after { content: ''; position: absolute; right: 12px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border: solid var(--texto); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
.unidad { padding-right: 10px; color: var(--suave); font-size: .9375rem; flex: none; }
.ayuda { display: block; color: var(--suave); font-size: .875rem; line-height: 1.3; margin-top: 3px; }
.grupo { display: flex; flex-wrap: wrap; gap: 0; border: 1.5px solid var(--linea-fuerte); border-radius: 5px; overflow: hidden; background: var(--campo); }
.opcion { flex: 1 1 auto; position: relative; display: flex; }
.opcion input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opcion span { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px 10px; min-height: 43px; line-height: 1.15; font-size: 1rem; border-left: 1px solid var(--linea); }
.opcion:first-child span { border-left: 0; }
.opcion input:checked + span { background: var(--grafito); color: #fbf3e4; font-weight: 700; }
[data-tema='oscuro'] .opcion input:checked + span { background: var(--pino); color: #231e19; }
.opcion input:focus-visible + span { outline: 3px solid var(--tiza); outline-offset: -3px; }

.mas { grid-column: 1 / -1; }
.mas summary { cursor: pointer; font-weight: 700; color: var(--tiza); padding: 4px 0; min-height: 30px; }
.mas-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-top: 6px; }
.mas-campos .campo { grid-column: auto; }

/* Bloques comunes de herramientas */
.c2 { grid-column: span 2; }
.c3 { grid-column: span 3; }
.c4 { grid-column: span 4; }
.c6 { grid-column: span 6; }
.ayuda-larga { color: var(--suave); line-height: 1.35; }
.fila-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.fila-campos.tres { grid-template-columns: 1.5fr 1fr 1fr; }
.fila-campos .campo { grid-column: auto; }

/* Optimizador */
.piezas { display: grid; gap: 8px; }
.pieza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) auto; gap: 8px; align-items: end; }
.solo-texto .pieza { grid-template-columns: 1fr; }
.pieza-campo span { display: block; font-size: .875rem; font-weight: 700; line-height: 1.2; margin-bottom: 2px; }
.pieza + .pieza .pieza-campo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pieza { position: relative; }
.pieza-campo input { width: 100%; min-height: 42px; border: 1.5px solid var(--linea-fuerte); border-radius: 5px; background: var(--campo); padding: 0 8px; font-variant-numeric: tabular-nums; }
.pieza-campo input:focus { outline: 2px solid var(--tiza); outline-offset: 0; border-color: var(--tiza); }
.pieza:has(.pieza-gira) { grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto; }
.pieza-gira { display: flex; align-items: center; gap: 5px; min-height: 42px; font-size: .9375rem; line-height: 1.1; }
.pieza-gira input { width: 20px; height: 20px; accent-color: var(--cabezal-fuerte); }
.quitar { min-height: 42px; background: transparent; color: var(--suave); border: 1.5px solid var(--linea); border-radius: 5px; padding: 0 9px; cursor: pointer; font-size: .9375rem; }
.quitar:hover { color: var(--texto); border-color: var(--linea-fuerte); }
.piezas-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.boton { min-height: 44px; background: var(--grafito); color: #fbf3e4; border: 0; border-bottom: 3px solid #000; border-radius: 5px; padding: 0 15px; cursor: pointer; font-weight: 700; }
[data-tema='oscuro'] .boton { background: var(--pino); color: #231e19; border-bottom-color: var(--pino-oscuro); }
.boton:active { transform: translateY(1px); border-bottom-width: 2px; }
.boton-suave, [data-tema='oscuro'] .boton-suave { background: transparent; color: var(--texto); border: 1.5px solid var(--linea-fuerte); font-weight: 400; }
.cortes { grid-template-rows: auto auto; }
.plano { grid-column: 1 / -1; padding: 12px 18px 16px; border-top: 1px solid var(--linea); background: var(--hoja); min-width: 0; }
.plano:empty { display: none; }
.plano h2 { font-size: 1.25rem; margin-bottom: 8px; }
.plano-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.plano-hojas { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.plano-titulo { line-height: 1.25; margin-bottom: 3px; }
.plano-titulo span { color: var(--suave); font-variant-numeric: tabular-nums; }
.plano-hojas .plano-titulo span { display: block; }
.barra { width: 100%; height: 30px; border-radius: 2px; }
.hoja { width: 100%; height: auto; border: 1px solid var(--linea-fuerte); }
.corte-resto { fill: color-mix(in srgb, var(--texto) 12%, var(--hoja)); }
.corte-a { fill: #e6cd9c; stroke: #8a6a35; stroke-width: 1; vector-effect: non-scaling-stroke; }
.corte-b { fill: #d9b878; stroke: #8a6a35; stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Lija */
.granos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.grano { font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: 1.625rem; color: #231e19; background: var(--respuesta-cifra); border-radius: 4px; padding: 2px 11px; font-variant-numeric: tabular-nums; }
.grano-luego { color: var(--respuesta-suave); }
.respuesta-principal { font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.5rem); line-height: 1.2; color: var(--respuesta-cifra); }

/* Dibujos */
.tres-dibujos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tres-dibujos figure { margin: 0; }
.tres-dibujos figcaption { line-height: 1.3; margin-top: 5px; font-size: 1rem; }
.dibujo { width: 100%; height: auto; background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--radio); }
.d-madera { fill: #e6cd9c; stroke: #8a6a35; }
.d-suave { fill: color-mix(in srgb, var(--texto) 14%, var(--hoja)); }
.d-puerta { fill: #d9742f; stroke: #8a3a10; }
.d-otra { fill: #edb38a; }
.dibujo-marco:empty { display: none; }
.cola-dibujo { width: 100%; max-height: 56px; }
.cola-tabla { fill: #b98d4c; }
.cola-forma { fill: #ecd6a9; stroke: #231e19; stroke-width: 1; }

/* Comparador */
.apilada .campos-filtro { padding-bottom: 10px; }
.tabla-herramienta { border: 0; border-top: 1px solid var(--linea); border-radius: 0; box-shadow: none; }
.solo-movil { display: none; }
.especie { display: block; }
.ciencia { display: block; font-weight: 400; font-style: italic; color: var(--suave); font-size: .9375rem; }
tr[hidden] { display: none; }

/* Respuesta */
.respuesta { background: var(--respuesta); color: var(--respuesta-texto); padding: 14px 18px 12px; display: flex; flex-direction: column; gap: 8px; position: relative; min-width: 0; }
.frase { font-size: 1.0625rem; line-height: 1.3; }
.frase strong { color: var(--respuesta-cifra); }
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }
.cifra { border-top: 1px solid rgba(246, 212, 135, .32); padding-top: 5px; min-width: 0; }
.cifra dt { color: var(--respuesta-suave); font-size: .9375rem; line-height: 1.2; }
.cifra dd { margin: 0; font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.15; color: var(--respuesta-cifra); font-variant-numeric: tabular-nums; }
.cifra.grande dd { font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.125rem); }
.cifra small { font-family: 'Atkinson', sans-serif; font-weight: 400; font-size: .9375rem; color: var(--respuesta-suave); }
.nota-resultado { color: var(--respuesta-suave); font-size: .9375rem; line-height: 1.3; }
.nota-resultado a, .respuesta a { color: var(--respuesta-cifra); }
.testa { width: 100%; max-height: 112px; margin-inline: auto; }
.testa-fondo { fill: #ecd6a9; }
.testa-anillos { fill: none; stroke: #c09a5b; stroke-width: 1.2; }
.testa-borde { fill: none; stroke: #e4570f; stroke-width: 3; }
.testa-verde .testa-borde { stroke: #3f9a55; }
.testa-amarillo .testa-borde { stroke: #f2c230; }
.testa-cota { fill: none; stroke: var(--respuesta-suave); stroke-width: 1; }
.testa-texto { fill: var(--respuesta-texto); font-size: 13px; font-family: 'Atkinson', sans-serif; }
.acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; padding-top: 6px; }
.accion { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--respuesta-texto); border: 1px solid rgba(246, 212, 135, .45); border-radius: 4px; min-height: 36px; padding: 3px 9px; font-size: .9375rem; cursor: pointer; }
.accion:hover { background: rgba(246, 212, 135, .14); }
.accion .icono { width: 18px; height: 18px; }
.estado-accion { font-size: .9375rem; color: var(--respuesta-cifra); min-height: 1.2em; }
.error { color: #ffd0b3; font-weight: 700; }

/* Lectura */
.lectura { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: clamp(24px, 4vw, 52px); padding-block: 24px 44px; align-items: start; }
.lectura.sin-lateral { grid-template-columns: minmax(0, 1fr); }
.texto { max-width: 74ch; min-width: 0; }
.sin-lateral .texto { max-width: 80ch; }
.texto > * + * { margin-top: 14px; }
.texto h2 { font-size: 1.5rem; margin-top: 34px; padding-bottom: 7px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='4'%3E%3Cpath d='M1 2h13M18 2.300h9M31 1.800h17M52 2.200h7M63 2h25' stroke='%231c5aa6' stroke-width='2.200' stroke-linecap='round' fill='none' opacity='.75'/%3E%3C/svg%3E") left bottom no-repeat; scroll-margin-top: 14px; }
[data-tema='oscuro'] .texto h2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='4'%3E%3Cpath d='M1 2h13M18 2.300h9M31 1.800h17M52 2.200h7M63 2h25' stroke='%238fbdf0' stroke-width='2.200' stroke-linecap='round' fill='none' opacity='.8'/%3E%3C/svg%3E"); }
.texto > h2:first-child, .texto > section:first-child h2 { margin-top: 0; }
.texto h3 { font-size: 1.1875rem; margin-top: 20px; }
.texto ul, .texto ol { padding-left: 1.25em; }
.texto li + li { margin-top: 5px; }
.texto ol.pasos { list-style: none; padding: 0; counter-reset: paso; }
.texto ol.pasos > li { counter-increment: paso; position: relative; padding-left: 44px; margin-top: 12px; min-height: 32px; }
.texto ol.pasos > li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 30px; height: 30px; background: var(--pino); color: #231e19; font-family: 'Bitter', Georgia, serif; font-weight: 800; display: grid; place-items: center; border-radius: 3px; box-shadow: inset 0 -3px 0 var(--pino-oscuro); }
.respuesta-corta { background: var(--hoja); border: 1px solid var(--linea); border-left: 5px solid var(--cabezal-fuerte); border-radius: var(--radio); padding: 11px 14px; box-shadow: var(--sombra-chica); font-size: 1.125rem; }
.aviso { border-radius: var(--radio); padding: 10px 13px; background: var(--hoja); border: 1px solid var(--linea); border-left: 5px solid var(--tiza); }
.aviso-seguridad { border-left-color: var(--cinta); background: color-mix(in srgb, var(--cinta) 14%, var(--hoja)); }
.aviso-limite { border-left-color: var(--suave); }

.tabla-marco { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--hoja); box-shadow: var(--sombra-chica); }
.tabla-marco:focus-visible { outline-offset: 1px; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
caption { text-align: left; padding: 9px 12px 3px; font-weight: 700; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
thead th { background: color-mix(in srgb, var(--pino) 45%, var(--hoja)); line-height: 1.2; white-space: nowrap; }
tbody th { font-weight: 700; }
tbody tr:last-child > * { border-bottom: 0; }
[data-tema='oscuro'] thead th { background: #322a21; }

/* Lista de herramientas de la portada: filas, no tarjetas */
.filas { list-style: none; padding: 0; border-top: 1px solid var(--linea); }
.filas li { border-bottom: 1px solid var(--linea); margin: 0; }
.filas a { display: flex; gap: 12px; align-items: center; padding: 10px 2px; color: var(--texto); text-decoration: none; }
.filas a:hover strong { color: var(--tiza); text-decoration: underline; }
.filas .icono { color: var(--cabezal); width: 26px; height: 26px; }
.filas span { display: block; color: var(--suave); line-height: 1.3; }
.filas strong { display: block; }

.lateral { position: sticky; top: 14px; display: grid; gap: 22px; font-size: 1rem; }
.lateral p { font-weight: 700; color: var(--suave); margin-bottom: 4px; }
.lateral ul { list-style: none; padding: 0; }
.indice li + li { margin-top: 4px; }
.indice a { color: var(--texto); text-decoration: none; line-height: 1.25; display: inline-block; padding: 2px 0; }
.indice a:hover { color: var(--tiza); text-decoration: underline; }
.relacion a { display: flex; gap: 9px; align-items: center; padding: 6px 0; color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--linea); line-height: 1.2; }
.relacion a:hover span { color: var(--tiza); text-decoration: underline; }
.relacion .icono { color: var(--cabezal); }

.preguntas h3 { margin-top: 16px; }
.preguntas p { margin-top: 4px; }
.fuentes { font-size: 1rem; }
.fuentes ul { padding-left: 1.1em; margin-top: 10px; }
.vigencia { color: var(--suave); margin-top: 12px; }
.vigencia.vencida { color: var(--texto); font-weight: 700; border-left: 5px solid var(--cinta); padding-left: 10px; }

/* Pie */
.pie { background: var(--grafito); color: #e8dcc7; }
.pie a { color: #f3e8d6; }
.pie-mapa { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 26px; padding-block: 28px 18px; }
.pie-logo { height: 26px; color: var(--pino); fill: var(--pino); margin-bottom: 8px; }
.pie-marca p + p { margin-top: 8px; color: #cdbfa8; }
.pie-titulo { font-weight: 700; color: var(--cinta); margin-bottom: 4px; }
.pie ul { list-style: none; padding: 0; }
.pie li a { display: inline-block; padding: 3px 0; line-height: 1.25; text-decoration: none; }
.pie li a:hover { text-decoration: underline; }
.pie-base { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; align-items: center; border-top: 1px solid #4b4034; padding-block: 12px 18px; }
.ajustes { display: flex; flex-wrap: wrap; gap: 6px; }
.ajuste { background: transparent; color: #f3e8d6; border: 1px solid #6d5f4c; border-radius: 4px; min-height: 40px; min-width: 42px; padding: 3px 10px; cursor: pointer; }
.ajuste:hover { background: var(--grafito-2); }
.instalar-ayuda { padding-bottom: 16px; }

@media (max-width: 1080px) {
  .menu { display: none; }
  .todo { margin-left: auto; }
  .en-pc { display: none; }
  .en-movil { display: inline; }
  .lectura { grid-template-columns: minmax(0, 1fr); padding-block: 20px 34px; }
  .lateral { position: static; order: 2; }
  .indice { display: none; }
  .pie-mapa { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .herramienta { grid-template-columns: minmax(0, 1fr); }
  .respuesta { order: -1; position: sticky; top: 0; z-index: 8; padding: 9px 14px 9px; gap: 5px; box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .6); }
  .sin-teclado .respuesta { order: 0; position: static; box-shadow: none; }
  .campos { padding: 12px 14px 14px; gap: 8px 10px; }
  .banco-herramienta { padding-bottom: 12px; }
  .acciones-sueltas { display: flex; }
  .herramienta { overflow: visible; }
  .respuesta .testa { display: none; }
  .respuesta .acciones { display: none; }
  .debajo { display: block; padding: 8px 14px 12px; }
  .cifras { gap: 4px 12px; }
  .cifra { padding-top: 2px; }
  .nota-resultado { display: none; }
  .nota-resultado.nota-visible { display: block; }
  .acciones-claras .accion { color: var(--texto); border-color: var(--linea-fuerte); }
  .acciones-claras .accion:hover { background: var(--linea); }
  .acciones-claras .estado-accion { color: var(--texto); }
  .tres-dibujos { grid-template-columns: 1fr; }
  .tres-dibujos figure { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: center; }
  .plano { padding: 12px 14px 14px; }
  .pieza:has(.pieza-gira) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pieza:has(.pieza-gira) .pieza-gira { grid-column: span 2; }
  .tabla-herramienta { overflow: visible; }
  .tabla-herramienta thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla-herramienta tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--linea); }
  .tabla-herramienta tr:last-child { border-bottom: 0; }
  .tabla-herramienta tbody th, .tabla-herramienta td { display: block; border: 0; padding: 0; }
  .tabla-herramienta tbody th { margin-bottom: 4px; }
  .tabla-herramienta td { position: relative; padding-left: 112px; min-height: 1.55em; }
  .tabla-herramienta td::before { content: attr(data-et); color: var(--suave); position: absolute; left: 0; top: 0; }
  .campos-filtro .campo { grid-column: span 6; }
  .solo-movil { display: inline; }
}
@media (min-width: 861px) { .debajo { display: none; } }
.nota-debajo { color: var(--suave); line-height: 1.3; margin-bottom: 8px; }
.nota-debajo:empty { display: none; }

@media (max-width: 560px) {
  body { font-size: 1.0625rem; }
  .logo-palabra { height: 22px; }
  .logo-testa { width: 30px; height: 30px; }
  .cabecera-in { min-height: 48px; padding-block: 6px; gap: 10px; }
  .cinta { height: 8px; background-size: 100% 8px, 100% 4px; }
  .banco { padding-block: 10px 14px; }
  .todo-caja { grid-template-columns: 1fr 1fr; position: fixed; left: 16px; right: 16px; top: 62px; width: auto; max-height: calc(100vh - 80px); overflow: auto; }
  .bajada { font-size: 1rem; }
  .texto { font-size: clamp(1.0625rem, 4.6vw, 1.125rem); }
  .pie-mapa { grid-template-columns: 1fr; }
  .accion span { font-size: .875rem; }
}

@media (max-width: 360px) {
  .campo, .campo.c2, .campo.c4 { grid-column: span 6; }
  .campo.mitad { grid-column: span 3; }
}

@media print {
  @page { size: letter portrait; margin: 14mm; }
  :root, [data-tema='oscuro'] { --fondo: #fff; --hoja: #fff; --texto: #000; --suave: #333; --linea: #999; --respuesta: #fff; --respuesta-texto: #000; --respuesta-suave: #333; --respuesta-cifra: #000; --linea-fuerte: #666; --campo: #fff; }
  body { background: #fff; color: #000; }
  .cabecera, .pie, .lateral, .acciones, .debajo, .saltar, .migas, .texto > *:not(.imprime) { display: none !important; }
  .banco { background: none !important; padding: 0; border: 0; }
  .herramienta { box-shadow: none; border: 1px solid #666; display: block; }
  .respuesta { position: static; }
  .lectura { padding: 0; display: block; }
  .testa { display: none; }
  .herramienta::after { content: 'Cálculo orientativo. Rústicos, rusticos.cl'; display: block; padding: 8px 14px; font-size: 11pt; }
}