/* Rústicos. Hojas de plano sobre el banco del carpintero: pino, madera quemada, azul de tiza y cinta métrica.
   Medidas de Astra: contenido 1200, lectura 750, cortes 921 y 544. Espacios en escala de 4.
   Letra: 19 de lectura en escritorio, 17 a 18 en celular, nada bajo 15. */

@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%;
  /* Materiales */
  --carbon: #241a13;
  --carbon-2: #3a2a1e;
  --carbon-3: #6d5a47;
  --crema: #fbf3e4;
  --crema-2: #dccfb8;
  --pino-claro: #f4e3bf;
  --pino: #e7cd98;
  --pino-oscuro: #b3853f;
  --cinta: #f4c21f;
  --cabezal: #bf4408;
  --cabezal-fuerte: #e4570f;
  --plano: #1f5189;
  --plano-texto: #f3f7fc;
  --plano-suave: #c8daee;
  --tiza: #1c5aa6;
  --verde: #2c6a3a;
  /* Superficies */
  --fondo: #efe2c9;
  --hoja: #fffdf8;
  --hoja-2: #faf2e3;
  --texto: #241a13;
  --suave: #5a4c3e;
  --linea: #e3d6bd;
  --linea-fuerte: #a8967a;
  --campo: #ffffff;
  --riel: #eee3cf;
  --respuesta-cifra: #f8d68a;
  --chip-ok: #e3efe2;
  --chip-falta: #fdeec2;
  /* Relieve */
  --sombra-1: 0 1px 1px rgba(70, 45, 10, .1), 0 2px 5px -1px rgba(70, 45, 10, .14);
  --sombra-2: 0 1px 1px rgba(70, 45, 10, .1), 0 4px 10px -3px rgba(70, 45, 10, .16), 0 16px 30px -18px rgba(70, 45, 10, .34);
  --sombra-3: 0 1px 1px rgba(60, 35, 5, .14), 0 6px 14px -4px rgba(60, 35, 5, .24), 0 26px 44px -22px rgba(60, 35, 5, .52);
  --textura: url('/texturas/pino.webp');
  --quemada: url('/texturas/pino-noche.webp');
  /* Sistema */
  --r-chico: 6px;
  --r: 10px;
  --t1: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem);
  --t2: clamp(1.375rem, 1.25rem + .6vw, 1.625rem);
  --t3: 1.25rem;
  --t4: 1.0625rem;
  --bloque: 20px;
  --banda: clamp(32px, 4vw, 48px);
  --margen: clamp(16px, 3vw, 32px);
  color-scheme: light;
}

[data-tema='oscuro'] {
  --cabezal: #f39a5c;
  --tiza: #8fbdf0;
  --verde: #86c896;
  --plano: #18416f;
  --fondo: #14100b;
  --hoja: #211810;
  --hoja-2: #2b2016;
  --texto: #f4ecdf;
  --suave: #c9bca8;
  --linea: #43362a;
  --linea-fuerte: #76644d;
  --campo: #14100b;
  --riel: #14100b;
  --chip-ok: #1f3323;
  --chip-falta: #3f3312;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sombra-2: 0 1px 1px rgba(0, 0, 0, .4), 0 14px 26px -14px rgba(0, 0, 0, .7);
  --sombra-3: 0 1px 1px rgba(0, 0, 0, .5), 0 24px 40px -20px rgba(0, 0, 0, .85);
  --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: 16px; }
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; font-variant-numeric: lining-nums; }
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; }
.cabecera :focus-visible, .respuesta :focus-visible, .pie :focus-visible, .banda-plano :focus-visible { outline-color: var(--cinta); }
.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: 8px 16px; border-radius: var(--r-chico); }
.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: 1264px; margin-inline: auto; padding-inline: var(--margen); }

/* Cabecera: un listón de madera quemada con la cinta métrica clavada abajo */
.cabecera { background: var(--carbon) var(--quemada) center / 1800px auto; color: var(--crema); position: relative; z-index: 20; }
.cabecera-in { max-width: 1264px; margin-inline: auto; padding: 8px var(--margen); display: flex; align-items: center; gap: 24px; min-height: 56px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--pino); text-decoration: none; flex: none; }
.logo-testa { width: 38px; height: 38px; }
.logo-palabra { height: 25px; width: auto; fill: currentColor; }
.menu { display: flex; gap: 4px; margin-left: auto; }
.menu a { color: var(--crema); text-decoration: none; padding: 8px 12px; border-radius: var(--r-chico); min-height: 40px; display: flex; align-items: center; }
.menu a:hover { background: var(--carbon-2); }
.menu a[aria-current='page'] { background: var(--carbon-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 var(--carbon-3); color: var(--crema); border-radius: var(--r-chico); padding: 4px 12px 4px 8px; min-height: 40px; display: flex; align-items: center; gap: 6px; }
.todo summary::-webkit-details-marker { display: none; }
.todo summary:hover, .todo[open] summary { background: var(--carbon-2); }
.todo-caja { position: absolute; right: 0; top: calc(100% + 12px); width: min(800px, calc(100vw - 32px)); background: var(--hoja); color: var(--texto); border: 1px solid var(--linea); border-radius: var(--r); box-shadow: var(--sombra-3); padding: 16px 20px 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; z-index: 30; }
.todo-grupo p { font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: var(--t4); padding-bottom: 8px; margin-bottom: 4px; border-bottom: 2px solid var(--cinta); }
.todo-grupo ul { list-style: none; padding: 0; }
.todo-grupo a { display: flex; align-items: center; gap: 8px; padding: 8px 4px; line-height: 1.2; color: var(--texto); text-decoration: none; border-radius: var(--r-chico); font-size: 1rem; }
.todo-grupo .icono { color: var(--cabezal); width: 20px; height: 20px; }
.todo-grupo a:hover { background: var(--hoja-2); color: var(--tiza); }
.todo-grupo a[aria-current='page'] { font-weight: 700; }

/* La cinta métrica */
.cinta { height: 12px; background-color: var(--cinta); background-image: repeating-linear-gradient(90deg, var(--carbon) 0 1.5px, transparent 1.5px 50px), repeating-linear-gradient(90deg, var(--carbon) 0 1px, transparent 1px 10px); background-size: 100% 12px, 100% 5px; background-repeat: no-repeat; box-shadow: inset 0 -1px 0 rgba(90, 60, 0, .3), 0 3px 5px rgba(36, 26, 19, .35); }

/* El banco: tablas de pino con sus juntas */
.banco { position: relative; background-color: var(--pino-claro); background-image: repeating-linear-gradient(180deg, transparent 0 131px, rgba(96, 62, 20, .34) 131px 132px, rgba(255, 250, 235, .55) 132px 133px), var(--textura); background-size: auto, 1800px auto; background-position: 0 0, center top; padding-block: 12px 20px; border-bottom: 1px solid #b8986a; box-shadow: 0 12px 18px -16px rgba(60, 35, 5, .55); }
[data-tema='oscuro'] .banco { background-color: #3a2717; background-image: repeating-linear-gradient(180deg, transparent 0 131px, rgba(0, 0, 0, .55) 131px 132px, rgba(255, 240, 215, .1) 132px 133px), linear-gradient(rgba(150, 96, 44, .34), rgba(150, 96, 44, .34)), var(--textura); background-size: auto, auto, 1800px auto; background-position: 0 0, 0 0, center top; border-bottom-color: #000; }
.migas { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: .9375rem; color: var(--suave); margin-bottom: 4px; }
[data-tema='claro'] .migas, [data-tema='claro'] .bajada { color: #47392b; }
.migas a { color: inherit; }
.migas > * + *::before { content: '/'; margin-right: 8px; opacity: .6; }
h1 { font-size: var(--t1); text-wrap: balance; max-width: 34ch; }
.con-herramienta h1 { max-width: none; }
.bajada { font-size: 1.125rem; max-width: 62ch; margin-top: 4px; }
.banco-guia { padding-bottom: 24px; }
.banco-guia::after { content: ''; position: absolute; inset: 0 max(var(--margen), calc(50% - 600px)) 0 auto; width: 400px; background: url('/ilustracion/escuadra.svg') right center / contain no-repeat; pointer-events: none; }
.banco-guia[data-objeto='brocha']::after { background-image: url('/ilustracion/brocha.svg'); }
.banco-guia[data-objeto='formon']::after { background-image: url('/ilustracion/formon.svg'); }

/* Herramienta */
.herramienta { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); background: var(--hoja); border-radius: var(--r); box-shadow: var(--sombra-3); border: 1px solid var(--carbon-3); overflow: clip; }
.herramienta.apilada { grid-template-columns: minmax(0, 1fr); }
.panel-cabeza { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 8px 16px; min-height: 44px; background: var(--hoja-2); border-bottom: 1px solid var(--linea); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
[data-tema='oscuro'] .panel-cabeza { box-shadow: none; }
.panel-cabeza .icono { color: var(--cabezal); }
.panel-nombre { font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: var(--t4); line-height: 1.2; }
.estado-calculo { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 700; line-height: 1; padding: 6px 10px; border-radius: 999px; background: var(--chip-ok); color: var(--verde); white-space: nowrap; }
.estado-calculo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.estado-calculo[data-estado='falta'] { background: var(--chip-falta); color: var(--texto); }
.campos { padding: 12px 16px 16px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 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: 4px; padding: 0; }
.caja { position: relative; display: flex; align-items: center; background: var(--campo); border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-chico); min-height: 46px; box-shadow: inset 0 1px 2px rgba(70, 45, 10, .12); }
.caja:hover { border-color: var(--texto); }
.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 12px; outline: none; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.caja select { appearance: none; padding-right: 32px; 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 { align-self: stretch; display: flex; align-items: center; padding: 0 8px; color: var(--suave); font-size: .9375rem; flex: none; border-left: 1px solid var(--linea); background: var(--hoja-2); border-radius: 0 4px 4px 0; }
.ayuda { display: block; color: var(--suave); font-size: .9375rem; line-height: 1.3; margin-top: 4px; }

/* Selector en riel: la opción elegida es una tablilla en relieve */
.grupo { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: var(--r-chico); background: var(--riel); box-shadow: inset 0 1px 3px rgba(70, 45, 10, .22); }
.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: 4px 8px; min-height: 40px; line-height: 1.15; font-size: 1rem; border-radius: 4px; }
.opcion:hover span { background: color-mix(in srgb, var(--hoja) 70%, transparent); }
.opcion input:checked + span { background: var(--carbon); color: var(--crema); font-weight: 700; box-shadow: var(--sombra-1), inset 0 1px 0 rgba(255, 255, 255, .14); }
[data-tema='oscuro'] .opcion input:checked + span { background: var(--pino); color: var(--carbon); }
.opcion input:focus-visible + span { outline: 3px solid var(--tiza); outline-offset: 1px; }

.mas { grid-column: 1 / -1; }
.mas summary { cursor: pointer; font-weight: 700; color: var(--tiza); padding: 4px 0; min-height: 32px; }
.mas-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-top: 4px; }
.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: 8px 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; position: relative; }
.solo-texto .pieza { grid-template-columns: 1fr; }
.pieza-campo span { display: block; font-size: .9375rem; font-weight: 700; line-height: 1.2; margin-bottom: 4px; }
.pieza + .pieza .pieza-campo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pieza-campo input { width: 100%; min-height: 44px; border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-chico); background: var(--campo); padding: 0 8px; font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 2px rgba(70, 45, 10, .12); }
.pieza-campo input:hover { border-color: var(--texto); }
.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: 4px; min-height: 44px; font-size: .9375rem; line-height: 1.1; }
.pieza-gira input { width: 20px; height: 20px; accent-color: var(--cabezal-fuerte); }
.quitar { min-height: 44px; background: transparent; color: var(--suave); border: 1.5px solid var(--linea); border-radius: var(--r-chico); padding: 0 8px; 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(--carbon); color: var(--crema); border: 0; border-bottom: 3px solid #000; border-radius: var(--r-chico); padding: 0 16px; cursor: pointer; font-weight: 700; box-shadow: var(--sombra-1); }
.boton:hover { background: var(--carbon-2); }
[data-tema='oscuro'] .boton { background: var(--pino); color: var(--carbon); border-bottom-color: var(--pino-oscuro); }
.boton:active { transform: translateY(1px); border-bottom-width: 2px; }
.boton-suave, [data-tema='oscuro'] .boton-suave { background: var(--hoja); color: var(--texto); border: 1.5px solid var(--linea-fuerte); font-weight: 400; }
.boton-suave:hover, [data-tema='oscuro'] .boton-suave:hover { background: var(--hoja-2); }
.cortes { grid-template-rows: auto auto; }
.plano { grid-column: 1 / -1; padding: 12px 16px 16px; border-top: 1px solid var(--linea); background: var(--hoja-2); min-width: 0; }
.plano:empty { display: none; }
.plano h2 { font-size: var(--t3); margin-bottom: 8px; }
.plano-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.plano-hojas { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.plano-titulo { line-height: 1.25; margin-bottom: 4px; }
.plano-titulo span { color: var(--suave); font-variant-numeric: tabular-nums; }
.plano-hojas .plano-titulo span { display: block; }
.barra { width: 100%; height: 32px; border-radius: 2px; box-shadow: var(--sombra-1); }
.hoja { width: 100%; height: auto; border: 1px solid var(--linea-fuerte); box-shadow: var(--sombra-1); }
.corte-resto { fill: color-mix(in srgb, var(--texto) 12%, var(--hoja)); }
.corte-a { fill: var(--pino); 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: 8px; }
.grano { font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: 1.625rem; color: var(--carbon); background: var(--respuesta-cifra); border-radius: 4px; padding: 2px 12px; font-variant-numeric: lining-nums tabular-nums; box-shadow: var(--sombra-1); }
.grano-luego { color: var(--crema-2); }
.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); font-variant-numeric: lining-nums; }

/* Dibujos dentro del texto: el mismo plano azul de las láminas */
.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: 8px; font-size: 1rem; }
.dibujo { width: 100%; height: auto; background: var(--plano); border-radius: var(--r-chico); box-shadow: var(--sombra-1); }
.d-madera { fill: var(--pino); stroke: var(--carbon); }
.d-suave { fill: #dfe5ec; }
.d-puerta { fill: var(--cabezal-fuerte); stroke: var(--carbon); }
.d-otra { fill: #f19a5f; }
.dibujo-marco:empty { display: none; }
.cola-dibujo { width: 100%; max-height: 56px; }
.cola-tabla { fill: var(--pino-oscuro); }
.cola-forma { fill: var(--pino); stroke: var(--carbon); stroke-width: 1; }

/* Comparador */
.apilada .campos-filtro { padding-bottom: 8px; }
.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: madera quemada con la regla en el canto */
.respuesta { background: var(--carbon) var(--quemada) center / 1800px auto; color: var(--crema); padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 8px; position: relative; min-width: 0; box-shadow: inset 1px 0 0 rgba(255, 240, 215, .08); }
.respuesta::before { content: ''; position: absolute; inset: 0 0 auto; height: 6px; background-image: repeating-linear-gradient(90deg, var(--cinta) 0 1.5px, transparent 1.5px 10px); opacity: .55; }
.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(248, 214, 138, .32); padding-top: 4px; min-width: 0; }
.cifra dt { color: var(--crema-2); 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: lining-nums tabular-nums; }
.cifra.grande dd { font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem); line-height: 1.1; }
.cifra small { font-family: 'Atkinson', sans-serif; font-weight: 400; font-size: .9375rem; color: var(--crema-2); }
.nota-resultado { color: var(--crema-2); 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: var(--pino); }
.testa-anillos { fill: none; stroke: var(--pino-oscuro); stroke-width: 1.2; }
.testa-borde { fill: none; stroke: var(--cabezal-fuerte); stroke-width: 3; }
.testa-verde .testa-borde { stroke: #3f9a55; }
.testa-amarillo .testa-borde { stroke: var(--cinta); }
.testa-cota { fill: none; stroke: var(--crema-2); stroke-width: 1; }
.testa-texto { fill: var(--crema); font-size: 13px; font-family: 'Atkinson', sans-serif; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; padding-top: 4px; }
.accion { display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 240, 215, .05); color: var(--crema); border: 1px solid rgba(248, 214, 138, .45); border-radius: var(--r-chico); min-height: 40px; padding: 0 8px; font-size: .9375rem; cursor: pointer; }
.accion:hover { background: rgba(248, 214, 138, .16); }
.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; }

@media (min-width: 861px) {
  .respuesta:has(#r-testa) { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-content: start; column-gap: 12px; }
  .respuesta:has(#r-testa) > .frase, .respuesta:has(#r-testa) > .cifras, .respuesta:has(#r-testa) > .acciones { grid-column: 1 / -1; }
  #r-testa .testa { max-height: 88px; }
}

@media (min-width: 861px) {
  .cortes { grid-template-rows: auto auto minmax(0, 1fr); }
  .cortes .campos { grid-row: 2 / span 2; border-right: 1px solid var(--linea); }
  .cortes .respuesta { grid-column: 2; grid-row: 2; }
  .cortes .acciones { margin-top: 0; }
  .cortes .plano { grid-column: 2; grid-row: 3; border-top: 0; }
}

/* La mesa: la hoja de lectura sobre el banco */
.mesa { padding-block: 24px var(--banda); }
.lectura { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 32px; align-items: start; }
.lectura.sin-lateral { grid-template-columns: minmax(0, 880px); }
.texto { background: var(--hoja); border-radius: var(--r); box-shadow: var(--sombra-2); padding: 24px clamp(20px, 3vw, 40px) 32px; min-width: 0; font-size: 1.1875rem; line-height: 1.58; }
.texto > * + * { margin-top: var(--bloque); }
.texto p, .texto ul, .texto ol, .prosa p { max-width: 750px; }

/* Títulos: la cota del carpintero bajo cada sección */
.texto h2, .banda h2 { font-size: var(--t2); scroll-margin-top: 16px; }
.texto h2 { margin-top: 40px; }
.texto h2::after, .banda h2::after { content: ''; display: block; width: 104px; height: 8px; margin-top: 8px; background: linear-gradient(var(--tiza), var(--tiza)) 0 0 / 2px 100% no-repeat, linear-gradient(var(--tiza), var(--tiza)) 0 50% / 100% 2px no-repeat, linear-gradient(var(--tiza), var(--tiza)) 100% 0 / 2px 100% no-repeat; }
.texto > h2:first-child, .apertura + h2 { margin-top: 32px; }
.texto > h2:first-child { margin-top: 0; }
.texto h3, .banda h3 { font-size: var(--t3); }
.texto h3 { margin-top: 24px; }
.texto ul, .texto ol { padding-left: 1.25em; }
.texto li + li { margin-top: 4px; }
.texto li::marker { color: var(--cabezal); }

/* Pasos sobre la cinta métrica */
.texto ol.pasos { list-style: none; padding: 0 0 0 56px; counter-reset: paso; position: relative; }
.texto ol.pasos::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 36px; border-radius: 3px; background-color: var(--cinta); background-image: repeating-linear-gradient(180deg, var(--carbon) 0 1.5px, transparent 1.5px 10px); background-size: 9px 100%; background-repeat: no-repeat; box-shadow: var(--sombra-1), inset 0 0 0 1px rgba(90, 60, 0, .3); }
.texto ol.pasos > li { counter-increment: paso; position: relative; margin-top: 16px; min-height: 36px; }
.texto ol.pasos > li:first-child { margin-top: 0; }
.texto ol.pasos > li::before { content: counter(paso); position: absolute; left: -56px; top: 0; width: 36px; height: 34px; color: var(--carbon); font: 800 1.25rem/34px 'Bitter', Georgia, serif; text-align: right; padding-right: 6px; font-variant-numeric: lining-nums; }

/* Apertura: la respuesta y su lámina */
.apertura { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 16px; align-items: stretch; }
.apertura-sola { display: block; float: right; width: 336px; margin: 0 0 16px 24px; }
.apertura-sola + h2 { margin-top: 0; }
.respuesta-corta { position: relative; background: var(--hoja-2); border-radius: var(--r); padding: 20px 20px 16px; font-size: 1.25rem; line-height: 1.45; box-shadow: inset 0 0 0 1px var(--linea); max-width: none !important; }
.respuesta-corta::before { content: ''; position: absolute; left: 20px; top: -1px; width: 112px; height: 7px; background: linear-gradient(90deg, var(--cabezal-fuerte) 0 84%, var(--pino) 84% 96%, var(--carbon) 96%); clip-path: polygon(0 0, 84% 0, 100% 50%, 84% 100%, 0 100%); }
.respuesta-corta strong { color: inherit; }

/* Lámina */
.lamina { margin: 0; background: var(--plano); border-radius: var(--r); box-shadow: var(--sombra-2), inset 0 0 0 1px rgba(255, 255, 255, .1); display: flex; flex-direction: column; justify-content: space-between; min-width: 0; overflow: hidden; }
.lamina svg { width: 100%; height: auto; }
.lamina figcaption { color: var(--plano-suave); font-size: .9375rem; line-height: 1.3; padding: 0 16px 12px; }

.aviso { position: relative; border-radius: var(--r-chico); padding: 12px 16px 12px 28px; background: var(--hoja-2); box-shadow: inset 0 0 0 1px var(--linea); overflow: hidden; max-width: 750px; }
.aviso::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: var(--tiza); }
/* Peligro en el taller: la cinta de seguridad, no un adorno */
.aviso-seguridad { background: color-mix(in srgb, var(--cinta) 14%, var(--hoja)); }
.aviso-seguridad::before { background: repeating-linear-gradient(-45deg, var(--carbon) 0 8px, var(--cinta) 8px 16px); }
.aviso-limite::before { background: var(--carbon-3); }

.tabla-marco { overflow-x: auto; border-radius: var(--r); background: var(--hoja); box-shadow: var(--sombra-2); border: 1px solid var(--linea); }
.tabla-marco:focus-visible { outline-offset: 1px; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 1.0625rem; line-height: 1.4; }
caption { text-align: left; padding: 8px 12px; font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: var(--t4); background: var(--hoja-2); }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
thead th { background: var(--carbon); color: var(--crema); line-height: 1.2; white-space: nowrap; border-bottom: 2px solid var(--cinta); }
tbody th { font-weight: 700; }
tbody tr:hover > * { background: var(--hoja-2); }
tbody tr:last-child > * { border-bottom: 0; }

/* Bandas de la portada y del cierre de cada página */
.banda { padding-block: var(--banda); }
.banda p + p, .prosa > * + * { margin-top: 12px; }
.prosa p, .columnas p { font-size: 1.125rem; }
.banda-abre { padding-block: 24px 0; }
.banda-abre + .banda-hoja { margin-top: var(--banda); }
.apertura-portada { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.apertura-portada .respuesta-corta { background: var(--hoja); box-shadow: var(--sombra-2); font-size: clamp(1.25rem, .95rem + 1.1vw, 1.75rem); line-height: 1.4; padding: 32px; }
.banda-hoja { background: var(--hoja); box-shadow: 0 -1px 0 var(--linea), 0 1px 0 var(--linea); }
.doble { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.banda-plano { background: var(--plano); color: var(--plano-texto); box-shadow: inset 0 12px 16px -14px rgba(8, 24, 45, .7), inset 0 -12px 16px -14px rgba(8, 24, 45, .7); }
.banda-plano h2::after { background-image: linear-gradient(var(--cinta), var(--cinta)), linear-gradient(var(--cinta), var(--cinta)), linear-gradient(var(--cinta), var(--cinta)); }
.formula { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; margin-block: 20px 24px; }
.f-dato { display: grid; justify-items: center; min-width: 64px; }
.f-dato b { font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); line-height: 1.05; color: var(--cinta); font-variant-numeric: lining-nums; }
.f-dato small { font-size: .9375rem; color: var(--plano-suave); line-height: 1.2; text-align: center; border-top: 1.5px solid var(--plano-suave); padding-top: 4px; margin-top: 4px; width: 100%; }
.f-salto { display: none; }
.f-op { font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); line-height: clamp(2.4rem, 1.7rem + 2.8vw, 3.4rem); color: var(--plano-texto); }
.columnas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.columnas p { margin: 0 !important; line-height: 1.5; }

/* Catálogo de herramientas */
.fichas { list-style: none; padding: 0; margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ficha { height: 100%; display: flex; flex-direction: column; background: var(--hoja); border-radius: var(--r); box-shadow: var(--sombra-2); color: var(--texto); text-decoration: none; overflow: hidden; padding-bottom: 16px; }
.ficha-dibujo { display: block; height: 104px; margin-bottom: 12px; border-radius: 0; box-shadow: inset 0 -3px 0 var(--cinta); }
.ficha-dibujo svg { height: 100%; }
.ficha strong { font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: var(--t3); line-height: 1.2; padding-inline: 16px; }
.ficha > span:last-child { color: var(--suave); line-height: 1.35; padding: 4px 16px 0; font-size: 1rem; }
.ficha:hover { box-shadow: var(--sombra-3); }
.ficha:hover strong { color: var(--tiza); }
.filas { list-style: none; padding: 0; margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.filas li { border-bottom: 1px solid var(--linea-fuerte); }
.filas a { display: flex; gap: 12px; align-items: center; padding: 12px 4px; color: var(--texto); text-decoration: none; height: 100%; }
.filas a:hover strong { color: var(--tiza); text-decoration: underline; }
.filas .icono { color: var(--cabezal); width: 28px; height: 28px; }
.filas span { display: block; color: var(--suave); line-height: 1.3; font-size: 1rem; }
.filas strong { display: block; line-height: 1.25; }

/* Costado: índice en forma de regla */
.lateral { position: sticky; top: 16px; display: grid; gap: 24px; font-size: 1rem; }
.lateral p { font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: var(--t4); margin-bottom: 8px; }
.lateral ul { list-style: none; padding: 0; }
.indice ul { border-left: 2px solid var(--linea-fuerte); }
.indice a { position: relative; display: block; padding: 4px 0 4px 16px; color: var(--texto); text-decoration: none; line-height: 1.25; }
.indice a::before { content: ''; position: absolute; left: -2px; top: 50%; width: 8px; height: 2px; background: var(--linea-fuerte); }
.indice a:hover { color: var(--tiza); }
.indice a[aria-current] { font-weight: 700; }
.indice a[aria-current]::before { width: 12px; height: 3px; background: var(--cabezal-fuerte); }
.relacion ul { display: grid; gap: 8px; }
.relacion a { display: flex; gap: 8px; align-items: center; padding: 8px 12px; background: var(--hoja); color: var(--texto); text-decoration: none; border-radius: var(--r-chico); line-height: 1.2; box-shadow: var(--sombra-1); }
.relacion a:hover { box-shadow: var(--sombra-2); color: var(--tiza); }
.relacion .icono { color: var(--cabezal); }

/* Preguntas y fuentes */
.banda-preguntas { background: var(--pino-claro); box-shadow: inset 0 1px 0 rgba(120, 85, 30, .3); }
[data-tema='oscuro'] .banda-preguntas { background: var(--hoja-2); }
.preguntas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; margin-top: 20px; }
.pregunta p { margin-top: 4px; font-size: 1.125rem; line-height: 1.5; }
.banda-fuentes { padding-block: 24px 32px; }
.fuentes { font-size: 1.0625rem; }
.fuentes h2 { font-size: var(--t3); }
.fuentes ul { padding-left: 1.1em; margin-top: 12px; columns: 2; column-gap: 48px; }
.fuentes li { break-inside: avoid; margin-bottom: 4px; }
.vigencia { color: var(--suave); margin-top: 12px; max-width: 750px; }
.vigencia.vencida { color: var(--texto); font-weight: 700; padding-left: 12px; box-shadow: inset 5px 0 0 var(--cinta); }

/* Pie: el tablero donde cada herramienta tiene su silueta */
.pie { background: var(--carbon) var(--quemada) center top / 1800px auto; color: var(--crema-2); }
.pie a { color: var(--crema); }
.pie-tablero { height: 104px; background: url('/ilustracion/tablero.svg') center top repeat-x, var(--carbon-2); box-shadow: inset 0 8px 10px -8px rgba(0, 0, 0, .7), 0 2px 0 var(--cinta), 0 5px 8px rgba(0, 0, 0, .4); }
.pie-mapa { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding-block: 32px 16px; }
.pie-sello { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 12px; color: var(--pino); }
.pie-testa { width: 44px; height: 44px; }
.pie-logo { height: 28px; }
.pie-marca p + p { margin-top: 8px; }
.pie-titulo { font-family: 'Bitter', Georgia, serif; font-weight: 800; color: var(--cinta); margin-bottom: 4px; }
.pie ul { list-style: none; padding: 0; }
.pie li a { display: inline-block; padding: 4px 0; line-height: 1.25; text-decoration: none; }
.pie li a:hover { text-decoration: underline; }
.pie-base { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; border-top: 1px solid var(--carbon-3); padding-block: 12px 16px; }
.ajustes { display: flex; flex-wrap: wrap; gap: 8px; }
.ajuste { background: transparent; color: var(--crema); border: 1px solid var(--carbon-3); border-radius: var(--r-chico); min-height: 40px; min-width: 44px; padding: 0 12px; cursor: pointer; }
.ajuste:hover { background: var(--carbon-2); }
.instalar-ayuda { padding-bottom: 16px; }

@media (max-width: 1080px) {
  .banco-guia::after { display: none; }
  .menu { display: none; }
  .todo { margin-left: auto; }
  .en-pc { display: none; }
  .en-movil { display: inline; }
  .lectura { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; order: 2; }
  .indice { display: none; }
  .relacion ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie-mapa { grid-template-columns: 1fr 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
  .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doble { grid-template-columns: minmax(0, 1fr); }
  .columnas { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 860px) {
  .herramienta { grid-template-columns: minmax(0, 1fr); }
  .panel-cabeza { order: -2; padding: 4px 12px; min-height: 40px; }
  .apilada .panel-cabeza { display: none; }
  .respuesta { order: -1; position: sticky; top: 0; z-index: 8; padding: 12px 12px 8px; gap: 4px; box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .6); }
  .sin-teclado .respuesta { order: 0; position: static; box-shadow: none; }
  .campos { padding: 12px; gap: 8px; }
  .banco-herramienta { padding-bottom: 12px; }
  .herramienta { overflow: visible; }
  .respuesta .testa { display: none; }
  .respuesta .acciones { display: none; }
  .debajo { display: block; padding: 8px 12px 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); background: transparent; }
  .acciones-claras .accion:hover { background: var(--hoja-2); }
  .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: 12px; align-items: center; }
  .plano { padding: 12px; }
  .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: 12px; 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 tr:hover > * { background: none; }
  .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; }
  .apertura, .apertura-portada { grid-template-columns: minmax(0, 1fr); }
  .apertura-sola { float: none; width: auto; margin: 0; }
  .texto { font-size: clamp(1.0625rem, 4.6vw, 1.125rem); }
  .respuesta-corta { font-size: 1.125rem; }
  .preguntas { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fuentes ul { columns: 1; }
}
@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: 544px) {
  .tabla-marco:not(.tabla-herramienta) { overflow: visible; }
  .tabla-marco:not(.tabla-herramienta) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla-marco:not(.tabla-herramienta) tr { display: block; padding: 8px 12px; border-bottom: 1px solid var(--linea); }
  .tabla-marco:not(.tabla-herramienta) tbody tr:last-child { border-bottom: 0; }
  .tabla-marco:not(.tabla-herramienta) tbody th, .tabla-marco:not(.tabla-herramienta) td { display: block; border: 0; padding: 0; background: none; }
  .tabla-marco:not(.tabla-herramienta) td { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: 8px; margin-top: 4px; }
  .tabla-marco:not(.tabla-herramienta) td::before { content: attr(data-et); color: var(--suave); }
  .caja input, .caja select { padding-inline: 8px; }
  .caja select { padding-right: 28px; }
  .logo-palabra { height: 22px; }
  .logo-testa { width: 32px; height: 32px; }
  .cabecera-in { min-height: 48px; padding-block: 4px; gap: 12px; }
  .cinta { height: 8px; background-size: 100% 8px, 100% 4px; }
  .banco { padding-block: 8px 12px; }
  .todo-caja { grid-template-columns: 1fr; gap: 12px; position: fixed; left: 16px; right: 16px; top: 62px; width: auto; max-height: calc(100vh - 80px); overflow: auto; }
  .bajada { font-size: 1.0625rem; }
  /* La hoja ocupa todo el ancho: en un teléfono no sobra margen */
  .mesa { padding-block: 0 24px; }
  .lectura { padding-inline: 0; gap: 20px; }
  .texto { border-radius: 0; padding: 16px; box-shadow: none; }
  .lateral { padding-inline: 16px; }
  .lamina { margin-inline: -16px; border-radius: 0; }
  .apertura-portada .lamina { margin-inline: calc(-1 * var(--margen)); }
  .apertura-portada .respuesta-corta { padding: 20px 16px 16px; }
  .relacion ul { grid-template-columns: minmax(0, 1fr); }
  .pie-mapa { grid-template-columns: 1fr; gap: 20px; }
  .pie-tablero { height: 78px; background-size: auto 78px, auto; }
  .fichas { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ficha { flex-direction: row; flex-wrap: wrap; padding-bottom: 12px; }
  .ficha-dibujo { width: 100%; height: 72px; margin-bottom: 8px; }
  .ficha strong { width: 100%; }
  .filas { grid-template-columns: minmax(0, 1fr); }
  .texto ol.pasos { padding-left: 48px; }
  .texto ol.pasos::before { width: 32px; }
  .texto ol.pasos > li::before { left: -48px; width: 32px; }
}

@media (max-width: 544px) {
  .formula { gap: 8px 12px; }
  .f-salto { display: block; flex-basis: 100%; height: 0; }
  .f-dato { min-width: 52px; }
}

@media (max-width: 360px) {
  .campo, .campo.c2, .campo.c4 { grid-column: span 6; }
  .campo.mitad { grid-column: span 3; }
  /* Al día no hace falta decirlo: el aviso aparece solo si faltan datos */
  .estado-calculo[data-estado='listo'] { display: none; }
  .opcion span { padding-inline: 2px; font-size: .9375rem; }
}

@media print {
  @page { size: letter portrait; margin: 14mm; }
  :root, [data-tema='oscuro'] { --fondo: #fff; --hoja: #fff; --hoja-2: #fff; --texto: #000; --suave: #333; --linea: #999; --carbon: #fff; --crema: #000; --crema-2: #333; --respuesta-cifra: #000; --linea-fuerte: #666; --campo: #fff; --quemada: none; --textura: none; }
  body { background: #fff; color: #000; }
  .cabecera, .pie, .lateral, .acciones, .debajo, .saltar, .migas, .mesa, .banda, .panel-cabeza { display: none !important; }
  .banco { background: none !important; padding: 0; border: 0; box-shadow: none; }
  .herramienta { box-shadow: none; border: 1px solid #666; display: block; }
  .respuesta { position: static; background: none; }
  .respuesta::before { display: none; }
  .testa { display: none; }
  .herramienta::after { content: 'Cálculo orientativo. Rústicos, rusticos.cl'; display: block; padding: 8px 16px; font-size: 11pt; }
}
/* Láminas: una hoja de plano azul de tiza con piezas de pino. Un solo estilo para todas. */
.lamina svg text { font-family: 'Atkinson', 'Segoe UI', Verdana, sans-serif; }
.l-t { fill: #f3f7fc; font-size: 20px; font-weight: 700; }
.lamina svg .l-n { fill: var(--cinta); font-size: 22px; font-weight: 800; font-family: 'Bitter', Georgia, serif; font-variant-numeric: lining-nums; }
.lamina svg .l-suave { fill: #c8daee; font-weight: 400; }
.l-chico { font-size: 18px; font-weight: 400; }
.l-cota { fill: none; stroke: #dbe8f6; stroke-width: 1.400; }
.l-flecha { fill: none; stroke: var(--cinta); stroke-width: 2.400; stroke-linecap: round; stroke-linejoin: round; }
.l-pino { fill: var(--pino); }
.l-pino-oscuro { fill: var(--pino-oscuro); }
.l-veta { fill: none; stroke: #b3853f; stroke-width: 1.100; opacity: .75; }
.l-pino-oscuro + svg .l-veta { stroke: #7f5a23; }
.l-anillos { fill: none; stroke: #b3853f; stroke-width: 1.300; vector-effect: non-scaling-stroke; }
.l-anillos circle { vector-effect: non-scaling-stroke; }
.l-borde { fill: none; stroke: var(--carbon); stroke-width: 2.200; stroke-linejoin: round; }
.l-borde-claro { fill: none; stroke: #f3f7fc; stroke-width: 2.200; }
.l-sombra { fill: rgba(12, 32, 58, .4); }
.l-nominal { fill: none; stroke: #f3f7fc; stroke-width: 2; stroke-dasharray: 7 6; }
.l-corte { fill: var(--cabezal-fuerte); }
.l-falta { fill: var(--cabezal-fuerte); stroke: var(--carbon); stroke-width: 2.200; }
.l-metal { fill: #dfe5ec; stroke: var(--carbon); stroke-width: 2; stroke-linejoin: round; }
.l-rosca { fill: none; stroke: var(--carbon); stroke-width: 1.800; stroke-linecap: round; }
.l-tornillo { fill: #f3f7fc; stroke: var(--carbon); stroke-width: 2; }
.l-brazo { fill: #c3cdd8; stroke: var(--carbon); stroke-width: 2.200; }
.l-cazoleta { fill: #dfe5ec; stroke: var(--carbon); stroke-width: 2; }
.l-agujero { fill: #17406f; stroke: var(--carbon); stroke-width: 2.200; }
.l-hueco { fill: #17406f; }
.l-brocha { fill: none; stroke: var(--cabezal-fuerte); stroke-width: 11; stroke-linecap: round; opacity: .86; }
.l-tarro { fill: #dfe5ec; stroke: var(--carbon); stroke-width: 2.200; }
.l-etiqueta { fill: var(--cinta); stroke: var(--carbon); stroke-width: 2; }
.l-lija { fill: #d2a264; stroke: var(--carbon); stroke-width: 2.200; }
.l-grano { fill: none; stroke: #6b431a; stroke-linecap: round; }
.l-cola { fill: none; stroke: #f3f7fc; stroke-width: 4; }
.l-gota { fill: #f3f7fc; stroke: var(--carbon); stroke-width: 1.400; }
.l-pelicula { fill: var(--cabezal-fuerte); stroke: var(--carbon); stroke-width: 1.600; }
.l-pelicula-2 { fill: #f19a5f; }
.l-entra { fill: none; stroke: var(--cabezal-fuerte); stroke-width: 5; stroke-linecap: round; }
.l-suelo { fill: none; stroke: #f3f7fc; stroke-width: 3; }
.l-pintura { fill: var(--cabezal-fuerte); stroke: var(--carbon); stroke-width: 2; stroke-linejoin: round; }
.l-mancha circle { fill: #2c6a3a; stroke: var(--carbon); stroke-width: 1.400; }
.l-podrida { fill: #8b6a44; }
.l-grieta { fill: none; stroke: var(--carbon); stroke-width: 2.400; }
.l-cuna { fill: var(--cabezal-fuerte); stroke: var(--carbon); stroke-width: 2; }
.l-icono { fill: var(--pino); stroke: var(--carbon); stroke-width: 1.800; stroke-linejoin: round; stroke-linecap: round; }

/* Marca */
.m-tabla { fill: var(--pino); }
.m-anillos { fill: none; stroke: var(--pino-oscuro); stroke-width: 1.500; }
.m-cabezal { fill: var(--cabezal-fuerte); }
.m-letra { fill: var(--carbon); }