/* ===== Parte 1: estilo "lista" (antes estilo-lista.css). No se aplica en páginas cuyo <html> tiene data-sin-lista ===== */
/* =====================================================================
   estilo-lista.css — Presupuestos LATAM
   Estilo "lista" para todos los módulos: la pregunta a la izquierda y su casilla al lado,
   en un solo renglón. Se carga después de los estilos propios de cada módulo.
   ===================================================================== */
:where(html:not([data-sin-lista])) .form-group {
    display: flex; flex-direction: row !important; flex-wrap: wrap; align-items: center !important; justify-content: space-between !important;
    gap: 4px 8px !important; margin-bottom: 4px !important; padding-bottom: 4px !important;
}
:where(html:not([data-sin-lista])) .form-group > label {
    flex: 1 1 0 !important; min-width: 0; width: auto !important; margin: 0 !important; line-height: 1.25; text-align: left !important; word-wrap: break-word;
}
:where(html:not([data-sin-lista])) .form-group > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
:where(html:not([data-sin-lista])) .form-group > select {
    flex: 0 0 auto !important; width: 52% !important; max-width: 52% !important; min-width: 0; margin: 0 !important; padding-top: 4px; padding-bottom: 4px; box-sizing: border-box;
}
:where(html:not([data-sin-lista])) .form-group > input[type="number"] { width: 92px !important; max-width: 92px !important; text-align: right !important; }
/* Notas, ayudas y bloques extra dentro de una pregunta: van debajo, a todo lo ancho */
:where(html:not([data-sin-lista])) .form-group > small, :where(html:not([data-sin-lista])) .form-group > p, :where(html:not([data-sin-lista])) .form-group > span.nota, :where(html:not([data-sin-lista])) .form-group > .nota-campo, :where(html:not([data-sin-lista])) .form-group > div { flex: 1 1 100%; }
/* Las rejillas de 2 o más columnas pasan a una sola: cada pregunta ocupa su renglón */
:where(html:not([data-sin-lista])) .grid-compact, :where(html:not([data-sin-lista])) .grid-2-col, :where(html:not([data-sin-lista])) .grid-inputs { grid-template-columns: 1fr !important; gap: 0 8px !important; }
/* Filas que se agregan (áreas, tramos, paredes…): mismo estilo */
:where(html:not([data-sin-lista])) .item-dinamico div[style*="flex-direction:column"], :where(html:not([data-sin-lista])) .item-dinamico div[style*="flex-direction: column"] {
    flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 8px; margin-bottom: 3px !important;
}
:where(html:not([data-sin-lista])) .item-dinamico div[style*="flex-direction:column"] > label, :where(html:not([data-sin-lista])) .item-dinamico div[style*="flex-direction: column"] > label { flex: 1 1 0; margin: 0 !important; text-align: left; }
:where(html:not([data-sin-lista])) .item-dinamico div[style*="flex-direction:column"] > input[type="number"], :where(html:not([data-sin-lista])) .item-dinamico div[style*="flex-direction: column"] > input[type="number"] { flex: 0 0 auto; width: 92px !important; text-align: right; }
:where(html:not([data-sin-lista])) .item-dinamico div[style*="flex-direction:column"] > select, :where(html:not([data-sin-lista])) .item-dinamico div[style*="flex-direction: column"] > select { flex: 0 0 auto; width: 52% !important; }
/* En una sola columna ninguna pregunta "abarca dos columnas" */
:where(html:not([data-sin-lista])) .grid-compact > *, :where(html:not([data-sin-lista])) .grid-2-col > *, :where(html:not([data-sin-lista])) .grid-inputs > * { grid-column: auto !important; }
:where(html:not([data-sin-lista])) .form-group > small, :where(html:not([data-sin-lista])) .form-group > p, :where(html:not([data-sin-lista])) .form-group > span.nota, :where(html:not([data-sin-lista])) .form-group > .nota-campo { order: 3; }
/* Texto de unidad junto a la pregunta (p. ej. "(B/. por saco)"): queda en el mismo renglón */
:where(html:not([data-sin-lista])) .form-group > .helper-text { flex: 0 1 auto !important; width: auto !important; min-height: 0 !important; margin: 0 !important; order: 0; }
:where(html:not([data-sin-lista])) .form-group > label + .helper-text + input, :where(html:not([data-sin-lista])) .form-group > label + .helper-text + select { order: 1; }
:where(html:not([data-sin-lista])) .form-group > div:not(.helper-text), :where(html:not([data-sin-lista])) .form-group > span:not(.helper-text) { order: 3; }
:where(html:not([data-sin-lista])) .form-group > span:not(.helper-text) { flex: 1 1 100%; }
:where(html:not([data-sin-lista])) .item-dinamico div[style*="flex-direction:column"], :where(html:not([data-sin-lista])) .item-dinamico div[style*="flex-direction: column"] { flex: 1 1 100% !important; width: 100% !important; box-sizing: border-box; }
/* Bloques que el módulo muestra/oculta por código: sus preguntas siempre van una debajo de otra */
:where(html:not([data-sin-lista])) #rend-grupo-jornadas, :where(html:not([data-sin-lista])) #divDestajo { flex-direction: column !important; align-items: stretch !important; }
/* Muros de contención (usa otra hoja de estilos) */
:where(html:not([data-sin-lista])) .grid-datos { grid-template-columns: 1fr !important; gap: 4px 10px !important; }
:where(html:not([data-sin-lista])) .grid-datos > .form-group-inline { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 8px; }
:where(html:not([data-sin-lista])) .grid-datos > .form-group-inline > label { flex: 1 1 0; margin: 0 !important; }
:where(html:not([data-sin-lista])) .grid-datos > .form-group-inline > input:not([type="checkbox"]), :where(html:not([data-sin-lista])) .grid-datos > .form-group-inline > select { flex: 0 0 auto; width: 46% !important; max-width: 46%; box-sizing: border-box; }
:where(html:not([data-sin-lista])) .grid-datos > .form-group-inline > input[type="checkbox"] { flex: 0 0 auto; order: -1; }
:where(html:not([data-sin-lista])) .grid-datos > .form-group-inline > input[type="number"] { width: 110px !important; text-align: right; }
/* Cuadro "Consumo de materiales (calibración)" */
:where(html:not([data-sin-lista])) details.calibracion { margin-top: 12px; border: 1px solid rgba(0,0,0,0.18); border-radius: 4px; padding: 6px 8px; background: rgba(255,255,255,0.6); }
:where(html:not([data-sin-lista])) details.calibracion summary { cursor: pointer; font-weight: bold; font-size: 0.82em; }
:where(html:not([data-sin-lista])) details.calibracion[open] summary { margin-bottom: 6px; }
/* Zapatas: los datos de cada lote van en dos columnas de renglones (pregunta + casilla) */
:where(html:not([data-sin-lista])) .grid-lote { grid-template-columns: 1fr 1fr !important; gap: 2px 28px !important; align-items: center !important; }
:where(html:not([data-sin-lista])) .grid-lote > .form-group > label { white-space: normal; }
@media (max-width: 800px) { :where(html:not([data-sin-lista])) .grid-lote { grid-template-columns: 1fr !important; } }


/* ===== Parte 2: estilo general del sitio (antes estilo-sitio.css) ===== */
/* =====================================================================
   estilo-sitio.css — Presupuestos LATAM
   Un solo aspecto para todo el sitio (el mismo del Lector IFC): letra grande,
   mismos colores y botones, y todo cabe en la pantalla de un celular.
   Solo cambia la presentación: no toca ningún cálculo.
   Se carga DESPUÉS de los estilos del módulo y de estilo-lista.css.
   ===================================================================== */
:root {
    --tinta: #16324a; --tinta2: #24506f; --accion: #e8590c; --accion2: #c24a08; --dinero: #18794e; --gris: #55657a; --linea: #cfd6dc; --fondo: #eef0f2;
    /* Los módulos que ya usan variables de color toman esta misma paleta */
    --primary-color: #16324a; --primary-dark: #16324a; --secondary-color: #dfe6ec; --secondary-light: #f6f8fa;
    --accent-color: #e8590c; --accent-hover: #c24a08; --bg-base: #eef0f2; --bg-card: #ffffff; --border-color: #cfd6dc;
    --text-main: #1b2733; --text-muted: #55657a; --success: #18794e; --danger: #b3261e;
}
html { font-size: 17px; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; font-size: 1rem; background: var(--fondo) !important; color: #1b2733; line-height: 1.45; overflow-x: clip; }

/* ---------- Módulos: marco y cabecera ---------- */
.contenedor { border-top: 0 !important; background: transparent !important; box-shadow: none !important; padding: 14px 16px 90px !important; max-width: 1500px !important; }
.contenedor > header { background: var(--tinta) !important; color: #fff !important; border-radius: 14px !important; border-bottom: 5px solid var(--accion) !important; padding: 14px 20px !important; margin-bottom: 18px !important; gap: 12px; flex-wrap: wrap; }
.contenedor > header h1 { color: #fff !important; font-size: 1.5rem !important; margin: 0 0 2px !important; line-height: 1.2; }
.contenedor > header p { color: #c9d8e6 !important; font-size: .95rem !important; font-weight: 400 !important; margin: 0 !important; }
.contenedor > header a { color: #fff !important; background: rgba(255,255,255,.14); border: 0 !important; padding: 8px 14px !important; border-radius: 8px !important; font-size: .95rem !important; font-weight: 600; text-decoration: none; display: inline-block; margin-top: 6px; }
.contenedor > header a:hover { background: rgba(255,255,255,.26) !important; }
.contenedor > header .btn-accion { min-height: 42px; }

/* Dos columnas anchas en computadora (cuatro quedaban apretadas con letra grande) */
.dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; }
@media (min-width: 1900px) { .dashboard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
/* Cabecera para las páginas que no tenían una (Placa base, Losa de cimentación) y para Precios Colombia */
.cab-sitio, body > header:not(.sup) { background: var(--tinta) !important; color: #fff !important; border-bottom: 5px solid var(--accion) !important; }
.cab-sitio { max-width: 1200px; margin: 14px auto 18px; border-radius: 14px; padding: 14px 20px; }
.cab-sitio h1, body > header:not(.sup) h1 { color: #fff !important; font-size: 1.5rem !important; margin: 0 0 2px !important; line-height: 1.2; }
.cab-sitio p { color: #c9d8e6; font-size: .95rem; margin: 0; }
.cab-sitio a { color: #fff; background: rgba(255,255,255,.14); padding: 8px 14px; border-radius: 8px; font-size: .95rem; font-weight: 600; text-decoration: none; display: inline-block; margin-top: 6px; }
body > header:not(.sup) small { color: #c9d8e6 !important; font-size: .95rem !important; }
/* Buscador APU y Precios Colombia */
.contenedor > header .btn-volver { margin-bottom: 0 !important; }
.alerta-contraloria, .fuente { background: #eef4f9 !important; border-left: 5px solid var(--tinta2) !important; color: #1b2733 !important; font-size: 1rem !important; border-radius: 8px !important; }
.buscador-container { background: #fff !important; border: 1px solid var(--linea) !important; border-radius: 14px !important; }
.buscador-input { border: 2px solid #c2ccd6 !important; border-radius: 9px !important; font-size: 1.05rem !important; min-height: 50px; max-width: 100%; }
.buscador-input:focus { border-color: var(--accion) !important; }
.btn-cargar { background: var(--tinta2) !important; border-radius: 9px !important; font-size: 1rem !important; min-height: 46px; }
.tabla-apu, .tabla-carrito, .tabla-desglose { font-size: 1rem !important; }
.tabla-apu th, .tabla-desglose th { background-color: var(--tinta) !important; font-size: .92rem; }
.tabla-carrito th { background-color: var(--dinero) !important; }
.gran-total-row { background-color: var(--tinta) !important; font-size: 1.3rem !important; }
.tag-cat { background: #e8eef4 !important; color: var(--tinta) !important; font-size: .85rem !important; }
.input-cant { font-size: 1rem !important; min-height: 40px; border: 2px solid #c2ccd6 !important; border-radius: 8px !important; }
.btn-excel { background-color: var(--dinero) !important; border-radius: 10px !important; font-size: 1.1rem !important; }
.presupuesto-box { border: 2px solid var(--tinta) !important; border-radius: 14px !important; }
.estado-carga { font-size: 1.1rem !important; }
.tarjeta { border: 1px solid var(--linea) !important; border-radius: 14px !important; padding: 20px !important; }
.tarjeta table { font-size: 1rem !important; } .tarjeta th { font-size: .9rem !important; color: var(--tinta) !important; }
.tarjeta .nota, .tarjeta .fuente { font-size: .95rem !important; }
.filtros input, .filtros select { font-size: 1rem !important; min-height: 46px; border: 2px solid #c2ccd6 !important; border-radius: 9px !important; }
.tarjeta .btn { font-size: 1rem !important; min-height: 44px; border-radius: 9px !important; }
#lista td input, .aiu input { font-size: 1rem !important; min-height: 38px; }
.aiu label, .total { font-size: 1rem !important; }
#barraTotal { background: var(--tinta) !important; } #barraTotal a { background: var(--accion) !important; color: #fff !important; }
/* ---------- Tarjetas ---------- */
.columna, .card, .zapata-config, .gallery-container { background: #fff !important; border: 1px solid var(--linea) !important; border-radius: 14px !important; padding: 22px !important; box-shadow: none !important; }
.columna h4, .card h3, .zapata-config h3 { text-transform: none !important; font-size: 1.2rem !important; color: var(--tinta) !important; border-bottom: 2px solid #e6eaee !important; padding-bottom: 10px !important; margin-bottom: 18px !important; }
.item-dinamico { border: 1px solid var(--linea) !important; border-radius: 10px !important; background: #fafbfc !important; padding: 14px !important; }
.seccion-div { border-top: 2px solid #e6eaee !important; }
.seccion-div > h5, .columna h5, .card h4, .card h5 { font-size: 1.05rem !important; color: var(--tinta) !important; }

/* ---------- Preguntas y casillas: letra grande ---------- */
.form-group, .form-group-inline { border-bottom: 1px solid #edf0f3 !important; padding: 5px 0 11px !important; margin-bottom: 6px !important; gap: 6px 14px !important; }
.form-group label, .form-group-inline label { font-size: 1rem !important; font-weight: 600 !important; color: #1b2733 !important; line-height: 1.3 !important; text-transform: none !important; }
.form-group > label { flex: 1 1 8rem !important; min-width: 7rem !important; overflow-wrap: normal; word-break: normal; }
.form-group > .helper-text { max-width: 45%; text-align: right; }
.form-group .helper-text { font-size: .85rem !important; font-style: normal !important; color: var(--gris) !important; }
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), .form-group select,
.form-group-inline input:not([type="checkbox"]):not([type="radio"]), .form-group-inline select {
    font-size: 1rem !important; min-height: 42px; padding: 7px 10px !important; border: 2px solid #c2ccd6 !important; border-radius: 8px !important; background-color: #fff; color: #1b2733 !important; font-weight: 600 !important;
}
.form-group > input[type="number"] { width: 112px !important; max-width: 112px !important; }
.form-group-inline input[type="number"] { width: 96px !important; }
.form-group-inline select { min-width: 66px; }
.form-group input:focus, .form-group select:focus, .form-group-inline input:focus, .form-group-inline select:focus { border-color: var(--accion) !important; outline: 3px solid #f7b267; outline-offset: 1px; }
.form-group input[type="checkbox"], .form-group-inline input[type="checkbox"] { width: 22px !important; height: 22px !important; }
.input-readonly { background-color: #eef1f4 !important; }
details.calibracion { border: 1px solid var(--linea) !important; border-radius: 10px !important; padding: 10px 12px !important; }
details.calibracion summary { font-size: 1rem !important; color: var(--tinta); }
.columna p, .card p, .columna small, .card small, details.calibracion p { font-size: .9rem !important; line-height: 1.4; }

/* Ningún texto de trabajo por debajo de 15 px */
.columna label, .card label, .panel label, .item-dinamico label, .contenedor label { font-size: 1rem !important; }
.contenedor input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), .contenedor select, .contenedor textarea,
.panel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), .panel select { font-size: 1rem !important; }
.form-group > div:not(.helper-text), .form-group > small, .helper-nota, .contenedor small { font-size: .9rem !important; line-height: 1.4; }
.contenedor table, .panel table { font-size: .95rem !important; }
.contenedor th, .panel th { font-size: .9rem !important; }
/* Módulos de verificación (Placa base, Losa de cimentación, MSE, Gaviones, Contención) */
.panel { background: #fff !important; border: 1px solid var(--linea) !important; border-radius: 14px !important; box-shadow: none !important; padding: 22px !important; min-width: 0; }
.panel h2, .panel h3 { color: var(--tinta) !important; }

/* Filas que se agregan (áreas, tramos, paredes): casillas del mismo tamaño que las demás */
.item-dinamico input:not([type="checkbox"]):not([type="radio"]), .item-dinamico select { font-size: 1rem !important; min-height: 40px; padding: 6px 10px !important; border: 2px solid #c2ccd6 !important; border-radius: 8px !important; font-weight: 600 !important; color: #1b2733 !important; background-color: #fff; }
.item-dinamico div > input[type="number"] { width: 112px !important; text-align: right; }
.item-dinamico div[style*="flex-direction"] { padding: 4px 0; }
.item-dinamico, [id^="contenedor-"][style*="max-height"] { max-height: none !important; overflow: visible !important; }
.item-dinamico > div { flex-wrap: wrap; row-gap: 6px; }
.item-dinamico input, .item-dinamico select { max-width: 100%; }
.columna, .card { min-width: 0; max-width: 100%; }
/* Honorarios: el selector de % o monto y su casilla caben juntos */
#divHonorarios_Input { width: auto !important; gap: 6px !important; flex: 0 0 auto !important; order: 1 !important; }
#divHonorarios_Input select { width: 70px !important; min-width: 70px; max-width: 70px !important; }
#divHonorarios_Input input { width: 90px !important; max-width: 90px !important; }

/* ---------- Botones ---------- */
.btn-accion, .btn-add, .btn-del { font-size: 1rem !important; border-radius: 9px !important; min-height: 44px; padding: 9px 16px !important; font-family: inherit; }
.btn-del { min-height: 38px; padding: 6px 12px !important; }
.btn-calcular, .btn-analizar { background: var(--accion) !important; border: 0 !important; color: #fff !important; font-size: 1.2rem !important; min-height: 58px; border-radius: 10px !important; font-weight: 700; cursor: pointer; padding: 12px 18px !important; }
.btn-calcular:hover, .btn-analizar:hover { background: var(--accion2) !important; }

/* ---------- Resultado ---------- */
#area-resultados { border: 2px solid var(--tinta) !important; border-radius: 14px !important; padding: 20px !important; }
#area-resultados h2, .card h3 { color: var(--tinta) !important; }
.badge-modo { background: var(--tinta2) !important; font-size: .95rem !important; border-radius: 8px !important; }
#tablaMateriales { font-size: 1rem !important; }
#tablaMateriales th { background: var(--tinta) !important; color: #fff !important; font-size: .92rem; padding: 10px !important; }
#tablaMateriales td { padding: 10px !important; }
#tablaMateriales td span { font-size: .85rem !important; }
#tablaMateriales td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
#tablaMateriales td[colspan] { white-space: normal !important; }
#tablaMateriales .total-row td { background: var(--tinta) !important; color: #fff !important; font-size: 1.15rem !important; }
#tablaMateriales #granTotal { font-size: 1.6rem !important; }
#tablaMateriales .kpi-row td { background: var(--tinta2) !important; }

/* Total siempre a la vista (lo crea estilo-sitio.js) */
#barraTotalSitio { position: fixed; left: 12px; bottom: 14px; z-index: 900; background: var(--tinta); color: #fff; border-radius: 12px; padding: 9px 16px; box-shadow: 0 8px 24px rgba(22,50,74,.35); cursor: pointer; display: none; line-height: 1.15; border: 0; text-align: left; font-family: inherit; }
#barraTotalSitio small { display: block; font-size: .78rem; color: #c9d8e6; font-weight: 600; }
#barraTotalSitio b { font-size: 1.35rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
#barraTotalSitio.ver { display: block; }

/* ---------- Inicio ---------- */
.navbar { background-color: var(--tinta) !important; border-bottom: 5px solid var(--accion); flex-wrap: wrap; gap: 10px; }
.nav-controls { flex-wrap: wrap; }
.hero { background: linear-gradient(135deg, var(--tinta), var(--tinta2)) !important; }
.btn-nav { background-color: var(--tinta2) !important; min-height: 44px; }
.btn-nav.btn-premium { background-color: var(--accion) !important; }
.selector-pais { background: var(--tinta2) !important; min-height: 44px; }
.tab-btn { font-size: 1rem !important; }
.tab-btn.active { background-color: #fff3e6 !important; color: var(--accion2) !important; border-left-color: var(--accion) !important; }
.modulo-info h3 { font-size: 1.2rem !important; color: var(--tinta) !important; }
.modulo-info p { font-size: 1rem !important; color: #3a4a5a !important; }
.tag-calc, .tag-memoria { font-size: .85rem !important; }
.btn-entrar { background-color: var(--dinero) !important; font-size: 1.05rem !important; min-height: 48px; border-radius: 9px !important; }
.btn-entrar.btn-bloqueado { background-color: #8d99a6 !important; }
.categoria-header h2 { color: var(--tinta) !important; }

/* =====================================================================
   CELULAR
   ===================================================================== */
@media (max-width: 850px) {
    .navbar { padding: 10px 14px !important; }
    .navbar-brand { font-size: 1.25em !important; }
    .nav-controls { width: 100%; gap: 8px !important; }
    .nav-controls > * { flex: 1 1 auto; text-align: center; }
    .btn-nav, .selector-pais { padding: 8px 10px !important; font-size: .92rem !important; }
    .hero { padding: 26px 16px !important; } .hero h1 { font-size: 1.7em !important; }
    .layout-principal { padding: 0 12px !important; margin: 16px auto !important; }
    .categoria-section { padding: 16px !important; }
    .modulo-lista { grid-template-columns: 1fr !important; }
    .tab-btn.active { border-bottom-color: var(--accion) !important; }
}
@media (max-width: 700px) {
    .contenedor { padding: 10px 10px 96px !important; }
    .contenedor > header { padding: 12px 14px !important; }
    .contenedor > header h1 { font-size: 1.25rem !important; }
    .columna, .card, .zapata-config, .gallery-container { padding: 16px !important; }
    .columna + .columna, .card + .card { margin-top: 4px; }
    .dashboard-grid, .layout-principal { grid-template-columns: 1fr !important; }
    .grid-lote { grid-template-columns: 1fr !important; }
    .main-image-wrapper { height: 200px !important; }
    #area-resultados { padding: 12px !important; }
    #area-resultados > div[style*="display: flex"], #area-resultados > div[style*="display:flex"] { flex-wrap: wrap; }
    #area-resultados .btn-accion { flex: 1 1 100% !important; }

    /* La tabla de resultados pasa a tarjetas: un renglón por partida */
    #tablaMateriales, #tablaMateriales tbody, #tablaMateriales tfoot, #tablaMateriales tr, #tablaMateriales td { display: block !important; width: auto !important; }
    #tablaMateriales thead { display: none !important; }
    #tablaMateriales tbody tr { border: 1px solid var(--linea); border-radius: 10px; margin: 10px 0; padding: 12px 14px; background: #fff; }
    #tablaMateriales tbody td { border: 0 !important; padding: 5px 0 !important; text-align: right !important; display: flex !important; justify-content: space-between; align-items: baseline; gap: 14px; background: transparent !important; }
    #tablaMateriales tbody td::before { content: attr(data-t); font-weight: 600; color: var(--gris); text-align: left; flex: none; }
    #tablaMateriales tbody td:first-child { display: block !important; text-align: left !important; font-weight: 700; font-size: 1.05rem; padding-bottom: 5px !important; }
    #tablaMateriales tbody td:first-child::before, #tablaMateriales tbody td[colspan]::before { content: none; }
    #tablaMateriales tbody td br { display: none; }
    #tablaMateriales tbody td span { margin-left: 8px; }
    #tablaMateriales tbody tr.es-seccion { border: 0; background: #e3eaf1; padding: 9px 12px; margin-top: 16px; }
    #tablaMateriales tbody tr.es-seccion td { color: var(--tinta) !important; font-size: 1rem; padding: 0 !important; }
    #tablaMateriales tfoot tr { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 12px; border-bottom: 1px solid #e6eaee; }
    #tablaMateriales tfoot tr[style*="display: none"], #tablaMateriales tfoot tr[style*="display:none"] { display: none !important; }
    #tablaMateriales tfoot td { border: 0 !important; padding: 0 !important; text-align: left !important; background: transparent !important; }
    #tablaMateriales tfoot td:last-child { text-align: right !important; font-weight: 700; }
    #tablaMateriales tfoot tr.subtotal-desglose, #tablaMateriales tfoot tr.subtotal-row { background: #f6f8fa; }
    #tablaMateriales tfoot tr.total-row { background: var(--tinta); border-radius: 10px; margin-top: 8px; padding: 12px; }
    #tablaMateriales tfoot tr.kpi-row { background: var(--tinta2); border-radius: 10px; margin-top: 6px; color: #fff; }
    #tablaMateriales tbody td.sin-dato { display: none !important; }
    /* Si la casilla baja al renglón siguiente, queda a la derecha */
    .form-group > input:not([type="checkbox"]):not([type="radio"]), .form-group > select { margin-left: auto !important; }
    body { padding-left: 0 !important; padding-right: 0 !important; }
    .container { grid-template-columns: minmax(0, 1fr) !important; padding: 0 10px !important; gap: 14px !important; }
    .container > * { grid-column: auto !important; min-width: 0; }
    .panel { padding: 16px !important; }
    /* Las demás tablas se deslizan con el dedo dentro de su cuadro, sin mover la página */
    .contenedor table:not(#tablaMateriales), .panel table, .container table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    canvas, svg, img { max-width: 100%; }
    .toolbar { flex-wrap: wrap; }
    .cab-sitio { margin: 10px 10px 14px; padding: 12px 14px; } .cab-sitio h1 { font-size: 1.25rem !important; }
    .contenedor table.tabla-apu, .contenedor table.tabla-carrito { font-size: .95rem !important; }
    .fila-busqueda > * { flex: 1 1 100% !important; min-width: 0 !important; }
    .fila-acciones-masivas > * { flex: 1 1 100%; }
    .ad-banner { overflow: hidden; }
    .ad-banner ins, ins.adsbygoogle { max-width: 100% !important; }
    .contenedor { overflow-wrap: anywhere; }
    .contenedor table, .tarjeta table { overflow-wrap: normal; }
    .tarjeta table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .container { display: flex !important; flex-direction: column !important; height: auto !important; box-sizing: border-box; width: 100%; margin: 0 !important; }
    .container, .container * { box-sizing: border-box; }
    .container > .panel { width: 100% !important; max-width: 100% !important; flex: none !important; height: auto !important; overflow: visible !important; }
    .container canvas { max-width: 100%; height: auto !important; }
    main { grid-template-columns: minmax(0, 1fr) !important; }
    .filtros input, .filtros select { min-width: 0 !important; flex: 1 1 100% !important; width: 100%; }
    .scroll { max-width: 100%; }
    .tarjeta { padding: 14px !important; }
    #barraTotalSitio { right: 92px; }
}

/* =====================================================================
   DOS PANELES: datos a la izquierda, dibujo y resultados a la derecha.
   En pantalla ancha cada panel tiene su propia barra para subir y bajar.
   ===================================================================== */
.dos-paneles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 16px; align-items: start; }
.panel-datos, .panel-vista { min-width: 0; }
.panel-vista > * { margin-left: 0 !important; margin-right: 0 !important; }
.panel-vista > .gallery-container { margin-top: 0 !important; margin-bottom: 16px !important; padding: 14px !important; }
.panel-vista .main-image-wrapper { max-height: 300px; }
.panel-vista #area-resultados { margin-top: 0 !important; }
.vista-vacia { border: 2px dashed var(--linea); border-radius: 14px; padding: 26px 20px; text-align: center; color: var(--gris, #5d6d7e); font-size: 1.05rem; background: #fbfcfd; }
.vista-vacia b { display: block; color: var(--tinta); font-size: 1.15rem; margin-bottom: 6px; }
@media (min-width: 1101px) {
    .panel-datos, .panel-vista,
    .layout-principal > .columna-controles, .layout-principal > .columna-visor {
        position: sticky !important; top: 8px !important; max-height: calc(100vh - 16px); overflow-y: auto; overflow-x: hidden;
        overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #9fb0c0 #eef2f5;
    }
    .panel-datos::-webkit-scrollbar, .panel-vista::-webkit-scrollbar, .layout-principal > div::-webkit-scrollbar { width: 10px; }
    .panel-datos::-webkit-scrollbar-thumb, .panel-vista::-webkit-scrollbar-thumb, .layout-principal > div::-webkit-scrollbar-thumb { background: #9fb0c0; border-radius: 6px; }
    .panel-datos::-webkit-scrollbar-track, .panel-vista::-webkit-scrollbar-track, .layout-principal > div::-webkit-scrollbar-track { background: #eef2f5; border-radius: 6px; }
    /* las cajillas de datos se acomodan en dos columnas sin dejar huecos */
    .panel-datos .dashboard-grid { display: block !important; columns: 2; column-gap: 16px; }
    .panel-datos .dashboard-grid > .columna { break-inside: avoid; margin: 0 0 16px !important; display: block; width: auto !important; }
    .panel-datos .dashboard-grid > .columna.ancho-total, .panel-datos .dashboard-grid > .columna[style*="grid-column"] { column-span: all; }
}
@media (max-width: 1100px) {
    .dos-paneles { grid-template-columns: 1fr; }
}
@media print {
    .dos-paneles { display: block !important; }
    .panel-datos, .panel-vista, .layout-principal > div { position: static !important; max-height: none !important; overflow: visible !important; }
}

/* ---------- Cajillas de datos ordenadas: pregunta a la izquierda, casilla a la derecha ---------- */
.panel-datos .columna, .panel-datos .card { padding: 16px !important; }
.panel-datos .columna h4, .panel-datos .card h3 { margin-bottom: 10px !important; padding-bottom: 8px !important; font-size: 1.12rem !important; }
#panelDatos .form-group { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; padding: 4px 0 6px !important; margin-bottom: 4px !important; gap: 4px 10px !important; }
#panelDatos .form-group > label { flex: 1 1 0 !important; width: auto !important; min-width: 5.5rem !important; margin: 0 !important; }
#panelDatos .form-group > input[type="number"] { flex: 0 0 104px !important; width: 104px !important; max-width: 104px !important; text-align: right; }
#panelDatos .form-group > select { flex: 0 1 auto !important; width: auto !important; max-width: 58% !important; min-width: 104px; }
#panelDatos .form-group > input[type="text"] { flex: 0 1 58% !important; width: 58% !important; max-width: 58% !important; }
#panelDatos .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), #panelDatos .form-group select,
#panelDatos .form-group-inline input:not([type="checkbox"]):not([type="radio"]), #panelDatos .form-group-inline select { min-height: 38px; padding: 5px 9px !important; }
#panelDatos .form-group > .helper-text { flex: 1 1 100%; max-width: 100%; text-align: left; order: 5; }
#panelDatos .form-group-inline { padding: 4px 0 6px !important; margin-bottom: 4px !important; }
.panel-datos .item-dinamico { padding: 10px !important; margin-bottom: 10px !important; }
.panel-datos .btn-calcular, .panel-datos .btn-analizar { width: 100%; }

/* ---------- Resultado dentro del panel derecho: tabla compacta, sin salirse ---------- */
.panel-vista #area-resultados { padding: 14px !important; overflow-x: auto; }
.panel-vista #area-resultados h2 { font-size: 1.3rem !important; margin-bottom: 8px !important; }
.panel-vista #tablaMateriales { font-size: .93rem !important; width: 100% !important; table-layout: auto; }
.panel-vista #tablaMateriales th { font-size: .82rem !important; padding: 7px 6px !important; }
.panel-vista #tablaMateriales td { padding: 7px 6px !important; white-space: nowrap; }
.panel-vista #tablaMateriales td:first-child, .panel-vista #tablaMateriales td:nth-child(4), .panel-vista #tablaMateriales td[colspan] { white-space: normal; }
.panel-vista #tablaMateriales td:first-child { min-width: 130px; }
.panel-vista #tablaMateriales td:nth-child(4):not(:last-child) { overflow-wrap: anywhere; }
@media (min-width: 1101px) { body:has(.dos-paneles) #barraTotalSitio { display: none !important; } }
.panel-vista #area-resultados .btn-accion { flex: 1 1 180px; }
.panel-vista #area-resultados > div[style*="flex"] { flex-wrap: wrap; }

/* Título automático de cada fila (tramo, pared, losa…): ya no se escribe */
.contenedor input.nom-fijo, .item-dinamico input.nom-fijo, #panelDatos input.nom-fijo { border: 0 !important; background: transparent !important; pointer-events: none; padding: 0 !important; min-height: 0 !important; font-weight: 700 !important; color: var(--tinta) !important; font-size: 1.05rem !important; box-shadow: none !important; outline: 0 !important; }
input.nom-oculto { display: none !important; }

.panel-datos .grid-columnas-geom { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important; gap: 12px !important; }
.panel-datos .zona-superior { margin-bottom: 16px !important; }
.panel-datos .grid-3-col { grid-template-columns: 1fr !important; }

.mapa-barras .badge-img { position: static !important; display: block !important; color: #fff !important; margin: 0 0 10px !important; font-size: 1rem !important; padding: 8px 12px !important; border-radius: 8px !important; }
.panel-vista #visor-3d-viga { height: 300px !important; }

.panel-vista #esquemaLosa.main-image-wrapper { max-height: none !important; height: auto !important; }
input.nom-fijo { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }

/* Techos: el visor va en el panel derecho y los datos de forma en el izquierdo */
.panel-datos #motor-techo { display: block !important; margin-bottom: 16px !important; }
.panel-vista .motor-vis { min-height: 420px !important; height: 460px !important; margin-bottom: 16px; }
.panel-vista #tablaMateriales td:nth-child(4):not(:last-child) { min-width: 96px; }
/* Losa de cimentación: datos a la izquierda, dibujo a la derecha */
@media (min-width: 901px) { .container.ui-app > .right-panel { order: 1; } .container.ui-app > .left-panel { order: 2; } }
@media (min-width: 1101px) { body:has(.layout-principal) #barraTotalSitio { display: none !important; } }

.panel-vista #tablaMateriales { font-size: .88rem !important; }
.panel-vista #tablaMateriales th { font-size: .84rem !important; padding: 7px 5px !important; white-space: normal; }
.panel-vista #tablaMateriales td { padding: 6px 5px !important; }
.panel-vista #tablaMateriales td:nth-child(3) { white-space: normal; }
.panel-vista #tablaMateriales td:first-child { min-width: 112px; }
.panel-vista #tablaMateriales td:nth-child(4):not(:last-child) { min-width: 84px; }
.panel-vista #tablaMateriales #granTotal { font-size: 1.35rem !important; }
.panel-vista #area-resultados table:not(#tablaMateriales) { font-size: .88rem !important; }
.panel-vista #area-resultados table:not(#tablaMateriales) th, .panel-vista #area-resultados table:not(#tablaMateriales) td { padding: 6px 5px !important; }

/* Pantallas de portátil: las cajillas de datos van en una sola columna para que no queden apretadas */
@media (min-width: 1101px) and (max-width: 1419px) { .panel-datos .dashboard-grid { columns: 1 !important; } .dos-paneles { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); } }

/* ---------- Pestañas del cuadro de imágenes: dibujo 3D / fotos de referencia ---------- */
.d3-tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.d3-tab { flex: 1 1 0; border: 2px solid var(--linea); background: #f4f6f8; color: var(--tinta); font: inherit; font-weight: 700; font-size: 1rem; padding: 9px 10px; border-radius: 9px; cursor: pointer; min-height: 44px; }
.d3-tab.activa { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.d3-tab:focus-visible { outline: 3px solid #f7b267; outline-offset: 1px; }
.d3-lienzo { background: #f7f9fa; border: 1px solid var(--linea); border-radius: 10px; padding: 4px; }
.d3-lienzo svg text { font-family: inherit; }