/* ── Cotizador ──────────────────────────────────────────────
           Todo va prefijado con `#vistaCotizador`: el archivo original
           traia reglas sueltas para `body`, `table`, `th`, `td`, `select`
           e `input`, que sin aislar se habrian comido el estilo del
           resto de SHOFAR. */
        #vistaCotizador {
            --primary: #003A24;      /* verde oscuro SHOFAR */
            --secondary: #006F46;    /* verde SHOFAR */
            --accent: #dc2626;
            --bg: transparent;       /* la pestaña vive dentro del panel */
            --card-bg: #ffffff;
            --text-gray: #555555;
            --text-green: #006F46;
            --amarillo: #F4B215;
        }
        #vistaCotizador {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: var(--bg);
            margin: 0;
            padding: 12px;
            color: #333;
        }
        #vistaCotizador .header {
            background-color: var(--primary);
            color: white;
            padding: 14px 20px;
            border-radius: 8px;
            text-align: center;
            margin-bottom: 12px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        #vistaCotizador .header h1 {
            font-family: 'Montserrat', sans-serif;
            margin: 0;
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        #vistaCotizador .zone-bar {
            background: #F0FDF4;
            border: 1px solid #bbf7d0;
            padding: 10px 16px;
            border-radius: 8px;
            margin-bottom: 12px;
            text-align: center;
            font-weight: bold;
            color: var(--primary);
            font-size: 0.9rem;
        }
        #vistaCotizador .totals-banner {
            position: sticky;
            /* Se pega DEBAJO de la barra fija de SHOFAR (94px de alto, z-50) y
               por debajo de ella en capas: con top:10px y z-index:100 se montaba
               sobre la barra y sobre su menú al abrirlo. */
            top: 102px;
            z-index: 40;
            background: linear-gradient(135deg, #003A24 0%, #006F46 100%);
            color: #fff;
            padding: 14px;
            border-radius: 8px;
            margin-bottom: 16px;
            display: flex;
            justify-content: space-around;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            flex-wrap: wrap;
            gap: 10px;
        }
        #vistaCotizador .total-box {
            text-align: center;
        }
        #vistaCotizador .total-box span {
            display: block;
            font-size: 0.75rem;
            text-transform: uppercase;
            color: #bbf7d0;
        }
        #vistaCotizador .total-box strong {
            font-size: 1.35rem;
            color: #F4B215;
        }
        #vistaCotizador .table-container {
            overflow-x: auto;
            background: var(--card-bg);
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.08);
            margin-bottom: 16px;
        }
        #vistaCotizador table {
            width: 100%;
            border-collapse: collapse;
            min-width: 1000px;
            font-size: 0.85rem;
        }
        #vistaCotizador th, #vistaCotizador td {
            padding: 8px 6px;
            border-bottom: 1px solid #e0e0e0;
            text-align: center;
        }
        #vistaCotizador th {
            background-color: #F0FDF4;
            color: var(--primary);
            font-weight: bold;
        }
        #vistaCotizador select, #vistaCotizador input {
            width: 100%;
            padding: 6px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 0.85rem;
        }
        #vistaCotizador .btn {
            padding: 10px 16px;
            border: none;
            border-radius: 6px;
            font-weight: bold;
            cursor: pointer;
            font-size: 0.9rem;
        }
        #vistaCotizador .btn-add { background-color: var(--primary); color: white;
        }
        #vistaCotizador .cot-pdf-campo { display: block; margin-bottom: 10px; font-size: 0.85rem; font-weight: 600; color: #334155; }
        #vistaCotizador .cot-pdf-campo input { width: 100%; margin-top: 4px; }
        #vistaCotizador .quitar-largo { display: none; }
        #vistaCotizador .btn-remove { background-color: var(--accent); color: white; padding: 4px 8px; font-size: 0.75rem;
        }
        #vistaCotizador .status-badge {
            display: block;
            padding: 2px 4px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: bold;
        }
        #vistaCotizador .status-ok { background: #F0FDF4; color: #2e7d32;
        }
        #vistaCotizador .status-alert { background: #ffebee; color: #c62828;
        }
        #vistaCotizador .status-warn { background: #fff3e0; color: #ef6c00;
        }
        #vistaCotizador .btn-detail {
            background-color: #F0FDF4;
            border: 1px solid #a5d6a7;
            color: var(--primary);
            padding: 8px 4px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            width: 100%;
            transition: all 0.2s ease;
            font-size: 0.9rem;
        }
        #vistaCotizador .btn-detail:hover { background-color: #c8e6c9;
        }
        #vistaCotizador .modal-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        #vistaCotizador .modal-content {
            background: #fff;
            width: 95%;
            max-width: 500px;
            border-radius: 6px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
            overflow: hidden;
            animation: cotFadeIn 0.2s ease;
            font-family: Arial, sans-serif;
        }
        #vistaCotizador .modal-header {
            background: var(--primary);
            color: white;
            padding: 16px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #vistaCotizador .modal-header h2 { 
            margin: 0; 
            font-size: 1.25rem; 
            font-weight: bold;
        }
        #vistaCotizador .modal-close {
            background: transparent;
            border: none;
            color: white;
            font-size: 1.8rem;
            cursor: pointer;
            line-height: 1;
            font-weight: bold;
        }
        #vistaCotizador .modal-body { 
            padding: 20px 25px;
            /* Con muchos amparos el desglose es más alto que la pantalla: se
               desliza por dentro en vez de cortarse. */
            max-height: calc(90vh - 70px);
            overflow-y: auto;
        }
        #vistaCotizador .breakdown-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            min-width: unset;
        }
        #vistaCotizador .breakdown-table th {
            background-color: white;
            color: var(--text-gray);
            font-weight: bold;
            border-bottom: 2px solid #eee;
            padding: 10px 5px;
            text-align: left;
            font-size: 0.9rem;
        }
        #vistaCotizador .breakdown-table td {
            border-bottom: 1px solid #f0f0f0;
            padding: 12px 5px;
            text-align: left;
            color: #444;
            font-size: 0.9rem;
        }
        #vistaCotizador .breakdown-table th.right-align, #vistaCotizador .breakdown-table td.right-align {
            text-align: right;
        }
        #vistaCotizador .text-green { 
            color: var(--text-green) !important; 
            font-weight: bold;
        }
        #vistaCotizador .font-bold {
            font-weight: bold;
        }
        #vistaCotizador .modal-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #eee;
            padding-top: 20px;
            color: var(--primary);
        }
        #vistaCotizador .modal-footer .total-label {
            font-size: 1.3rem;
            font-weight: bold;
        }
        #vistaCotizador .modal-footer .total-amount {
            font-size: 1.3rem;
            font-weight: bold;
        }

        /* ── Cotizador en celular ───────────────────────────────────────────
           La tabla pide 1.000px y 12 columnas: en un telefono habia que
           deslizar de lado para llenar un solo integrante, justo cuando se esta
           cerrando un cliente. Por debajo de 900px cada fila se convierte en
           una ficha, con el rotulo de cada casilla sacado de `data-rotulo`.
           NO se duplica el formulario: son las mismas celdas que lee el
           calculo, solo cambia como se pintan. */
        @media (max-width: 900px) {
            #vistaCotizador { padding: 0; }
            #vistaCotizador .table-container {
                overflow-x: visible;
                background: transparent;
                box-shadow: none;
            }
            #vistaCotizador .table-container table { min-width: 0; display: block; }
            #vistaCotizador .table-container thead { display: none; }
            #vistaCotizador .table-container tbody { display: block; }
            #vistaCotizador .table-container tbody tr {
                display: block;
                background: var(--card-bg);
                border: 1px solid #d1fae5;
                border-left: 4px solid var(--secondary);
                border-radius: 12px;
                padding: 6px 12px 12px;
                margin-bottom: 12px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            }
            #vistaCotizador .table-container tbody td {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                padding: 7px 0;
                border-bottom: 1px solid #f1f5f9;
                text-align: left;
            }
            #vistaCotizador .table-container tbody td:last-child { border-bottom: none; }
            #vistaCotizador .table-container tbody td::before {
                content: attr(data-rotulo);
                font-size: 0.8rem;
                font-weight: 700;
                color: var(--text-gray);
                flex: 0 0 42%;
            }
            /* 16px en los campos: por debajo de eso el navegador del telefono
               hace zoom solo al tocarlos y se pierde el hilo. 44px de alto es
               el minimo para no fallar el toque. */
            #vistaCotizador .table-container tbody td select,
            #vistaCotizador .table-container tbody td input {
                flex: 1 1 auto;
                width: auto;
                /* Sin esto, las casillas numéricas (peso, estatura) no se dejan
                   achicar y empujaban la página a 402px en un teléfono de 375. */
                min-width: 0;
                min-height: 44px;
                font-size: 16px;
            }
            /* Lo que se mira, grande: estado y los dos valores. */
            #vistaCotizador .table-container tbody td.status-col,
            #vistaCotizador .table-container tbody td.res-op1,
            #vistaCotizador .table-container tbody td.res-op2 {
                font-size: 1.05rem;
                font-weight: 800;
                color: var(--primary);
            }
            #vistaCotizador .table-container tbody td.res-op1 .btn-detail,
            #vistaCotizador .table-container tbody td.res-op2 .btn-detail {
                flex: 1 1 auto;
                min-height: 44px;
                font-size: 1rem;
            }
            #vistaCotizador .table-container tbody td.col-quitar { justify-content: stretch; padding-top: 12px; }
            #vistaCotizador .table-container tbody td.col-quitar::before { content: none; }
            #vistaCotizador .quitar-corto { display: none; }
            #vistaCotizador .quitar-largo { display: inline; }
            #vistaCotizador tbody td.col-quitar .btn-remove {
                width: 100%;
                min-height: 44px;
                font-size: 0.9rem;
            }
            #vistaCotizador .btn-add { width: 100%; min-height: 48px; font-size: 1rem; }
            /* El total va pegado arriba: es el numero que se le dice al cliente. */
            #vistaCotizador .totals-banner { top: 96px; padding: 12px; gap: 6px; }
            #vistaCotizador .total-box { flex: 1 1 140px; }
            #vistaCotizador .total-box strong { font-size: 1.15rem; }
            #vistaCotizador .header h1 { font-size: 1rem; }
            #vistaCotizador .zone-bar { font-size: 0.78rem; padding: 8px 12px; }
            /* El desglose ocupa toda la pantalla: centrado y más bajo que ella,
               arriba se asomaba el panel de totales (va pegado arriba) montado
               sobre la ventana. La X queda a la vista y el contenido se desliza
               por dentro. */
            #vistaCotizador .modal-overlay { align-items: stretch; }
            #vistaCotizador .modal-content {
                width: 100%; max-width: none; height: 100dvh; max-height: none;
                border-radius: 0; display: flex; flex-direction: column;
            }
            #vistaCotizador .modal-header { flex: none; gap: 12px; padding: 14px 16px; }
            #vistaCotizador .modal-header h2 { font-size: 1.05rem; line-height: 1.3; flex: 1 1 auto; min-width: 0; }
            #vistaCotizador .modal-close {
                flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
                border-radius: 10px; background: rgba(255,255,255,.12);
            }
            #vistaCotizador .modal-body { flex: 1 1 auto; max-height: none; overflow-y: auto; padding: 14px 16px 20px; }
        }
        @keyframes cotFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }