/* ============================================================================
   MOD-324 · OMNIA TORSION                                               4.6.0
   ----------------------------------------------------------------------------
   El diseño de la maqueta de Codex (OMN-213) llevado al lenguaje de la casa
   (DESIGN.md):

   · TODO acotado a `#page-paneldoors` y con prefijo `tor-`: nada de `:root`,
     `body`, `.button` ni `.modal` sueltos que se le cuelen a otro módulo.
   · Ningún hex a pelo. Los tokens locales DERIVAN de los globales de
     `app.css`, que ya cambian con `[data-mode]`, así que el modo noche sale
     solo. El acento es el de la marca Torsion (`--mk-acc`, 288-marca-modulos
     .css), que ya trae su versión de noche: por eso la raíz lleva la clase
     `mk-torsion`.
   · Sin sombras ni degradados (la maqueta traía dos de cada uno), sin
     `!important` y nada por debajo de 10 px.
   · MAYÚSCULAS como en la maqueta aprobada: el módulo va en mayúscula
     inicial (Notion × Linear) y sólo cejas, encabezados de tabla y rótulos del
     esquema van en mayúsculas. `body` de OMNIA hereda mayúsculas y botones y
     selects no: sin fijarlo aquí, la pantalla salía mezclada.
   ========================================================================== */

#page-paneldoors {
    --tor-fondo: var(--bg2, #ffffff);
    --tor-base: var(--bg, #f7f8fa);
    --tor-hundido: var(--bg3, #eef0f3);
    --tor-borde: var(--border, #e6e8ec);
    --tor-tx: var(--text, #151b2e);
    --tor-tx2: var(--text2, #5a6577);
    /* El gris de etiquetas, un poco más firme que `--dim`: a 10 px, `--dim`
       sobre el fondo claro daba 4.0–4.3 de contraste (medido), bajo el 4.5
       mínimo. Mezclarlo con el color del texto lo oscurece en día y lo aclara
       en noche: mejora en los dos modos sin tocar el token de la casa. */
    --tor-tx3: color-mix(in srgb, var(--dim, #6b7684) 88%, var(--text, #151b2e));
    --tor-rojo: var(--red, #dc3b3b);
    --tor-mono: var(--font-mono, ui-monospace, monospace);
}
#page-paneldoors .tor-app {
    --tor-acc: var(--mk-acc, #7c3aed);
    --tor-on-acc: var(--bg2, #ffffff);
    --tor-acc-suave: color-mix(in srgb, var(--tor-acc) 9%, var(--tor-fondo));
    --tor-acc-borde: color-mix(in srgb, var(--tor-acc) 30%, var(--tor-borde));
    --tor-acc-tx: color-mix(in srgb, var(--tor-acc) 75%, var(--tor-tx));
    --tor-dib: color-mix(in srgb, var(--tor-acc) 45%, var(--tor-tx3));
    --tor-dib-suave: color-mix(in srgb, var(--tor-acc) 20%, var(--tor-borde));
    --tor-dib-relleno: color-mix(in srgb, var(--tor-acc) 6%, var(--tor-fondo));
    --tor-velo: color-mix(in srgb, var(--tor-tx) 38%, transparent);
    --tor-r: 7px;
    --tor-rs: 5px;
    color: var(--tor-tx);
    text-transform: none;
    max-width: 1600px;
    margin: 0 auto;
    padding: 12px 8px 18px;
}
#page-paneldoors .tor-app * { box-sizing: border-box; }
/* :where() no suma especificidad: esta base NO puede ganarle a la clase de
   cada botón. Sin él, el primario heredaba el color del texto (contraste 2.3
   en noche) y las pestañas inactivas salían brillantes. */
#page-paneldoors .tor-app :where(button, input, select, textarea) { font: inherit; color: inherit; }
#page-paneldoors .tor-app input,
#page-paneldoors .tor-app textarea { text-transform: none; }
#page-paneldoors .tor-app button { cursor: pointer; }
#page-paneldoors .tor-app button:disabled { cursor: not-allowed; opacity: .5; }
#page-paneldoors .tor-app :focus-visible { outline: 2px solid var(--tor-acc); outline-offset: 2px; }
#page-paneldoors .tor-app h1,
#page-paneldoors .tor-app h2,
#page-paneldoors .tor-app h3,
#page-paneldoors .tor-app p { margin: 0; }

#page-paneldoors .tor-ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
#page-paneldoors .tor-contenido { text-transform: none; }
#page-paneldoors .tor-mono { font-family: var(--tor-mono); text-transform: none; }
#page-paneldoors .tor-tenue { color: var(--tor-tx3); }
#page-paneldoors .tor-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── botones ─────────────────────────────────────────────────────────────── */
#page-paneldoors .tor-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid var(--tor-borde); border-radius: var(--tor-rs); background: var(--tor-fondo);
    padding: 8px 13px; font-size: var(--fs-sm, 11px); font-weight: 600; line-height: 18px; white-space: nowrap;
}
#page-paneldoors .tor-btn:hover:not(:disabled) { background: var(--tor-acc-suave); border-color: var(--tor-acc-borde); }
#page-paneldoors .tor-btn .tor-ico { width: 14px; height: 14px; }
#page-paneldoors .tor-btn-primario { background: var(--tor-acc); border-color: var(--tor-acc); color: var(--tor-on-acc); }
#page-paneldoors .tor-btn-primario:hover:not(:disabled) { background: var(--tor-acc-tx); border-color: var(--tor-acc-tx); color: var(--tor-on-acc); }
#page-paneldoors .tor-btn-chico { padding: 5px 9px; font-size: var(--fs-xs, 10px); }
#page-paneldoors .tor-btn-texto { border-color: transparent; background: transparent; color: var(--tor-acc-tx); }
#page-paneldoors .tor-btn-ico {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border: 1px solid transparent; border-radius: var(--tor-rs); background: transparent; color: var(--tor-tx3); flex-shrink: 0;
}
#page-paneldoors .tor-btn-ico:hover:not(:disabled) { background: var(--tor-acc-suave); color: var(--tor-acc-tx); }

/* ── cabecera ────────────────────────────────────────────────────────────── */
#page-paneldoors .tor-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 26px; }
#page-paneldoors .tor-cabeza-grupo { display: flex; gap: 17px; align-items: center; }
#page-paneldoors .tor-marca {
    width: 56px; height: 56px; display: grid; place-items: center; border-radius: 13px;
    background: var(--tor-acc-suave); border: 1px solid var(--tor-acc-borde); color: var(--tor-acc);
}
#page-paneldoors .tor-marca .tor-ico { width: 34px; height: 34px; stroke-width: 1.3; }
#page-paneldoors .tor-ceja { font-size: var(--fs-xs, 10px); font-weight: 600; letter-spacing: 1.5px; color: var(--tor-tx3); text-transform: uppercase; }
#page-paneldoors .tor-h1 { font-size: 32px; letter-spacing: -1px; font-weight: 620; line-height: 1.2; margin-top: 3px; text-transform: none; }
#page-paneldoors .tor-punto { color: var(--tor-acc); }
#page-paneldoors .tor-lema { font-size: var(--fs-sm, 11px); color: var(--tor-tx2); margin-top: 6px; text-transform: none; }
#page-paneldoors .tor-solo-consulta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs, 10px); color: var(--tor-tx3); }
#page-paneldoors .tor-solo-consulta .tor-ico { width: 13px; height: 13px; }

#page-paneldoors .tor-modnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 43px; border-bottom: 1px solid var(--tor-borde); }
/* La barra del módulo son DOS botones de vista. El subrayado marca cuál está
   abierta: con el borde puesto a todos, los dos se veían seleccionados y la
   clase que alterna el código no pintaba nada. */
#page-paneldoors .tor-modnav-sel { height: 100%; display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm, 11px); font-weight: 600; color: var(--tor-tx2); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; padding: 0; }
#page-paneldoors .tor-modnav-sel.tor-activa { color: var(--tor-tx); border-bottom-color: var(--tor-acc); }
/* EL ATRIBUTO hidden NO ESCONDE LO QUE YA TIENE display: la regla de arriba
   (display:grid) le gana al valor del navegador, y la biblioteca se quedaba
   pintada al lado de la calculadora. jsdom no aplica CSS, así que ninguna
   prueba de pantalla puede cazarlo: se comprueba sobre el texto del CSS. */
#page-paneldoors .tor-banco[hidden], #page-paneldoors .tor-ing-hueco[hidden] { display: none; }
#page-paneldoors .tor-modnav-sel b { background: var(--tor-hundido); color: var(--tor-tx2); border-radius: 4px; font-size: var(--fs-xs, 10px); padding: 2px 6px; font-weight: 500; }
#page-paneldoors .tor-modnav-sel .tor-ico { width: 14px; height: 14px; }
#page-paneldoors .tor-modnav-nota { font-size: var(--fs-xs, 10px); color: var(--tor-tx3); display: flex; align-items: center; gap: 6px; margin-left: auto; }
#page-paneldoors .tor-punto-chico { width: 5px; height: 5px; border-radius: 50%; background: var(--tor-dib); display: inline-block; }

#page-paneldoors .tor-metricas { display: grid; grid-template-columns: repeat(3, 1fr); margin: 20px 0 22px; border: 1px solid var(--tor-borde); border-radius: var(--tor-r); background: var(--tor-fondo); }
#page-paneldoors .tor-metrica { padding: 15px 21px; display: flex; gap: 13px; align-items: center; }
#page-paneldoors .tor-metrica + .tor-metrica { border-left: 1px solid var(--tor-borde); }
#page-paneldoors .tor-metrica-ico { width: 33px; height: 33px; border: 1px solid var(--tor-borde); border-radius: var(--tor-r); display: grid; place-items: center; color: var(--tor-dib); background: var(--tor-dib-relleno); }
#page-paneldoors .tor-metrica small { display: block; font-size: var(--fs-xs, 10px); color: var(--tor-tx3); margin-bottom: 4px; }
#page-paneldoors .tor-metrica strong { font-size: 18px; font-weight: 600; font-family: var(--tor-mono); }
#page-paneldoors .tor-metrica strong span { font-family: var(--font-modern, sans-serif); font-size: var(--fs-xs, 10px); color: var(--tor-tx3); font-weight: 400; margin-left: 9px; }

/* ── bandas de aviso ─────────────────────────────────────────────────────── */
#page-paneldoors .tor-banda {
    display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; margin: 0 0 14px;
    border: 1px solid var(--tor-borde); border-radius: var(--tor-rs); background: var(--tor-hundido);
    color: var(--tor-tx2); font-size: var(--fs-sm, 11px); line-height: 1.6; text-transform: none;
}
#page-paneldoors .tor-banda > .tor-ico { margin-top: 2px; width: 14px; height: 14px; }
#page-paneldoors .tor-banda > div { flex: 1; }
#page-paneldoors .tor-banda strong { color: var(--tor-tx); }
#page-paneldoors .tor-banda-error { border-color: color-mix(in srgb, var(--tor-rojo) 40%, var(--tor-borde)); color: var(--tor-rojo); background: color-mix(in srgb, var(--tor-rojo) 6%, var(--tor-fondo)); }
#page-paneldoors .tor-banda-error strong { color: var(--tor-rojo); }

/* ── banco: biblioteca | detalle ─────────────────────────────────────────── */
#page-paneldoors .tor-banco { display: grid; grid-template-columns: 306px minmax(0, 1fr); min-height: 640px; border: 1px solid var(--tor-borde); border-radius: 8px; overflow: hidden; background: var(--tor-fondo); }
#page-paneldoors .tor-biblio { border-right: 1px solid var(--tor-borde); background: var(--tor-base); display: flex; flex-direction: column; min-width: 0; }
#page-paneldoors .tor-biblio-cabeza { padding: 18px 17px 14px; display: flex; justify-content: space-between; align-items: center; }
#page-paneldoors .tor-biblio-cabeza h2 { font-size: var(--fs-sm, 11px); font-weight: 600; }
#page-paneldoors .tor-biblio-cabeza span { font-size: var(--fs-xs, 10px); font-family: var(--tor-mono); }
#page-paneldoors .tor-busca { display: flex; align-items: center; gap: 8px; border: 1px solid var(--tor-borde); background: var(--tor-fondo); border-radius: var(--tor-rs); padding: 0 9px; min-height: 34px; }
#page-paneldoors .tor-busca:focus-within { border-color: var(--tor-acc-borde); }
#page-paneldoors .tor-busca .tor-ico { width: 14px; height: 14px; color: var(--tor-tx3); }
#page-paneldoors .tor-busca input { border: 0; background: transparent; width: 100%; min-width: 0; height: 32px; font-size: var(--fs-sm, 11px); }
#page-paneldoors .tor-busca input:focus-visible { outline: none; }
#page-paneldoors .tor-biblio > .tor-busca { margin: 0 16px; }
#page-paneldoors .tor-filtros { display: flex; gap: 7px; margin: 10px 16px 16px; }
#page-paneldoors .tor-filtros select,
#page-paneldoors .tor-producto-filtros select {
    flex: 1; min-width: 0; border: 1px solid var(--tor-borde); border-radius: 4px; background: var(--tor-fondo);
    padding: 6px; font-size: var(--fs-xs, 10px); color: var(--tor-tx2);
}
#page-paneldoors .tor-lista { padding: 0 9px 10px; display: flex; flex-direction: column; gap: 6px; }
#page-paneldoors .tor-ficha { display: block; width: 100%; text-align: left; border: 1px solid transparent; border-radius: 6px; padding: 14px 12px; position: relative; background: transparent; }
#page-paneldoors .tor-ficha:hover { background: var(--tor-hundido); }
#page-paneldoors .tor-ficha.tor-sel { border-color: var(--tor-acc-borde); background: var(--tor-acc-suave); }
#page-paneldoors .tor-ficha.tor-sel::before { content: ''; position: absolute; left: -1px; top: 50%; width: 3px; height: 34px; margin-top: -17px; border-radius: 0 3px 3px 0; background: var(--tor-acc); }
#page-paneldoors .tor-ficha-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs-xs, 10px); font-weight: 600; letter-spacing: .8px; color: var(--tor-tx2); text-transform: uppercase; }
#page-paneldoors .tor-ficha h3 { font-size: 12.5px; margin: 7px 0 5px; font-weight: 600; text-transform: none; }
#page-paneldoors .tor-ficha p { font-size: var(--fs-xs, 10px); color: var(--tor-tx2); margin-bottom: 10px; }
#page-paneldoors .tor-ficha-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs-xs, 10px); color: var(--tor-tx3); }
#page-paneldoors .tor-ficha-pie > span:first-child { display: flex; align-items: center; gap: 5px; }
#page-paneldoors .tor-punto-mini { width: 4px; height: 4px; border-radius: 50%; background: var(--tor-dib); display: inline-block; }
#page-paneldoors .tor-biblio-pie { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs, 10px); color: var(--tor-tx3); padding: 18px 16px; margin-top: auto; }
#page-paneldoors .tor-biblio-pie .tor-ico { width: 13px; height: 13px; }

#page-paneldoors .tor-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 4px; font-size: var(--fs-xs, 10px); padding: 3px 6px; background: var(--tor-hundido); color: var(--tor-tx2); font-weight: 500; }
#page-paneldoors .tor-pill-acc { background: var(--tor-acc-suave); color: var(--tor-acc-tx); }
#page-paneldoors .tor-pill-borde { background: transparent; border: 1px solid var(--tor-borde); }

#page-paneldoors .tor-vacio { text-align: center; color: var(--tor-tx3); padding: 40px 20px; line-height: 1.7; font-size: var(--fs-sm, 11px); text-transform: none; }
#page-paneldoors .tor-vacio .tor-ico { width: 28px; height: 28px; margin-bottom: 8px; }
#page-paneldoors .tor-vacio b { display: block; color: var(--tor-tx2); font-weight: 600; }
#page-paneldoors .tor-sembrar { margin-top: 14px; }

/* ── detalle ─────────────────────────────────────────────────────────────── */
#page-paneldoors .tor-detalle { min-width: 0; background: var(--tor-fondo); }
#page-paneldoors .tor-det-cabeza { padding: 22px 25px 0; }
#page-paneldoors .tor-det-sobre { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#page-paneldoors .tor-det-codigo { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs, 10px); color: var(--tor-tx3); text-transform: uppercase; }
#page-paneldoors .tor-det-codigo .tor-ico { width: 13px; height: 13px; }
#page-paneldoors .tor-det-titulo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 13px 0 14px; }
#page-paneldoors .tor-det-titulo h2 { font-size: 21px; letter-spacing: -.5px; font-weight: 600; line-height: 1.3; }
#page-paneldoors .tor-det-sub { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; font-size: var(--fs-sm, 11px); color: var(--tor-tx3); margin-top: 6px; }
#page-paneldoors .tor-det-sub b { color: var(--tor-tx2); font-weight: 600; }
#page-paneldoors .tor-pestanas { display: flex; gap: 22px; border-bottom: 1px solid var(--tor-borde); margin-top: 10px; overflow-x: auto; }
#page-paneldoors .tor-pestana { display: flex; gap: 6px; align-items: center; padding: 0 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: var(--fs-sm, 11px); color: var(--tor-tx3); white-space: nowrap; }
#page-paneldoors .tor-pestana.tor-activa { color: var(--tor-acc-tx); border-bottom-color: var(--tor-acc); }
#page-paneldoors .tor-cuenta { font-size: var(--fs-xs, 10px); border-radius: 3px; padding: 1px 5px; background: var(--tor-hundido); font-family: var(--tor-mono); }
#page-paneldoors .tor-det-cuerpo { padding: 22px 25px 26px; }

#page-paneldoors .tor-resumen { display: grid; grid-template-columns: minmax(180px, .9fr) minmax(180px, 1.1fr); gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--tor-borde); }
#page-paneldoors .tor-dibujo { position: relative; overflow: hidden; background: var(--tor-dib-relleno); border: 1px solid var(--tor-borde); border-radius: var(--tor-rs); padding: 13px 10px 10px; }
#page-paneldoors .tor-dibujo-etq { position: absolute; top: 11px; left: 12px; font-size: var(--fs-xs, 10px); letter-spacing: 1px; color: var(--tor-tx3); text-transform: uppercase; }
#page-paneldoors .tor-dibujo > svg { width: 100%; height: 170px; display: block; margin-top: 12px; }
#page-paneldoors .tor-dibujo-pie { display: flex; justify-content: space-between; font-size: var(--fs-xs, 10px); color: var(--tor-tx3); padding: 7px 3px 0; text-transform: uppercase; }
#page-paneldoors .tor-d-linea { fill: none; stroke: var(--tor-dib); stroke-width: 1; }
#page-paneldoors .tor-d-suave { stroke: var(--tor-dib-suave); }
#page-paneldoors .tor-d-reja { fill: none; stroke: var(--tor-dib-suave); stroke-width: .45; }
#page-paneldoors .tor-d-resorte { stroke: var(--tor-acc); stroke-width: 1.2; fill: none; }
#page-paneldoors .tor-d-panel { fill: var(--tor-fondo); }
#page-paneldoors .tor-d-bombo { fill: var(--tor-acc-suave); }
#page-paneldoors .tor-d-punto { fill: var(--tor-dib); stroke: none; }

#page-paneldoors .tor-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; align-content: center; margin: 0; }
#page-paneldoors .tor-dato dt { font-size: var(--fs-xs, 10px); color: var(--tor-tx3); margin-bottom: 6px; }
#page-paneldoors .tor-dato dd { margin: 0; font-size: 12px; font-weight: 500; color: var(--tor-tx2); line-height: 1.45; }
#page-paneldoors .tor-dato dd strong { font-size: 20px; font-weight: 520; color: var(--tor-tx); font-family: var(--tor-mono); }
#page-paneldoors .tor-dato dd small { font-size: var(--fs-xs, 10px); color: var(--tor-tx3); font-weight: 400; }

#page-paneldoors .tor-seccion-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 22px 0 14px; }
#page-paneldoors .tor-seccion-cabeza.tor-sin-margen { margin-top: 0; }
#page-paneldoors .tor-seccion-cabeza h3 { font-size: var(--fs-sm, 11px); font-weight: 600; }
#page-paneldoors .tor-seccion-cabeza small { font-size: var(--fs-xs, 10px); color: var(--tor-tx3); }
#page-paneldoors .tor-herrajes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px 14px; }
#page-paneldoors .tor-herraje { display: flex; align-items: flex-start; gap: 8px; }
#page-paneldoors .tor-herraje > .tor-ico { width: 14px; height: 14px; margin-top: 1px; color: var(--tor-dib); }
#page-paneldoors .tor-herraje small { display: block; font-size: var(--fs-xs, 10px); color: var(--tor-tx3); margin-bottom: 5px; }
#page-paneldoors .tor-herraje b { display: block; font-size: 12px; font-weight: 500; color: var(--tor-tx); line-height: 1.5; text-transform: none; }
#page-paneldoors .tor-nota { margin-top: 22px; padding: 12px; border: 1px solid var(--tor-borde); border-radius: var(--tor-rs); display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm, 11px); line-height: 1.6; color: var(--tor-tx2); background: var(--tor-base); }
#page-paneldoors .tor-nota .tor-ico { width: 13px; height: 13px; margin-top: 2px; }
#page-paneldoors .tor-nota strong { color: var(--tor-tx); font-weight: 600; }
#page-paneldoors .tor-nota em { color: var(--tor-tx3); font-style: normal; text-transform: none; }

#page-paneldoors .tor-intro { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 16px; }
#page-paneldoors .tor-intro h3 { font-size: 12px; font-weight: 600; }
#page-paneldoors .tor-intro p { font-size: var(--fs-sm, 11px); line-height: 1.6; color: var(--tor-tx2); margin-top: 6px; text-transform: none; }
#page-paneldoors .tor-total { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs, 10px); color: var(--tor-tx3); white-space: nowrap; }
#page-paneldoors .tor-total b { font-size: 23px; color: var(--tor-tx); font-weight: 500; font-family: var(--tor-mono); }

#page-paneldoors .tor-tabla-envoltura { overflow-x: auto; }
#page-paneldoors .tor-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
#page-paneldoors .tor-tabla th { text-transform: uppercase; text-align: left; font-size: var(--fs-xs, 10px); font-weight: 500; color: var(--tor-tx3); padding: 9px 8px; border-bottom: 1px solid var(--tor-borde); background: var(--tor-hundido); }
#page-paneldoors .tor-tabla td { padding: 12px 8px; border-bottom: 1px solid var(--tor-borde); color: var(--tor-tx2); }
#page-paneldoors .tor-tabla td:first-child { font-weight: 600; color: var(--tor-tx); }
#page-paneldoors .tor-tabla td:not(:first-child):not(:last-child) { font-family: var(--tor-mono); text-align: right; }
#page-paneldoors .tor-tabla th:not(:first-child):not(:last-child) { text-align: right; }

#page-paneldoors .tor-resorte-visual { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 20px; padding: 16px; border: 1px solid var(--tor-borde); border-radius: var(--tor-rs); background: var(--tor-dib-relleno); }
#page-paneldoors .tor-resorte-visual svg { width: 175px; height: 66px; }
#page-paneldoors .tor-resorte-visual b { font-size: var(--fs-sm, 11px); font-weight: 600; color: var(--tor-acc-tx); }
#page-paneldoors .tor-resorte-visual small { display: block; font-size: var(--fs-xs, 10px); color: var(--tor-tx3); margin-top: 5px; text-transform: none; }

#page-paneldoors .tor-conjunto { border: 1px solid var(--tor-borde); border-radius: 6px; margin-bottom: 16px; overflow: hidden; }
#page-paneldoors .tor-conjunto-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 15px; background: var(--tor-base); border-bottom: 1px solid var(--tor-borde); }
#page-paneldoors .tor-conjunto-cabeza h3 { font-size: 12px; font-weight: 600; text-transform: none; }
#page-paneldoors .tor-conjunto-cabeza small { display: block; font-size: var(--fs-xs, 10px); color: var(--tor-tx3); margin-top: 5px; text-transform: uppercase; }
#page-paneldoors .tor-conjunto .tor-tabla-envoltura { margin: 0 8px; }
#page-paneldoors .tor-conjunto-pie { padding: 12px 15px; font-size: var(--fs-sm, 11px); color: var(--tor-tx3); line-height: 1.6; text-transform: none; }

#page-paneldoors .tor-linea { border-left: 1px solid var(--tor-borde); padding-left: 21px; margin-left: 6px; }
#page-paneldoors .tor-linea-item { position: relative; padding: 0 0 24px; }
#page-paneldoors .tor-linea-item::before { content: ''; position: absolute; left: -25px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--tor-acc); }
#page-paneldoors .tor-linea-item h3 { font-size: var(--fs-sm, 11px); font-weight: 600; }
#page-paneldoors .tor-linea-item p { font-size: var(--fs-sm, 11px); line-height: 1.7; color: var(--tor-tx2); margin-top: 6px; text-transform: none; }

#page-paneldoors .tor-pie { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-top: 16px; font-size: var(--fs-xs, 10px); color: var(--tor-tx3); }
#page-paneldoors .tor-pie > span:first-child { text-transform: uppercase; letter-spacing: 1px; }
#page-paneldoors .tor-pie b { font-weight: 400; margin: 0 6px; color: var(--tor-dib-suave); }

/* ── modales: dentro de la página, para heredar sus tokens ──────────────── */
#page-paneldoors .tor-velo { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--tor-velo); }
#page-paneldoors .tor-modal {
    width: 680px; max-width: 100%; max-height: 90vh; overflow-y: auto; position: relative;
    background: var(--tor-fondo); color: var(--tor-tx); border: 1px solid var(--tor-borde); border-radius: 11px;
}
#page-paneldoors .tor-modal-editor { width: 880px; }
#page-paneldoors .tor-modal-cabeza { display: flex; justify-content: space-between; gap: 15px; padding: 24px 28px 20px; border-bottom: 1px solid var(--tor-borde); }
#page-paneldoors .tor-modal-cabeza h2 { font-size: 22px; letter-spacing: -.6px; font-weight: 600; margin-top: 7px; }
#page-paneldoors .tor-modal-cabeza p { font-size: var(--fs-sm, 11px); color: var(--tor-tx2); margin-top: 8px; text-transform: none; }
#page-paneldoors .tor-modal-cuerpo { padding: 20px 28px; }
#page-paneldoors .tor-modal-pie { position: sticky; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 28px; border-top: 1px solid var(--tor-borde); background: var(--tor-base); }
#page-paneldoors .tor-modal-pie small { font-size: var(--fs-xs, 10px); color: var(--tor-tx3); text-transform: none; }
#page-paneldoors .tor-modal-acciones { display: flex; gap: 8px; }
#page-paneldoors .tor-linea-info { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm, 11px); color: var(--tor-tx3); line-height: 1.6; margin: 0 0 14px; text-transform: none; }
#page-paneldoors .tor-linea-info .tor-ico { width: 14px; height: 14px; margin-top: 1px; }

#page-paneldoors .tor-producto-filtros { display: flex; gap: 9px; margin-bottom: 14px; }
#page-paneldoors .tor-producto-filtros .tor-busca { flex: 1; }
#page-paneldoors .tor-producto-filtros select { flex: 0 0 170px; font-size: var(--fs-sm, 11px); }
#page-paneldoors .tor-producto { display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 10px; border: 0; border-bottom: 1px solid var(--tor-borde); background: transparent; }
#page-paneldoors .tor-producto:hover { background: var(--tor-acc-suave); }
#page-paneldoors .tor-producto small { display: block; font-size: var(--fs-xs, 10px); color: var(--tor-tx3); margin-bottom: 5px; }
#page-paneldoors .tor-producto b { display: block; font-size: 12.5px; font-weight: 500; }
#page-paneldoors .tor-producto .tor-mono { display: block; font-size: var(--fs-xs, 10px); margin-top: 5px; }
#page-paneldoors .tor-producto > .tor-ico { color: var(--tor-dib); }
#page-paneldoors .tor-productos-editor { max-height: 280px; overflow-y: auto; border: 1px solid var(--tor-borde); border-radius: var(--tor-rs); }
#page-paneldoors .tor-vinculo { font-size: 12px; color: var(--tor-tx2); margin: 0 0 12px; }

#page-paneldoors .tor-form-seccion { padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid var(--tor-borde); }
#page-paneldoors .tor-form-seccion:last-child { border: 0; padding: 0; margin: 0; }
#page-paneldoors .tor-form-seccion h3 { font-size: 12px; font-weight: 600; margin: 0 0 14px; }
#page-paneldoors .tor-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
#page-paneldoors .tor-campo { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-xs, 10px); color: var(--tor-tx2); }
#page-paneldoors .tor-campo.tor-ancho { grid-column: 1 / -1; }
#page-paneldoors .tor-campo input,
#page-paneldoors .tor-campo select,
#page-paneldoors .tor-campo textarea,
#page-paneldoors .tor-resorte-fila input,
#page-paneldoors .tor-resorte-fila select,
/* Los controles de la fila de panel entran AQUÍ, con los demás del editor, y
   no con un estilo propio: una fila que se pinta distinta del resto del
   formulario parece deshabilitada. Se vio en el navegador — en jsdom los dos
   se ven igual, que es ninguno. */
#page-paneldoors .tor-panel-fila input,
#page-paneldoors .tor-panel-fila select,
#page-paneldoors .tor-editor-conjunto-titulo input,
#page-paneldoors .tor-marca-alta input {
    width: 100%; min-width: 0; border: 1px solid var(--tor-borde); border-radius: var(--tor-rs);
    background: var(--tor-fondo); padding: 8px 9px; font-size: 12px;
}
#page-paneldoors .tor-campo textarea { min-height: 64px; resize: vertical; }
#page-paneldoors .tor-app [aria-invalid="true"] { border-color: var(--tor-rojo); }
#page-paneldoors .tor-err { color: var(--tor-rojo); font-size: var(--fs-xs, 10px); line-height: 1.5; text-transform: none; }
#page-paneldoors .tor-err-fila { grid-column: 2 / -1; }

#page-paneldoors .tor-resorte-cabeza,
#page-paneldoors .tor-resorte-fila { display: grid; grid-template-columns: 32px 1fr 1fr 1fr 110px 28px; gap: 8px; align-items: center; }
#page-paneldoors .tor-resorte-cabeza { font-size: var(--fs-xs, 10px); color: var(--tor-tx3); margin: 10px 0 8px; }
#page-paneldoors .tor-resorte-fila { margin-bottom: 8px; font-size: var(--fs-xs, 10px); color: var(--tor-tx3); }
#page-paneldoors .tor-resorte-fila input { font-family: var(--tor-mono); }
#page-paneldoors .tor-editor-conjunto { margin-top: 14px; padding: 14px; border: 1px solid var(--tor-borde); border-radius: 6px; background: var(--tor-base); }
#page-paneldoors .tor-editor-conjunto-titulo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#page-paneldoors .tor-editor-conjunto-titulo input { max-width: 80%; }
#page-paneldoors .tor-editor-conjunto .tor-campo { margin-top: 12px; }

/* ── medidas con unidad · 4.6.0 (OMN-222) ────────────────────────────────────
   El número y su unidad son UN dato, y se ven como uno: un control partido,
   con un solo borde alrededor. Debajo, en gris, el equivalente en milímetros
   —el derivado que se guarda aparte— sin robarle sitio al campo: el renglón
   existe siempre (`min-height`), aunque esté vacío, o la rejilla brincaría al
   teclear. */
#page-paneldoors .tor-medida { display: flex; align-items: stretch; }
#page-paneldoors .tor-medida input { flex: 1; min-width: 0; border-radius: 5px 0 0 5px; border-right: 0; }
#page-paneldoors .tor-medida select { flex: 0 0 124px; border-radius: 0 5px 5px 0; color: var(--tor-tx2); }
#page-paneldoors .tor-medida input:focus-visible { position: relative; z-index: 1; }
#page-paneldoors .tor-equiv { min-height: 14px; font-size: var(--fs-xs, 10px); color: var(--tor-tx3); font-family: var(--tor-mono); text-transform: none; }
/* Lo que no se capturó se dice, no se disimula (doctrina: un texto que sólo es
   cierto para algunos no se pinta para todos). */
#page-paneldoors .tor-sindato { color: var(--tor-tx3); font-weight: 400; font-style: italic; text-transform: none; }

/* ── fotos de referencia ─────────────────────────────────────────────────── */
/* La rejilla de miniaturas de Drive se retiró en 4.9.0: las servía Drive y
   sólo se veían con la misma sesión de Google abierta. Ahora son chips, y sus
   estilos están abajo, en el bloque de 4.9.0. */
#page-paneldoors .tor-btn-calavera:hover:not(:disabled) { background: var(--tor-rojo); border-color: var(--tor-rojo); color: var(--bg2, #fff); }
#page-paneldoors .tor-vacio-chico { padding: 22px 16px; }

#page-paneldoors .tor-marca-fila { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 12px 0; border-bottom: 1px solid var(--tor-borde); font-size: 12px; }
#page-paneldoors .tor-marca-fila > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
#page-paneldoors .tor-marca-fila small { flex-basis: 100%; font-size: var(--fs-xs, 10px); color: var(--tor-tx3); }
#page-paneldoors .tor-marca-fila > .tor-ico { color: var(--tor-tx3); width: 14px; height: 14px; }
#page-paneldoors .tor-marca-alta { display: flex; gap: 9px; margin-top: 20px; }
#page-paneldoors .tor-marca-alta input { flex: 1; text-transform: uppercase; }

/* ── anchos intermedios ──────────────────────────────────────────────────── */
@media (min-width: 1550px) {
    #page-paneldoors .tor-banco { grid-template-columns: 340px minmax(0, 1fr); }
    #page-paneldoors .tor-det-cabeza { padding: 26px 34px 0; }
    #page-paneldoors .tor-det-cuerpo { padding: 24px 34px 32px; }
    #page-paneldoors .tor-dibujo > svg { height: 190px; }
}
@media (max-width: 1180px) {
    #page-paneldoors .tor-banco { grid-template-columns: 260px minmax(0, 1fr); }
    #page-paneldoors .tor-det-cabeza { padding: 20px 18px 0; }
    #page-paneldoors .tor-det-cuerpo { padding: 20px 18px; }
    #page-paneldoors .tor-herrajes { grid-template-columns: repeat(2, 1fr); }
    #page-paneldoors .tor-metrica { padding: 14px; }
    #page-paneldoors .tor-metrica strong span { display: block; margin: 4px 0 0; }
}
@media (max-width: 940px) {
    #page-paneldoors .tor-banco { grid-template-columns: 238px minmax(0, 1fr); }
    #page-paneldoors .tor-resumen { grid-template-columns: 1fr; }
    #page-paneldoors .tor-modnav-nota { display: none; }
    #page-paneldoors .tor-det-titulo { flex-wrap: wrap; }
}
/* ── teléfono (≤768, el corte de la casa) ────────────────────────────────── */
@media (max-width: 768px) {
    #page-paneldoors .tor-app { padding: 4px 0 18px; }
    #page-paneldoors .tor-cabeza { align-items: flex-start; gap: 10px; margin-bottom: 18px; }
    #page-paneldoors .tor-marca { width: 42px; height: 42px; border-radius: 10px; }
    #page-paneldoors .tor-marca .tor-ico { width: 26px; height: 26px; }
    #page-paneldoors .tor-h1 { font-size: 26px; }
    #page-paneldoors .tor-metricas { margin: 16px 0; }
    #page-paneldoors .tor-metrica { padding: 11px 9px; gap: 6px; }
    #page-paneldoors .tor-metrica-ico { display: none; }
    #page-paneldoors .tor-banco { display: block; }
    #page-paneldoors .tor-biblio { border-right: 0; border-bottom: 1px solid var(--tor-borde); }
    #page-paneldoors .tor-lista { flex-direction: row; overflow-x: auto; padding: 0 10px 12px; gap: 8px; }
    #page-paneldoors .tor-ficha { min-width: 225px; max-width: 225px; padding: 12px; }
    #page-paneldoors .tor-biblio-pie { display: none; }
    #page-paneldoors .tor-resumen { grid-template-columns: 1fr; }
    #page-paneldoors .tor-herrajes { grid-template-columns: 1fr 1fr; }
    #page-paneldoors .tor-pie { flex-direction: column; align-items: flex-start; gap: 8px; }
    /* Arriba y a la medida de su contenido; si no cabe, hace scroll dentro.
       Estirado a todo el alto dejaba un hueco en blanco bajo el pie. */
    #page-paneldoors .tor-velo { padding: 8px; align-items: flex-start; }
    #page-paneldoors .tor-modal { max-height: 100%; }
    #page-paneldoors .tor-modal-cabeza,
    #page-paneldoors .tor-modal-cuerpo { padding: 18px; }
    #page-paneldoors .tor-modal-pie { padding: 14px 18px; }
    #page-paneldoors .tor-rejilla { grid-template-columns: 1fr 1fr; }
    #page-paneldoors .tor-resorte-cabeza,
    #page-paneldoors .tor-resorte-fila { grid-template-columns: 22px 1fr 1fr 1fr 74px 26px; gap: 4px; }
    #page-paneldoors .tor-resorte-fila input,
    #page-paneldoors .tor-resorte-fila select { padding: 8px 4px; font-size: 11px; }
    #page-paneldoors .tor-medida select { flex-basis: 98px; }
    #page-paneldoors .tor-producto-filtros { flex-direction: column; }
    #page-paneldoors .tor-producto-filtros select { flex-basis: auto; }
    #page-paneldoors .tor-tabla { min-width: 380px; }
}
@media (prefers-reduced-motion: reduce) {
    #page-paneldoors .tor-app * { transition: none; scroll-behavior: auto; }
}

/* ── INGENIERÍA DE RESORTES · 4.6.2 (OMN-224) ────────────────────────────────
   La maqueta de la calculadora, traída al lenguaje de la casa. Todo con
   prefijo `tor-ing-` y dentro de `#page-paneldoors`: la maqueta traía reglas
   sueltas de `:root`, `body`, `*`, `button`, `input`, `select`, `table`, `th`,
   `td`, `tr` y `:focus-visible` que le habrían pisado el estilo a OMNIA
   entera. Los tokens (--tor-acc, --tor-borde, …) los pone `.tor-app`, que es
   donde vive esta vista; el día/noche sale solo porque derivan de app.css.
   Sin sombras, sin degradados, sin `!important` y nada bajo 10 px. */
#page-paneldoors .tor-ing-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; }
#page-paneldoors .tor-ing-lema { font-size: var(--fs-sm, 11px); color: var(--tor-tx2); max-width: 660px; text-transform: none; }

#page-paneldoors .tor-ing-segmento { display: inline-flex; border: 1px solid var(--tor-borde); border-radius: var(--tor-rs); overflow: hidden; height: 34px; }
#page-paneldoors .tor-ing-segmento button { border: 0; background: var(--tor-fondo); padding: 0 12px; font-size: var(--fs-sm, 11px); font-weight: 500; color: var(--tor-tx2); }
#page-paneldoors .tor-ing-segmento button + button { border-left: 1px solid var(--tor-borde); }
#page-paneldoors .tor-ing-segmento button[aria-pressed="true"] { background: var(--tor-acc-suave); color: var(--tor-acc-tx); font-weight: 600; }

/* ── tarjetas y campos ───────────────────────────────────────────────────── */
#page-paneldoors .tor-ing-tarjeta { background: var(--tor-fondo); border: 1px solid var(--tor-borde); border-radius: var(--tor-r); }
#page-paneldoors .tor-ing-tarjeta-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--tor-borde); }
#page-paneldoors .tor-ing-tarjeta-cab h2 { font-size: 13px; font-weight: 600; text-transform: none; }
#page-paneldoors .tor-ing-tarjeta-cab span { font-size: var(--fs-sm, 11px); text-transform: none; }
#page-paneldoors .tor-ing-tarjeta-cuerpo { padding: 16px 18px; }

#page-paneldoors .tor-ing-rejilla { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
#page-paneldoors .tor-ing-rejilla.tor-ing-una { grid-template-columns: 1fr; }
#page-paneldoors .tor-ing-rejilla.tor-ing-dos-col { grid-template-columns: 1fr 1fr; }
#page-paneldoors .tor-ing-ancho2 { grid-column: span 2; }
#page-paneldoors .tor-ing-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* `display:flex` le gana al atributo `hidden`: sin esto, el campo de high lift
   se seguía viendo en standard lift aunque el guion lo ocultara. */
#page-paneldoors .tor-ing-campo[hidden] { display: none; }
#page-paneldoors .tor-ing-campo > span { font-size: var(--fs-xs, 10px); font-weight: 600; letter-spacing: 1px; color: var(--tor-tx3); text-transform: uppercase; }
#page-paneldoors .tor-ing-campo small { font-size: var(--fs-sm, 11px); color: var(--tor-tx3); text-transform: none; line-height: 1.5; }
#page-paneldoors .tor-ing-control {
    width: 100%; height: 34px; border: 1px solid var(--tor-borde); border-radius: var(--tor-rs);
    background: var(--tor-fondo); padding: 0 10px; font-size: 12px; text-overflow: ellipsis; text-transform: none;
}
/* Un select necesita hueco para su flecha: sin esto el texto se «muerde». */
#page-paneldoors select.tor-ing-control { padding-right: 26px; }
#page-paneldoors .tor-ing-control:hover { border-color: var(--tor-acc-borde); }
#page-paneldoors .tor-ing-control.tor-ing-invalido { border-color: var(--tor-rojo); }
#page-paneldoors .tor-ing-par { display: flex; gap: 6px; flex-wrap: wrap; }
#page-paneldoors .tor-ing-par .tor-ing-control:first-child { flex: 1 1 90px; min-width: 0; }
#page-paneldoors .tor-ing-par .tor-ing-control:last-child { width: 118px; flex-shrink: 0; }

#page-paneldoors .tor-ing-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#page-paneldoors .tor-ing-chip { border: 1px solid var(--tor-borde); border-radius: 999px; background: var(--tor-fondo); padding: 4px 11px; font-size: var(--fs-sm, 11px); font-family: var(--tor-mono); color: var(--tor-tx2); }
#page-paneldoors .tor-ing-chip[aria-pressed="true"] { background: var(--tor-acc-suave); border-color: var(--tor-acc-borde); color: var(--tor-acc-tx); }
#page-paneldoors .tor-ing-alinea { align-self: flex-start; margin-top: 2px; }

/* ── pestañas y columnas ─────────────────────────────────────────────────── */
#page-paneldoors .tor-ing-pestanas { margin: 20px 0 16px; gap: 20px; }
#page-paneldoors .tor-ing-dos { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
#page-paneldoors .tor-ing-dos > * { min-width: 0; }
#page-paneldoors .tor-ing-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }

/* ── plegables: ficha del bombo, reparto, herrajes ───────────────────────── */
#page-paneldoors .tor-ing-plegable { margin-top: 14px; }
#page-paneldoors .tor-ing-resumen {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    font-size: var(--fs-sm, 11px); color: var(--tor-tx2); padding: 7px 10px;
    background: var(--tor-hundido); border: 1px solid var(--tor-borde); border-radius: var(--tor-rs); text-transform: none;
}
#page-paneldoors .tor-ing-resumen:hover { color: var(--tor-tx); }
#page-paneldoors .tor-ing-resumen i { font-style: normal; font-size: var(--fs-xs, 10px); color: var(--tor-tx3); }
#page-paneldoors .tor-ing-resumen b { color: var(--tor-tx); font-family: var(--tor-mono); font-weight: 600; }
#page-paneldoors .tor-ing-plegado { margin-top: 8px; }
#page-paneldoors .tor-ing-ficha { font-size: 12px; color: var(--tor-tx2); padding: 12px 14px; background: var(--tor-hundido); border-radius: var(--tor-rs); text-transform: none; }
#page-paneldoors .tor-ing-ficha b { color: var(--tor-tx); font-weight: 600; font-family: var(--tor-mono); }
#page-paneldoors .tor-ing-ficha .tor-ing-envoltura { border: 0; background: transparent; margin: 0; }
#page-paneldoors .tor-ing-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 24px; }
#page-paneldoors .tor-ing-bloque { min-width: 0; }
#page-paneldoors .tor-ing-bloque h4 { margin: 0 0 6px; font-size: var(--fs-xs, 10px); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--tor-tx3); }
#page-paneldoors .tor-ing-bloque-ancho { grid-column: 1 / -1; }
#page-paneldoors .tor-ing-dato { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; border-bottom: 1px solid var(--tor-borde); }
#page-paneldoors .tor-ing-dato:last-child { border-bottom: 0; }
#page-paneldoors .tor-ing-dato > span { white-space: nowrap; }
#page-paneldoors .tor-ing-dato > b { text-align: right; overflow-wrap: anywhere; }
#page-paneldoors .tor-ing-eq { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--tor-borde); font-size: 12px; }

/* ── resultados ──────────────────────────────────────────────────────────── */
#page-paneldoors .tor-ing-heroe { padding: 18px; border: 1px solid var(--tor-acc-borde); background: var(--tor-acc-suave); border-radius: var(--tor-r); }
#page-paneldoors .tor-ing-heroe .tor-ceja { color: var(--tor-acc-tx); }
/* La cifra grande se encoge en pantallas angostas en vez de desbordar. */
#page-paneldoors .tor-ing-cifra { font-size: clamp(20px, 5.6vw, 30px); font-weight: 600; letter-spacing: -.6px; line-height: 1.25; margin-top: 4px; font-family: var(--tor-mono); overflow-wrap: anywhere; color: var(--tor-tx); }
#page-paneldoors .tor-ing-cifra small { font-size: 14px; color: var(--tor-tx2); font-weight: 500; margin-left: 6px; }
#page-paneldoors .tor-ing-cifra-chica { font-size: clamp(18px, 4vw, 22px); }
#page-paneldoors .tor-ing-detalle { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; font-size: var(--fs-sm, 11px); color: var(--tor-tx2); }
#page-paneldoors .tor-ing-detalle b { color: var(--tor-tx); font-family: var(--tor-mono); font-weight: 500; }
#page-paneldoors .tor-ing-heroe-pie { margin-top: 12px; }
#page-paneldoors .tor-ing-separa { margin-top: 14px; }
#page-paneldoors .tor-ing-nota { font-size: var(--fs-sm, 11px); line-height: 1.6; margin-top: 8px; text-transform: none; }
#page-paneldoors .tor-ing-recuento { font-size: var(--fs-sm, 11px); line-height: 1.6; margin-top: 14px; text-transform: none; }
#page-paneldoors .tor-ing-linea { font-size: var(--fs-sm, 11px); margin-top: 6px; text-transform: none; }
#page-paneldoors .tor-ing-buscador { max-width: 320px; }

#page-paneldoors .tor-ing-avisos { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
#page-paneldoors .tor-ing-aviso {
    display: flex; gap: 9px; align-items: flex-start; padding: 9px 12px; border-radius: var(--tor-rs);
    font-size: var(--fs-sm, 11px); line-height: 1.6; border: 1px solid var(--tor-borde); background: var(--tor-fondo); text-transform: none;
}
#page-paneldoors .tor-ing-aviso i { font-style: normal; font-weight: 700; width: 16px; flex-shrink: 0; text-align: center; }
#page-paneldoors .tor-ing-aviso.tor-ing-rojo { border-color: color-mix(in srgb, var(--tor-rojo) 40%, var(--tor-borde)); background: color-mix(in srgb, var(--tor-rojo) 7%, var(--tor-fondo)); }
#page-paneldoors .tor-ing-aviso.tor-ing-rojo i { color: var(--tor-rojo); }
#page-paneldoors .tor-ing-aviso.tor-ing-amarillo { border-color: color-mix(in srgb, var(--yellow) 45%, var(--tor-borde)); background: color-mix(in srgb, var(--yellow) 8%, var(--tor-fondo)); }
#page-paneldoors .tor-ing-aviso.tor-ing-amarillo i { color: var(--yellow); }
#page-paneldoors .tor-ing-aviso.tor-ing-info i { color: var(--tor-acc); }

/* ── tablas ──────────────────────────────────────────────────────────────── */
#page-paneldoors .tor-ing-envoltura { overflow-x: auto; border: 1px solid var(--tor-borde); border-radius: var(--tor-r); background: var(--tor-fondo); margin-top: 14px; }
/* Sin `sticky` la cabecera se pierde al bajar por los 176 bombos. */
#page-paneldoors .tor-ing-envoltura-alta { max-height: 620px; overflow-y: auto; }
#page-paneldoors .tor-ing-datos { width: 100%; border-collapse: collapse; font-size: 12px; }
#page-paneldoors .tor-ing-datos th {
    text-align: left; font-size: var(--fs-xs, 10px); font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    color: var(--tor-tx3); padding: 9px 12px; border-bottom: 1px solid var(--tor-borde); white-space: nowrap;
    background: var(--tor-fondo); position: sticky; top: 0;
}
#page-paneldoors .tor-ing-datos td { padding: 8px 12px; border-bottom: 1px solid var(--tor-borde); white-space: nowrap; color: var(--tor-tx2); }
#page-paneldoors .tor-ing-datos tr:last-child td { border-bottom: 0; }
#page-paneldoors .tor-ing-datos th.tor-ing-num,
#page-paneldoors .tor-ing-datos td.tor-ing-num { text-align: right; font-family: var(--tor-mono); }
#page-paneldoors .tor-ing-datos tr.tor-ing-fila-rec td { background: var(--tor-acc-suave); color: var(--tor-tx); }
#page-paneldoors .tor-ing-datos tr.tor-ing-fila-rec td:first-child { border-left: 2px solid var(--tor-acc); }
#page-paneldoors .tor-ing-datos tr.tor-ing-fila-apagada td { color: var(--tor-tx3); }
#page-paneldoors .tor-ing-datos-chica { font-size: var(--fs-sm, 11px); }
#page-paneldoors .tor-ing-datos-chica th { padding: 4px 6px; letter-spacing: .5px; white-space: normal; vertical-align: bottom; background: var(--tor-hundido); }
#page-paneldoors .tor-ing-datos-chica td { padding: 4px 6px; font-family: var(--tor-mono); }

#page-paneldoors .tor-ing-etiqueta {
    display: inline-block; font-size: var(--fs-xs, 10px); font-weight: 600; letter-spacing: .5px;
    padding: 1px 6px; border-radius: 4px; border: 1px solid var(--tor-borde); color: var(--tor-tx2); text-transform: none;
}
#page-paneldoors .tor-ing-etiqueta.tor-ing-acc { border-color: var(--tor-acc-borde); color: var(--tor-acc-tx); background: var(--tor-acc-suave); }
#page-paneldoors .tor-ing-etiqueta.tor-ing-roja { border-color: color-mix(in srgb, var(--tor-rojo) 40%, var(--tor-borde)); color: var(--tor-rojo); }
#page-paneldoors .tor-ing-etiqueta.tor-ing-amarilla { border-color: color-mix(in srgb, var(--yellow) 45%, var(--tor-borde)); color: var(--yellow); }

/* ── editor de resortes, paneles y herrajes ──────────────────────────────── */
/* El calibre es el campo más largo (.2343) y el que se lee primero: va más
   ancho que el resto, y la cantidad se conforma con dos dígitos. */
#page-paneldoors .tor-ing-renglones { margin-top: 8px; }
#page-paneldoors .tor-ing-renglon { display: grid; grid-template-columns: 1.3fr 1.1fr 1.3fr 56px 30px; gap: 6px; align-items: end; margin-bottom: 8px; }
#page-paneldoors .tor-ing-renglon .tor-ing-control { padding: 0 8px; }
#page-paneldoors .tor-ing-renglon select.tor-ing-control { padding-right: 22px; }
#page-paneldoors .tor-ing-quitar { border: 1px solid transparent; background: transparent; color: var(--tor-tx3); height: 34px; border-radius: var(--tor-rs); }
#page-paneldoors .tor-ing-quitar:hover { color: var(--tor-rojo); background: var(--tor-hundido); }
#page-paneldoors .tor-ing-paneles { margin-top: 2px; }
#page-paneldoors .tor-ing-panel-fila { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#page-paneldoors .tor-ing-panel-fila .tor-ing-control:first-child { width: 70px; }
#page-paneldoors .tor-ing-panel-fila select.tor-ing-control { width: 104px; }
#page-paneldoors .tor-ing-panel-fila .tor-ing-quitar { border-color: var(--tor-borde); background: var(--tor-fondo); width: 28px; height: 28px; }
#page-paneldoors .tor-ing-panel-fila .tor-ing-quitar:hover { border-color: var(--tor-rojo); }
#page-paneldoors .tor-ing-chico { height: 26px; width: 84px; padding: 0 6px; font-size: var(--fs-sm, 11px); text-align: right; }
#page-paneldoors .tor-ing-tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
#page-paneldoors .tor-ing-cifra-caja { border: 1px solid var(--tor-borde); border-radius: var(--tor-r); padding: 12px 14px; background: var(--tor-fondo); }
#page-paneldoors .tor-ing-cifra-caja b { display: block; font-family: var(--tor-mono); font-size: 20px; font-weight: 600; margin-top: 4px; color: var(--tor-tx); }
#page-paneldoors .tor-ing-cifra-caja small { display: block; margin-top: 2px; color: var(--tor-tx3); font-size: var(--fs-sm, 11px); }

#page-paneldoors .tor-ing-pie { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--tor-borde); font-size: var(--fs-xs, 10px); color: var(--tor-tx3); line-height: 1.6; text-transform: none; }

@media (min-width: 1400px) {
    #page-paneldoors .tor-ing-bloque-ancho { grid-column: auto; }
}
@media (max-width: 900px) {
    #page-paneldoors .tor-ing-dos { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    #page-paneldoors .tor-ing-tarjeta-cuerpo { padding: 14px; }
    #page-paneldoors .tor-ing-rejilla.tor-ing-dos-col { grid-template-columns: 1fr; }
    #page-paneldoors .tor-ing-ancho2 { grid-column: auto; }
    #page-paneldoors .tor-ing-renglon { grid-template-columns: 1.2fr 1fr 1.2fr 48px 28px; gap: 4px; }
    #page-paneldoors .tor-ing-renglon .tor-ing-control { padding: 0 5px; }
    #page-paneldoors .tor-ing-datos th,
    #page-paneldoors .tor-ing-datos td { padding: 7px 8px; }
}
/* En teléfono el select de unidad dejaba el campo de medida en cero de ancho:
   debajo de 460 px cada uno ocupa su propio renglón. */
@media (max-width: 460px) {
    #page-paneldoors .tor-ing-par { flex-direction: column; }
    /* En columna, un flex-basis se lee como ALTO: los campos salían de 90 px. */
    #page-paneldoors .tor-ing-par .tor-ing-control:first-child { flex: 0 0 auto; }
    #page-paneldoors .tor-ing-par .tor-ing-control:last-child { width: 100%; }
}

/* ── DATA BASES · el catálogo del fabricante, visible y ampliable (4.8.0) ────
   Sólo la ve el superuser. Reusa los tokens y las piezas de la biblioteca:
   la misma caja, el mismo buscador y los mismos botones, para que no parezca
   otro programa. Lo único propio es cómo se marca de dónde viene cada
   renglón —del fabricante, de la casa, oculto— porque es la pregunta que se
   hace quien abre esta pantalla. */
#page-paneldoors .tor-bd {
    border: 1px solid var(--tor-borde); border-radius: var(--tor-r);
    background: var(--tor-fondo); padding: 16px; margin-top: 12px;
}
#page-paneldoors .tor-bd-cabeza {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
    align-items: flex-start; margin-bottom: 12px;
}
#page-paneldoors .tor-bd-cabeza h2 { margin: 0 0 4px; font-size: var(--fs-md, 13px); }
#page-paneldoors .tor-bd-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
#page-paneldoors .tor-bd-cuenta {
    font-size: var(--fs-xs, 10px); color: var(--tor-tx3); margin: 0 0 10px;
    font-family: var(--tor-mono);
}
#page-paneldoors .tor-bd-alta {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 10px; border: 1px dashed var(--tor-borde); border-radius: var(--tor-rs);
    margin-bottom: 12px; background: var(--tor-base);
}
#page-paneldoors .tor-bd-alta input {
    flex: 1 1 240px; min-width: 0; border: 1px solid var(--tor-borde);
    border-radius: var(--tor-rs); background: var(--tor-fondo);
    padding: 8px 9px; font-size: 12px; font-family: var(--tor-mono);
}
#page-paneldoors .tor-bd-alta small { flex: 1 0 100%; font-size: var(--fs-xs, 10px); }
#page-paneldoors .tor-bd-lista {
    max-height: 420px; overflow-y: auto; border: 1px solid var(--tor-borde);
    border-radius: var(--tor-rs);
}
#page-paneldoors .tor-bd-fila {
    display: flex; gap: 10px; justify-content: space-between; align-items: center;
    padding: 8px 10px; border-bottom: 1px solid var(--tor-borde);
    font-size: var(--fs-sm, 11px);
}
#page-paneldoors .tor-bd-fila:last-child { border-bottom: 0; }
#page-paneldoors .tor-bd-fila strong { font-family: var(--tor-mono); font-weight: 600; color: var(--tor-tx); }
/* Un renglón oculto se sigue leyendo: oculto es «no lo manejamos», no
   «no existe». Atenuarlo del todo lo volvería imposible de encontrar
   para volver a mostrarlo. */
#page-paneldoors .tor-bd-oculta strong { text-decoration: line-through; color: var(--tor-tx3); }
#page-paneldoors .tor-bd-acciones { display: flex; gap: 6px; flex: 0 0 auto; }
#page-paneldoors .tor-etq {
    display: inline-block; border: 1px solid var(--tor-borde); border-radius: 999px;
    padding: 1px 7px; font-size: var(--fs-xs, 10px); color: var(--tor-tx3);
    vertical-align: middle;
}
#page-paneldoors .tor-etq-casa {
    border-color: var(--tor-acc-borde); color: var(--tor-acc-tx); background: var(--tor-acc-suave);
}
#page-paneldoors .tor-etq-oculto { border-color: var(--tor-rojo); color: var(--tor-rojo); }
#page-paneldoors .tor-btn-peligro { border-color: var(--tor-rojo); color: var(--tor-rojo); }
/* Los mensajes de la banda de errores del editor: uno por renglón, sin
   viñeta de navegador, para que se lean como una lista de pendientes. */
#page-paneldoors .tor-banda-lista { margin: 4px 0 0; padding-left: 16px; }
#page-paneldoors .tor-banda-lista li { margin-top: 2px; }
@media (max-width: 720px) {
    #page-paneldoors .tor-bd { padding: 12px; }
    #page-paneldoors .tor-bd-fila { flex-wrap: wrap; }
}

/* ── EL ENROLLADO SE VE, NO SE LEE ───────────────────────────────────────────
   Derecho es rojo e izquierdo es negro: así se pide la pieza al proveedor, y
   por eso el color va donde se consulta la ficha y no sólo donde se captura.
   En el FORMULARIO va un punto al lado del desplegable (un `<option>` no se
   puede estilar de forma fiable). En la FICHA va un chip, que es lo que se lee
   de un vistazo. «Izquierdo o derecho» no lleva color: no hay una pieza de ese
   color que pedir. */
#page-paneldoors .tor-enr-celda { display: flex; align-items: center; gap: 6px; min-width: 0; }
#page-paneldoors .tor-enr-celda select { min-width: 0; }
#page-paneldoors .tor-enr {
    display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
    border: 1px solid var(--tor-borde);
}
#page-paneldoors .tor-enr-rojo { background: var(--tor-rojo); border-color: var(--tor-rojo); }
#page-paneldoors .tor-enr-negro { background: var(--tor-tx); border-color: var(--tor-tx); }
#page-paneldoors .tor-chip {
    display: inline-block; border-radius: 999px; padding: 2px 9px;
    font-size: var(--fs-xs, 10px); font-weight: 600; line-height: 1.5;
    border: 1px solid transparent; white-space: nowrap;
}
/* El negro se invierte de noche —negro sobre negro no se ve— y el rojo NO:
   rojo con texto blanco en los dos modos, porque el rojo ES el color de la
   pieza y cambiarlo de noche sería nombrar otra cosa. */
#page-paneldoors .tor-chip-negro { background: var(--tor-tx); color: var(--tor-fondo); }
#page-paneldoors .tor-chip-rojo { background: var(--tor-rojo); color: var(--white, #ffffff); }
#page-paneldoors .tor-chip-neutro { border-color: var(--tor-borde); color: var(--tor-tx2); }

/* ── EL LOGOTIPO DE LA MARCA EN LA TARJETA ──────────────────────────────────
   El nombre vive SIEMPRE en el DOM (lo lee el buscador y un lector de
   pantalla) y se esconde mientras el logo se vea. Si la imagen no llega, el
   oyente de `error` marca la caja y el nombre vuelve a la vista: una tarjeta
   sin marca no dice de quién es la puerta. */
#page-paneldoors .tor-marca-logo { display: inline-flex; align-items: center; min-width: 0; }
#page-paneldoors .tor-marca-logo img {
    max-height: 16px; max-width: 108px; width: auto; object-fit: contain; display: block;
}
#page-paneldoors .tor-marca-texto { display: none; }
#page-paneldoors .tor-marca-sin-logo img { display: none; }
#page-paneldoors .tor-marca-sin-logo .tor-marca-texto { display: inline; }

/* ── EL COLOR DEL ALAMBRE (norma DASMA TDS-171) ─────────────────────────────
   El punto que identifica el calibre de un resorte. Los valores van como
   FALLBACK de una variable para que se puedan afinar desde fuera sin tocar
   este archivo —y porque en esta casa no se escribe un hex a pelo—.
   El nombre del color va además EN LETRAS en la etiqueta del desplegable:
   quien no distinga dos azules parecidos lo lee, y quien pida la pieza por
   teléfono necesita decirlo, no señalarlo. */
#page-paneldoors .tor-cal {
    display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
    margin-right: 6px; border: 1px solid var(--tor-borde); vertical-align: baseline;
}
#page-paneldoors .tor-cal-azul { background: var(--tor-cal-azul, #1f4fa0); }
#page-paneldoors .tor-cal-azul-claro { background: var(--tor-cal-azul-claro, #7ec8e3); }
#page-paneldoors .tor-cal-amarillo { background: var(--tor-cal-amarillo, #f2c200); }
#page-paneldoors .tor-cal-rojo { background: var(--tor-cal-rojo, #c8102e); }
#page-paneldoors .tor-cal-verde { background: var(--tor-cal-verde, #1e7b3c); }
#page-paneldoors .tor-cal-naranja { background: var(--tor-cal-naranja, #e8720c); }
#page-paneldoors .tor-cal-cafe { background: var(--tor-cal-cafe, #6b4423); }
#page-paneldoors .tor-cal-dorado { background: var(--tor-cal-dorado, #b8901f); }
#page-paneldoors .tor-cal-morado { background: var(--tor-cal-morado, #6b3fa0); }
#page-paneldoors .tor-cal-beige { background: var(--tor-cal-beige, #d2b48c); }
/* El blanco necesita su borde: sobre el fondo claro desaparecería. */
#page-paneldoors .tor-cal-blanco { background: var(--tor-cal-blanco, #f5f5f0); border-color: var(--tor-tx3); }

/* ── CALCULAR UN CONJUNTO EQUIVALENTE ───────────────────────────────────────
   Dos botones en la cabecera de Equivalencias: documentar una alternativa que
   alguien validó, y calcular una. Lo que no cabe o no llega a los ciclos se
   enseña igual, atenuado y dicho: esconderlo haría creer que no existe, y a
   veces es lo único que hay a mano. */
#page-paneldoors .tor-intro-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
#page-paneldoors .tor-fila-floja td { opacity: 0.62; }
#page-paneldoors .tor-modal-calculo { max-width: 860px; }

/* ═══════════════════════════════════════════════════════════════════════════
   4.9.0 · LA PUERTA POR DENTRO: paneles, peso y la base de Pesos
   ---------------------------------------------------------------------------
   Nada de nombres nuevos genéricos: en 4.8.1 la clase `tor-datos` ya existía
   en otra pantalla y DATA BASES salió pintada a dos columnas. Todo lo de aquí
   lleva prefijo propio (`tor-panel-`, `tor-estimar-`, `tor-bd-campo`) y se
   comprobó contra el resto de hojas antes de escribirlo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Los renglones de panel en el editor ─────────────────────────────────── */
#page-paneldoors .tor-paneles { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
#page-paneldoors .tor-panel-fila {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 10px; border: 1px solid var(--tor-borde);
    border-radius: var(--tor-rs); background: var(--tor-base);
}
/* `input.tor-panel-cant` Y NO `.tor-panel-cant` A SECAS: la regla común de los
   controles del editor es `#page-paneldoors .tor-panel-fila input`, que suma
   (1 id, 1 clase, 1 etiqueta) y le gana a (1 id, 1 clase). Su `width: 100%`
   estiraba la cantidad a todo lo ancho de la fila. En jsdom no se ve —no
   aplica hojas—; en el navegador salta a la vista. */
#page-paneldoors input.tor-panel-cant { width: 74px; flex: 0 0 auto; text-align: center; }
/* La altura NO se estira a todo lo ancho: «5 de 24″» es una frase corta, y un
   desplegable de 400 px para elegir entre tres alturas pesa más de lo que
   dice. Se le deja lo justo y el hueco se lo queda el espacio. */
#page-paneldoors .tor-panel-fila select { flex: 0 1 190px; min-width: 0; }
#page-paneldoors .tor-panel-fila .tor-btn-ico { margin-left: auto; }
#page-paneldoors .tor-panel-x { font-size: var(--fs-xs, 10px); color: var(--tor-tx3); }
#page-paneldoors .tor-panel-err { flex: 1 0 100%; }

/* El cuadre: en verde cuando suma justo, y la banda roja de siempre cuando no.
   El verde no es decoración — es la única confirmación de que la cuenta salió. */
#page-paneldoors .tor-cuadre-ok {
    display: flex; align-items: center; gap: 6px; color: var(--green);
}
/* Se ve igual que `tor-banda-error` pero es OTRA cosa: aquella dice «no se
   guardó nada» y ésta sólo avisa de que la cuenta no cuadra —una puerta
   medida en campo puede no cuadrar y se guarda igual—. Misma pinta, distinto
   significado, y por eso distinta clase. */
#page-paneldoors .tor-cuadre-mal {
    border-color: color-mix(in srgb, var(--tor-rojo) 40%, var(--tor-borde));
    color: var(--tor-rojo);
    background: color-mix(in srgb, var(--tor-rojo) 6%, var(--tor-fondo));
}
#page-paneldoors .tor-cuadre-mal strong { color: var(--tor-rojo); }
#page-paneldoors .tor-cuadre-ok .tor-ico { width: 13px; height: 13px; }

/* ── Los paneles ya guardados, en la ficha ───────────────────────────────── */
#page-paneldoors .tor-paneles-lee { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
#page-paneldoors .tor-panel-chip {
    display: flex; align-items: baseline; gap: 6px;
    padding: 8px 12px; border: 1px solid var(--tor-borde);
    border-radius: var(--tor-rs); background: var(--tor-base);
}
#page-paneldoors .tor-panel-chip b { font-size: 16px; font-family: var(--tor-mono); }
#page-paneldoors .tor-panel-chip span { font-size: var(--fs-xs, 10px); color: var(--tor-tx2); }

/* ── La fórmula del chicote ──────────────────────────────────────────────── */
#page-paneldoors .tor-formula-txt { font-size: 14px; color: var(--tor-tx); }

/* ── Avisos del cálculo del peso ─────────────────────────────────────────
   Lo demás de este bloque se fue con `bloqueEstimarPeso` en 4.10.0: el peso ya
   no se estima con un botón, se calcula solo. */
#page-paneldoors .tor-estimar-avisos {
    margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px;
    font-size: var(--fs-xs, 10px); color: var(--tor-tx2);
}
#page-paneldoors .tor-separa { margin-top: 12px; }

/* ── El alta de la tabla Pesos ───────────────────────────────────────────── */
#page-paneldoors .tor-bd-alta-peso { display: block; }
#page-paneldoors .tor-bd-campos {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px;
}
#page-paneldoors .tor-bd-campo {
    display: flex; flex-direction: column; gap: 5px;
    font-size: var(--fs-xs, 10px); color: var(--tor-tx2); min-width: 0;
}
#page-paneldoors .tor-bd-campo-ancho { grid-column: 1 / -1; }
#page-paneldoors .tor-bd-campo input,
#page-paneldoors .tor-bd-campo select {
    width: 100%; min-width: 0; border: 1px solid var(--tor-borde);
    border-radius: var(--tor-rs); background: var(--tor-fondo);
    padding: 8px 9px; font-size: 12px; font-family: var(--tor-mono); color: var(--tor-tx);
}
#page-paneldoors .tor-bd-par { display: flex; gap: 6px; }
#page-paneldoors .tor-bd-par input { flex: 1 1 auto; }
#page-paneldoors .tor-bd-par select { flex: 0 0 96px; }
#page-paneldoors .tor-bd-alta-pie {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
#page-paneldoors .tor-bd-alta-pie small { flex: 1 1 260px; font-size: var(--fs-xs, 10px); }

@media (max-width: 1100px) {
    #page-paneldoors .tor-bd-campos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    #page-paneldoors .tor-bd-campos { grid-template-columns: 1fr; }
}

/* La propuesta de paneles: vive en el mismo hueco que el cuadre, porque los
   dos dependen del alto y ése se repinta mientras se teclea. */
#page-paneldoors .tor-propuesta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; border: 1px dashed var(--tor-borde);
    border-radius: var(--tor-rs); background: var(--tor-base);
}
#page-paneldoors .tor-propuesta > div { flex: 1 1 260px; }
#page-paneldoors .tor-propuesta strong { font-size: 12px; }
#page-paneldoors .tor-propuesta small { font-size: var(--fs-xs, 10px); color: var(--tor-tx3); }

/* ═══════════════════════════════════════════════════════════════════════════
   4.9.0 · LA BIBLIOTECA Y LA FICHA, A PETICIÓN DE GERA (20-sep-2026)
   ---------------------------------------------------------------------------
   «El título que resalte más, el resto acomódalo mejor, ocupas mucho espacio
   vertical». Y la aplicación y el tipo de puerta, en chips de color que se
   leen de un vistazo.

   OJO CON EL NOMBRE: `tor-chip` YA EXISTE (el enrollado de un resorte, con su
   punto rojo o negro). Estos son otros y se llaman `tor-dchip` —chip de
   puerta— precisamente para no heredar aquéllos. Es la lección de 4.8.1, donde
   reusar una clase que ya existía dejó DATA BASES pintada a dos columnas.
   ═══════════════════════════════════════════════════════════════════════════ */
#page-paneldoors .tor-dchip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border: 1px solid transparent; border-radius: 999px;
    font-size: var(--fs-xs, 10px); font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
/* El color dice QUÉ es, no adorna: por eso cada aplicación tiene el suyo y se
   distinguen sin leer. Todos con fondo tenue y texto saturado, que es el
   lenguaje de la casa — nada de rellenos sólidos gritando en una lista. */
#page-paneldoors .tor-dchip-acc {
    background: color-mix(in srgb, var(--tor-acc) 16%, transparent);
    border-color: color-mix(in srgb, var(--tor-acc) 40%, transparent);
    color: var(--tor-acc-tx);
}
#page-paneldoors .tor-dchip-turq {
    background: color-mix(in srgb, var(--turq, #2dd4bf) 14%, transparent);
    border-color: color-mix(in srgb, var(--turq, #2dd4bf) 38%, transparent);
    color: color-mix(in srgb, var(--turq, #2dd4bf) 78%, var(--tor-tx));
}
#page-paneldoors .tor-dchip-ambar {
    background: color-mix(in srgb, var(--yellow, #f59e0b) 16%, transparent);
    border-color: color-mix(in srgb, var(--yellow, #f59e0b) 42%, transparent);
    color: color-mix(in srgb, var(--yellow, #f59e0b) 72%, var(--tor-tx));
}
#page-paneldoors .tor-dchip-verde {
    background: color-mix(in srgb, var(--green, #22c55e) 14%, transparent);
    border-color: color-mix(in srgb, var(--green, #22c55e) 38%, transparent);
    color: color-mix(in srgb, var(--green, #22c55e) 74%, var(--tor-tx));
}
#page-paneldoors .tor-dchip-mudo { border-color: var(--tor-borde); color: var(--tor-tx3); }

/* ── La tarjeta de la biblioteca ─────────────────────────────────────────── */
#page-paneldoors .tor-ficha-titulo {
    display: flex; align-items: baseline; gap: 10px; justify-content: space-between;
}
#page-paneldoors .tor-ficha-titulo h3 {
    font-size: 15px; font-weight: 700; line-height: 1.25; margin: 0;
    color: var(--tor-tx); min-width: 0; overflow-wrap: anywhere;
}
#page-paneldoors .tor-ficha-medida {
    flex: 0 0 auto; font-size: var(--fs-xs, 10px); color: var(--tor-tx2);
}
#page-paneldoors .tor-ficha-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── La medida en milímetros, DEBAJO de la grande ────────────────────────── */
#page-paneldoors .tor-medida-mm {
    display: block; margin-top: 2px;
    font-size: var(--fs-xs, 10px); color: var(--tor-tx3); font-family: var(--tor-mono);
}

/* ── Las fotos, como chips ───────────────────────────────────────────────── */
#page-paneldoors .tor-fotos-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#page-paneldoors .tor-foto-chip {
    position: relative; display: inline-flex; align-items: center; gap: 7px; max-width: 280px;
    padding: 7px 12px; border: 1px solid color-mix(in srgb, var(--tor-acc) 34%, var(--tor-borde));
    border-radius: 999px; background: color-mix(in srgb, var(--tor-acc) 8%, var(--tor-fondo));
    color: var(--tor-acc-tx); font-size: 12px; text-decoration: none;
}
#page-paneldoors .tor-foto-chip:hover {
    background: color-mix(in srgb, var(--tor-acc) 16%, var(--tor-fondo));
    border-color: color-mix(in srgb, var(--tor-acc) 55%, var(--tor-borde));
}
#page-paneldoors .tor-foto-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page-paneldoors .tor-foto-chip .tor-ico { flex: 0 0 auto; width: 13px; height: 13px; }
/* EL TOOLTIP, con CSS puro sobre `data-tip`: sin oyentes que apagar y sin la
   espera de un segundo del `title` del navegador. En el morado del módulo,
   como pidió Gera. `white-space: pre-line` deja que la descripción respire. */
#page-paneldoors .tor-foto-chip::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 5;
    width: max-content; max-width: 320px; padding: 8px 11px;
    border: 1px solid color-mix(in srgb, var(--tor-acc) 55%, var(--tor-borde));
    border-radius: var(--tor-rs);
    background: color-mix(in srgb, var(--tor-acc) 22%, var(--tor-base));
    color: var(--tor-tx); font-size: var(--fs-xs, 10px); line-height: 1.45;
    white-space: pre-line; text-align: left;
    opacity: 0; visibility: hidden; transition: opacity .12s ease;
    pointer-events: none;
}
#page-paneldoors .tor-foto-chip:hover::after,
#page-paneldoors .tor-foto-chip:focus-visible::after { opacity: 1; visibility: visible; }

/* ── Las fotos en el editor: un renglón por foto, con su título ──────────── */
#page-paneldoors .tor-fotos-ed { display: flex; flex-direction: column; gap: 8px; }
#page-paneldoors .tor-foto-ed {
    display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 1.2fr) minmax(0, 1.6fr) auto;
    gap: 8px; align-items: center;
    padding: 8px 10px; border: 1px solid var(--tor-borde);
    border-radius: var(--tor-rs); background: var(--tor-base);
}
#page-paneldoors .tor-foto-ed-link {
    display: inline-flex; align-items: center; gap: 6px; min-width: 0;
    font-size: var(--fs-xs, 10px); color: var(--tor-acc-tx); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#page-paneldoors .tor-foto-ed-link:hover { text-decoration: underline; }
#page-paneldoors .tor-foto-ed input {
    min-width: 0; border: 1px solid var(--tor-borde); border-radius: var(--tor-rs);
    background: var(--tor-fondo); padding: 7px 9px; font-size: 12px; color: var(--tor-tx);
}
@media (max-width: 900px) {
    #page-paneldoors .tor-foto-ed { grid-template-columns: 1fr auto; }
    #page-paneldoors .tor-foto-ed-link { grid-column: 1 / -1; }
}

/* ==========================================================================
   4.10.0 · la casilla que abre una cantidad, el peso de sólo lectura y la
   pestaña de Pesos de la ficha.
   ========================================================================== */

/* LA CASILLA. No es un control suelto: es un campo cuyo número sólo aparece
   cuando se marca, así que hereda el hueco de `.tor-campo` y su rótulo lo hace
   la propia etiqueta de la casilla. */
#page-paneldoors .tor-casilla-campo { display: flex; flex-direction: column; gap: 6px; }
#page-paneldoors .tor-casilla {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600; color: var(--tor-tx2);
    cursor: pointer; user-select: none; min-height: 20px;
}
#page-paneldoors .tor-casilla input[type="checkbox"] {
    width: 15px; height: 15px; margin: 0; flex: none;
    accent-color: var(--tor-acc); cursor: pointer;
}
#page-paneldoors .tor-casilla-campo input[type="text"] { width: 100%; }

/* EL PESO, DE SÓLO LECTURA. Gris y sin borde de campo editable: tiene que
   verse a la primera que ahí no se teclea. `readonly` y no `disabled`, para
   que se pueda seleccionar y copiar. */
#page-paneldoors .tor-campo-rotulo {
    font-size: 12px; font-weight: 600; color: var(--tor-tx2);
}
#page-paneldoors input.tor-ro {
    background: var(--tor-hundido);
    color: var(--tor-tx2);
    border-color: transparent;
    cursor: default;
}
#page-paneldoors input.tor-ro:focus { outline: none; }
#page-paneldoors .tor-hueco-peso { display: contents; }

/* LA PESTAÑA DE PESOS. El estimado arriba, en su caja, separado de lo pesado:
   son dos cosas distintas y no pueden leerse como una lista de números
   equivalentes. */
#page-paneldoors .tor-pesos-ficha { display: flex; flex-direction: column; gap: 18px; }
#page-paneldoors .tor-peso-est {
    border: 1px solid var(--tor-acc-borde);
    background: var(--tor-acc-suave);
    border-radius: 10px; padding: 14px 16px;
}
#page-paneldoors .tor-peso-est-cabeza {
    display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
#page-paneldoors .tor-peso-est-cabeza h3 { margin: 0; font-size: 13px; }
#page-paneldoors .tor-peso-est-num { font-size: 26px; line-height: 1.1; font-family: var(--tor-mono); }
#page-paneldoors .tor-peso-est-num b { font-size: 30px; }
#page-paneldoors .tor-peso-alta {
    border: 1px solid var(--tor-borde); border-radius: 10px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
    background: var(--tor-fondo);
}
#page-paneldoors .tor-peso-alta .tor-btn { align-self: flex-start; }
#page-paneldoors .tor-tabla-fin { text-align: right; width: 1%; white-space: nowrap; }

/* La tabla de pesos de una ficha tiene una columna de TEXTO (la nota) y la
   regla general de `.tor-tabla` alinea a la derecha y pone monoespaciada toda
   celda intermedia —pensada para tablas de números—. Aquí se devuelve la nota
   a la izquierda y se impide que el peso se parta en dos renglones. Se ve sólo
   con las hojas puestas: en jsdom no hay estilos ni layout. */
#page-paneldoors .tor-tabla td.tor-peso-num { white-space: nowrap; }
#page-paneldoors .tor-tabla td:not(:first-child):not(:last-child).tor-peso-nota,
#page-paneldoors .tor-tabla th:not(:first-child):not(:last-child).tor-peso-nota { text-align: left; font-family: inherit; }

/* El logo en la VISTA de la ficha (4.10.0). Sin esto heredaba el `max-height`
   de 16 px de la tarjeta, pensado para una lista apretada, y en la cabecera se
   veía diminuto al lado de un título de 20 px. Se ve abriendo la pantalla: en
   jsdom no hay estilos que heredar. */
#page-paneldoors .tor-marca-logo-det img { max-height: 26px; max-width: 150px; }

/* ═══════════════════════════════════════════════════════════════════════════
   DOOR CONFIGURATOR (4.11.0, OMN-236)
   Sólo lo que NO existía. La casilla, el campo, la medida, la banda y el marco
   del dibujo son los de siempre: una segunda versión de cada uno sería la
   trampa de «dos mecanismos para lo mismo» aplicada a los estilos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Las tres bandas que faltaban. Sólo existía la de error, y pintar en rojo un
   aviso de «se está extrapolando» lo convierte en un fallo que no es. */
#page-paneldoors .tor-banda-aviso { border-color: color-mix(in srgb, var(--amber, #d98324) 40%, var(--tor-borde)); background: color-mix(in srgb, var(--amber, #d98324) 6%, var(--tor-fondo)); }
#page-paneldoors .tor-banda-info { border-color: var(--tor-acc-borde); background: var(--tor-acc-suave); }
#page-paneldoors .tor-banda-ok { border-color: color-mix(in srgb, var(--green, #2f9e5e) 40%, var(--tor-borde)); background: color-mix(in srgb, var(--green, #2f9e5e) 6%, var(--tor-fondo)); }
#page-paneldoors .tor-ok { color: var(--green, #2f9e5e); }

#page-paneldoors .tor-subnav { display: flex; gap: 14px; align-items: center; border-bottom: 1px solid var(--tor-borde); margin-bottom: 16px; }
#page-paneldoors .tor-subnav-sel { height: 34px; font-size: var(--fs-sm, 11px); font-weight: 600; color: var(--tor-tx2); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; padding: 0; }
#page-paneldoors .tor-subnav-sel.tor-activa { color: var(--tor-tx); border-bottom-color: var(--tor-acc); }
#page-paneldoors .tor-subnav-sel b { background: var(--tor-hundido); color: var(--tor-tx2); border-radius: 4px; font-size: var(--fs-xs, 10px); padding: 2px 6px; font-weight: 500; }

/* Formulario a la izquierda, resultado a la derecha. Por debajo de 1000 px se
   apilan: el resultado es largo y en dos columnas estrechas no se lee. */
#page-paneldoors .tor-cfg-rejilla { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 20px; align-items: start; }
#page-paneldoors .tor-cfg-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#page-paneldoors .tor-cfg-form { display: flex; flex-direction: column; gap: 14px; }
#page-paneldoors .tor-cfg-bloque { border: 1px solid var(--tor-borde); border-radius: var(--tor-rs); background: var(--tor-fondo); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
#page-paneldoors .tor-cfg-bloque h3 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm, 11px); font-weight: 600; color: var(--tor-tx); margin: 0; text-transform: uppercase; letter-spacing: .4px; }
#page-paneldoors .tor-cfg-sub { border-top: 1px dashed var(--tor-borde); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
#page-paneldoors .tor-cfg-refs { line-height: 1.6; margin: 0; }
/* Los párrafos de apoyo al tamaño CHICO. `.tor-tenue` sólo pone color, y un
   <p> suelto hereda el cuerpo de la app: salían más grandes que las etiquetas
   de los campos, con la jerarquía al revés. Se vio con la hoja puesta, no en
   la suite: jsdom no calcula tamaños. */
#page-paneldoors .tor-cfg p { font-size: var(--fs-sm, 11px); line-height: 1.6; margin: 0; }

#page-paneldoors .tor-cfg-salida { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#page-paneldoors .tor-cfg-vacio { border: 1px dashed var(--tor-borde); border-radius: var(--tor-rs); }
#page-paneldoors .tor-cfg-seccion { border: 1px solid var(--tor-borde); border-radius: var(--tor-rs); background: var(--tor-fondo); padding: 14px; }
#page-paneldoors .tor-cfg-seccion > h3 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm, 11px); font-weight: 600; color: var(--tor-tx); margin: 0 0 12px; text-transform: uppercase; letter-spacing: .4px; }
#page-paneldoors .tor-cfg-seccion > h3 .tor-tenue { text-transform: none; letter-spacing: 0; font-weight: 400; }

#page-paneldoors .tor-cfg-cabeza { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; border: 1px solid var(--tor-acc-borde); background: var(--tor-acc-suave); border-radius: var(--tor-rs); padding: 14px 16px; }
#page-paneldoors .tor-cfg-cabeza > div { display: flex; flex-direction: column; gap: 2px; }
#page-paneldoors .tor-cfg-cabeza strong { font-size: var(--fs-lg, 15px); color: var(--tor-tx); }
#page-paneldoors .tor-cfg-cabeza small { font-family: var(--tor-mono); font-size: var(--fs-xs, 10px); color: var(--tor-tx3); }
#page-paneldoors .tor-cfg-puerta { color: var(--tor-acc-tx); }
#page-paneldoors .tor-cfg-flecha { color: var(--tor-tx3); }

#page-paneldoors .tor-cfg-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#page-paneldoors .tor-cfg-opcion { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; border: 1px solid var(--tor-borde); border-radius: var(--tor-rs); background: var(--tor-fondo); padding: 11px 12px; cursor: pointer; font: inherit; color: var(--tor-tx2); }
#page-paneldoors .tor-cfg-opcion:hover { border-color: var(--tor-acc-borde); }
#page-paneldoors .tor-cfg-opcion.tor-activa { border-color: var(--tor-acc); background: var(--tor-acc-suave); }
#page-paneldoors .tor-cfg-opcion strong { color: var(--tor-tx); font-size: var(--fs-sm, 11px); }
#page-paneldoors .tor-cfg-opcion span,
#page-paneldoors .tor-cfg-opcion small { font-size: var(--fs-xs, 10px); color: var(--tor-tx3); }
#page-paneldoors .tor-cfg-exceso { color: var(--amber, #d98324); }

/* El sello ESTIMADO. En ámbar y no en gris: es la advertencia que no se puede
   perder de vista, porque el peso NO lo midió nadie. */
#page-paneldoors .tor-cfg-sello { margin-left: 8px; font-size: var(--fs-xs, 10px); letter-spacing: 1px; font-weight: 600; color: var(--amber, #d98324); border: 1px solid color-mix(in srgb, var(--amber, #d98324) 40%, var(--tor-borde)); border-radius: 4px; padding: 1px 6px; }
#page-paneldoors .tor-cfg-sello-manual { color: var(--tor-acc-tx); border-color: var(--tor-acc-borde); }
/* DE LA FICHA (modelos sin corte, 23-sep-2026): el peso es el documentado, no una
   estimación. En verde y no en ámbar, porque no es una advertencia. */
#page-paneldoors .tor-cfg-sello-ficha { color: var(--green, #2f9e5e); border-color: color-mix(in srgb, var(--green, #2f9e5e) 40%, var(--tor-borde)); }

#page-paneldoors .tor-cfg-peso { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
#page-paneldoors .tor-cfg-peso strong { font-size: 26px; font-weight: 600; color: var(--tor-tx); line-height: 1; }
#page-paneldoors .tor-cfg-peso > span { font-size: var(--fs-sm, 11px); color: var(--tor-tx2); }
#page-paneldoors .tor-cfg-banda { font-size: var(--fs-xs, 10px); color: var(--tor-tx3); border-left: 1px solid var(--tor-borde); padding-left: 12px; }
#page-paneldoors .tor-cfg-banda-sola { color: var(--amber, #d98324); }

#page-paneldoors .tor-cfg-resortes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#page-paneldoors .tor-cfg-grupo h4 { font-size: var(--fs-xs, 10px); text-transform: uppercase; letter-spacing: .6px; color: var(--tor-tx3); margin: 0 0 8px; font-weight: 600; }
#page-paneldoors .tor-cfg-resorte { border: 1px solid var(--tor-borde); border-radius: var(--tor-rs); padding: 9px 11px; margin-bottom: 7px; display: flex; flex-direction: column; gap: 3px; }
#page-paneldoors .tor-cfg-resorte.tor-cfg-reco { border-color: var(--tor-acc-borde); background: var(--tor-acc-suave); }
#page-paneldoors .tor-cfg-resorte strong { font-size: var(--fs-sm, 11px); color: var(--tor-tx); font-family: var(--tor-mono); }
#page-paneldoors .tor-cfg-resorte span,
#page-paneldoors .tor-cfg-resorte small { font-size: var(--fs-xs, 10px); color: var(--tor-tx3); }
/* Lo que SSC no fabrica se ve apagado y dice por qué: no es una opción
   igual de buena que las otras. */
#page-paneldoors .tor-cfg-resorte-nofab { border-style: dashed; opacity: .78; }
#page-paneldoors .tor-cfg-nofab { font-size: var(--fs-xs, 10px); margin: 0 0 8px; }
#page-paneldoors .tor-cfg-chicote { line-height: 1.7; margin: 10px 0 0; }
#page-paneldoors .tor-cfg-chicote span { display: block; color: var(--tor-tx3); }

#page-paneldoors .tor-cfg-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
#page-paneldoors .tor-cfg-dato { border: 1px solid var(--tor-borde); border-radius: var(--tor-rs); padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
#page-paneldoors .tor-cfg-dato span { font-size: var(--fs-xs, 10px); color: var(--tor-tx3); text-transform: uppercase; letter-spacing: .4px; }
#page-paneldoors .tor-cfg-dato strong { font-size: var(--fs-sm, 11px); color: var(--tor-tx); }
#page-paneldoors .tor-cfg-cambiado { border-color: var(--tor-acc-borde); background: var(--tor-acc-suave); }
#page-paneldoors .tor-cfg-porque { margin: 12px 0; font-size: var(--fs-xs, 10px); color: var(--tor-tx2); }
#page-paneldoors .tor-cfg-porque > .tor-btn { color: var(--tor-acc-tx); font-weight: 600; padding-left: 0; }
#page-paneldoors .tor-cfg-porque-cuerpo { padding-top: 6px; }
#page-paneldoors .tor-cfg-porque ul { margin: 10px 0; padding-left: 18px; line-height: 1.7; }
#page-paneldoors .tor-cfg-porque .tor-cfg-dos { margin: 12px 0; }

#page-paneldoors .tor-cfg-guardar { border-color: var(--tor-acc-borde); }
#page-paneldoors .tor-cfg-guardar .tor-campo { margin-bottom: 10px; }

#page-paneldoors .tor-cfg-simulados { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; }
#page-paneldoors .tor-cfg-sim { border: 1px solid var(--tor-borde); border-radius: var(--tor-rs); background: var(--tor-fondo); padding: 13px; }
#page-paneldoors .tor-cfg-sim header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
#page-paneldoors .tor-cfg-sim h4 { margin: 0; font-size: var(--fs-md, 13px); color: var(--tor-tx); }
#page-paneldoors .tor-cfg-sim dl { margin: 10px 0 0; display: flex; flex-direction: column; gap: 5px; }
#page-paneldoors .tor-cfg-sim dl > div { display: flex; gap: 8px; font-size: var(--fs-xs, 10px); }
#page-paneldoors .tor-cfg-sim dt { color: var(--tor-tx3); flex: 0 0 66px; }
#page-paneldoors .tor-cfg-sim dd { margin: 0; color: var(--tor-tx2); }
#page-paneldoors .tor-cfg-sim .tor-cfg-notas { margin: 10px 0 0; font-size: var(--fs-xs, 10px); color: var(--tor-tx3); line-height: 1.6; border-top: 1px solid var(--tor-borde); padding-top: 8px; }

/* EL DIBUJO A ESCALA. Reusa el marco de `.tor-dibujo` y sólo le quita el alto
   fijo de 170 px: ése está pensado para un esquema sin escala, y aquí
   aplastaría la proporción, que es lo único que este dibujo promete. */
#page-paneldoors .tor-cfg-dib { margin: 0; padding: 14px; }
#page-paneldoors .tor-cfg-dib > svg { width: 100%; height: auto; max-height: 460px; margin-top: 0; }
#page-paneldoors .tor-cfg-dib figcaption { font-size: var(--fs-xs, 10px); color: var(--tor-tx3); line-height: 1.6; padding-top: 10px; }
#page-paneldoors .tor-cfgd-vano { fill: none; stroke: var(--tor-tx3); stroke-width: 1; stroke-dasharray: 5 4; }
#page-paneldoors .tor-cfgd-panel { fill: var(--tor-dib-relleno); stroke: var(--tor-dib); stroke-width: 1.2; }
#page-paneldoors .tor-cfgd-rotulo { fill: var(--tor-tx3); font-size: 10px; font-family: var(--tor-mono); }
#page-paneldoors .tor-cfgd-mirilla { fill: var(--tor-fondo); stroke: var(--tor-dib); stroke-width: 1; }
#page-paneldoors .tor-cfgd-refuerzo { stroke: var(--tor-acc); stroke-width: 2; stroke-linecap: round; }
#page-paneldoors .tor-cfgd-cota { stroke: var(--tor-tx3); stroke-width: 1; }
#page-paneldoors .tor-cfgd-cota-txt { fill: var(--tor-tx2); font-size: 10px; font-family: var(--tor-mono); }

@media (max-width: 1000px) { #page-paneldoors .tor-cfg-rejilla { grid-template-columns: 1fr; } }
@media (max-width: 700px) { #page-paneldoors .tor-cfg-resortes { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
    #page-paneldoors .tor-cfg-dos { grid-template-columns: 1fr; }
    #page-paneldoors .tor-cfg-opciones { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4.13.0 · INVENTARIO DE RESORTES (324-torsion-inventario.js)
   ---------------------------------------------------------------------------
   Prefijo `tor-inv-`: ninguna clase de aquí existía antes (lección de 4.8.1,
   donde reusar una clase dejó DATA BASES a dos columnas). Lo que sí se reusa a
   propósito —`tor-tabla`, `tor-dchip`, `tor-cal`, `tor-ing-segmento`,
   `tor-banda`, `tor-btn`— es la gramática de la casa, no un accidente.
   El hueco (`tor-inv-hueco`) no lleva `display`: le basta el `hidden` nativo.
   ═══════════════════════════════════════════════════════════════════════════ */
#page-paneldoors .tor-inv { display: flex; flex-direction: column; gap: 12px; }
#page-paneldoors .tor-inv-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
#page-paneldoors .tor-inv-cabeza h2 { margin: 0; font-size: 18px; font-weight: 620; letter-spacing: -.3px; color: var(--tor-tx); }
#page-paneldoors .tor-inv-cabeza p { margin: 4px 0 0; font-size: var(--fs-sm, 11px); line-height: 1.55; max-width: 760px; }
#page-paneldoors .tor-inv-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
#page-paneldoors .tor-inv-cifras { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--tor-borde); border-radius: var(--tor-r); background: var(--tor-fondo); }
#page-paneldoors .tor-inv-cifras > div { padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
#page-paneldoors .tor-inv-cifras > div + div { border-left: 1px solid var(--tor-borde); }
#page-paneldoors .tor-inv-cifras small { font-size: var(--fs-xs, 10px); font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--tor-tx3); }
#page-paneldoors .tor-inv-cifras strong { font-family: var(--tor-mono); font-size: 18px; font-weight: 600; color: var(--tor-tx); }
#page-paneldoors .tor-inv-cifras span { font-size: var(--fs-xs, 10px); color: var(--tor-tx3); }
#page-paneldoors .tor-inv-cifra-fuera strong { color: color-mix(in srgb, var(--yellow, #f59e0b) 72%, var(--tor-tx)); }
#page-paneldoors .tor-inv-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#page-paneldoors .tor-inv-busca { height: 34px; min-width: 240px; flex: 1; max-width: 380px; border: 1px solid var(--tor-borde); border-radius: var(--tor-rs); background: var(--tor-base); padding: 0 10px; }
#page-paneldoors .tor-inv-casilla { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm, 11px); color: var(--tor-tx2); cursor: pointer; }
#page-paneldoors .tor-inv-cuenta { margin-left: auto; font-size: var(--fs-sm, 11px); }
#page-paneldoors .tor-inv-envoltura { max-height: calc(100vh - 360px); overflow: auto; border: 1px solid var(--tor-borde); border-radius: var(--tor-r); background: var(--tor-fondo); }
#page-paneldoors .tor-inv-tabla th { position: sticky; top: 0; z-index: 1; }
#page-paneldoors .tor-inv-tabla td { vertical-align: top; }
#page-paneldoors .tor-inv-nombre { display: flex; align-items: baseline; gap: 2px; }
#page-paneldoors .tor-inv-sku { margin-top: 3px; font-family: var(--tor-mono); font-size: var(--fs-xs, 10px); font-weight: 400; color: var(--tor-tx3); }
#page-paneldoors .tor-inv-desglose { margin-top: 3px; font-size: var(--fs-xs, 10px); color: var(--tor-tx3); white-space: nowrap; }
#page-paneldoors .tor-inv-hay { color: var(--tor-tx); }
#page-paneldoors .tor-inv-mano { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font, inherit); font-size: var(--fs-xs, 10px); font-weight: 700; }
/* El enrollado se dice por color en este mercado: derecho es ROJO, izquierdo
   es NEGRO (Gera, 20-sep-2026; ver ENROLLADOS en el dominio). El punto lo
   dice, y la palabra también, para quien no distingue colores. */
#page-paneldoors .tor-inv-mano::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--tor-borde); }
#page-paneldoors .tor-inv-der::before { background: var(--tor-cal-rojo, #c8102e); }
/* Negro de verdad, no el color del texto: en modo noche el texto es claro y
   el punto de un resorte izquierdo salía BLANCO. El borde lo hace visible
   sobre el fondo oscuro. */
#page-paneldoors .tor-inv-izq::before { background: var(--tor-cal-negro, #111111); border-color: var(--tor-tx3); }
#page-paneldoors .tor-inv-sin-color { background: transparent; border-style: dashed; }
#page-paneldoors .tor-inv-acts { display: flex; gap: 4px; justify-content: flex-end; }
@media (max-width: 760px) {
    #page-paneldoors .tor-inv-cifras { grid-template-columns: 1fr; }
    #page-paneldoors .tor-inv-cifras > div + div { border-left: 0; border-top: 1px solid var(--tor-borde); }
}