/* Frente de Vidrio — estilos. Dirección "B · herramienta de taller": planilla de filas y columnas, materiales del taller
   (anodizado, canto de float, bronce) y el color de cada vidriería como único acento fuerte.
   Letras locales (vendor/fonts, OFL): Barlow para texto y números, Barlow Semi Condensed para títulos y rótulos. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../vendor/fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../vendor/fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../vendor/fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('../vendor/fonts/barlow-semi-condensed-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../vendor/fonts/barlow-semi-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../vendor/fonts/barlow-semi-condensed-700.woff2') format('woff2'); }

:root{
  /* color de la vidriería: lo pone app.js desde Precios y ajustes (aplicarMarca); estos son los de arranque */
  --marca:#1C6E7F;
  --sobre-marca:#FFFFFF;
  --acento-l:#1C6E7F;   /* la marca, oscurecida si hace falta para leerse sobre chapa clara */
  --acento-d:#7FC0CC;   /* la marca, aclarada para leerse sobre chapa oscura */

  --taller:#E3E4E0;
  --chapa:#F4F4F1;
  --campo:#FFFFFF;
  --tinta:#23272A;
  --tinta-2:#4A5153;
  --borde-campo:#7A8180;
  --regla:#C5C8C3;
  --regla-fuerte:#9EA4A2;
  --canto:#4F5A5E;   /* 2.6.1: borde gris oscuro del vidrio */
  --cara:#C4D9D6;    /* 2.6.1: cara gris celeste, como los planos de taller */
  --brillo:rgba(255,255,255,.75);
  --bronce:#8A5A2B;
  --bronce-suave:#F1E7DC;
  --perfil:#5B6264;
  --peligro:#B3261E;
  --peligro-suave:#F7DEDB;
  --acento:var(--acento-l);
  --acento-suave:color-mix(in oklab, var(--acento) 10%, var(--chapa));
  --foco:var(--acento);
  --sombra:0 2px 10px rgba(20,24,26,.14);
  --velo:rgba(20,24,26,.5);

  --letra:"Barlow", system-ui, sans-serif;
  --letra-titulo:"Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --r-campo:3px;
  --r-plano:4px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --taller:#1B1E1F; --chapa:#232729; --campo:#151819; --tinta:#E7E8E4; --tinta-2:#B2B8B6;
    --borde-campo:#7F8786; --regla:#3A4042; --regla-fuerte:#5A6163;
    --canto:#AFC2C1; --cara:#33494A; --brillo:rgba(255,255,255,.14);
    --bronce:#D59D63; --bronce-suave:#3A2C1F; --perfil:#9AA2A3;
    --peligro:#F2918A; --peligro-suave:#3D2220;
    --acento:var(--acento-d);
    --acento-suave:color-mix(in oklab, var(--acento) 16%, var(--chapa));
    --sombra:0 2px 12px rgba(0,0,0,.45);
    --velo:rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --taller:#1B1E1F; --chapa:#232729; --campo:#151819; --tinta:#E7E8E4; --tinta-2:#B2B8B6;
  --borde-campo:#7F8786; --regla:#3A4042; --regla-fuerte:#5A6163;
  --canto:#AFC2C1; --cara:#33494A; --brillo:rgba(255,255,255,.14);
  --bronce:#D59D63; --bronce-suave:#3A2C1F; --perfil:#9AA2A3;
  --peligro:#F2918A; --peligro-suave:#3D2220;
  --acento:var(--acento-d);
  --acento-suave:color-mix(in oklab, var(--acento) 16%, var(--chapa));
  --sombra:0 2px 12px rgba(0,0,0,.45);
  --velo:rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:12px; }
body{
  margin:0; background:var(--taller); color:var(--tinta);
  font:400 15px/1.4 var(--letra);
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1, "lnum" 1;
  overflow-x:hidden; overflow-x:clip;
}
::selection{ background:color-mix(in oklab, var(--acento) 30%, transparent); }
button, input, select, textarea{ font:inherit; color:inherit; }
input, textarea{ caret-color:var(--acento); }
:focus-visible{ outline:2px solid var(--foco); outline-offset:2px; }
h1, h2, h3, h4{ margin:0; font-family:var(--letra-titulo); font-weight:600; line-height:1.15; }
p{ margin:0; }
a{ color:var(--acento); text-underline-offset:2px; }
.num{ font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; }
.iconos{ position:absolute; width:0; height:0; overflow:hidden; }
.ic{ width:20px; height:20px; flex:none; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
[hidden]{ display:none !important; }
* { scrollbar-color:var(--regla-fuerte) transparent; }
.nota{ font-size:14px; color:var(--tinta-2); line-height:1.45; max-width:75ch; }
.nota b{ color:var(--tinta); font-weight:600; }
.hint{ font-size:13px; color:var(--tinta-2); line-height:1.35; }
.field-label{ font-size:14px; font-weight:500; color:var(--tinta-2); }

/* ---------- barra de la vidriería ---------- */
.barra{ background:var(--marca); color:var(--sobre-marca); position:relative; z-index:30; }
.barra-in{ display:flex; align-items:stretch; gap:24px; padding:0 24px; min-height:52px; max-width:1480px; margin:0 auto; }
.marca{ display:flex; align-items:center; gap:10px; min-width:0; font-family:var(--letra-titulo); font-weight:700; font-size:20px; }
.marca-logo{
  width:30px; height:30px; border:2px solid currentColor; border-radius:2px; display:grid; place-items:center; flex:none;
  font-size:14px; font-weight:700; letter-spacing:.02em;
}
.marca-logo:empty{ display:none; }
.marca-banner{ display:flex; align-items:center; background:#FFFFFF; border-radius:2px; padding:3px 6px; height:34px; flex:none; }
.marca-banner img{ display:block; max-height:28px; max-width:120px; object-fit:contain; }
.marca-nombre{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.solapas{ display:flex; align-items:stretch; gap:4px; }
.solapa{
  background:none; border:0; padding:0 14px; min-height:44px; cursor:pointer; white-space:nowrap; color:inherit;
  font-family:var(--letra-titulo); font-weight:500; font-size:17px; opacity:.85;
  border-top:3px solid transparent; border-bottom:3px solid transparent;
}
.solapa[aria-selected="true"]{ opacity:1; font-weight:700; border-bottom-color:currentColor; }
.solapa:hover{ opacity:1; }
.solapa:focus-visible{ outline-color:currentColor; outline-offset:-4px; }
.solapa-corta{ display:none; }
.barra-der{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.btn-barra{
  background:none; color:inherit; cursor:pointer; font-weight:500; white-space:nowrap;
  border:1.5px solid color-mix(in oklab, var(--sobre-marca) 50%, transparent); border-radius:var(--r-campo);
  min-height:38px; padding:0 12px; display:inline-flex; align-items:center; gap:8px; list-style:none;
}
.btn-barra::-webkit-details-marker{ display:none; }
.btn-barra:hover{ background:color-mix(in oklab, var(--sobre-marca) 14%, transparent); }
.btn-barra:focus-visible{ outline-color:currentColor; }
.btn-barra.solo-ic{ padding:0; width:40px; justify-content:center; }
details.menu{ position:relative; }
.menu-lista{
  position:absolute; right:0; top:calc(100% + 6px); z-index:40; min-width:230px; padding:6px;
  background:var(--chapa); color:var(--tinta); border:1px solid var(--regla-fuerte); border-radius:var(--r-plano); box-shadow:var(--sombra);
  display:flex; flex-direction:column;
}
.menu-item{
  display:flex; align-items:center; gap:10px; min-height:44px; padding:0 10px; border:0; background:none; cursor:pointer;
  border-radius:var(--r-campo); font-weight:500; text-align:left; width:100%;
}
.menu-item:hover{ background:color-mix(in oklab, var(--tinta) 7%, transparent); }
/* 2.8.4: estado del respaldo en el menú de los tres puntos; con el respaldo vencido el botón se resalta y el menú lleva un punto */
.menu-nota{ margin:0; padding:6px 10px 8px; font-size:13px; line-height:1.4; color:var(--tinta-2); border-bottom:1px solid var(--regla); margin-bottom:4px; }
.menu-nota b{ display:block; color:var(--tinta); font-weight:600; }
.menu-item.destacado{ background:color-mix(in oklab, var(--bronce) 16%, transparent); font-weight:700; }
.btn-barra.con-aviso{ position:relative; }
.btn-barra.con-aviso::after{ content:""; position:absolute; top:5px; right:5px; width:10px; height:10px; border-radius:50%; background:#F2B134; border:2px solid var(--marca); box-sizing:content-box; }

/* ---------- pantalla ---------- */
.pantalla{
  display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:20px; align-items:start;
  padding:16px 24px 40px; max-width:1480px; margin:0 auto;
}
.trabajo{ min-width:0; }
.solapa-panel:focus{ outline:none; }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 14px;
  border-radius:var(--r-campo); border:1.5px solid var(--borde-campo); background:var(--campo); color:var(--tinta);
  font-weight:500; cursor:pointer; white-space:nowrap; text-decoration:none; line-height:1.15;
}
.btn:hover{ border-color:var(--tinta); }
.btn:disabled{ opacity:.55; cursor:default; }
.btn:disabled:hover{ border-color:var(--borde-campo); }
.btn.deshabilitado{ opacity:.55; pointer-events:none; }
.btn-prin{ background:var(--marca); border-color:var(--acento-l); color:var(--sobre-marca); font-weight:600; }
.btn-prin:hover{ background:color-mix(in oklab, var(--marca) 86%, black); border-color:var(--acento-l); }
:root[data-theme="dark"] .btn-prin{ background:var(--acento); border-color:var(--acento); color:#15181A; }
:root[data-theme="dark"] .btn-prin:hover{ background:color-mix(in oklab, var(--acento) 85%, white); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn-prin{ background:var(--acento); border-color:var(--acento); color:#15181A; }
  :root:not([data-theme="light"]) .btn-prin:hover{ background:color-mix(in oklab, var(--acento) 85%, white); }
}
.btn-plano{ border-color:transparent; background:none; color:var(--tinta-2); padding:0 10px; }
.btn-plano:hover{ color:var(--tinta); border-color:var(--regla-fuerte); }
.btn-peligro{ color:var(--peligro); }
.btn-peligro:hover{ color:var(--peligro); border-color:var(--peligro); }
.btn-file{ position:relative; }
.btn-file:focus-within{ outline:2px solid var(--foco); outline-offset:2px; }
.file-oculto{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0); }
.ic-btn{
  width:40px; height:40px; display:inline-grid; place-items:center; flex:none; padding:0;
  border:1.5px solid transparent; border-radius:var(--r-campo); background:none; color:var(--tinta-2); cursor:pointer;
}
.ic-btn:hover{ color:var(--tinta); border-color:var(--regla-fuerte); }
.ic-btn.peligro:hover{ color:var(--peligro); border-color:var(--peligro); }
.link-btn{ background:none; border:0; padding:0; font-weight:600; color:var(--acento); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }

/* ---------- campos ---------- */
.campo, .field{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.campo > label, .campo > .rot, .field > label, .mini > label{ font-size:13px; font-weight:500; color:var(--tinta-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
input[type="text"], input.in-num, input[type="tel"], input[type="email"], select, textarea{
  height:40px; width:100%; min-width:0; border:1.5px solid var(--borde-campo); border-radius:var(--r-campo);
  background:var(--campo); color:var(--tinta); padding:0 10px; font-size:16px; font-weight:500;
}
textarea{ height:auto; padding:8px 10px; line-height:1.45; resize:vertical; font-weight:400; }
input.in-num{ text-align:right; -moz-appearance:textfield; }
input.in-num::-webkit-inner-spin-button, input.in-num::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
input::placeholder, textarea::placeholder{ color:var(--tinta-2); opacity:.8; font-weight:400; }
select{
  appearance:none; -webkit-appearance:none; padding-right:26px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%237A8180' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 6px center; background-size:16px;
}
input:hover, select:hover, textarea:hover{ border-color:var(--tinta); }
input:focus, select:focus, textarea:focus{ outline:2px solid var(--foco); outline-offset:0; border-color:var(--foco); }
input[type="color"]{ width:52px; height:40px; padding:3px; border:1.5px solid var(--borde-campo); border-radius:var(--r-campo); background:var(--campo); cursor:pointer; flex:none; }
.check-row{ display:inline-flex; align-items:center; gap:10px; min-height:40px; font-weight:500; cursor:pointer; }
.check-row input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; width:22px; height:22px; margin:0; flex:none; cursor:pointer;
  border:1.5px solid var(--borde-campo); border-radius:2px; background:var(--campo); display:grid; place-items:center;
}
.check-row input[type="checkbox"]:checked{ background:var(--acento); border-color:var(--acento); }
.check-row input[type="checkbox"]:checked::after{
  content:""; width:11px; height:6px; border-left:2px solid var(--chapa); border-bottom:2px solid var(--chapa); transform:translateY(-2px) rotate(-45deg);
}
.check-row input[type="checkbox"]:focus-visible{ outline:2px solid var(--foco); outline-offset:2px; }
/* interruptor (pulido de cantos) */
.interruptor{
  height:40px; width:100%; display:flex; align-items:center; gap:10px; padding:0 10px; cursor:pointer; text-align:left;
  border:1.5px solid var(--borde-campo); border-radius:var(--r-campo); background:var(--campo); font-weight:500; white-space:nowrap;
}
.interruptor:hover{ border-color:var(--tinta); }
.interruptor .riel{ width:34px; height:20px; border-radius:10px; border:1.5px solid var(--borde-campo); position:relative; flex:none; background:var(--taller); }
.interruptor .riel::after{ content:""; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:var(--borde-campo); transition:left .12s ease; }
.interruptor[aria-checked="true"] .riel{ background:var(--bronce); border-color:var(--bronce); }
.interruptor[aria-checked="true"] .riel::after{ left:16px; background:var(--chapa); }

/* ---------- avisos ---------- */
.aviso{
  display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin:0 0 14px; padding:10px 14px;
  background:var(--bronce-suave); border:1px solid color-mix(in oklab, var(--bronce) 45%, transparent); border-radius:var(--r-plano);
}
.aviso > .ic{ color:var(--bronce); }
.aviso-texto{ flex:1 1 260px; font-size:14px; line-height:1.45; }
.aviso-texto b:first-child{ color:var(--bronce); }
/* el resumen de una línea es solo del celular; en pantalla grande se lee el aviso entero */
.aviso-ver{ display:none; }
.aviso-error{ display:block; background:var(--peligro-suave); border-color:var(--peligro); color:var(--tinta); font-size:14px; }
/* datos guardados que no se pudieron leer al arrancar */
.aviso-datos{ background:var(--peligro-suave); border-color:var(--peligro); }
.aviso-datos > .ic{ color:var(--peligro); }
.aviso-acc{ display:flex; gap:8px; flex-wrap:wrap; }
.aviso-error .aviso-acc{ margin-top:10px; }
/* error inesperado: arriba de todo, también sobre los diálogos */
.aviso-fatal{
  position:fixed; left:50%; top:12px; transform:translateX(-50%); z-index:90; width:min(560px, calc(100vw - 24px));
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px 12px; padding:14px 16px;
  background:var(--peligro-suave); color:var(--tinta); border:1.5px solid var(--peligro); border-radius:var(--r-plano); box-shadow:var(--sombra);
}
.aviso-fatal > .ic{ color:var(--peligro); margin-top:2px; }
.aviso-fatal p{ flex:1 1 240px; font-size:15px; line-height:1.45; }
/* lista de lo que falta revisar antes de mandar el presupuesto */
.confirm-lista{ margin:10px 0 0; padding-left:20px; font-size:15px; line-height:1.45; max-height:45vh; overflow-y:auto; }
.confirm-lista li{ margin:4px 0; }
/* instalación nueva sin nombre de empresa */
.marca-nombre.sin-empresa{ cursor:pointer; text-decoration:underline dotted; text-underline-offset:4px; text-decoration-thickness:1.5px; }
.marca-falta{ font-family:var(--letra); font-weight:500; font-size:14px; opacity:.85; }
.presu-sin-empresa{ font-size:14px; color:var(--tinta-2); }

/* ---------- Obra: cabecera ---------- */
.obra-cab{ display:flex; align-items:center; gap:10px 20px; padding:4px 0 14px; flex-wrap:wrap; }
.obra-tit{ display:flex; align-items:baseline; gap:4px 18px; flex-wrap:wrap; min-width:0; flex:1 1 320px; }
.obra-cab h1{ font-size:26px; font-weight:700; overflow-wrap:anywhere; }
.obra-dato{ color:var(--tinta-2); font-size:15px; }
.obra-dato:empty{ display:none; }
.obra-acciones{ display:flex; gap:8px; flex-wrap:wrap; }
.obra-pie-acc{ display:none; }

/* ---------- planilla de tramos ---------- */
.planilla{ background:var(--chapa); border:1px solid var(--regla-fuerte); border-radius:var(--r-plano); }
.fila-t{
  display:grid; grid-template-columns:34px minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) 108px 172px;
  align-items:center; column-gap:14px; padding:0 14px; min-height:48px;
}
.cols{ min-height:34px; color:var(--tinta-2); font-family:var(--letra-titulo); font-weight:500; font-size:14px; border-bottom:1px solid var(--regla-fuerte); }
.der{ text-align:right; }
.tramo + .tramo{ border-top:1px solid var(--regla-fuerte); }
.tramo-cab{ cursor:pointer; }
.tramo-cab:hover{ background:color-mix(in oklab, var(--tinta) 4%, transparent); }
.tramo.abierto > .tramo-cab{ cursor:default; background:none; min-height:56px; }
.n-tag{
  width:26px; height:26px; display:grid; place-items:center; flex:none; padding:0;
  border:1.5px solid var(--tinta); border-radius:2px; background:none; color:var(--tinta);
  font-family:var(--letra-titulo); font-weight:700; font-size:15px; line-height:1;
}
.tramo.abierto .tramo-cab .n-tag{ background:var(--tinta); color:var(--chapa); }
.t-nom-wrap{ min-width:0; display:flex; flex-direction:column; }
.t-nom-linea{ display:flex; align-items:baseline; gap:8px; min-width:0; }
.t-nombre{ font-family:var(--letra-titulo); font-weight:600; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.t-nombre-in{
  font-family:var(--letra-titulo); font-weight:700; font-size:20px; height:38px; padding:0 8px; margin-left:-8px;
  border-color:transparent; background:transparent; width:calc(100% + 8px);
}
.t-nombre-in:hover{ border-color:var(--borde-campo); background:var(--campo); }
.t-ejemplo{ font-size:13px; color:var(--tinta-2); font-weight:500; white-space:nowrap; flex:none; }
.t-sub, .t-sub2{ display:none; }
.t-dato{ color:var(--tinta-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.t-plata{ font-weight:600; text-align:right; white-space:nowrap; }
.t-acc{ display:flex; justify-content:flex-end; align-items:center; gap:2px; }
.tramo-error{ padding:16px; color:var(--peligro); }
.t-thumb{ position:relative; display:inline-flex; }
.t-thumb img{ width:36px; height:36px; object-fit:cover; border-radius:2px; border:1px solid var(--regla-fuerte); display:block; }
label.ic-btn{ position:relative; }
label.ic-btn:focus-within{ outline:2px solid var(--foco); outline-offset:2px; }

/* cuerpo del tramo abierto */
.tramo-cuerpo{ padding:2px 14px 16px 62px; container-type:inline-size; display:flex; flex-direction:column; }
/* 2.8.0: primero el croquis (grande), después las opciones para modificar: medidas, diseño, opciones y paños con su detalle */
.tramo-cuerpo .croquis-zona{ order:0; }
.tramo-cuerpo .t-ajustes{ order:1; }
.tramo-cuerpo .mp-zona{ order:2; }
.tramo-cuerpo .panos-zona{ order:4; }
.tramo-cuerpo .tramo-pie{ order:5; }
.tramo-cuerpo .t-notas{ order:6; }
.tramo-cuerpo .t-desc{ order:7; }
.tramo-cuerpo .t-acc-pie{ order:8; }
.t-ajustes{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(128px, 1fr)); gap:10px 12px; align-items:start;
  padding:8px 0 14px; border-bottom:1px solid var(--regla);
}
.t-ajustes .c-d2{ grid-column:span 2; }
.t-aj-medidas, .t-aj-resto{ display:contents; } /* compu: una sola grilla, como antes */
/* 2.5.3: ancho × alto en un bloque (y en escalera, ancho × alto inicio, alto fin) */
.t-medidas{ grid-column:span 2; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:0 6px; align-items:end; min-width:0; }
.t-medidas.t-medidas-3{ grid-column:span 3; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) minmax(0,1fr); column-gap:6px; }
.t-medidas.t-medidas-3 > .campo:last-child{ margin-left:6px; }
.t-x{ display:flex; align-items:center; height:40px; font-size:18px; font-weight:500; color:var(--tinta-2); }
/* Paños de un tramo recién agregado: en segundo plano hasta cargar ancho y alto (se puede tocar igual) */
.campo-ayuda{ font-size:12.5px; color:var(--tinta-2); line-height:1.25; }
.pano-vidrio{ display:block; font-size:12.5px; font-weight:500; color:var(--tinta-2); line-height:1.25; }
.campo.en-espera > input{ opacity:.7; }
.campo.en-espera > input{ border-style:dashed; }
.campo.en-espera > input:focus{ opacity:1; border-style:solid; }
.mp-zona{ padding:12px 0 14px; border-bottom:1px solid var(--regla); }
/* 2.8.0: el diseño elegido y, plegada, la grilla para cambiarlo */
.mp-cambiar > summary{
  display:flex; align-items:center; gap:12px; min-height:52px; padding:6px 12px; cursor:pointer; list-style:none;
  border:1px solid var(--regla-fuerte); border-radius:var(--r-plano); background:var(--campo); color:var(--tinta);
}
.mp-cambiar > summary::-webkit-details-marker{ display:none; }
.mp-cambiar > summary:hover{ border-color:var(--tinta); }
.mp-cambiar > summary:focus-visible{ outline:2px solid var(--foco); outline-offset:2px; }
.mp-cambiar > summary .mp-ico{ flex:none; }
.mp-cambiar-txt{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; line-height:1.2; }
.mp-cambiar-nom{ font-family:var(--letra-titulo); font-weight:600; font-size:17px; }
.mp-cambiar-ac{ font-size:13.5px; color:var(--tinta-2); }
.mp-cambiar > summary .ic{ flex:none; transition:transform .12s ease; }
.mp-cambiar[open] > summary .ic{ transform:rotate(180deg); }
.mp-cambiar > .mp-picker{ margin-top:10px; }
.mp-picker{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; }
.mp-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:72px; padding:8px 4px;
  font-size:14px; font-weight:500; color:var(--tinta-2); cursor:pointer; text-align:center; line-height:1.2;
  background:var(--campo); border:1.5px solid var(--borde-campo); border-radius:var(--r-campo);
}
.mp-btn:hover{ color:var(--tinta); border-color:var(--tinta); }
.mp-btn.activo{ color:var(--tinta); border-color:var(--acento); box-shadow:inset 0 0 0 1.5px var(--acento); background:var(--acento-suave); }
.mp-ico{ width:58px; height:35px; display:block; }
.mp-ico path{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.mp-ico .mp-pared{ stroke:var(--perfil); stroke-width:3.2; opacity:.6; }
.mp-ico .mp-vid{ stroke:var(--canto); stroke-width:2.4; }
.mp-ico .mp-fle{ stroke:currentColor; stroke-width:1.3; }
/* 2.8.0: los íconos que arma iconoModelo usan líneas, polilíneas, círculos y rectángulos (las paredes) */
.mp-ico line, .mp-ico polyline, .mp-ico circle{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.mp-ico rect.mp-pared{ fill:var(--perfil); stroke:none; opacity:.6; }
.mp-grupo{ grid-column:1 / -1; margin:6px 0 0; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--tinta-2); }
.mp-grupo:first-child{ margin-top:0; }
/* opciones del modelo de mampara y tirador o manijón de una puerta */
.mp-opciones{ margin-top:14px; padding-top:12px; border-top:1px solid var(--regla); }
.mp-op-tit, .mp-op-sub{ margin:0 0 6px; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--tinta-2); }
.mp-op-sub{ margin-top:12px; }
.mp-op-fila, .puerta-agarre{ display:grid; grid-template-columns:repeat(auto-fill, minmax(185px, 1fr)); gap:10px 12px; align-items:start; }
.puerta-agarre{ margin:8px 0; }
.mp-op-fila .campo > label, .puerta-agarre .campo > label{ white-space:normal; }   /* 2.8.0: "Laterales (cada uno), mm" no se corta en el celu */
.mp-op-fila select, .puerta-agarre select{ min-width:0; width:100%; }
.mp-op-checks, .mp-op-burletes{ display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:8px; }
.mp-op-burletes{ margin-top:0; }
.ped-vano-opciones{ margin:2px 0 6px; font-size:14px; color:var(--tinta-2); font-style:italic; }
.mp-ayuda{ margin-top:8px; font-size:14px; color:var(--tinta-2); }

.mesa{ display:contents; } /* 2.8.0: sus dos zonas se ordenan solas dentro del cuerpo del tramo */
.croquis-zona{ min-width:0; padding:10px 0 12px; border-bottom:1px solid var(--regla); }
.panos-zona{ padding-top:14px; }
.croquis-wrap{ color:var(--tinta); }
.croquis-wrap svg{ display:block; width:100%; max-height:480px; }
.cq-nota{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; font-size:14px; color:var(--tinta-2); }
.cq-nota b{ color:var(--tinta); font-weight:600; }
.muestra-pulido{ width:18px; height:4px; background:var(--bronce); border-radius:1px; flex:none; }
.cq-ocultar{ min-height:32px; font-size:14px; margin-left:auto; }
.cq-oculto{ display:flex; align-items:center; gap:10px; color:var(--tinta-2); font-size:14px; }

/* croquis: colores del tema (pisan los del SVG) */
.croquis-wrap svg text, .presu-croquis svg text{ font-family:var(--letra); }
.croquis-wrap svg:not(.cq-plano) .cq-panel, .presu-croquis svg:not(.cq-plano) .cq-panel{ fill:var(--cara); stroke:var(--canto); }
.croquis-wrap svg:not(.cq-plano) .cq-panel.cq-excede, .presu-croquis svg:not(.cq-plano) .cq-panel.cq-excede{ fill:var(--peligro-suave); stroke:var(--peligro); }
.croquis-wrap svg:not(.cq-plano) .cq-brillo, .presu-croquis svg:not(.cq-plano) .cq-brillo{ fill:var(--brillo); opacity:.35; } /* 2.6.1: brillo apenas visible, vidrio parejo */
.croquis-wrap svg:not(.cq-plano) .cq-u, .presu-croquis svg:not(.cq-plano) .cq-u{ stroke:var(--perfil); }
.croquis-wrap .cq-pulido, .presu-croquis .cq-pulido{ stroke:var(--bronce); }
.croquis-wrap svg:not(.cq-plano) .cq-tag rect, .presu-croquis svg:not(.cq-plano) .cq-tag rect{ fill:var(--chapa); stroke:var(--tinta); }
.croquis-wrap svg:not(.cq-plano) .cq-riel, .presu-croquis svg:not(.cq-plano) .cq-riel, .croquis-wrap svg:not(.cq-plano) .cq-guia, .presu-croquis svg:not(.cq-plano) .cq-guia{ fill:var(--perfil); }
.croquis-wrap .cq-roldana circle, .presu-croquis .cq-roldana circle{ stroke:var(--chapa); }
.croquis-wrap svg:not(.cq-plano) .cq-vano-txt, .presu-croquis svg:not(.cq-plano) .cq-vano-txt{ fill:var(--tinta-2); }
.croquis-wrap .cq-tag.sel rect{ fill:var(--acento); stroke:var(--acento); }
.croquis-wrap .cq-tag.sel text{ fill:var(--chapa); }
/* 2.8.0: estilo plano. El dibujo va sobre una chapa clara fija (también en oscuro), con el vidrio celeste y los perfiles de aluminio
   oscuros del bosquejo aprobado; los degradés y los herrajes traen sus tonos en el SVG, acá solo el fondo, el texto y el canto. */
svg.cq-plano{ background:#F4F7F6; color:#23272A; border-radius:8px; }
svg.cq-plano .cq-hoja{ stroke:#4F5A5E; }
svg.cq-plano .cq-gv0{ stop-color:#D3E6E3; }
svg.cq-plano .cq-gv1{ stop-color:#BCD6D2; }
svg.cq-plano .cq-vano-txt{ fill:#566064; }
svg.cq-plano text{ font-family:var(--letra); }
svg.cq-plano .cq-tag.sel rect{ fill:#1C6E7F; stroke:#1C6E7F; }
svg.cq-plano .cq-tag.sel text{ fill:#FFFFFF; }
.croquis-wrap .cq-tag, .croquis-wrap .cq-panel{ cursor:pointer; }
.cq-lado{ cursor:pointer; outline:none; }
.cq-lado .cq-vis{ transition:stroke .12s; }
.cq-lado:hover .cq-vis, .cq-lado:focus-visible .cq-vis{ stroke:var(--bronce); stroke-opacity:.55; }
.cq-lado-pulido .cq-vis{ stroke:var(--bronce); stroke-opacity:1; }
.cq-lado-pulido:hover .cq-vis, .cq-lado-pulido:focus-visible .cq-vis{ stroke:var(--bronce); stroke-opacity:.75; }
.cq-lado:focus-visible .cq-vis{ stroke-width:7px; }

/* paños: planilla en la compu */
.panos-zona{ min-width:0; }
table.panos{ width:100%; border-collapse:collapse; }
.panos th{
  font-family:var(--letra-titulo); font-weight:500; font-size:14px; color:var(--tinta-2); text-align:left;
  padding:0 5px 6px; border-bottom:1px solid var(--regla-fuerte); white-space:nowrap;
}
.panos th.der, .panos td.der{ text-align:right; }
.panos td{ padding:6px 5px; border-bottom:1px solid var(--regla); height:54px; vertical-align:middle; }
.panos tr.sel td{ background:var(--acento-suave); }
.panos tr.excede td{ background:var(--peligro-suave); }
.panos tr.excede .n-tag{ border-color:var(--peligro); color:var(--peligro); }
.panos .n-tag, .pano-fila .n-tag{ width:28px; height:28px; font-size:14px; cursor:pointer; }
.panos tr.sel .n-tag, .pano-fila.sel .n-tag{ background:var(--acento); border-color:var(--acento); color:var(--chapa); }
.celda-in{ width:76px !important; padding:0 8px !important; }
.dos-altos{ display:flex; flex-direction:column; gap:3px; align-items:flex-end; }
.dos-altos .mini{ flex-direction:row; align-items:center; gap:4px; }
.dos-altos .mini label{ font-size:12px; }
.dos-altos input{ height:32px; width:70px; }
.auto{ display:inline-flex; align-items:baseline; justify-content:flex-end; gap:5px; font-size:16px; font-weight:500; color:var(--tinta-2); }
.auto small, .pf-medida small{ font-size:12px; font-weight:500; color:var(--tinta-2); }
.fig{
  display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 8px; max-width:170px;
  border:1.5px solid var(--borde-campo); border-radius:var(--r-campo); background:var(--campo); cursor:pointer; font-weight:500;
}
.fig:hover{ border-color:var(--tinta); }
.fig span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fig[aria-expanded="true"]{ border-color:var(--acento); box-shadow:inset 0 0 0 1px var(--acento); }
.fig-ico{ width:20px; height:17px; flex:none; fill:currentColor; fill-opacity:.12; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.rol-ico{ width:20px; height:18px; flex:none; fill:currentColor; fill-opacity:.12; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.corte{ font-weight:500; white-space:nowrap; }
.x{ color:var(--tinta-2); padding:0 2px; font-weight:400; }
.a-mano-marca{ display:block; font-size:12px; font-weight:600; color:var(--bronce); }
.excede-marca{ display:block; font-size:12px; font-weight:600; color:var(--peligro); }
.m2{ color:var(--tinta-2); }
.panos-pie{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:8px 5px 0; font-size:14px; color:var(--tinta-2); }
.panos-pie b{ color:var(--tinta); font-weight:600; }
.panos-acc{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; flex-wrap:wrap; }

/* paños: una fila por paño en el celular */
.lista-panos{ display:none; list-style:none; margin:10px 0 0; padding:0; border-top:1px solid var(--regla-fuerte); }
.pano-fila{
  display:grid; grid-template-columns:30px minmax(0,1fr) auto 20px; align-items:center; column-gap:10px; width:100%;
  min-height:58px; padding:6px 4px 6px 2px; background:none; border:0; border-bottom:1px solid var(--regla); text-align:left; cursor:pointer;
}
.pano-fila.sel{ background:var(--acento-suave); }
.pano-fila.excede{ background:var(--peligro-suave); }
.pano-fila.excede .n-tag{ border-color:var(--peligro); color:var(--peligro); }
.pf-medida{ font-size:18px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.pf-medida .pf-sub{ display:block; font-size:13px; font-weight:500; color:var(--tinta-2); }
.pf-corte{ font-size:13px; color:var(--tinta-2); text-align:right; line-height:1.25; white-space:nowrap; }
.pf-corte b{ display:block; font-weight:500; color:var(--tinta); font-size:15px; }
.pano-fila > .ic{ width:18px; height:18px; color:var(--tinta-2); transition:transform .12s ease; }
.pano-fila[aria-expanded="true"] > .ic{ transform:rotate(90deg); }

/* detalle del paño elegido */
.pano-det{ margin-top:10px; border:1.5px solid var(--acento); border-radius:var(--r-plano); background:var(--campo); }
.pano-det-cab{ display:flex; align-items:center; gap:10px; padding:6px 6px 6px 12px; border-bottom:1px solid var(--regla); }
.pano-det-cab h3{ font-size:18px; font-weight:700; }
.pano-det-cab .datos{ font-size:14px; color:var(--tinta-2); flex:1 1 auto; min-width:0; }
.pano-det-cuerpo{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap:14px 18px; padding:12px; }
.det-grupo{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.det-grupo > .rot{ font-size:13px; font-weight:500; color:var(--tinta-2); }
.det-grupo .fila{ display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
.det-grupo .fila .campo{ flex:1 1 90px; }
.det-datos{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px 20px; font-size:14px; color:var(--tinta-2); padding-top:10px; border-top:1px solid var(--regla); }
.det-datos b{ color:var(--tinta); font-weight:600; }
.det-pie{ grid-column:1 / -1; display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.det-excede{ grid-column:1 / -1; color:var(--peligro); font-weight:600; font-size:14px; }
.solo-celu{ display:none !important; }
.fig-picker, .rol-picker{ align-self:flex-start; display:inline-flex; border:1.5px solid var(--borde-campo); border-radius:var(--r-campo); overflow:hidden; background:var(--campo); }
.fig-btn, .rol-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:44px; height:44px; padding:0 8px;
  background:transparent; border:0; border-right:1px solid var(--regla); color:var(--tinta-2); cursor:pointer; font-weight:500;
}
.fig-btn:last-child, .rol-btn:last-child{ border-right:0; }
.fig-btn:hover, .rol-btn:hover{ color:var(--tinta); background:color-mix(in oklab, var(--tinta) 6%, transparent); }
.fig-btn.activo, .rol-btn.activo{ background:var(--acento); color:var(--chapa); }
.fig-btn:focus-visible, .rol-btn:focus-visible{ outline-offset:-4px; }
.fig-btn .fig-ico{ width:22px; height:18px; }
.fig-nombre{ font-size:14px; color:var(--tinta-2); }
.corte-edit{ display:flex; align-items:center; gap:6px; }
.corte-edit input{ width:96px; }
.corte-edit input.a-mano{ border-color:var(--bronce); background:var(--bronce-suave); font-weight:600; }
.corte-info{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--tinta-2); min-height:24px; }
.corte-info .a-mano-txt{ color:var(--bronce); font-weight:600; }
.kit-celda{ display:flex; align-items:center; gap:4px 10px; flex-wrap:wrap; font-size:14px; }
.kit-total{ font-weight:600; }
.kit-cargar{ color:var(--bronce); }

.tramo-pie{ display:flex; flex-wrap:wrap; gap:4px 22px; padding:12px 0 0; margin-top:14px; border-top:1px solid var(--regla); font-size:14px; color:var(--tinta-2); }
.tramo-pie b{ color:var(--tinta); font-weight:600; }
.tramo-pie .malo{ color:var(--peligro); font-weight:600; }
details.t-desc{ margin-top:10px; }
details.t-desc > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:500; color:var(--tinta-2);
}
details.t-desc > summary::-webkit-details-marker{ display:none; }
details.t-desc > summary:hover{ color:var(--tinta); }
details.t-desc > summary .ic{ transition:transform .12s ease; }
details.t-desc[open] > summary .ic{ transform:rotate(180deg); }
.t-desc-cuerpo{ display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:10px 12px; align-items:end; padding:4px 0 2px; }
.desc-gen{ grid-column:1 / -1; font-size:14px; color:var(--tinta-2); line-height:1.5; }
.desc-gen b{ color:var(--tinta); }
.t-desc-cuerpo .campo-check{ grid-column:1 / -1; }

/* accesorios y extras */
details.extras{ margin-top:16px; }
details.extras > summary{ list-style:none; cursor:pointer; }
details.extras > summary::-webkit-details-marker{ display:none; }
details.extras > summary:hover{ background:color-mix(in oklab, var(--tinta) 4%, transparent); }
details.extras[open] > summary{ border-bottom:1px solid var(--regla); }
details.extras[open] .chev{ transform:rotate(180deg); }
.n-tag-extra{ border-style:dashed; }
.n-tag-extra .ic{ width:16px; height:16px; }
.extras-cuerpo{ padding:12px 14px 14px 62px; }
.extras-cuerpo .nota{ margin-bottom:8px; }

/* tablas genéricas (extras, catálogo) */
table.tabla{ width:100%; border-collapse:collapse; margin-bottom:8px; }
.tabla th{ font-family:var(--letra-titulo); font-weight:500; font-size:14px; color:var(--tinta-2); text-align:left; padding:0 6px 6px; border-bottom:1px solid var(--regla-fuerte); white-space:nowrap; }
.tabla td{ padding:6px; border-bottom:1px solid var(--regla); vertical-align:middle; }
.tabla th.der, .tabla td.der{ text-align:right; }
.tabla td.c-quitar{ width:48px; text-align:right; }
.tabla-extras td input.in-num{ width:100px; }
.tabla-extras td.c-cant input{ width:76px; }

.como-calcula{ margin-top:18px; font-size:14px; color:var(--tinta-2); line-height:1.55; }
.como-calcula summary{ cursor:pointer; font-weight:600; color:var(--tinta); min-height:40px; display:inline-flex; align-items:center; }
.como-calcula p{ margin:6px 0; max-width:80ch; }
.como-calcula b{ color:var(--tinta); font-weight:600; }

/* ---------- resumen (total de la obra) ---------- */
.resumen{
  position:sticky; top:16px; background:var(--chapa); border:1px solid var(--regla-fuerte); border-radius:var(--r-plano);
  padding:16px 18px 14px; max-height:calc(100vh - 32px); overflow-y:auto;
}
.resumen-cab{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.resumen h2{ font-size:19px; font-weight:700; }
.resumen-cerrar{ display:none; }
.desglose{ width:100%; border-collapse:collapse; font-size:15px; }
.desglose td{ padding:6px 0; border-bottom:1px solid var(--regla); vertical-align:baseline; }
.desglose .cant{ color:var(--tinta-2); text-align:right; padding-right:10px; white-space:nowrap; font-size:14px; }
.desglose .plata{ text-align:right; font-weight:500; white-space:nowrap; }
.desglose tr.costo td{ border-top:1.5px solid var(--tinta); border-bottom:0; padding-top:9px; font-weight:600; font-size:17px; }
.desglose tr.gan td{ color:var(--tinta-2); border-bottom:0; padding-top:0; }
.precio{ margin-top:10px; padding-top:12px; border-top:1.5px solid var(--tinta); }
.precio-rot{ font-family:var(--letra-titulo); font-weight:600; font-size:17px; }
.precio-num{ font-family:var(--letra-titulo); font-weight:700; font-size:36px; line-height:1.05; color:var(--acento); letter-spacing:-.01em; }
.precio-nota{ font-size:13px; color:var(--tinta-2); margin-top:2px; }
.resumen-acc{ display:grid; gap:8px; margin-top:14px; }
.resumen-acc .btn{ min-height:44px; }
.resumen-mas{ margin-top:10px; font-size:14px; }
.resumen-mas summary{ cursor:pointer; color:var(--tinta-2); font-weight:500; min-height:36px; display:flex; align-items:center; }
.resumen-mas summary:hover{ color:var(--tinta); }
.summary-detail{ display:flex; flex-direction:column; gap:0; }
.d-item{ display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-bottom:1px solid var(--regla); }
.d-item span:first-child{ color:var(--tinta-2); }
.d-item span:last-child{ font-weight:500; white-space:nowrap; }
.corte-lista{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.corte-lista h4{ font-size:15px; font-weight:600; margin:4px 0 2px; }
.corte-barra{ display:flex; height:24px; border-radius:2px; overflow:hidden; background:var(--campo); border:1px solid var(--regla-fuerte); font-size:12px; }
.corte-barra span{ display:flex; align-items:center; justify-content:center; overflow:hidden; white-space:nowrap; padding:0 3px; background:var(--perfil); color:#FFFFFF; border-right:2px solid var(--campo); }
.corte-barra span.empalme{ background:var(--bronce); color:#FFFFFF; }
.corte-barra span.sobra{ background:transparent; color:var(--tinta-2); border-right:0; }
.hecho{ margin-top:12px; font-size:12px; color:var(--tinta-2); }
.total-fijo{ display:none; }
.velo{ position:fixed; inset:0; background:var(--velo); z-index:24; }

/* ---------- Precios y ajustes / Pedido y cortes: hojas ---------- */
.seccion-cab{ display:flex; align-items:baseline; gap:6px 18px; flex-wrap:wrap; padding:4px 0 12px; }
.seccion-cab h1{ font-size:26px; font-weight:700; }
.indice{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.indice a{
  display:inline-flex; align-items:center; min-height:36px; padding:0 10px; border:1px solid var(--regla-fuerte); border-radius:var(--r-campo);
  color:var(--tinta); text-decoration:none; font-size:14px; font-weight:500; background:var(--chapa);
}
.indice a:hover{ border-color:var(--tinta); }
.hoja{ background:var(--chapa); border:1px solid var(--regla-fuerte); border-radius:var(--r-plano); margin-bottom:16px; scroll-margin-top:12px; }
.hoja-cab{ padding:14px 16px 12px; border-bottom:1px solid var(--regla); }
/* 2.9: secciones plegables de Precios y ajustes */
details.plegable > summary.hoja-cab{ list-style:none; cursor:pointer; position:relative; padding-right:48px; }
details.plegable > summary.hoja-cab::-webkit-details-marker{ display:none; }
details.plegable > summary.hoja-cab:hover{ background:color-mix(in oklab, var(--tinta) 4%, transparent); }
details.plegable > summary.hoja-cab:focus-visible{ outline:2px solid var(--foco); outline-offset:-2px; }
details.plegable > summary .chev{ position:absolute; right:16px; top:18px; color:var(--tinta-2); transition:transform .12s ease; }
details.plegable[open] > summary .chev{ transform:rotate(180deg); }
details.plegable:not([open]) > summary.hoja-cab{ border-bottom:0; }
details.plegable:not([open]) .hoja-ayuda, details.plegable[open] .hoja-resumen{ display:none; }
.hoja-resumen{ margin-top:4px; font-size:14px; color:var(--tinta-2); }
.hoja-resumen.falta{ color:var(--bronce); font-weight:600; }
.hoja-resumen:empty{ display:none; }
.t-cant{ flex:none; font-weight:700; color:var(--marca, var(--tinta)); margin-right:6px; }
.hoja-cab h2{ font-size:20px; font-weight:700; }
.hoja-cab-acc{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px 16px; flex-wrap:wrap; }
.hoja-cab-acc > div:first-child{ flex:1 1 260px; min-width:0; }
.hoja-ayuda{ margin-top:3px; font-size:14px; color:var(--tinta-2); }
.ajuste-impacto{ margin-top:6px; font-size:14px; font-weight:600; color:var(--tinta); }
.ajuste-impacto:empty{ display:none; }
.hoja-cuerpo{ padding:14px 16px 16px; min-width:0; }
.campos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap:12px 14px; align-items:start; }
.campos-sep{ margin-top:14px; padding-top:14px; border-top:1px solid var(--regla); }
.field-ancho{ grid-column:span 2; }
.field-todo{ grid-column:1 / -1; }
.field-check{ justify-content:center; }
.field-texto{ margin-top:12px; }
.sub{ font-size:17px; font-weight:600; margin:16px 0 8px; }
.hoja-cuerpo > .sub:first-child, .puertas-cuerpo .sub:first-child{ margin-top:0; }
.color-fila{ display:flex; align-items:center; gap:10px; }
.empresa-cuerpo{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width: 1100px){ .empresa-cuerpo{ grid-template-columns:minmax(0,3fr) minmax(0,2fr); } }
.banner-ajuste{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.banner-preview{ border:1.5px dashed var(--borde-campo); border-radius:var(--r-campo); min-height:84px; display:flex; align-items:center; justify-content:center; background:var(--campo); overflow:hidden; }
.banner-preview img{ display:block; width:100%; max-height:150px; object-fit:contain; }
.banner-vacio{ font-size:14px; color:var(--tinta-2); padding:12px; text-align:center; }
.banner-acciones{ display:flex; gap:8px; flex-wrap:wrap; }
.catalogo{ margin-top:16px; }
.catalogo-table td input.in-num{ width:130px; }
.desc-explica{ margin:0 0 12px; padding-left:18px; font-size:14px; color:var(--tinta-2); line-height:1.5; }
.desc-explica b{ color:var(--tinta); font-weight:600; }
.desc-grid{ display:flex; flex-direction:column; border-top:1px solid var(--regla); margin-bottom:6px; }
.desc-fila{ display:grid; grid-template-columns:150px repeat(4, minmax(0,1fr)); gap:8px 12px; align-items:end; padding:10px 0; border-bottom:1px solid var(--regla); }
.desc-fila.desc-fila-3{ grid-template-columns:150px repeat(3, minmax(0,1fr)); }
.desc-fila.desc-fila-m{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.desc-sis{ font-weight:600; align-self:center; }
.desc-campo{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.desc-lbl{ font-size:13px; color:var(--tinta-2); font-weight:500; }
.desc-ejemplo{ display:flex; flex-direction:column; gap:3px; margin:12px 0 8px; padding:10px 12px; border-radius:var(--r-campo); background:var(--campo); border:1px solid var(--regla); font-size:14px; }
.desc-ej-tit{ font-weight:600; }
.desc-ej{ color:var(--tinta-2); }
.desc-ej b{ color:var(--tinta); font-weight:600; }
.desc-ej.principal{ color:var(--tinta); }
.puertas-cuerpo{ display:grid; grid-template-columns:1fr; gap:18px 28px; }
@media (min-width: 1200px){ .puertas-cuerpo{ grid-template-columns:minmax(0,3fr) minmax(0,2fr); } }
.puertas-cuerpo > div{ min-width:0; }
.puertas-cuerpo .nota{ margin-bottom:10px; font-size:14px; }
.kits-lista{ display:flex; flex-direction:column; border-top:1px solid var(--regla); }
details.kit{ border-bottom:1px solid var(--regla); }
details.kit summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px 12px; min-height:48px; padding:4px 4px; font-weight:600; }
details.kit summary::-webkit-details-marker{ display:none; }
details.kit summary:hover{ background:color-mix(in oklab, var(--tinta) 4%, transparent); }
.kit-nom{ flex:1 1 auto; min-width:0; }
.kit-falta{ font-size:13px; font-weight:600; color:var(--bronce); }
.kit-falta:empty{ display:none; }
.kit-ej{ font-weight:600; }
details.kit summary .chev{ color:var(--tinta-2); transition:transform .12s ease; }
details.kit[open] summary .chev{ transform:rotate(180deg); }
.kit-cuerpo{ padding:0 4px 12px; }
.kit-ayuda, .kit-vacio{ margin:4px 0 8px; font-size:14px; color:var(--tinta-2); line-height:1.45; }
.kit-fila{
  position:relative; display:grid; gap:8px 10px; align-items:end; padding:8px 0; border-top:1px solid var(--regla);
  grid-template-columns:minmax(0,1.8fr) minmax(60px,.55fr) minmax(150px,1.3fr) minmax(90px,.9fr) minmax(110px,1.1fr) 44px;
}
.mini{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.kit-sub-lbl{ font-size:13px; color:var(--tinta-2); font-weight:500; }
.kit-sub{ font-weight:600; min-height:40px; display:flex; align-items:center; white-space:nowrap; }
.kit-pie{ display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; margin-top:8px; }
.kit-ejemplo{ font-size:14px; color:var(--tinta-2); }
.kit-ejemplo b{ color:var(--tinta); font-weight:600; }

/* pedido de vidrios */
.ped-acciones{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ped-vacio{ border:1.5px dashed var(--borde-campo); border-radius:var(--r-campo); padding:16px; color:var(--tinta-2); font-size:14px; background:var(--campo); }
.ped-vacio p{ margin:0 0 10px; }
.ped-vacio p:last-child{ margin:0; }
.ped-vacio b{ color:var(--tinta); }
table.ped-tabla{ width:100%; border-collapse:collapse; }
.ped-tabla th{ font-family:var(--letra-titulo); font-weight:500; font-size:14px; color:var(--tinta-2); text-align:left; padding:0 8px 6px; border-bottom:1px solid var(--regla-fuerte); white-space:nowrap; }
.ped-tabla td{ padding:8px; border-bottom:1px solid var(--regla); vertical-align:top; }
.ped-tabla .num{ text-align:right; }
.ped-tabla td.c-cant, .ped-tabla td.c-med{ font-weight:600; font-size:16px; }
.ped-tabla td.c-donde{ color:var(--tinta-2); font-size:14px; }
.ped-tabla td.c-fig{ font-size:14px; }
.ped-nada{ color:var(--tinta-2); }
.ped-tabla tr.ped-vidrio th{
  padding:14px 8px 6px; font-size:17px; font-weight:600; color:var(--tinta); border-bottom:1.5px solid var(--tinta); white-space:normal;
}
.ped-vidrio-tot{ float:right; color:var(--tinta-2); font-weight:500; font-size:15px; font-family:var(--letra); }
.ped-tabla tr.ped-total td{ font-weight:600; border-bottom:0; font-size:14px; color:var(--tinta); }
.ped-notas{ margin-top:10px; font-size:13px; color:var(--tinta-2); line-height:1.5; }
.ped-notas b{ color:var(--tinta); font-weight:600; }
.ped-copia{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.ped-copia label{ font-size:14px; color:var(--bronce); font-weight:600; }
.ped-copia textarea{ font-size:14px; }

/* planchas */
.pl-fila{
  position:relative; display:grid; grid-template-columns:30px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr) 44px;
  gap:8px 12px; align-items:end; padding:10px 0; border-bottom:1px solid var(--regla);
}
#planchasLista{ border-top:1px solid var(--regla); }
.pl-num{ align-self:center; margin-top:18px; }
.pl-stock-txt{ font-size:13px; color:var(--tinta-2); }
.pl-agregar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0 4px; }
.pl-agregar .field-label{ margin-right:4px; }

/* plan de corte */
.op-calculando{ opacity:.5; }
.op-datos{ display:flex; flex-wrap:wrap; gap:4px 26px; margin:0 0 12px; padding:10px 0; border-top:1px solid var(--regla); border-bottom:1px solid var(--regla); }
.op-dato{ display:flex; align-items:baseline; gap:8px; font-size:14px; color:var(--tinta-2); }
.op-dato b{ font-size:17px; color:var(--tinta); font-weight:600; }
.op-dato.malo, .op-dato.malo b{ color:var(--peligro); }
.op-grupo{ border-top:1px solid var(--regla-fuerte); padding-top:14px; margin-top:16px; }
.op-grupo:first-of-type{ border-top:0; margin-top:4px; padding-top:0; }
.op-grupo-tit{ font-size:18px; font-weight:700; margin-bottom:4px; }
.op-resumen{ display:flex; flex-wrap:wrap; gap:4px 22px; font-size:14px; color:var(--tinta-2); margin-bottom:12px; }
.op-resumen b{ color:var(--tinta); font-weight:600; }
.op-sin{ margin:0 0 12px; padding:10px 14px; border-radius:var(--r-campo); border:1.5px solid var(--peligro); background:var(--peligro-suave); font-size:14px; }
.op-sin > b{ color:var(--peligro); font-size:15px; display:flex; align-items:center; gap:8px; }
.op-sin ul{ margin:6px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:4px; }
.op-motivo{ display:block; color:var(--peligro); font-weight:600; font-size:14px; }
.op-planchas{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap:16px; }
.op-plancha{ margin:0; border:1px solid var(--regla-fuerte); border-radius:var(--r-plano); padding:10px 12px 12px; background:var(--campo); min-width:0; }
.op-plancha figcaption{ font-size:15px; margin-bottom:6px; display:flex; flex-wrap:wrap; gap:2px 12px; align-items:baseline; }
.op-plancha figcaption b{ font-family:var(--letra-titulo); font-weight:700; font-size:16px; }
.op-plancha figcaption span{ color:var(--tinta-2); }
.op-pct{ font-weight:600; color:var(--tinta) !important; }
.op-dibujo{ color:var(--tinta); line-height:0; }
.op-dibujo svg{ display:block; width:100%; height:auto; }
.op-sobrantes{ font-size:14px; color:var(--tinta-2); margin-top:8px; }
.op-sobrantes b{ color:var(--tinta); font-weight:600; }
.op-piezas{ margin-top:6px; font-size:14px; }
.op-piezas summary{ cursor:pointer; color:var(--tinta); font-weight:600; min-height:36px; display:flex; align-items:center; }
.op-piezas ol{ margin:4px 0 0; padding-left:22px; display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:2px 16px; color:var(--tinta-2); }
.op-piezas ol b{ color:var(--tinta); font-weight:600; }

/* ---------- diálogos ---------- */
.modal-overlay{ position:fixed; inset:0; background:var(--velo); z-index:50; display:none; align-items:flex-start; justify-content:center; padding:4vh 16px; overflow-y:auto; }
.modal-overlay.open{ display:flex; }
.modal-box{ background:var(--chapa); color:var(--tinta); border:1px solid var(--regla-fuerte); border-radius:var(--r-plano); max-width:820px; width:100%; box-shadow:var(--sombra); display:flex; flex-direction:column; }
.modal-chico{ max-width:440px; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 8px 8px 20px; border-bottom:1px solid var(--regla); }
.modal-head h2{ font-size:20px; font-weight:700; }
.modal-close{ width:44px; height:44px; }
.modal-body{ padding:16px 20px; }
.modal-actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; padding:12px 20px; border-top:1px solid var(--regla); background:var(--chapa); border-radius:0 0 var(--r-plano) var(--r-plano); }
.modal-presu .modal-actions{ position:sticky; bottom:0; }
.confirm-msg{ font-size:16px; line-height:1.5; }
#confirmOverlay{ z-index:70; }

/* presupuesto: controles y documento */
.presu-controls{ margin-bottom:16px; border:1px solid var(--regla); border-radius:var(--r-plano); background:var(--campo); }
.presu-controls > summary{ list-style:none; cursor:pointer; min-height:44px; display:flex; align-items:center; padding:0 12px; font-weight:600; }
.presu-controls > summary::-webkit-details-marker{ display:none; }
.presu-controls[open] > summary{ border-bottom:1px solid var(--regla); }
.presu-controls .campos{ padding:12px; }
.presu-marca-row{ padding:0 12px 12px; }
.presu-doc{ color:var(--tinta); background:var(--campo); border:1px solid var(--regla); border-radius:var(--r-plano); padding:20px; }
.presu-banner-wrap{ margin:0 0 16px; line-height:0; }
.presu-banner{ width:100%; display:block; max-height:150px; object-fit:contain; object-position:left center; }
.presu-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px 16px; flex-wrap:wrap; }
.presu-header h3{ font-size:24px; font-weight:700; color:var(--acento); }
.presu-empresa-sub{ color:var(--tinta-2); font-size:15px; margin-top:2px; }
.presu-meta{ text-align:right; font-size:14px; color:var(--tinta-2); display:flex; flex-direction:column; gap:1px; }
.presu-meta b{ color:var(--tinta); font-size:15px; }
.presu-rule{ height:0; border:0; border-top:2px solid var(--marca); margin:12px 0 16px; }
.presu-cliente-box{ display:flex; flex-wrap:wrap; gap:4px 26px; margin:0 0 16px; font-size:15px; }
.presu-cliente-box .d-item{ border:0; padding:0; gap:6px; justify-content:flex-start; }
.presu-cliente-box .d-item span:last-child{ font-weight:600; }
.presu-table-wrap{ margin-bottom:16px; }
table.presu-table{ width:100%; border-collapse:collapse; font-size:15px; }
.presu-table th{ font-family:var(--letra-titulo); font-weight:500; font-size:14px; color:var(--tinta-2); text-align:left; padding:0 8px 6px; border-bottom:1.5px solid var(--tinta); }
.presu-table td{ padding:10px 8px; border-bottom:1px solid var(--regla); vertical-align:top; }
.presu-table td.num, .presu-table th.num{ text-align:right; }
.presu-item-name{ display:flex; align-items:flex-start; gap:10px; font-weight:600; }
.presu-item-sub{ font-weight:400; font-size:14px; color:var(--tinta-2); margin-top:2px; }
/* 2.8.0: un nombre de tramo largo y sin espacios se corta en vez de sacar el presupuesto de la pantalla */
.presu-item-name > div, .presu-item-sub, .presu-table td:first-child, .presu-empresa-sub, .presu-cliente-box .d-item span{ overflow-wrap:anywhere; min-width:0; }
.presu-medidas{ font-size:14px; color:var(--tinta-2); }
.presu-medidas-movil{ display:none; font-weight:400; font-size:14px; color:var(--tinta-2); margin-top:2px; }
.presu-thumb{ width:44px; height:44px; object-fit:cover; border-radius:2px; border:1px solid var(--regla); flex:none; }
.presu-croquis-row td{ padding-top:0; }
.presu-croquis{ color:var(--tinta); max-width:560px; }
.presu-croquis svg{ display:block; width:100%; height:auto; max-height:260px; }
.presu-totales{ display:flex; flex-direction:column; gap:6px; max-width:340px; margin-left:auto; }
.presu-totales .row{ display:flex; justify-content:space-between; gap:12px; font-size:15px; }
.presu-totales .row span:last-child{ font-weight:500; white-space:nowrap; }
.presu-totales .row.sub{ border-top:1px solid var(--regla); padding-top:6px; }
.presu-totales .row.sub span{ color:var(--tinta-2); }
.presu-totales .row.total{ font-family:var(--letra-titulo); font-size:22px; font-weight:700; border-top:2px solid var(--marca); padding-top:8px; margin-top:4px; color:var(--acento); }
.presu-iva-leyenda{ text-align:right; font-size:13px; color:var(--tinta-2); }
.presu-anticipo{ text-align:right; font-size:15px; font-weight:600; margin-top:6px; }
.campo-par{ display:flex; gap:6px; }
.campo-par .in-num{ flex:1 1 auto; min-width:0; }
.campo-par select{ flex:0 0 auto; width:64px; }
.presu-observaciones{ margin-top:20px; padding-top:12px; border-top:1px solid var(--regla); }
.presu-observaciones h4{ font-size:16px; font-weight:600; margin-bottom:4px; }
.presu-observaciones p{ font-size:14px; line-height:1.6; white-space:pre-wrap; }
.presu-pie{ margin-top:20px; padding-top:10px; border-top:2px solid var(--marca); font-size:13px; color:var(--tinta-2); display:flex; flex-direction:column; gap:2px; }
.presu-pie b{ color:var(--tinta); }

/* mis proyectos */
.proyecto-guardar-row{ display:flex; gap:8px; }
.proyecto-guardar-row input{ flex:1 1 auto; }
.proyectos-lista{ display:flex; flex-direction:column; margin:16px 0 10px; border-top:1px solid var(--regla); max-height:46vh; overflow-y:auto; }
.proyecto-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0 8px 10px; border-bottom:1px solid var(--regla); }
.proyecto-item.actual{ background:var(--acento-suave); }
.proyecto-item .info{ min-width:0; }
.proyecto-item .nombre{ font-weight:600; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.proyecto-item .meta{ font-size:14px; color:var(--tinta-2); margin-top:1px; }
.proyecto-item .acciones{ display:flex; gap:4px; flex:none; }
.proyectos-vacio{ color:var(--tinta-2); font-size:14px; padding:16px 0; }

/* avisos que se van solos */
.toast-stack{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:max-content; max-width:92vw; }
.toast{
  pointer-events:auto; font-size:15px; line-height:1.45; padding:10px 16px; border-radius:var(--r-campo);
  background:var(--tinta); color:var(--chapa); box-shadow:var(--sombra); animation:toast-in .18s ease-out; border-left:0;
}
.toast.error{ background:var(--peligro-suave); color:var(--tinta); border:1.5px solid var(--peligro); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ---------- compu angosta ---------- */
@media (max-width: 1180px) and (min-width: 761px){
  .pantalla{ grid-template-columns:minmax(0,1fr) 260px; padding:16px 16px 32px; gap:16px; }
  .barra-in{ padding:0 16px; gap:16px; }
  .fila-t{ grid-template-columns:34px minmax(0,1fr) minmax(0,1fr) 108px 132px; }
  .fila-t .c-tipo, .fila-t .c-vidrio{ display:none; }
  .precio-num{ font-size:30px; }
  .btn-barra .texto{ display:none; }
  .btn-barra:not(.solo-ic){ width:40px; padding:0; justify-content:center; }
  .tramo-cuerpo{ padding-left:14px; }
  .extras-cuerpo{ padding-left:14px; }
}

/* ---------- celular ---------- */
@media (max-width: 760px){
  /* aviso de precios: una línea con la cantidad y el botón; el detalle se despliega al tocar */
  #avisoPrecios{ flex-wrap:nowrap; gap:8px; padding:6px 8px 6px 12px; margin-bottom:10px; }
  #avisoPrecios > .ic{ display:none; }
  .aviso-ver{ display:flex; align-items:center; gap:4px; flex:1 1 auto; min-width:0; min-height:44px; padding:0; border:0; background:none; color:var(--bronce); font-weight:600; text-align:left; cursor:pointer; }
  .aviso-ver .ic{ transition:transform .12s ease; }
  .aviso-ver[aria-expanded="true"] .ic{ transform:rotate(180deg); }
  #avisoPrecios .aviso-texto{ display:none; }
  #avisoPrecios.abierto{ flex-wrap:wrap; }
  #avisoPrecios.abierto .aviso-texto{ display:block; order:3; flex:1 1 100%; }
  #avisoPrecios .btn{ flex:none; }
  body{ padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
  .barra-in{ flex-wrap:wrap; gap:0; padding:0 8px 0 12px; }
  .marca{ min-height:52px; font-size:19px; flex:1 1 auto; }
  .barra-der{ min-height:52px; gap:4px; }
  .btn-barra .texto{ display:none; }
  .btn-barra, .btn-barra.solo-ic{ width:44px; min-height:44px; padding:0; justify-content:center; }
  .solapas{ order:3; width:calc(100% + 20px); margin:0 -8px 0 -12px; padding:0 4px; border-top:1px solid color-mix(in oklab, var(--sobre-marca) 25%, transparent); justify-content:space-between; }
  .solapa{ padding:0 6px; font-size:16px; flex:1 1 auto; }
  .pantalla{ display:block; padding:10px 12px 24px; }
  .obra-cab{ padding:2px 0 10px; }
  .obra-cab h1, .seccion-cab h1{ font-size:22px; }
  .obra-acciones .btn:not(.btn-plano){ display:none; }
  /* 2.6.1: cuatro botones (frente, mampara, espejo y diseño) en dos filas de dos */
  .obra-pie-acc{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-top:10px; }
  .obra-pie-acc .btn{ min-height:48px; min-width:0; }
  .cols{ display:none; }
  .fila-t{ grid-template-columns:30px minmax(0,1fr) auto 44px; column-gap:10px; padding:0 4px 0 10px; min-height:58px; }
  .fila-t .c-tipo, .fila-t .c-medida, .fila-t .c-vidrio{ display:none; }
  .t-sub{ display:block; font-size:13px; color:var(--tinta-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tramo.abierto > .tramo-cab{ grid-template-columns:30px minmax(0,1fr) auto; padding-right:10px; padding-top:6px; padding-bottom:4px; }
  .tramo.abierto > .tramo-cab .t-acc{ grid-column:1 / -1; justify-content:flex-start; margin-left:30px; gap:4px; }
  .ic-btn{ width:44px; height:44px; }
  .t-nombre-in{ font-size:19px; }
  .tramo-cuerpo{ padding:0 10px 14px; }
  /* 2.8.0: primero el croquis a todo el ancho, después las medidas (ancho × alto y Paños), el diseño, el resto y los paños */
  .tramo-cuerpo .t-ajustes{ display:contents; }
  .tramo-cuerpo .t-aj-medidas{ order:1; padding:10px 0 12px; border-bottom:1px solid var(--regla); }
  .tramo-cuerpo .mp-zona{ order:2; margin-top:0; border-top:0; border-bottom:1px solid var(--regla); }
  .tramo-cuerpo .t-aj-resto{ order:3; margin-top:12px; padding-top:0; }
  .croquis-zona{ padding-top:4px; }
  .t-aj-medidas, .t-aj-resto{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px 12px; align-items:start; }
  .t-aj-medidas > *, .t-aj-resto > *{ grid-column:span 2; }
  .t-ajustes .c-m3{ grid-column:span 3; }
  .t-ajustes .c-m4{ grid-column:span 4; }
  .t-ajustes .c-m6{ grid-column:1 / -1; }
  .t-ajustes .t-medidas{ grid-column:span 4; }
  .t-ajustes .t-medidas.t-medidas-3{ grid-column:1 / -1; }
  .t-x{ height:44px; }
  input[type="text"], input.in-num, input[type="tel"], input[type="email"], select, .interruptor{ height:44px; }
  .btn{ min-height:44px; }
  .mp-picker{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  table.panos, .panos-pie .solo-compu{ display:none; }
  .lista-panos{ display:block; }
  .solo-celu{ display:flex !important; }
  .solo-compu{ display:none !important; }
  .panos-acc .btn{ flex:1; }
  .pano-det-cuerpo{ grid-template-columns:1fr; }
  .croquis-wrap svg{ max-height:340px; }
  .extras-cuerpo{ padding:12px 10px 14px; }
  details.extras .extras-resumen{ display:none; }
  details.extras > summary.fila-t{ grid-template-columns:30px minmax(0,1fr) auto 44px; }
  .tabla-extras thead{ display:none; }
  .tabla-extras, .tabla-extras tbody{ display:block; }
  .tabla-extras tr{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px; gap:6px 8px; padding:8px 0; border-bottom:1px solid var(--regla); }
  .tabla-extras td{ padding:0; border:0; }
  .tabla-extras td.c-nom{ grid-column:1 / -1; }
  .tabla-extras td.c-tot{ grid-column:1 / 3; text-align:left; color:var(--tinta-2); }
  .tabla-extras td.c-quitar{ grid-row:3; grid-column:3; }
  .tabla-extras td input.in-num, .tabla-extras td.c-cant input{ width:100%; }

  /* total siempre a la vista: barra fija en la zona del pulgar */
  .resumen{
    display:none; position:fixed; left:0; right:0; bottom:calc(68px + env(safe-area-inset-bottom, 0px)); top:auto; z-index:26;
    max-height:min(72vh, 620px); border-radius:var(--r-plano) var(--r-plano) 0 0; border-bottom:0; box-shadow:var(--sombra); padding:12px 14px 14px;
  }
  body.desglose-abierto .resumen{ display:block; }
  .resumen-cerrar{ display:inline-grid; }
  .total-fijo{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:27;
    background:var(--chapa); border-top:1.5px solid var(--tinta); box-shadow:0 -2px 10px rgba(20,24,26,.12);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .tf-boton{
    display:grid; grid-template-columns:minmax(0,1fr) auto 28px; align-items:center; gap:10px; width:100%; min-height:68px;
    padding:8px 10px 8px 14px; background:none; border:0; cursor:pointer; text-align:left;
  }
  .tf-costo{ font-size:13px; color:var(--tinta-2); line-height:1.25; min-width:0; }
  .tf-costo b{ display:block; font-size:16px; color:var(--tinta); font-weight:600; }
  .tf-precio{ text-align:right; line-height:1.1; }
  .tf-precio span{ display:block; font-family:var(--letra-titulo); font-weight:600; font-size:14px; }
  .tf-precio b{ font-family:var(--letra-titulo); font-weight:700; font-size:28px; color:var(--acento); }
  .tf-chev{ color:var(--tinta-2); transition:transform .15s ease; }
  .tf-boton[aria-expanded="true"] .tf-chev{ transform:rotate(180deg); }

  .indice{ flex-wrap:nowrap; overflow-x:auto; margin:0 -12px 14px; padding:0 12px 4px; }
  .indice a{ flex:none; min-height:44px; }
  .hoja-cab{ padding:12px 12px 10px; }
  .hoja-cuerpo{ padding:12px; }
  .campos{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 10px; }
  .field-ancho, .field-check{ grid-column:1 / -1; }
  .desc-fila, .desc-fila.desc-fila-3{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .desc-fila.desc-fila-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .desc-fila.desc-fila-m{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .desc-sis{ grid-column:1 / -1; }
  .kit-fila{ grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr) minmax(0,1fr); padding-right:0; }
  .kit-c-nom{ grid-column:1 / -1; padding-right:48px; }
  .kit-c-cat{ padding-right:48px; }
  .kit-c-sub{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:8px; }
  .kit-sub{ min-height:0; }
  .kit-del{ position:absolute; top:28px; right:0; }
  .catalogo-table td input.in-num{ width:110px; }
  .ped-acciones{ width:100%; }
  .ped-acciones .btn{ flex:1 1 auto; }
  .ped-tabla thead{ display:none; }
  .ped-tabla, .ped-tabla tbody{ display:block; width:100%; }
  .ped-tabla tr.ped-vidrio, .ped-tabla tr.ped-vidrio th{ display:block; }
  .ped-tabla tr.ped-vidrio th{ padding:14px 2px 6px; }
  .ped-vidrio-tot{ float:none; display:block; }
  .ped-tabla tr.ped-fila{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:2px 12px; padding:8px 2px; border-bottom:1px solid var(--regla); }
  .ped-tabla tr.ped-fila td{ padding:0; border:0; text-align:left; min-width:0; }
  .ped-tabla tr.ped-fila td.c-cant{ grid-row:1 / span 2; font-size:20px; }
  .ped-tabla tr.ped-fila td.c-cant::after{ content:" ×"; color:var(--tinta-2); font-weight:400; }
  .ped-tabla tr.ped-fila td.c-fig, .ped-tabla tr.ped-fila td.c-donde{ grid-column:2 / -1; white-space:normal; }
  .ped-tabla tr.ped-fila td.c-m2{ grid-column:3; grid-row:1; text-align:right; color:var(--tinta-2); }
  .ped-tabla tr.ped-total{ display:flex; justify-content:space-between; padding:6px 2px; }
  .ped-tabla tr.ped-total td{ padding:0; }
  .pl-fila{ grid-template-columns:repeat(3, minmax(0,1fr)); padding-top:40px; }
  .pl-num{ position:absolute; top:10px; left:0; margin:0; }
  .pl-del{ position:absolute; top:2px; right:0; }
  .pl-vidrio{ grid-column:span 2; }

  .modal-overlay{ padding:0; align-items:stretch; }
  .modal-box{ border-radius:0; border:0; min-height:100%; }
  .modal-chico{ min-height:0; margin:auto 12px; border-radius:var(--r-plano); border:1px solid var(--regla-fuerte); }
  .modal-body{ padding:12px; flex:1 1 auto; }
  .modal-actions{ padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-radius:0; }
  .modal-presu .modal-actions{ display:grid; grid-template-columns:1fr 1fr; }
  .presu-doc{ padding:14px 12px; }
  .presu-meta{ text-align:left; }
  .presu-table th:nth-child(2), .presu-table td.presu-medidas{ display:none; }
  .presu-medidas-movil{ display:block; }
  .presu-table td, .presu-table th{ padding-left:4px; padding-right:4px; }
  .presu-totales{ max-width:none; }
}
@media (max-width: 370px){
  .solapa-larga{ display:none; }
  .solapa-corta{ display:inline; }
}
@media (min-width: 1001px){ .resumen-cerrar{ display:none !important; } .velo{ display:none !important; } }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

@media print{
  /* el presupuesto impreso sale siempre en claro, aunque la app esté en oscuro */
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]){
    --taller:#FFFFFF; --chapa:#FFFFFF; --campo:#FFFFFF; --tinta:#23272A; --tinta-2:#4A5153; --regla:#C5C8C3; --regla-fuerte:#9EA4A2;
    --canto:#4F5A5E; --cara:#C4D9D6; --perfil:#5B6264; --bronce:#8A5A2B; --acento:var(--acento-l); color-scheme:light;
  }
  body{ background:#fff; padding:0; }
  body > *:not(.modal-overlay){ display:none !important; }
  .modal-overlay{ position:static; background:none; padding:0; display:block !important; }
  .modal-overlay:not(.open) .modal-box{ display:none; }
  .modal-box{ box-shadow:none; max-width:none; border:0; }
  .presu-doc{ border:0; padding:0; }
  .no-print, .modal-actions, .modal-close{ display:none !important; }
}

/* pedido: en la compu ancho y alto van en columnas; en el celular, juntos */
.ped-tabla td.c-movil, .solo-celu-txt{ display:none; }
@media (max-width: 760px){
  .ped-tabla tr.ped-fila td.c-ancho, .ped-tabla tr.ped-fila td.c-alto{ display:none; }
  .ped-tabla tr.ped-fila td.c-movil{ display:block; grid-column:2; grid-row:1; font-size:17px; }
  .solo-celu-txt{ display:inline; }
}

/* textos de datos que pueden ser largos: cifras parejas pero con corte de renglón */
.tramo-pie.num, .det-datos.num, p.num, .op-sobrantes b{ white-space:normal; }
@media (max-width: 1400px) and (min-width: 761px){
  .fila-t{ grid-template-columns:34px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 108px 172px; }
  .fila-t .c-tipo{ display:none; }
  .t-sub2{ display:block; font-size:13px; color:var(--tinta-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tramo.abierto .t-sub2{ display:none; }
}
@media (max-width: 1180px) and (min-width: 761px){
  .fila-t{ grid-template-columns:34px minmax(0,1.4fr) minmax(0,1fr) 108px 172px; }
}
@media (max-width: 760px){
  input[type="color"]{ height:44px; }
  .t-desc > summary, .como-calcula summary, .resumen-mas summary, .op-piezas summary, .presu-controls > summary, details.kit summary{ min-height:44px; }
  .link-btn{ display:inline-flex; align-items:center; min-height:44px; }
  .ped-tabla tr.ped-fila td.c-fig.vacio{ display:none; }
}
.catalogo-table{ max-width:640px; }
.ped-tabla th.num{ text-align:right; }
.pl-fila{ align-items:start; }
.pl-num{ align-self:start; margin-top:30px; }
.pl-del{ align-self:start; margin-top:22px; }
@media (max-width: 760px){ .pl-num{ margin-top:0; } .pl-del{ margin-top:0; } }
#presupuestoOverlay{ padding-bottom:0; }
#presupuestoOverlay .modal-box{ margin-bottom:0; }

/* ---------- 2.5.0, segunda vuelta ---------- */
/* la barra de la marca se distingue del fondo aunque la marca sea oscura */
.barra{ border-bottom:1px solid color-mix(in oklab, var(--sobre-marca) 22%, transparent); }
/* tema oscuro: el botón principal va relleno con la marca y un borde claro, nunca gris lavado */
:root[data-theme="dark"] .btn-prin{ background:var(--marca); border-color:var(--acento); color:var(--sobre-marca); }
:root[data-theme="dark"] .btn-prin:hover{ background:color-mix(in oklab, var(--marca) 80%, white); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn-prin{ background:var(--marca); border-color:var(--acento); color:var(--sobre-marca); }
  :root:not([data-theme="light"]) .btn-prin:hover{ background:color-mix(in oklab, var(--marca) 80%, white); }
}
/* el croquis al lado de la tabla de paños desde unos 820 px de tramo */
.panos td, .panos th{ padding-left:4px; padding-right:4px; }
.panos .celda-in{ width:70px !important; }
.fig{ max-width:150px; }
/* mampara: el dibujo más grande */
.croquis-wrap.es-mampara svg{ max-height:480px; }
@media (max-width: 760px){ .croquis-wrap.es-mampara svg{ max-height:400px; } }
/* corte de la U: texto con contraste en los dos temas */
.corte-barra span{ color:var(--chapa); text-overflow:clip; }
.corte-barra span.empalme{ color:var(--chapa); }
/* el aviso de "excede" en la fila del tramo se corta si no entra */
.t-nom-linea .excede-marca{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
/* planchas: colores del tema y del vidrio */
.op-dibujo .op-pieza{ fill:var(--cara); stroke:var(--canto); }
.op-dibujo .op-plancha-rect{ fill:var(--campo); }
.op-dibujo .op-sobrante{ stroke:var(--regla-fuerte); }
.op-dibujo svg text{ font-family:var(--letra); }
/* Precios y ajustes: los kits a lo ancho; las luces al lado recién con mucho espacio */
@media (min-width: 1200px){ .puertas-cuerpo{ grid-template-columns:1fr; } }
@media (min-width: 1500px){ .puertas-cuerpo{ grid-template-columns:minmax(0,3fr) minmax(0,2fr); } }
/* vista previa del presupuesto: siempre en claro, como el papel */
.presu-doc{
  --taller:#E3E4E0; --chapa:#F4F4F1; --campo:#FFFFFF; --tinta:#23272A; --tinta-2:#4A5153; --regla:#C5C8C3; --regla-fuerte:#9EA4A2;
  --canto:#3B7A68; --cara:#D3E6DE; --brillo:rgba(255,255,255,.75); --perfil:#5B6264; --bronce:#8A5A2B; --acento:var(--acento-l);
  --peligro:#B3261E; --peligro-suave:#F7DEDB;
  color-scheme:light; background:#FFFFFF; color:#23272A; border-color:#C5C8C3;
}
/* avisos: abajo, uno a la vez, encima de la barra del total */
.toast-stack{ top:auto; bottom:24px; }
.t-acc-pie{ display:none; }
@media (max-width: 760px){
  .toast-stack{ bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }
  /* con banner, la marca va en un solo renglón: el banner ya trae el nombre */
  .marca-banner:not([hidden]) ~ .marca-nombre{ display:none; }
  .marca-banner img{ max-width:180px; }
  /* barra fija: precio, desglose y el botón del presupuesto a mano */
  .total-fijo{ display:flex; align-items:center; gap:8px; padding-right:10px; }
  .tf-boton{ flex:1 1 auto; min-width:0; grid-template-columns:minmax(0,1fr) 24px; gap:6px; padding:6px 0 6px 14px; min-height:72px; }
  .tf-precio{ text-align:left; min-width:0; }
  .tf-precio > span:first-child{ font-size:13px; }
  .tf-precio b{ font-size:26px; display:block; }
  .tf-costo{ display:block; font-size:13px; color:var(--tinta-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--letra); }
  .tf-costo b{ display:inline; font-size:13px; font-weight:600; color:var(--tinta); }
  .tf-presu{ flex:none; min-height:48px; padding:0 12px; }
  body{ padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px)); }
  .resumen{ bottom:calc(74px + env(safe-area-inset-bottom, 0px)); }
  /* el encabezado del tramo abierto queda arriba al bajar; foto, duplicar y eliminar van al pie */
  .tramo.abierto > .tramo-cab{ position:sticky; top:0; z-index:6; background:var(--chapa); border-bottom:1px solid var(--regla); grid-template-columns:30px minmax(0,1fr) auto 44px; }
  .tramo.abierto > .tramo-cab .t-acc{ grid-column:auto; margin-left:0; }
  .tramo.abierto > .tramo-cab .t-acc > :not(:last-child){ display:none; }
  .t-acc-pie{ display:flex; flex-wrap:wrap; gap:4px 8px; order:5; margin-top:8px; padding-top:8px; border-top:1px solid var(--regla); }
}
@media (min-width: 1001px){ .tf-presu{ display:none; } }
/* con un diálogo abierto, el aviso va arriba de su barra de botones */
body.con-modal .toast-stack{ bottom:calc(96px + var(--toast-extra, 0px)); }
@media (max-width: 760px){ body.con-modal .toast-stack{ bottom:calc(150px + var(--toast-extra, 0px)); } }

/* ---------- menú de clic derecho (2.5.3): las acciones de la app donde se hizo el clic ----------
   Misma familia que el menú de respaldo: chapa, reglas finas, rótulos en Semi Condensed. La marca, solo en el foco y en lo elegido. */
.cmenu{
  position:fixed; z-index:95; min-width:250px; max-width:min(340px, calc(100vw - 16px)); overflow-y:auto; overscroll-behavior:contain;
  background:var(--chapa); color:var(--tinta); border:1px solid var(--regla-fuerte); border-radius:var(--r-plano); box-shadow:var(--sombra);
  font-size:14px; line-height:1.25;
}
.cm-tit{
  padding:8px 12px 7px; border-bottom:1px solid var(--regla);
  font-family:var(--letra-titulo); font-weight:600; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinta-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cm-lista{ padding:4px; outline:none; }
.cm-item{
  display:grid; grid-template-columns:24px minmax(0,1fr) auto auto; align-items:center; gap:10px; width:100%; min-height:34px;
  padding:0 10px 0 8px; border:0; border-radius:var(--r-campo); background:none; color:var(--tinta); text-align:left; cursor:pointer; font-weight:500;
}
.cm-item:focus{ outline:none; background:var(--acento-suave); box-shadow:inset 3px 0 0 var(--acento); }
.cm-item:focus-visible{ outline:2px solid var(--foco); outline-offset:-2px; }
.cm-item[aria-disabled="true"]{ color:var(--tinta-2); opacity:.6; cursor:default; }
.cm-item[aria-disabled="true"]:focus{ background:color-mix(in oklab, var(--tinta) 6%, transparent); box-shadow:none; }
.cm-item.peligro{ color:var(--peligro); }
.cm-item.marcada .cm-txt{ font-weight:600; }
.cm-txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-ic{ width:24px; height:20px; display:grid; place-items:center; color:var(--tinta-2); }
.cm-item.peligro .cm-ic, .cm-item.marcada .cm-ic{ color:inherit; }
.cm-ic .ic{ width:18px; height:18px; }
.cm-ic .mp-ico{ width:26px; height:16px; }
.cm-ic .muestra-pulido{ width:16px; }
.cm-marca{ width:18px; height:18px; display:grid; place-items:center; color:var(--acento); }
.cm-marca .ic{ width:18px; height:18px; stroke-width:2.2; }
.cm-atajo{
  font-size:12px; font-weight:500; color:var(--tinta-2); white-space:nowrap;
  border:1px solid var(--regla-fuerte); border-radius:2px; padding:0 5px; line-height:18px;
}
.cm-atajo.cm-nota{ border:0; padding:0; }
.cm-sep{ height:1px; background:var(--regla); margin:4px 6px; }
.cm-rot{
  padding:7px 10px 3px 42px; font-family:var(--letra-titulo); font-weight:600; font-size:12px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--tinta-2);
}
.cm-pie{ padding:7px 12px 8px; border-top:1px solid var(--regla); font-size:12px; color:var(--tinta-2); background:color-mix(in oklab, var(--taller) 60%, var(--chapa)); }
@media print{ .cmenu{ display:none !important; } }

/* ---------- 2.5.4: medidas mínimas, ambiente y notas por tramo ---------- */
.desc-fila.desc-fila-2{ grid-template-columns:170px repeat(2, minmax(0,140px)); }
.t-amb{ font-size:15px; color:var(--tinta-2); font-weight:500; white-space:nowrap; flex:0 1000 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.t-notas-marca{ display:inline-flex; align-items:center; flex:none; color:var(--tinta-2); align-self:center; }
.t-nom-linea{ overflow:hidden; }
/* el aviso de medida del tramo plegado: renglón propio, en rojo y entero */
.t-aviso{ display:flex; align-items:flex-start; gap:4px; font-size:13px; line-height:1.3; white-space:normal; margin-top:1px; }
.t-aviso .ic{ width:14px; height:14px; flex:none; margin-top:1px; }
.t-notas-marca .ic{ width:15px; height:15px; }
details.t-notas{ margin-top:6px; }
details.t-notas + details.t-desc{ margin-top:0; }
.t-notas-estado{ font-weight:400; color:var(--tinta-2); }
.t-notas-cuerpo{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 16px; padding:4px 0 6px; }
.campo-nota textarea{ width:100%; min-height:64px; resize:vertical; }
.nota-cab{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.nota-cab label{ font-size:13px; font-weight:600; color:var(--tinta); }
.nota-cuenta{ font-size:12px; color:var(--tinta-2); }
.campo-nota .nota-ayuda{ font-size:13px; color:var(--tinta-2); line-height:1.4; white-space:normal; }
.presu-nota-row td{ padding-top:0; }
.presu-nota{ margin:0; font-size:14px; color:var(--tinta-2); line-height:1.45; white-space:pre-line; }
.presu-nota b{ color:var(--tinta); font-weight:600; }
.ped-notas-taller{ margin-top:14px; padding:10px 14px; border-left:3px solid var(--marca, var(--tinta)); background:color-mix(in oklab, var(--tinta) 4%, transparent); }
.ped-notas-taller h3{ font-size:15px; font-weight:600; margin:0 0 6px; }
.ped-notas-taller ul{ margin:0; padding-left:18px; }
.ped-notas-taller li{ font-size:14px; line-height:1.45; margin:2px 0; white-space:pre-line; }
.ped-notas-taller li b{ font-weight:600; }
@media (max-width: 760px){
  .desc-fila.desc-fila-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .t-notas-cuerpo{ grid-template-columns:1fr; }
  .t-amb{ font-size:14px; }
}
/* el aviso de medida (máximo o mínimo) se parte en renglones: no ensancha la tabla de paños */
/* 2.5.4: renglón del aviso de medida debajo de su paño, a todo el ancho */
.panos tr.excede:has(+ tr.fila-aviso) td{ border-bottom-color:transparent; }
.panos tr.fila-aviso td{ height:auto; padding-top:0; padding-bottom:7px; }
.panos tr.fila-aviso .excede-marca{ display:flex; align-items:center; gap:5px; font-size:13px; white-space:normal; }
.panos tr.fila-aviso .ic{ width:14px; height:14px; flex:none; }
/* la tabla de paños nunca se sale de la tarjeta: en un tramo angosto la pieza queda con el ícono solo */
.panos-zona{ max-width:100%; overflow-x:auto; container-type:inline-size; }
@container (max-width: 470px){
  .panos .fig{ max-width:none; }
  .panos .fig > span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .panos .celda-in{ width:62px !important; }
  .panos td.corte{ white-space:nowrap; font-size:14px; }
}
/* en la fila plegada el nombre manda: el aviso se achica primero */
.t-nom-linea .t-nombre{ flex:0 1 auto; min-width:min(100%, 7ch); }
/* compu muy angosta (761 a 960 px): la medida pasa debajo del nombre, así el nombre del tramo y el aviso se leen */
@media (max-width: 960px) and (min-width: 761px){
  .fila-t{ grid-template-columns:34px minmax(0,1fr) 108px 176px; }
  .fila-t .c-medida, .extras-cab .extras-resumen{ display:none; }
  .tramo:not(.abierto) .t-sub{ display:block; font-size:13px; color:var(--tinta-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
/* 2.5.4: piezas fuera de medida en el pedido (solo avisa) */
.ped-aviso-medida{ display:flex; gap:8px; align-items:flex-start; margin:0 0 12px; padding:10px 12px; border:1px solid var(--peligro); border-radius:2px; background:var(--peligro-suave); color:var(--tinta); font-size:14px; line-height:1.45; }
.ped-aviso-medida .ic{ width:18px; height:18px; flex:none; color:var(--peligro); margin-top:1px; }
.ped-aviso-medida b{ color:var(--peligro); font-weight:600; }
.fuera-marca{ display:block; font-size:12px; font-weight:600; color:var(--peligro); }

/* ---------- 2.6.0: estado de cada presupuesto ----------
   Seis estados, cada uno con un color apagado del taller (gris de perfil, acero, verde de canto, bronce, verde oscuro y rojo
   ladrillo) y su ícono: se distinguen también sin color. Plaqueta con la franja de color a la izquierda, como una etiqueta de obra. */
:root{
  --est-borrador:#5B6264; --est-enviado:#355F7D; --est-aprobado:#2E6B59; --est-fabricacion:#81521F; --est-terminado:#2B4A41; --est-rechazado:#9A372F;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --est-borrador:#AEB5B4; --est-enviado:#8DB5D4; --est-aprobado:#86C4B0; --est-fabricacion:#D9A46D; --est-terminado:#A6D2C3; --est-rechazado:#F0A098;
  }
}
:root[data-theme="dark"]{
  --est-borrador:#AEB5B4; --est-enviado:#8DB5D4; --est-aprobado:#86C4B0; --est-fabricacion:#D9A46D; --est-terminado:#A6D2C3; --est-rechazado:#F0A098;
}
.est-borrador{ --est:var(--est-borrador); }
.est-enviado{ --est:var(--est-enviado); }
.est-aprobado{ --est:var(--est-aprobado); }
.est-fabricacion{ --est:var(--est-fabricacion); }
.est-terminado{ --est:var(--est-terminado); }
.est-rechazado{ --est:var(--est-rechazado); }
.est{
  display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 9px 0 7px; white-space:nowrap;
  border:1px solid color-mix(in oklab, var(--est) 45%, transparent); border-left:4px solid var(--est); border-radius:var(--r-campo);
  background:color-mix(in oklab, var(--est) 11%, var(--campo)); color:var(--est);
  font:600 14px/1.1 var(--letra-titulo); letter-spacing:.01em; text-transform:none;
}
.est .ic{ width:17px; height:17px; }
button.est{ cursor:pointer; }
button.est:hover{ border-color:var(--est); background:color-mix(in oklab, var(--est) 18%, var(--campo)); }
.est .est-chev{ width:14px; height:14px; margin-left:-1px; opacity:.8; }
/* terminado: la plaqueta llena (trabajo cerrado) */
.est.est-terminado{ background:var(--est); color:var(--campo); border-color:var(--est); }
button.est.est-terminado:hover{ background:color-mix(in oklab, var(--est) 88%, var(--tinta)); }
.obra-tit #obraEstadoBtn{ align-self:center; }
/* opciones de estado en el menú: el ícono con su color */
.cm-item.est-op .cm-ic{ color:var(--est); }
@media (pointer: coarse){ .cm-item{ min-height:44px; } }
/* con el dedo (tablet y celular): 44 px de zona táctil sin cambiar el dibujo; el número del paño la gana con un área transparente */
@media (pointer: coarse){
  .n-tag{ position:relative; }
  .n-tag::after{ content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%); }
  .cq-ocultar{ min-height:44px; }
  .dos-altos input{ height:44px; }
  .cols{ min-height:44px; }
}

/* Mis presupuestos: lista con estado, filtros y buscador */
.modal-lista{ max-width:780px; }
.pres-resumen{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 12px; margin:16px 0 10px; padding:10px 14px;
  border:1px solid var(--regla); border-left:4px solid var(--est-aprobado); border-radius:var(--r-plano); background:var(--campo);
}
.pres-resumen .pr-rot{ font-size:14px; color:var(--tinta-2); }
.pres-resumen b{ font-family:var(--letra-titulo); font-size:22px; font-weight:700; color:var(--tinta); }
.pres-resumen .pr-n{ font-size:14px; color:var(--tinta-2); }
.pres-filtros{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.pr-filtro{
  display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 10px; cursor:pointer; white-space:nowrap;
  border:1px solid var(--regla-fuerte); border-radius:var(--r-campo); background:var(--campo); color:var(--tinta); font-weight:500; font-size:14px;
}
.pr-filtro .ic{ width:16px; height:16px; color:var(--est); }
.pr-filtro b{ font-weight:600; color:var(--tinta-2); }
.pr-filtro.vacio{ color:var(--tinta-2); }
.pr-filtro:hover{ border-color:var(--tinta); }
.pr-filtro[aria-pressed="true"]{ background:var(--tinta); border-color:var(--tinta); color:var(--chapa); }
.pr-filtro[aria-pressed="true"] b{ color:var(--chapa); }
.pr-filtro[aria-pressed="true"] .ic{ color:var(--chapa); }
.pres-buscar{ display:flex; gap:8px; margin:0 0 4px; }
.pres-lupa{ position:relative; flex:1 1 auto; min-width:0; }
.pres-lupa .ic{ position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--tinta-2); pointer-events:none; }
input[type="search"]{
  height:40px; width:100%; min-width:0; border:1.5px solid var(--borde-campo); border-radius:var(--r-campo);
  background:var(--campo); color:var(--tinta); padding:0 10px 0 36px; font-size:16px; font-weight:500; -webkit-appearance:none; appearance:none;
}
input[type="search"]:hover{ border-color:var(--tinta); }
input[type="search"]:focus{ outline:2px solid var(--foco); outline-offset:0; border-color:var(--foco); }
.pres-buscar select{ width:auto; flex:none; }
.proyectos-lista{ max-height:52vh; margin-top:8px; }
.proyecto-item{
  display:grid; grid-template-columns:200px minmax(0,1fr) auto auto; align-items:center; gap:4px 14px; padding:10px 0 10px 10px;
}
.proyecto-item .pi-est{ justify-self:start; }
.proyecto-item .pi-total{ font-family:var(--letra-titulo); font-weight:700; font-size:18px; text-align:right; }
.proyecto-item.est-rechazado .pi-total{ color:var(--tinta-2); text-decoration:line-through; text-decoration-thickness:1px; }
.proyecto-item .meta{ white-space:normal; }
.proyectos-vacio .link-btn{ margin-left:4px; }

/* aviso después de mandar un presupuesto en Borrador: arriba de los botones del presupuesto */
.presu-enviado{
  flex:1 1 100%; display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding:8px 10px 8px 12px; margin-bottom:2px;
  border:1px solid color-mix(in oklab, var(--est-enviado) 45%, transparent); border-left:4px solid var(--est-enviado); border-radius:var(--r-plano);
  background:color-mix(in oklab, var(--est-enviado) 10%, var(--campo)); font-size:15px; line-height:1.4;
}
.presu-enviado > .ic{ color:var(--est-enviado); }
.presu-enviado > span:first-of-type{ flex:1 1 220px; }
.presu-enviado-acc{ display:flex; gap:8px; margin-left:auto; }

@media (max-width: 760px){
  .obra-tit #obraEstadoBtn{ min-height:36px; }
  .modal-lista{ max-width:none; }
  .pres-resumen{ margin-top:12px; }
  /* filtros: una fila que se desliza con el dedo */
  .pres-filtros{ flex-wrap:nowrap; overflow-x:auto; margin:0 -12px 10px; padding:0 12px 4px; scroll-snap-type:x proximity; scrollbar-width:none; }
  .pres-filtros::-webkit-scrollbar{ display:none; }
  .pr-filtro{ min-height:40px; scroll-snap-align:start; flex:none; }
  .proyectos-lista{ max-height:none; }
  /* fila compacta: cliente y total arriba, número y lugar, estado y acciones abajo */
  .proyecto-item{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"info total" "est acc"; padding:10px 2px 10px 8px; gap:6px 10px; }
  .proyecto-item .info{ grid-area:info; }
  .proyecto-item .pi-total{ grid-area:total; align-self:start; font-size:17px; }
  .proyecto-item .pi-est{ grid-area:est; min-height:40px; }
  .proyecto-item .acciones{ grid-area:acc; }
  .proyecto-item .pi-abrir{ min-height:44px; }
  .presu-enviado{ grid-column:1 / -1; }
  .presu-enviado-acc{ width:100%; }
  .presu-enviado-acc .btn{ flex:1; min-height:44px; }
}

/* ---------- 2.6.0: diseños prontos ---------- */
.obra-pie-acc .btn{ padding:0 10px; }
.modal-disenos{ max-width:1000px; }
.dis-grupo + .dis-grupo{ margin-top:18px; }
.dis-grupo-tit{ display:flex; align-items:center; gap:6px; font-size:17px; font-weight:700; margin:0 0 8px; padding-bottom:4px; border-bottom:1px solid var(--regla); }
.dis-grupo-tit .ic-fav{ color:var(--bronce); fill:currentColor; }
.dis-vacio{ max-width:60ch; }
.dis-tarjetas{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px; }
.dis-card{ position:relative; display:flex; flex-direction:column; border:1px solid var(--regla-fuerte); border-radius:var(--r-plano); background:var(--campo); min-width:0; }
.dis-card:hover{ border-color:var(--tinta); }
.dis-elegir{
  display:flex; flex-direction:column; align-items:stretch; gap:2px; text-align:left; padding:10px 12px 10px; min-height:44px; width:100%;
  border:0; background:none; color:var(--tinta); cursor:pointer; border-radius:var(--r-plano);
}
.dis-elegir:focus-visible{ outline-offset:-2px; }
.dis-dibujo{ display:block; height:110px; margin:0 26px 6px 0; color:var(--tinta); line-height:0; }
.dis-dibujo svg{ display:block; width:100%; height:100% !important; overflow:hidden; }
.pulido-fabrica{ display:flex; align-items:center; min-height:40px; font-size:14px; color:var(--tinta-2); }
.op-templado{ margin:0 0 10px; }
.dis-cod{ font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--acento); }
.dis-nom{ font-family:var(--letra-titulo); font-weight:600; font-size:16px; line-height:1.2; }
.dis-desc{ font-size:13px; color:var(--tinta-2); line-height:1.35; }
.dis-acc{ position:absolute; top:2px; right:2px; display:flex; flex-direction:column; }
.dis-acc .ic-btn{ width:36px; height:36px; }
.dis-fav[aria-pressed="true"]{ color:var(--bronce); }
.dis-fav[aria-pressed="true"] .ic{ fill:currentColor; }
.dis-dibujo svg text, .dis-med-dibujo svg text{ font-family:var(--letra); }
.dis-dibujo svg:not(.cq-plano) .cq-panel, .dis-med-dibujo svg:not(.cq-plano) .cq-panel{ fill:var(--cara); stroke:var(--canto); }
.dis-dibujo svg:not(.cq-plano) .cq-panel.cq-excede, .dis-med-dibujo svg:not(.cq-plano) .cq-panel.cq-excede{ fill:var(--peligro-suave); stroke:var(--peligro); }
.dis-dibujo svg:not(.cq-plano) .cq-brillo, .dis-med-dibujo svg:not(.cq-plano) .cq-brillo{ fill:var(--brillo); opacity:.35; }
.dis-dibujo svg:not(.cq-plano) .cq-u, .dis-med-dibujo svg:not(.cq-plano) .cq-u{ stroke:var(--perfil); }
.dis-dibujo .cq-pulido, .dis-med-dibujo .cq-pulido{ stroke:var(--bronce); }
.dis-dibujo svg:not(.cq-plano) .cq-tag rect, .dis-med-dibujo svg:not(.cq-plano) .cq-tag rect{ fill:var(--chapa); stroke:var(--tinta); }
.dis-dibujo svg:not(.cq-plano) .cq-riel, .dis-med-dibujo svg:not(.cq-plano) .cq-riel, .dis-dibujo svg:not(.cq-plano) .cq-guia, .dis-med-dibujo svg:not(.cq-plano) .cq-guia{ fill:var(--perfil); }
.dis-dibujo .cq-roldana circle, .dis-med-dibujo .cq-roldana circle{ stroke:var(--chapa); }
.dis-dibujo svg:not(.cq-plano) .cq-vano-txt, .dis-med-dibujo svg:not(.cq-plano) .cq-vano-txt{ fill:var(--tinta-2); }
.dis-volver{ display:inline-flex; align-items:center; gap:6px; min-height:40px; margin-bottom:8px; }
.dis-volver .ic{ transform:rotate(-90deg); }
.dis-med{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; } /* 2.8.0: el dibujo grande arriba y las medidas abajo */
.dis-med-datos h3{ font-size:22px; font-weight:700; }
.dis-med-datos .hint{ margin:2px 0 14px; }
.dis-campos-set{ border:0; margin:0 0 10px; padding:0; min-width:0; }
.dis-campos-set legend{ font-family:var(--letra-titulo); font-weight:600; font-size:15px; padding:0; margin-bottom:6px; }
.dis-campos-set .t-medidas input{ font-size:18px; height:44px; }
.dis-campos-set .t-x{ height:44px; }
.dis-med-dibujo{ color:var(--tinta); background:var(--campo); border:1px solid var(--regla); border-radius:var(--r-plano); padding:12px; line-height:0; }
.dis-med-dibujo svg{ display:block; width:100%; height:auto; max-height:440px; }
#textoOverlay{ z-index:72; }
/* pie del tramo: en la compu solo queda "Guardar como diseño" (lo demás está en la cabecera del tramo) */
@media (min-width: 761px){
  .t-acc-pie{ display:flex; justify-content:flex-end; margin-top:8px; }
  .t-acc-pie > :not(.t-acc-diseno){ display:none; }
}
@media (max-width: 760px){
  /* en el celu el diálogo crece con su contenido (estirado al alto de la pantalla, lo de abajo quedaba sin fondo) */
  .modal-disenos, .modal-lista{ align-self:flex-start; }
  .modal-disenos .modal-actions, .modal-lista .modal-actions{ position:sticky; bottom:0; }
  .modal-disenos{ max-width:none; }
  .dis-tarjetas{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .dis-elegir{ padding:8px 10px; }
  .dis-dibujo{ height:84px; margin-right:24px; }
  .dis-nom{ font-size:15px; }
  .dis-acc .ic-btn{ width:40px; height:40px; }
  .dis-med{ gap:12px; }
  .dis-med-dibujo{ padding:8px; }
  .dis-med-dibujo svg{ max-height:300px; }
}

/* 2.6.1: Pedido y cortes, "Templado por vano" */
.ped-vano{ margin:0 0 18px; }
.ped-vano > h3{ font-family:var(--letra-titulo); font-size:18px; font-weight:600; margin:0 0 4px; }
.ped-vano-aviso{ margin:0 0 10px; font-size:14px; color:var(--tinta-2); }
.ped-vano-elegir{ display:flex; flex-wrap:wrap; gap:6px 20px; margin:0 0 12px; }
.ped-vano-card{ border:1px solid var(--regla); border-left:3px solid var(--marca, var(--tinta)); border-radius:2px; padding:12px 14px; margin:0 0 10px; background:var(--campo); }
.ped-vano-card h4{ font-family:var(--letra-titulo); font-size:16px; font-weight:600; margin:0 0 4px; }
.ped-vano-card h5{ font-size:13px; font-weight:600; color:var(--tinta-2); margin:10px 0 4px; text-transform:none; }
.ped-vano-card p{ margin:0 0 4px; }
.ped-vano-vidrio{ font-size:14px; color:var(--tinta-2); }
.ped-vano-medida{ font-weight:600; font-size:17px; }
.ped-vano-hojas{ font-size:14px; }
.ped-vano-herrajes{ margin:0; padding-left:18px; font-size:14px; line-height:1.5; }
.ped-vano-nota{ font-size:14px; white-space:pre-line; }
.ped-vano-panos{ margin-top:6px; }

/* ---------- 2.7.0: catálogo de herrajes por proveedor e ilustraciones propias ---------- */
.hz-ico{ display:block; flex:none; }
.hz-ico .hz-vidrio{ fill:var(--cara); stroke:var(--canto); }
.hz-ico .hz-metal{ fill:var(--perfil); stroke:var(--tinta); }
.hz-ico .hz-hueco{ fill:var(--chapa); stroke:var(--tinta); }
.hz-ico .hz-trazo{ fill:none; stroke:var(--tinta); }
.hz-mini{ display:inline-flex; flex:none; }
.herrajes-cuerpo .pr-filtro{ min-height:44px; }
.herrajes-pie{ justify-content:flex-start; }
.herrajes-lista{ margin-bottom:8px; }
.herrajes-buscar{ margin:0 0 8px; }
.herrajes-contador{ margin:0 0 4px; font-size:13px; }
details.hz{ border-bottom:1px solid var(--regla); }
details.hz summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px 12px; min-height:52px; padding:4px; font-weight:500; }
details.hz summary::-webkit-details-marker{ display:none; }
details.hz summary:hover{ background:color-mix(in oklab, var(--tinta) 4%, transparent); }
details.hz summary .chev{ color:var(--tinta-2); transition:transform .12s ease; flex:none; }
details.hz[open] summary .chev{ transform:rotate(180deg); }
.hz-tit{ flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; }
.hz-prov{ font-size:12.5px; font-weight:600; color:var(--tinta-2); text-transform:uppercase; letter-spacing:.03em; }
.hz-cod{ font-weight:700; }
.hz-nom{ min-width:0; overflow-wrap:anywhere; }
.hz-precio{ font-weight:600; white-space:nowrap; }
.hz-cuerpo{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 12px; padding:4px 4px 14px; align-items:end; }
.hz-quitar{ grid-column:1 / -1; justify-self:start; }
.kit-c-cat{ grid-column:1 / -1; display:flex; align-items:flex-end; gap:10px; }
.kit-c-cat .kit-c-sel{ flex:1 1 auto; }
.kit-c-cat > .hz-mini{ align-self:flex-start; margin-top:22px; }
.kit-lec{ min-height:40px; display:flex; align-items:center; flex-wrap:wrap; gap:2px 6px; font-weight:500; }
.kit-lec-cod{ color:var(--tinta-2); font-size:13px; }
.kit-auto{ min-height:44px; font-size:14px; }
.hz-pano-caja{ flex-direction:column; align-items:stretch; }
.hz-pano{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.hz-pieza{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:4px 10px; padding:4px 0; border-top:1px solid var(--regla); }
.hz-pieza:first-child{ border-top:0; }
.hz-txt{ min-width:0; overflow-wrap:anywhere; }
.hz-tot{ font-weight:600; white-space:nowrap; }
.hz-propios{ margin:0; font-weight:600; font-size:14px; color:var(--tinta-2); }
.hz-edit{ grid-template-columns:auto minmax(0,1fr) auto; align-items:start; }
.hz-campos{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-width:0; }
.hz-campos > select, .hz-campos > input[type="text"], .hz-campos > .hz-sel{ flex:1 1 180px; min-width:0; }
.hz-campos > input.in-num{ flex:0 1 110px; width:110px; min-width:0; }
.hz-campos > .hz-rot{ flex:0 1 130px; }
.hz-campos > .hz-rot > input.in-num{ width:100%; box-sizing:border-box; }
.hz-fijo{ font-weight:500; }
/* 2.8.0: selector de herraje con búsqueda (botón + campo y lista que se abren debajo) */
.hz-sel{ min-width:0; display:flex; flex-direction:column; gap:6px; position:relative; }
.hz-sel-btn{
  display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:4px 10px; text-align:left; font:inherit; font-weight:500; color:var(--tinta);
  background:var(--campo); border:1.5px solid var(--borde-campo); border-radius:var(--r-campo); cursor:pointer;
}
.hz-sel-btn:hover{ border-color:var(--tinta); }
.hz-sel-btn:focus-visible{ outline:2px solid var(--foco); outline-offset:0; border-color:var(--foco); }
.hz-sel-txt{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hz-sel-btn .chev{ flex:none; color:var(--tinta-2); transition:transform .12s ease; }
.hz-sel-btn[aria-expanded="true"] .chev{ transform:rotate(180deg); }
/* la lista flota sobre lo de abajo y es más ancha que el botón: en una columna angosta (kit de la hoja) el texto no queda cortado */
.hz-sel-panel{ position:absolute; top:calc(100% + 4px); left:0; z-index:30; box-sizing:border-box; width:max(100%, min(420px, calc(100vw - 32px)));
  border:1.5px solid var(--borde-campo); border-radius:var(--r-campo); background:var(--chapa); padding:6px; display:flex; flex-direction:column; gap:6px;
  box-shadow:0 8px 24px color-mix(in oklab, var(--tinta) 18%, transparent); }
.hz-sel-panel[hidden]{ display:none; }
.hz-sel-lista{ list-style:none; margin:0; padding:0; max-height:min(320px, 50vh); overflow-y:auto; overscroll-behavior:contain; }
.hz-sel-op{ display:flex; align-items:center; gap:10px; min-height:44px; padding:4px 8px; cursor:pointer; border-top:1px solid var(--regla); }
.hz-sel-op:first-child{ border-top:0; }
.hz-sel-op:hover{ background:color-mix(in oklab, var(--tinta) 6%, transparent); }
.hz-sel-op.activa{ background:color-mix(in oklab, var(--foco) 16%, transparent); outline:2px solid var(--foco); outline-offset:-2px; }
.hz-sel-vacio{ font-weight:600; color:var(--tinta-2); }
.hz-sel-aviso{ margin:0; font-size:13px; color:var(--tinta-2); }
.hz-sel-aviso:empty{ display:none; }
.hz-acciones{ display:flex; flex-wrap:wrap; gap:8px; }
.ped-vano-herrajes .hz-li{ display:flex; align-items:center; gap:8px; list-style:none; margin-left:-18px; }
.hz-li-ico{ display:inline-flex; flex:none; }
@media (max-width: 599px){
  .hz-cuerpo{ grid-template-columns:minmax(0,1fr); }
  .hz-pieza{ grid-template-columns:auto minmax(0,1fr); }
  .hz-pieza .hz-tot{ grid-column:2; justify-self:start; }
  .hz-pieza.hz-edit{ grid-template-columns:auto minmax(0,1fr) auto; }
  .herrajes-cuerpo .pres-filtros{ flex-wrap:wrap; overflow:visible; margin:0 0 10px; padding:0; }
  .hz-pieza .ic-btn{ min-width:44px; min-height:44px; }
}

/* 2.8.0: en el celu los rótulos de los campos pasan a la línea de abajo en vez de cortarse con puntos ("Laterales (cada uno), mm") */
@media (max-width:760px){ .campo > label{ white-space:normal; overflow:visible; } }

/* ---------- tablet (761 a 1000 px): el total va en la barra de abajo, como en el celular, y el formulario usa todo el ancho ---------- */
@media (max-width: 1000px) and (min-width: 761px){
  .pantalla{ display:block; padding:16px 16px calc(92px + env(safe-area-inset-bottom, 0px)); }
  .resumen{
    display:none; position:fixed; left:0; right:0; bottom:calc(74px + env(safe-area-inset-bottom, 0px)); top:auto; z-index:26;
    max-height:min(72vh, 620px); border-radius:var(--r-plano) var(--r-plano) 0 0; border-bottom:0; box-shadow:var(--sombra); padding:12px 14px 14px;
  }
  body.desglose-abierto .resumen{ display:block; }
  .resumen-cerrar{ display:inline-grid; }
  .total-fijo{
    display:flex; align-items:center; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:27; padding:0 10px 0 0;
    background:var(--chapa); border-top:1.5px solid var(--tinta); box-shadow:0 -2px 10px rgba(20,24,26,.12);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .tf-boton{ flex:1 1 auto; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) 24px; align-items:center; gap:6px; min-height:72px; padding:6px 0 6px 16px; background:none; border:0; cursor:pointer; text-align:left; }
  .tf-precio{ text-align:left; min-width:0; line-height:1.1; }
  .tf-precio > span:first-child{ font-family:var(--letra-titulo); font-weight:600; font-size:13px; }
  .tf-precio b{ font-family:var(--letra-titulo); font-weight:700; font-size:26px; color:var(--acento); display:block; }
  .tf-costo{ display:block; font-size:13px; color:var(--tinta-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tf-costo b{ display:inline; font-size:13px; font-weight:600; color:var(--tinta); }
  .tf-chev{ color:var(--tinta-2); transition:transform .15s ease; }
  .tf-boton[aria-expanded="true"] .tf-chev{ transform:rotate(180deg); }
  .tf-presu{ flex:none; min-height:48px; padding:0 16px; }
  .toast-stack{ bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }
  body.con-modal .toast-stack{ bottom:calc(150px + var(--toast-extra, 0px)); }
}