/* ==========================================
   1. ESTILOS CSS INTEGRADOS - PROARTE
   ========================================== */
:root { --primary: #ff6600; --text: #333333; --bg: #f4f7f6; --white: #ffffff; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Roboto', sans-serif; background-color: var(--bg); color: var(--text); line-height: 1.4; overflow-x: hidden; }

/* ==========================================
   CABECERA (HEADER) Y BUSCADOR
   ========================================== */
.main-header { 
    background-color: #399BD5; 
    padding: 20px 30px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    position: sticky; top: 0; z-index: 100; 
    text-align: center;
}

/* BOTÓN INSTALAR APP EN CABECERA */
.btn-instalar-app {
    background: #e3f2fd;
    color: #1976d2;
    border: 1px solid #90caf9;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 15px;
}

.btn-instalar-app:hover {
    background: #1976d2;
    color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(25, 118, 210, 0.2);
}

.main-title { font-weight: 900; color: #ffffff; text-transform: uppercase; font-size: 1.1rem; letter-spacing: 1px; margin-bottom: 15px; }
.main-logo { height: 60px; margin-bottom: 5px; cursor: pointer; }

.btn-volver-tienda { 
    position: absolute; right: 30px; top: 25px; 
    text-decoration: none; color: #ffffff; font-size: 0.9rem; font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.4); padding: 10px 20px; border-radius: 30px; 
    background: rgba(255, 255, 255, 0.15); transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); backdrop-filter: blur(4px);
}
.btn-volver-tienda:hover { 
    background: #ffffff; color: #399BD5; box-shadow: 0 4px 15px rgba(0,0,0,0.15); 
    border-color: #ffffff; transform: scale(1.05); 
}

/* --- ESTILO DEL CONTADOR GLOBAL --- */
.contador-badge {
    background: rgba(255, 255, 255, 0.2); color: #fff; padding: 5px 15px; border-radius: 20px; 
    font-size: 0.85rem; font-weight: bold; margin-top: 10px; border: 1px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); backdrop-filter: blur(4px); display: inline-block;
}		

/* --- CARRUSEL Y LIMPIEZA DE ARCHIVOS --- */
.proarte-carrusel { position: relative; width: 100%; height: 220px; border-radius: 8px; overflow: hidden; background: transparent; display: flex; align-items: center; justify-content: center; border: none; }
.proarte-carrusel img { max-width: 100%; max-height: 100%; object-fit: contain; position: absolute; opacity: 0; transition: opacity 0.5s ease-in-out; }
.proarte-carrusel img.activa { opacity: 1; z-index: 1; }
.car-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.4); color: white; border: none; width: 30px; height: 30px; cursor: pointer; z-index: 2; border-radius: 50%; font-size: 14px; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
.car-btn:hover { background: rgba(0,0,0,0.8); }
.car-prev { left: 10px; }
.car-next { right: 10px; }
.btn-limpiar { background: none; border: none; color: #d32f2f; cursor: pointer; font-size: 1.1rem; margin-left: 8px; display: none; vertical-align: middle; }
.btn-limpiar:hover { transform: scale(1.2); }

/* --- MODO REVENDEDOR --- */
.btn-revendedor {
    position: absolute; right: 30px; top: 75px; 
    background: rgba(0,0,0,0.2); color: #fff; border: 1px solid rgba(255,255,255,0.4); 
    padding: 8px 15px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; cursor: pointer; transition: 0.3s;
}
.btn-revendedor:hover { background: #fff; color: #2e7d32; }

/* BUSCADOR DE PRODUCTOS */
.search-container { 
    position: absolute; 
    left: 30px; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 300px; 
}
.search-input {
    width: 100%; padding: 10px 20px 10px 40px; border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.8); outline: none; font-size: 0.95rem;
    background-color: rgba(255, 255, 255, 0.95); color: #333; transition: 0.3s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.search-input::placeholder { color: #888; }
.search-input:focus { background-color: #fff; box-shadow: 0 0 12px rgba(255,255,255,0.8); }
.search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; opacity: 0.6; color: #333; }

/* REGLAS RESPONSIVE DEL HEADER */
@media (max-width: 768px) {
    .btn-volver-tienda { position: relative; right: auto; top: auto; transform: none; margin-bottom: 10px; width: 90%; }
    .search-container { position: relative; left: auto; top: auto; transform: none; width: 90%; margin-bottom: 15px; }
    .modules-grid { grid-template-columns: 1fr 1fr !important; }
    .btn-revendedor { position: relative; right: auto; top: auto; bottom: auto; width: 90%; margin-top: 0; margin-bottom: 10px; }
    .rev-badge { width: 90%; font-size: 0.7rem; margin-bottom: 12px; white-space: normal; }
}

/* MAGIA DEL BUSCADOR: SINGLE MODE */
.modules-grid.single-mode {
    display: flex !important; 
    justify-content: center; 
    align-items: flex-start;
    padding-top: 30px;
}
.modules-grid.single-mode .module-card {
    transform: scale(1.20); 
    margin: 30px; 
    width: 220px; /* FIX: Obliga a la tarjeta a tener cuerpo */
    max-width: 250px;
    flex-shrink: 0; /* FIX: Evita que se aplaste como fideo */
}
.modules-grid.single-mode .module-card:hover {
    transform: scale(1.20) translateY(-5px); 
}

/* DISEÑO DE GRILLA PRINCIPAL */
.container { max-width: 1400px; margin: 2vh auto; padding: 0 15px; min-height: 75vh; height: auto; padding-bottom: 20px; }
.modules-grid { 
    display: grid; 
    grid-template-columns: repeat(6, 1fr); 
    gap: 12px; 
    height: 100%;
}
.module-card { 
    background: var(--white); 
    padding: 15px; 
    border-radius: 10px; 
    box-shadow: 0 3px 10px rgba(0,0,0,0.04); 
    transition: all 0.3s ease; text-align: center; cursor: pointer; 
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}
.module-card:hover { 
    transform: translateY(-4px); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.12); 
}
.module-card.disabled { opacity: 0.5; cursor: default; border: 1px dashed #ccc !important; box-shadow: none; background: #fafafa !important; }
.module-card.disabled:hover { transform: none; box-shadow: none; }
.module-card.en-revision { filter: grayscale(100%); opacity: 0.6; position: relative; }
.module-card.en-revision .module-desc { color: #d32f2f; font-weight: 900; }
.module-card.en-revision::after { content: "🚧 EN REVISIÓN"; position: absolute; top: -10px; right: 10px; background: #d32f2f; color: white; padding: 4px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

body.admin-mode .module-card.en-revision { filter: none; opacity: 1; outline: 3px dashed #d32f2f; cursor: pointer !important; pointer-events: auto !important; }
body.admin-mode .module-card.en-revision::after { content: "🔓 DESBLOQUEADO (ADMIN)"; background: #4CAF50; }

/* COLORES DE LAS TARJETAS */
.module-card:nth-child(1) { border-top: 4px solid #FF6B6B; background: linear-gradient(to bottom, #fffafa, #ffffff); } 
.module-card:nth-child(2) { border-top: 4px solid #4ECDC4; background: linear-gradient(to bottom, #f0fbfb, #ffffff); } 
.module-card:nth-child(3) { border-top: 4px solid #FFE66D; background: linear-gradient(to bottom, #fffdf2, #ffffff); } 
.module-card:nth-child(4) { border-top: 4px solid #1A535C; background: linear-gradient(to bottom, #f2f7f8, #ffffff); } 
.module-card:nth-child(5) { border-top: 4px solid #FF9F1C; background: linear-gradient(to bottom, #fff8f0, #ffffff); } 
.module-card:nth-child(6) { border-top: 4px solid #9B5DE5; background: linear-gradient(to bottom, #f8f2fe, #ffffff); } 
.module-card:nth-child(7) { border-top: 4px solid #F15BB5; background: linear-gradient(to bottom, #fef2f8, #ffffff); } 
.module-card:nth-child(8) { border-top: 4px solid #00BBF9; background: linear-gradient(to bottom, #f0fbff, #ffffff); } 
.module-card:nth-child(9) { border-top: 4px solid #00F5D4; background: linear-gradient(to bottom, #effffd, #ffffff); } 
.module-card:nth-child(10) { border-top: 4px solid #8AC926; background: linear-gradient(to bottom, #f7fdf0, #ffffff); } 
.module-card:nth-child(11) { border-top: 4px solid #6A4C93; background: linear-gradient(to bottom, #f6f3f9, #ffffff); } 
.module-card:nth-child(12) { border-top: 4px solid #1982C4; background: linear-gradient(to bottom, #f1f8fc, #ffffff); } 
.module-card:nth-child(13) { border-top: 4px solid #8D99AE; background: linear-gradient(to bottom, #f7f8f9, #ffffff); } 
.module-card:nth-child(14) { border-top: 4px solid #D90429; background: linear-gradient(to bottom, #fcf0f2, #ffffff); } 
.module-card:nth-child(15) { border-top: 4px solid #38B000; background: linear-gradient(to bottom, #f2fbf0, #ffffff); } 
.module-card:nth-child(16) { border-top: 4px solid #FF5722; background: linear-gradient(to bottom, #fff5f2, #ffffff); } 
.module-card:nth-child(17) { border-top: 4px solid #009688; background: linear-gradient(to bottom, #f2fcfb, #ffffff); } 
.module-card:nth-child(18) { border-top: 4px solid #795548; background: linear-gradient(to bottom, #fcfaf8, #ffffff); } 
.module-card:nth-child(19) { border-top: 4px solid #E91E63; background: linear-gradient(to bottom, #fdf0f5, #ffffff); } 
.module-card:nth-child(20) { border-top: 4px solid #FFC300; background: linear-gradient(to bottom, #fffdf0, #ffffff); }
.module-card:nth-child(21) { border-top: 4px solid #9C27B0; background: linear-gradient(to bottom, #f8f2fe, #ffffff); } 
.module-card:nth-child(22) { border-top: 4px solid #FF9800; background: linear-gradient(to bottom, #fff8f0, #ffffff); } 
.module-card:nth-child(23) { border-top: 4px solid #2196F3; background: linear-gradient(to bottom, #f0f7ff, #ffffff); } 
.module-card:nth-child(24) { border-top: 4px solid #607D8B; background: linear-gradient(to bottom, #f4f6f7, #ffffff); } 
.module-card:nth-child(25) { border-top: 4px solid #607D8B; background: linear-gradient(to bottom, #f0f4f7, #ffffff); }

.module-icon { font-size: 2.8rem; margin-bottom: 8px; display: block; }
.module-icon img { height: 3.5rem; object-fit: contain; margin-bottom: 8px; display: block; } 
.module-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 5px; line-height: 1.1; }
.module-desc { font-size: 0.75rem; color: #666; font-weight: 400; line-height: 1.2; }

/* ==========================================
   MODALES Y FORMULARIOS
   ========================================== */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.75); z-index: 1000; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
.modal-content { background: #ffffff; width: 95%; max-width: 600px; max-height: 90vh; border-radius: 12px; overflow-y: auto; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.close-btn { position: absolute; right: 15px; top: 12px; font-size: 1.8rem; color: #fff; cursor: pointer; line-height: 1; z-index: 10; text-shadow: 0 2px 4px rgba(0,0,0,0.3); transition: 0.2s;}
.close-btn:hover { color: #ffcccc; transform: scale(1.1); }
.modal-cap { position: relative; }
.mod-header { padding: 15px; text-align: center; border-radius: 12px 12px 0 0; margin-bottom: 15px; }
.mod-header h2 { color: #ffffff !important; font-weight: 900; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.mod-body { padding: 0 30px 15px; }

/* REGLA UNIVERSAL DE TAMAÑO PARA MODALES (RESPONSIVE) */
.modal-content { width: 95% !important; max-width: 1100px !important; margin: 20px auto !important; }
@media (min-width: 768px) { .modal-content { width: 80% !important; min-width: 850px !important; } }

#modal-m12 .modal-content { max-width: 850px; }

/* LAYOUT 2 COLUMNAS (E-COMMERCE) */
.split-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 20px; align-items: start; }
.layout-left { display: flex; flex-direction: column; gap: 15px; position: sticky; top: 15px; }
.layout-right { display: flex; flex-direction: column; gap: 12px; }

.product-image-box { background: transparent; border: none; border-radius: 10px; padding: 15px; text-align: center; min-height: 220px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; box-shadow: none; }
.product-image-box img { max-width: 100%; height: auto; border-radius: 6px; display: block; }
.product-image-box .img-placeholder { color: #aaa; font-weight: 900; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 2px; }
.product-image-box .img-sub { color: #888; font-size: 0.8rem; margin-top: 5px; }

/* CAJAS DE ARCHIVOS */
.file-section { background: #e0f2f1; padding: 15px; border-radius: 8px; border: 1px dashed #009688; margin-top: 15px; }
.file-section-title { font-weight: bold; color: #00796b; margin-bottom: 10px; font-size: 0.9rem; text-transform: uppercase; display: block; }
.file-input-wrapper { position: relative; overflow: hidden; display: inline-block; width: 100%; margin-bottom: 5px; }
.file-input-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; }
.btn-file { background: #009688; color: white; padding: 10px 15px; border-radius: 6px; display: block; text-align: center; font-weight: bold; cursor: pointer; transition: 0.3s; }
.btn-file:hover { background: #00796b; }
.file-name { font-size: 0.8rem; color: #555; display: block; margin-bottom: 10px; font-style: italic; word-break: break-all; text-align: center;}
.captcha-box { margin-top: 15px; display: flex; justify-content: center; transform: scale(0.95); }
.modal-content .captcha-box { display: none !important; } /* APAGAR CAPTCHAS VIEJOS */

/* RESPONSIVE SPLIT LAYOUT */
@media (max-width: 768px) {
    .split-layout { display: flex; flex-direction: column; gap: 0; }
    .layout-left { display: contents; } 
    .product-image-box { order: 1; width: 100%; margin-bottom: 20px; }
    .layout-right { order: 2; width: 100%; margin-bottom: 10px; }
    .layout-left > div:not(.product-image-box):not(.res-box) { order: 3; width: 100%; margin-bottom: 15px; }
    .res-box { order: 4; width: 100%; }
}

/* COLORES DINÁMICOS ENCABEZADOS MODALES */
#modal-m8 .mod-header { background-color: #FF6B6B; } 
#modal-m23 .mod-header { background-color: #2196F3 !important; }
#modal-m1 .mod-header { background-color: #4ECDC4; } 
#modal-m9 .mod-header { background-color: #E4C824; } 
#modal-m12 .mod-header { background-color: #1A535C; } 
#modal-m6 .mod-header { background-color: #FF9F1C; } 
#modal-m4 .mod-header { background-color: #9B5DE5; } 
#modal-m11 .mod-header { background-color: #F15BB5; } 
#modal-m7 .mod-header { background-color: #00BBF9; } 
#modal-m14 .mod-header { background-color: #00BFA5; } 
#modal-m5 .mod-header { background-color: #72A620; } 
#modal-m13 .mod-header { background-color: #6A4C93; } 
#modal-m3 .mod-header { background-color: #1982C4; } 
#modal-m10 .mod-header { background-color: #8D99AE; } 
#modal-m2 .mod-header { background-color: #D90429; } 
#modal-m15 .mod-header { background-color: #38B000; } 
#modal-m16 .mod-header { background-color: #FF5722; } 
#modal-m17 .mod-header { background-color: #009688; } 
#modal-m18 .mod-header { background-color: #795548; } 
#modal-m19 .mod-header { background-color: #E91E63; } 

.form-group { margin-bottom: 12px; text-align: left; }
.form-group label { display: block; font-weight: 700; font-size: 0.8rem; color: #666; margin-bottom: 4px; text-transform: uppercase; }
input, select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.95rem; transition: 0.3s; }
input:disabled, select:disabled { background-color: #f5f5f5; color: #aaa; border-color: #eee; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m3-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .m3-grid-3 { grid-template-columns: 1fr; } }

.res-box { margin-top: 15px; padding: 15px; background: #fafafa; border: 2px dashed #ddd; border-radius: 10px; text-align: center; }
canvas { max-width: 100%; height: auto; border: 1px solid #eee; margin-top: 10px; background-color: #fff;}
.total { font-size: 2rem; font-weight: 900; color: #ff6600 !important; display: block; line-height: 1; margin-top: 5px; }
.unit-text { color: #888; font-size: 0.9rem; margin-top: 5px; font-weight: 400; font-style: italic; } 

.mod-body-bottom { padding: 0 30px 25px; }
.cliente-seccion { border-top: 1px solid #eee; padding-top: 15px; margin-top: 10px; }
.btn-wa { display: block; width: 100%; padding: 12px; background: #25D366; color: #fff; text-align: center; border-radius: 6px; font-weight: 700; text-decoration: none; font-size: 1.05rem; border: none; cursor: pointer; transition: 0.2s;}
.btn-wa:hover { background: #20b858; }
.btn-captura { background: #333; color: white; padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; font-size: 0.85rem; margin-bottom: 10px; display: inline-block; width: 100%; transition: 0.3s;}
.btn-captura:hover { background: #555; }
.msg-ok { display: none; color: #20b858; font-weight: bold; margin-top: 10px; text-align: center; font-size: 0.9rem; }

/* ESTILOS DE REVENDEDOR (EXTRA) */
.main-header.rev-mode { background-color: #2e7d32 !important; transition: 0.5s; } 
.rev-badge { display: none; background: #fff; color: #2e7d32; font-size: 0.8rem; font-weight: 900; padding: 4px 12px; border-radius: 10px; margin-top: 5px; text-transform: uppercase; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.main-header.rev-mode .rev-badge { display: inline-block; }
.main-header.rev-mode .btn-revendedor { display: none; }

/* ==========================================
   WIDGETS FLOTANTES (NOTAS, CALCULADORA, CARRITO)
   ========================================== */
.btn-notas-flotante { position: fixed; bottom: 150px; right: 20px; width: 50px; height: 50px; background: #FF9F1C; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 4px 10px rgba(0,0,0,0.2); cursor: pointer; z-index: 9998; transition: 0.3s; border: none; }
.btn-notas-flotante:hover { transform: scale(1.1); background: #e88e15; }
.widget-notas { display: none; position: fixed; bottom: 210px; right: 20px; width: 280px; background: #fff; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); z-index: 9999; border: 1px solid #ddd; overflow: hidden; animation: slideUp 0.3s ease; }
.notas-header { background: #FF9F1C; color: white; padding: 10px 15px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
#notas-texto { width: 100%; height: 200px; padding: 15px; border: none; resize: none; font-family: 'Roboto', sans-serif; font-size: 0.9rem; color: #333; outline: none; background: #fffdf2; }
.notas-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background: #f8f9fa; border-top: 1px solid #eee; }
#notas-status { font-size: 0.75rem; color: #2e7d32; font-style: italic; }
.btn-limpiar-notas { background: none; border: none; color: #d32f2f; cursor: pointer; font-size: 0.8rem; font-weight: bold; transition: 0.2s; }
.btn-limpiar-notas:hover { color: #b71c1c; text-decoration: underline; }

.btn-calc-flotante { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; background: #399BD5; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 4px 10px rgba(0,0,0,0.2); cursor: pointer; z-index: 9998; transition: 0.3s; border: none; }
.btn-calc-flotante:hover { transform: scale(1.1); background: #2b7cae; }
.widget-calculadora { display: none; position: fixed; bottom: 80px; right: 20px; width: 250px; background: #fff; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); z-index: 9999; border: 1px solid #ddd; overflow: hidden; animation: slideUp 0.3s ease; }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.calc-header { background: #399BD5; color: white; padding: 10px 15px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
.calc-pantalla { width: 100%; text-align: right; font-size: 1.5rem; padding: 15px 10px; margin-bottom: 10px; border: none; border-bottom: 1px solid #eee; background: #f9f9f9; color: #333; outline: none; }
.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 15px 15px; }
.calc-btn { padding: 12px 0; border: 1px solid #eee; border-radius: 8px; font-weight: bold; font-size: 1.1rem; cursor: pointer; transition: 0.2s; background: #fff; color: #555; }
.calc-btn:hover { background: #f0f0f0; }
.calc-btn.op { background: #f8f9fa; color: #399BD5; }
.calc-btn.eq { background: #399BD5; color: white; border-color: #399BD5; }
.calc-btn.clear { background: #ffebee; color: #d32f2f; border-color: #ffcdd2; }

/* CARRITO FLOTANTE */
.btn-carrito-flotante { position: fixed; bottom: 85px; right: 20px; width: 50px; height: 50px; background: #25D366; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 4px 10px rgba(0,0,0,0.2); cursor: pointer; z-index: 9998; transition: 0.3s; border: none; }
.btn-carrito-flotante:hover { transform: scale(1.1); background: #20b858; }
.cart-badge { position: absolute; top: -5px; right: -5px; background: #d32f2f; color: white; font-size: 0.75rem; font-weight: bold; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; display: none; }
.widget-carrito { display: none; position: fixed; bottom: 145px; right: 20px; width: 320px; max-height: calc(100vh - 170px); background: #fff; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); z-index: 9999; border: 1px solid #ddd; overflow: hidden; animation: slideUp 0.3s ease; flex-direction: column; }
.carrito-header { background: #25D366; color: white; padding: 12px 15px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.carrito-body { padding: 15px; overflow-y: auto; flex-grow: 1; background: #f9f9f9; min-height: 90px; }
.carrito-item { background: #fff; border: 1px solid #eee; padding: 10px; border-radius: 8px; margin-bottom: 10px; position: relative; box-shadow: 0 2px 5px rgba(0,0,0,0.02);}
.carrito-item-title { font-weight: bold; font-size: 0.9rem; color: #333; margin-bottom: 5px; padding-right: 20px;}
.carrito-item-desc { font-size: 0.8rem; color: #666; line-height: 1.2; white-space: pre-wrap;}
.carrito-item-price { font-weight: 900; color: #ff6600; font-size: 1rem; text-align: right; margin-top: 5px; }
.btn-quitar-item { position: absolute; top: 8px; right: 8px; background: none; border: none; color: #d32f2f; cursor: pointer; font-size: 1.1rem; }
.carrito-footer { padding: 15px 15px 45px 15px; background: #fff; border-top: 1px solid #eee; flex-shrink: 0; } 
.carrito-total-box { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.carrito-total-label { font-weight: bold; color: #555; text-transform: uppercase; font-size: 0.9rem; }
.carrito-total-monto { font-weight: 900; color: #ff6600; font-size: 1.4rem; }
.btn-carrito-accion { width: 100%; padding: 10px; border-radius: 6px; font-weight: bold; cursor: pointer; transition: 0.2s; border: none; margin-bottom: 8px; display: block; text-align: center; text-decoration: none;}
.btn-seguir { background: #e0e0e0; color: #333; }
.btn-seguir:hover { background: #d5d5d5; }
.btn-finalizar { background: #25D366; color: #fff; font-size: 1.1rem; }
.btn-finalizar:hover { background: #20b858; }
.btn-vaciar { background: transparent; color: #d32f2f; width: 100%; border: none; font-size: 0.85rem; font-weight: bold; cursor: pointer; text-decoration: underline; margin-top: 12px; padding-bottom: 5px; }

/* BANNER DE SESIÓN */
.session-banner { display: none; background: #fff3e0; color: #e65100; padding: 10px 20px; text-align: center; font-size: 0.95rem; font-weight: bold; border-bottom: 1px solid #ffe0b2; }
.session-banner-cerrar { color: #d32f2f; cursor: pointer; text-decoration: underline; margin-left: 15px; font-size: 0.8rem; }

/* ========================================== */
/* 🌀 EFECTO TARJETAS 3D GIRATORIAS GLOBAL    */
/* ========================================== */
.card-3d {
    background: transparent !important;
    perspective: 1000px;
    cursor: pointer;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important; /* FIX: Remueve el borde gris externo del módulo */
}

.card-3d .card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 190px;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}

/* Computadoras: Hover */
@media (hover: hover) {
    .card-3d:hover .card-inner { transform: rotateY(180deg); }
}

/* Celulares: Giro manual */
.card-3d.girada .card-inner { transform: rotateY(180deg); }

.card-front, .card-back {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    box-sizing: border-box !important;
    overflow: hidden;
}

.card-front { 
    background: #fff; 
}

/* ========================================== */
/* 🛠️ FIX: AJUSTES DE ESPACIO EN DORSO 3D     */
/* ========================================== */
.card-back {
    color: #fff;
    transform: rotateY(180deg);
    padding: 15px 10px !important; 
    justify-content: center !important;
    gap: 8px;
}

.card-back h4 {
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
}

.card-back p {
    font-size: 0.75rem !important;
    line-height: 1.25 !important;
    margin-bottom: 5px !important;
}

.btn-cotizar-dorso {
    background: #fff;
    border: none;
    padding: 6px 14px !important;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.8rem !important;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: transform 0.2s;
    margin-top: 5px;
}

.btn-cotizar-dorso:hover { 
    transform: scale(1.05); 
}

/* === PANEL PROARTE: MODO INTERNO AUTOAJUSTABLE ===
   Solo se activa cuando sys_core_coti_v18.html se abre con ?interno=true.
   No modifica la vista pública normal del cotizador. */
html.proarte-panel-interno,
html.proarte-panel-interno body {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

html.proarte-panel-interno #header-principal,
html.proarte-panel-interno #banner-sesion,
html.proarte-panel-interno #footer-proarte {
    display: none !important;
}

html.proarte-panel-interno body > .container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: var(--panel-pad, 5px) !important;
    padding-bottom: var(--panel-pad, 5px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html.proarte-panel-interno .modules-grid {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(var(--panel-cols, 9), minmax(0, 1fr)) !important;
    grid-template-rows: repeat(var(--panel-rows, 3), minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    gap: var(--panel-gap, 6px) !important;
    align-content: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
}

html.proarte-panel-interno .modules-grid > .module-card {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Este min-height:0 es clave: el CSS original imponía 190px en .card-inner. */
html.proarte-panel-interno .card-3d .card-inner,
html.proarte-panel-interno .module-card .card-inner {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

html.proarte-panel-interno .module-card .card-front,
html.proarte-panel-interno .module-card .card-back {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: var(--panel-card-pad, 9px) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html.proarte-panel-interno .module-card .card-front {
    justify-content: center !important;
    gap: var(--panel-content-gap, 5px) !important;
}

html.proarte-panel-interno .module-card .module-icon {
    font-size: var(--panel-icon, 46px) !important;
    line-height: 1 !important;
    margin: 0 0 var(--panel-icon-gap, 6px) !important;
    flex: 0 0 auto !important;
}

html.proarte-panel-interno .module-card .module-icon img,
html.proarte-panel-interno .module-card .module-icon svg {
    width: auto !important;
    height: var(--panel-icon, 46px) !important;
    max-width: 78% !important;
    max-height: var(--panel-icon, 46px) !important;
    margin: 0 auto var(--panel-icon-gap, 6px) !important;
    object-fit: contain !important;
}

html.proarte-panel-interno .module-card .module-title {
    font-size: var(--panel-title, 17px) !important;
    line-height: 1.08 !important;
    margin: 0 0 var(--panel-title-gap, 5px) !important;
    font-weight: 800 !important;
    overflow-wrap: anywhere !important;
}

html.proarte-panel-interno .module-card .module-desc {
    font-size: var(--panel-desc, 11.5px) !important;
    line-height: 1.14 !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
}

html.proarte-panel-interno .module-card .card-back {
    gap: 4px !important;
    padding: max(5px, calc(var(--panel-card-pad, 9px) * .88)) !important;
}
html.proarte-panel-interno .module-card .card-back h4 {
    font-size: var(--panel-back-title, 12px) !important;
    line-height: 1.08 !important;
    margin: 0 !important;
}
html.proarte-panel-interno .module-card .card-back p {
    font-size: var(--panel-back-text, 8.5px) !important;
    line-height: 1.16 !important;
    margin: 0 !important;
}
html.proarte-panel-interno .module-card .btn-cotizar-dorso {
    font-size: var(--panel-back-button, 9px) !important;
    line-height: 1 !important;
    padding: 5px 9px !important;
    margin-top: 3px !important;
}

/* El buscador puede activar single-mode; en el panel seguimos controlando la grilla. */
html.proarte-panel-interno .modules-grid.single-mode {
    display: grid !important;
    padding-top: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}
html.proarte-panel-interno .modules-grid.single-mode .module-card {
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

/* === MODALES EN PANEL INTERNO · COMPACTOS, SIN MOVER EL DOM ===
   La vista pública no cambia. En el panel priorizamos cálculo, formulario y
   canvas técnico; las fotos comerciales quedan solo para clientes. */
html.proarte-panel-interno .modal-overlay {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    backdrop-filter: none !important;
}
html.proarte-panel-interno .modal-content {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
html.proarte-panel-interno .modal-cap {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
html.proarte-panel-interno .mod-header {
    flex: 0 0 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 6px 260px 5px 14px !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}
html.proarte-panel-interno .mod-header h2 {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    text-align: left !important;
}
html.proarte-panel-interno .close-btn {
    top: 7px !important;
    right: 12px !important;
    font-size: 1.35rem !important;
}
html.proarte-panel-interno .mod-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 5px 9px 7px !important;
    overflow: hidden !important;
}
html.proarte-panel-interno .split-layout {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(205px, .72fr) minmax(0, 2.28fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
}
html.proarte-panel-interno .layout-left {
    position: static !important;
    top: auto !important;
    min-height: 0 !important;
    height: 100% !important;
    gap: 4px !important;
    overflow: hidden !important;
}
html.proarte-panel-interno .product-image-box {
    display: none !important;
}
html.proarte-panel-interno .layout-left .res-box {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 5px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
html.proarte-panel-interno .res-box canvas {
    max-width: 100% !important;
    max-height: 62vh !important;
    width: auto !important;
    height: auto !important;
}
html.proarte-panel-interno .layout-right {
    min-width: 0 !important;
    min-height: 0 !important;
    height: max-content !important;
    gap: 3px !important;
    overflow: visible !important;
    transform-origin: top left !important;
}
html.proarte-panel-interno .layout-right h3 {
    margin: 1px 0 2px !important;
    padding-bottom: 2px !important;
    font-size: .78rem !important;
}
html.proarte-panel-interno .layout-right .form-group {
    margin-bottom: 2px !important;
}
html.proarte-panel-interno .layout-right label {
    font-size: .62rem !important;
    margin-bottom: 1px !important;
}
html.proarte-panel-interno .layout-right input,
html.proarte-panel-interno .layout-right select,
html.proarte-panel-interno .layout-right textarea {
    min-height: 30px !important;
    height: 30px !important;
    padding: 4px 6px !important;
    font-size: .76rem !important;
}
html.proarte-panel-interno .layout-right .file-section {
    margin-top: 2px !important;
    padding: 5px !important;
}


/* Ajuste fino de formularios internos: evita que la última sección quede
   recortada en módulos largos sin alterar la estructura ni la vista pública. */
html.proarte-panel-interno .layout-right .grid-2 {
    gap: 7px !important;
}
html.proarte-panel-interno .layout-right .grid-2[style] {
    margin-top: 3px !important;
    padding: 5px !important;
}
html.proarte-panel-interno .layout-right .file-section-title {
    margin-bottom: 3px !important;
    font-size: .7rem !important;
}
html.proarte-panel-interno .layout-right .file-input-wrapper {
    margin-bottom: 2px !important;
}
html.proarte-panel-interno .layout-right .btn-file {
    padding: 5px 8px !important;
    font-size: .72rem !important;
    min-height: 28px !important;
}
html.proarte-panel-interno .layout-right .file-name {
    margin-bottom: 2px !important;
    font-size: .68rem !important;
    line-height: 1.1 !important;
}
html.proarte-panel-interno .layout-right .file-section > div[style*="margin-bottom"] {
    margin-bottom: 3px !important;
}
html.proarte-panel-interno .layout-right textarea {
    height: 42px !important;
    min-height: 42px !important;
    resize: none !important;
}

/* Copiar / Encargar viven visualmente junto al título. Los datos del cliente,
   notas y captcha siguen fuera de la vista interna y se solicitan en el carrito. */
html.proarte-panel-interno .mod-body-bottom {
    position: absolute !important;
    z-index: 20 !important;
    top: 7px !important;
    right: 42px !important;
    width: auto !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    overflow: visible !important;
}
html.proarte-panel-interno .mod-body-bottom > :not(.btn-costos-interno):not(.btn-captura):not(.btn-wa) {
    display: none !important;
}
html.proarte-panel-interno .mod-body-bottom > .btn-captura,
html.proarte-panel-interno .mod-body-bottom > .btn-wa {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 82px !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 4px 9px !important;
    border-radius: 7px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    font-size: 0 !important;
}
html.proarte-panel-interno .mod-body-bottom > .btn-captura::after {
    content: "📋 Copiar";
    font-size: .72rem !important;
    font-weight: 800 !important;
}
html.proarte-panel-interno .mod-body-bottom > .btn-wa::after {
    content: "✓ Encargar";
    font-size: .72rem !important;
    font-weight: 900 !important;
}

/* Datos pedidos directamente desde el carrito cuando todavía no hay sesión. */
#carrito-datos-cliente {
    border: 1px solid #dbe3ea;
    background: #f8fafc;
    border-radius: 10px;
    padding: 9px;
    margin: 0 0 9px;
}
#carrito-datos-cliente .carrito-datos-title {
    font-size: .78rem;
    font-weight: 900;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 7px;
}
#carrito-datos-cliente .carrito-datos-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
}
#carrito-datos-cliente input,
#carrito-datos-cliente select {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 5px 7px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    color: #334155;
    font-size: .72rem;
}
#carrito-datos-cliente .carrito-datos-span { grid-column: 1 / -1; }
#carrito-datos-cliente .carrito-datos-error {
    min-height: 14px;
    margin-top: 4px;
    color: #b91c1c;
    font-size: .66rem;
    font-weight: 800;
}
#carrito-datos-cliente #carrito-datos-guardar {
    width: 100%;
    height: 31px;
    border: 0;
    border-radius: 7px;
    background: #25D366;
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
    cursor: pointer;
}

/* En modo interno los captchas de los módulos siguen ocultos, pero el captcha
   del carrito debe permanecer disponible para poder enviar el pedido. */
html.proarte-panel-interno #widget-carrito .captcha-box {
    display: flex !important;
}

/* =========================================================
   PANEL INTERNO · ARCHIVOS AL CHECKOUT + CARRITO SIN CORTES
   ========================================================= */
html.proarte-panel-interno .file-section .file-input-wrapper,
html.proarte-panel-interno .file-section .file-name,
html.proarte-panel-interno .file-section .btn-limpiar,
html.proarte-panel-interno .file-section .file-section-title,
html.proarte-panel-interno .file-section .form-group:has(input[type="url"]) {
    display: none !important;
}
html.proarte-panel-interno .layout-right .file-section {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 1px 0 !important;
}
html.proarte-panel-interno .layout-right .file-section > div:has(.file-section-title) {
    margin-bottom: 2px !important;
}
html.proarte-panel-interno .layout-right .file-section .form-group {
    margin: 0 !important;
}
html.proarte-panel-interno #admin-tooltip {
    position: fixed !important;
    max-height: calc(100vh - 24px) !important;
    overflow: auto !important;
    scrollbar-width: thin;
}
html.proarte-panel-interno #widget-carrito .carrito-header { gap: 10px !important; }
html.proarte-panel-interno #widget-carrito .carrito-header > div {
    margin-left: auto !important;
    min-width: 0 !important;
}
html.proarte-panel-interno #widget-carrito .carrito-footer {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo .carrito-footer {
    justify-content: flex-start !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo .carrito-total-box {
    margin-bottom: 6px !important;
    padding: 5px 0 7px !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo .captcha-box {
    margin-bottom: 3px !important;
    transform: scale(.68) !important;
    max-height: 53px !important;
}
html.proarte-panel-interno #carrito-datos-cliente {
    padding: 7px !important;
    margin: 0 0 6px !important;
}
html.proarte-panel-interno #carrito-datos-cliente .carrito-datos-title {
    font-size: .7rem !important;
    margin-bottom: 5px !important;
}
html.proarte-panel-interno #carrito-datos-cliente .carrito-datos-grid { gap: 4px !important; }
html.proarte-panel-interno #carrito-datos-cliente input,
html.proarte-panel-interno #carrito-datos-cliente select {
    height: 27px !important;
    min-height: 27px !important;
    padding: 3px 6px !important;
    font-size: .66rem !important;
}
html.proarte-panel-interno #carrito-datos-cliente .carrito-datos-error {
    min-height: 11px !important;
    margin-top: 2px !important;
    font-size: .61rem !important;
}
html.proarte-panel-interno #carrito-datos-cliente #carrito-datos-guardar {
    height: 27px !important;
    font-size: .66rem !important;
}
html.proarte-panel-interno #carrito-body #carrito-archivos-checkout {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
}
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivos-head {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 2px 3px 8px;
    color: #334155;
}
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivos-head strong { font-size: .88rem; }
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivos-head span {
    font-size: .66rem;
    color: #64748b;
}
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivos-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: repeat(3,minmax(0,1fr));
    gap: 8px;
}
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivo-card {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dbe3ea;
    border-radius: 10px;
    background: #fff;
    padding: 8px 9px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivo-title {
    min-width: 0;
    font-size: .73rem;
    line-height: 1.12;
    font-weight: 900;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivo-controles {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivo-boton {
    flex: 0 0 auto;
    height: 27px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
    font-size: .65rem;
    font-weight: 900;
    cursor: pointer;
}
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivo-boton input { display: none; }
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivo-nombre {
    min-width: 0;
    font-size: .62rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivo-link {
    width: 100%;
    min-width: 0;
    height: 27px;
    padding: 3px 7px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: .64rem;
}

/* =========================================================
   PANEL INTERNO · AJUSTE FINAL SEGURO
   - canvas/precio siempre dentro del módulo
   - espía contenido por el modal
   - checkout del carrito sin recortes
   ========================================================= */

/* El espía se inserta como hijo de .modal-content desde logica.js. */
html.proarte-panel-interno .modal-content > #admin-tooltip {
    position: absolute !important;
    inset: auto !important;
    z-index: 999999 !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    box-sizing: border-box !important;
}

/* La columna visual reserva espacio real para precio/resultado. */
html.proarte-panel-interno .layout-left {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* M1/M8 y similares: canvas fuera de .res-box. */
html.proarte-panel-interno .layout-left > div:has(> canvas) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 1px 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
html.proarte-panel-interno .layout-left > div:has(> canvas) > canvas {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Cuando el canvas está dentro del resultado (Tarjetas/Stickers), el canvas
   absorbe el alto variable y precio/badge quedan siempre visibles. */
html.proarte-panel-interno .layout-left > .res-box:has(canvas) {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    padding: 4px !important;
}
html.proarte-panel-interno .layout-left > .res-box:has(canvas) > div:has(> canvas) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 1px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
html.proarte-panel-interno .layout-left > .res-box:has(canvas) > div:has(> canvas) canvas {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Cuando el canvas está afuera, la caja del total deja de estirarse y nunca
   empuja el resultado debajo del borde inferior. */
html.proarte-panel-interno .layout-left > .res-box:not(:has(canvas)) {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 58px !important;
    max-height: 92px !important;
    padding: 4px 5px !important;
    margin: 2px 0 0 !important;
    overflow: hidden !important;
}
html.proarte-panel-interno .layout-left .res-box .total {
    line-height: 1 !important;
    margin: 1px 0 !important;
}
html.proarte-panel-interno .layout-left .res-box .badge,
html.proarte-panel-interno .layout-left .res-box .iva-text,
html.proarte-panel-interno .layout-left .res-box .unit-text {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    line-height: 1.05 !important;
}

/* Avisos técnicos de la columna izquierda no pueden comerse todo el alto. */
html.proarte-panel-interno .layout-left > [id$="-warning"],
html.proarte-panel-interno .layout-left > [id$="-text"] {
    flex: 0 0 auto !important;
    margin: 2px 0 !important;
    padding: 4px 6px !important;
    font-size: .66rem !important;
    line-height: 1.12 !important;
}

/* En el módulo interno solo queda la decisión de diseño/archivo que afecta el
   precio. La carga física y el link se realizan al cerrar el pedido. */
html.proarte-panel-interno .layout-right .file-section {
    min-height: 0 !important;
}
html.proarte-panel-interno .layout-right .file-section select {
    margin: 0 !important;
}

/* Carrito: los botones ya viven en el encabezado. La derecha queda sólo para
   resumen/datos/total/captcha y no genera scroll ni corta contenido. */
html.proarte-panel-interno #widget-carrito .carrito-footer {
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 8px 12px !important;
    gap: 4px !important;
}
html.proarte-panel-interno #widget-carrito .panel-cart-summary-title {
    margin: 0 0 3px !important;
    font-size: .70rem !important;
    line-height: 1.05 !important;
}
html.proarte-panel-interno #widget-carrito .panel-cart-summary-list {
    gap: 2px !important;
    margin: 0 0 4px !important;
    padding: 0 0 5px !important;
}
html.proarte-panel-interno #widget-carrito .panel-cart-summary-row {
    gap: 6px !important;
    font-size: .64rem !important;
    line-height: 1.08 !important;
}
html.proarte-panel-interno #widget-carrito .panel-cart-summary-row span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
}
html.proarte-panel-interno #widget-carrito .carrito-total-box {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    min-height: 40px !important;
}
html.proarte-panel-interno #widget-carrito .carrito-total-label {
    font-size: .72rem !important;
}
html.proarte-panel-interno #widget-carrito .carrito-total-monto {
    font-size: 1.22rem !important;
}

/* Checkout: datos ocupan el ancho y total + captcha comparten la última fila. */
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo .carrito-footer {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    column-gap: 8px !important;
    row-gap: 3px !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo #carrito-datos-cliente {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    padding: 6px !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo #carrito-datos-cliente .carrito-datos-title {
    margin-bottom: 3px !important;
    font-size: .66rem !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo #carrito-datos-cliente .carrito-datos-grid {
    gap: 3px !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo #carrito-datos-cliente input,
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo #carrito-datos-cliente select {
    height: 25px !important;
    min-height: 25px !important;
    padding: 2px 5px !important;
    font-size: .62rem !important;
}
/* Guardar es innecesario en interno: el botón Enviar del encabezado lee y
   guarda estos mismos campos. Ganamos otra fila completa. */
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo #carrito-datos-guardar {
    display: none !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo #carrito-datos-error {
    min-height: 9px !important;
    margin: 1px 0 0 !important;
    font-size: .58rem !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo .carrito-total-box {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start !important;
    border: 0 !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo .captcha-box {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    justify-self: end !important;
    margin: 0 !important;
    transform: scale(.58) !important;
    transform-origin: top right !important;
    width: 180px !important;
    max-height: 46px !important;
    overflow: visible !important;
}

/* Header del carrito: acciones compactas, siempre en una sola línea. */
html.proarte-panel-interno #widget-carrito .carrito-header {
    min-width: 0 !important;
    padding: 7px 12px !important;
}
html.proarte-panel-interno #widget-carrito .carrito-header > div {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
}
html.proarte-panel-interno #widget-carrito .carrito-header .carrito-header-accion {
    flex: 0 0 auto !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 3px 8px !important;
    font-size: .66rem !important;
}

/* =========================================================
   PANEL INTERNO · DISTRIBUCIÓN ADAPTATIVA DE FORMULARIOS
   Aprovecha ancho antes de reducir escala. No mueve el DOM.
   ========================================================= */
html.proarte-panel-interno .layout-right.panel-cols-2,
html.proarte-panel-interno .layout-right.panel-cols-3 {
    display: grid !important;
    align-content: start !important;
    grid-auto-flow: row !important;
    column-gap: 9px !important;
    row-gap: 3px !important;
    width: auto;
}
html.proarte-panel-interno .layout-right.panel-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
html.proarte-panel-interno .layout-right.panel-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
html.proarte-panel-interno .layout-right.panel-cols-2 > *,
html.proarte-panel-interno .layout-right.panel-cols-3 > * {
    min-width: 0 !important;
    max-width: 100% !important;
}
/* Los títulos siguen separando claramente cada bloque comercial. */
html.proarte-panel-interno .layout-right.panel-cols-2 > h3,
html.proarte-panel-interno .layout-right.panel-cols-3 > h3,
html.proarte-panel-interno .layout-right.panel-cols-2 > h4,
html.proarte-panel-interno .layout-right.panel-cols-3 > h4 {
    grid-column: 1 / -1 !important;
    margin-top: 1px !important;
}
/* Bloques que por lectura o interacción conviene mantener a todo el ancho. */
html.proarte-panel-interno .layout-right.panel-cols-2 > .file-section,
html.proarte-panel-interno .layout-right.panel-cols-3 > .file-section,
html.proarte-panel-interno .layout-right.panel-cols-2 > .alert-box,
html.proarte-panel-interno .layout-right.panel-cols-3 > .alert-box,
html.proarte-panel-interno .layout-right.panel-cols-2 > .info-box,
html.proarte-panel-interno .layout-right.panel-cols-3 > .info-box {
    grid-column: 1 / -1 !important;
}
/* En tres columnas, los bloques dobles siguen siendo legibles: internamente
   conservan sus dos controles, pero cada bloque ocupa una sola columna. */
html.proarte-panel-interno .layout-right.panel-cols-3 > .grid-2 {
    gap: 5px !important;
}
html.proarte-panel-interno .layout-right.panel-cols-3 > .grid-2 label {
    font-size: .59rem !important;
}
html.proarte-panel-interno .layout-right.panel-cols-3 > .grid-2 input,
html.proarte-panel-interno .layout-right.panel-cols-3 > .grid-2 select {
    font-size: .70rem !important;
}

/* =========================================================
   CARRITO · CHECKOUT DERECHO EN COLUMNA
   Datos arriba, total debajo y reCAPTCHA siempre al fondo.
   ========================================================= */
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo .carrito-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 10px 14px 8px !important;
    gap: 5px !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo #carrito-datos-cliente {
    order: 10 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo #carrito-datos-cliente .carrito-datos-title {
    margin-bottom: 5px !important;
    font-size: .70rem !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo #carrito-datos-cliente .carrito-datos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo #carrito-datos-cliente input,
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo #carrito-datos-cliente select {
    height: 30px !important;
    min-height: 30px !important;
    padding: 4px 7px !important;
    font-size: .68rem !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo #carrito-datos-error {
    min-height: 11px !important;
    margin: 2px 0 0 !important;
}
/* Si el resumen existe en esta vista, usa el espacio sobrante pero nunca
   desplaza total/captcha fuera de la columna. */
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo .panel-cart-summary-title {
    order: 20 !important;
    flex: 0 0 auto !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo .panel-cart-summary-list {
    order: 21 !important;
    flex: 0 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo .carrito-total-box {
    order: 80 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 4px 0 0 !important;
    padding: 6px 2px 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border-top: 1px solid #e2e8f0 !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo .carrito-total-label {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: .75rem !important;
    line-height: 1 !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo .carrito-total-monto {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    white-space: nowrap !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo .captcha-box {
    order: 100 !important;
    flex: 0 0 66px !important;
    width: 100% !important;
    min-height: 66px !important;
    max-height: 66px !important;
    margin: auto 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    overflow: visible !important;
    transform: none !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo .captcha-box .g-recaptcha {
    transform: scale(.78) !important;
    transform-origin: bottom center !important;
    width: 304px !important;
    height: 78px !important;
    margin-bottom: -8px !important;
}

/* En resoluciones donde la columna derecha sea angosta, compactamos datos
   antes que tocar el captcha o cortar el total. */
@media (max-width: 1280px), (max-height: 760px) {
    html.proarte-panel-interno #widget-carrito.carrito-checkout-activo #carrito-datos-cliente {
        padding: 6px !important;
    }
    html.proarte-panel-interno #widget-carrito.carrito-checkout-activo #carrito-datos-cliente input,
    html.proarte-panel-interno #widget-carrito.carrito-checkout-activo #carrito-datos-cliente select {
        height: 27px !important;
        min-height: 27px !important;
        font-size: .64rem !important;
    }
    html.proarte-panel-interno #widget-carrito.carrito-checkout-activo .captcha-box .g-recaptcha {
        transform: scale(.72) !important;
    }
}

/* =========================================================
   PANEL INTERNO · LAYOUT POR SECCIONES LOGICAS (V2)
   Dos columnas reales sin reordenar nodos del DOM.
   La posicion final de cada seccion la calcula logica.js.
   ========================================================= */
html.proarte-panel-interno .layout-right.panel-logical-cols-2,
html.proarte-panel-interno .layout-right.panel-logical-cols-3,
html.proarte-panel-interno .layout-right .panel-logical-cols-2,
html.proarte-panel-interno .layout-right .panel-logical-cols-3 {
    display: block !important;
    position: relative !important;
    min-width: 0 !important;
    overflow: visible !important;
}
html.proarte-panel-interno .panel-logical-cols-2 > h3,
html.proarte-panel-interno .panel-logical-cols-2 > h4,
html.proarte-panel-interno .panel-logical-cols-3 > h3,
html.proarte-panel-interno .panel-logical-cols-3 > h4 {
    margin-top: 0 !important;
    margin-bottom: 3px !important;
}
html.proarte-panel-interno .panel-logical-cols-2 > .grid-2,
html.proarte-panel-interno .panel-logical-cols-2 > .form-group,
html.proarte-panel-interno .panel-logical-cols-2 > .file-section,
html.proarte-panel-interno .panel-logical-cols-3 > .grid-2,
html.proarte-panel-interno .panel-logical-cols-3 > .form-group,
html.proarte-panel-interno .panel-logical-cols-3 > .file-section {
    min-width: 0 !important;
    max-width: none !important;
}

/* Ploteos: la interfaz alternativa visible ocupa todo el ancho del formulario;
   adentro se divide por secciones. Evita la columna angosta de la version previa. */
html.proarte-panel-interno #modal-m5 .layout-right > #m5-impresion-ui,
html.proarte-panel-interno #modal-m5 .layout-right > #m5-corte-ui,
html.proarte-panel-interno #modal-m5 .layout-right > #m5-planos-ui {
    width: 100% !important;
    max-width: 100% !important;
}

/* =========================================================
   PANEL INTERNO · CANVAS / PREVIEWS / RESULTADOS SIN CORTE
   El grafico absorbe el espacio variable y el precio conserva su alto.
   ========================================================= */
html.proarte-panel-interno .layout-left {
    min-width: 0 !important;
    min-height: 0 !important;
}
html.proarte-panel-interno .layout-left > div:has(> canvas) {
    flex: 1 1 0 !important;
    min-height: 70px !important;
    max-height: none !important;
    overflow: hidden !important;
}
html.proarte-panel-interno .layout-left > div:has(> canvas) > canvas {
    width: auto !important;
    height: auto !important;
    max-width: calc(100% - 4px) !important;
    max-height: calc(100% - 4px) !important;
    object-fit: contain !important;
}

/* Tarjetas / Stickers y cualquier resultado que contiene su canvas. */
html.proarte-panel-interno .layout-left > .res-box:has(canvas) {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 5px !important;
}
html.proarte-panel-interno .layout-left > .res-box:has(canvas) > .badge {
    grid-row: 1 !important;
}
html.proarte-panel-interno .layout-left > .res-box:has(canvas) > div:has(> canvas) {
    grid-row: 2 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 2px 0 !important;
    overflow: hidden !important;
}
html.proarte-panel-interno .layout-left > .res-box:has(canvas) > div:has(> canvas) > canvas {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}
html.proarte-panel-interno .layout-left > .res-box:has(canvas) > .total { grid-row: 3 !important; }
html.proarte-panel-interno .layout-left > .res-box:has(canvas) > .iva-text { grid-row: 4 !important; }
html.proarte-panel-interno .layout-left > .res-box:has(canvas) > .unit-text { grid-row: 5 !important; }

/* Cuando el canvas esta afuera, damos al resultado el alto que realmente necesita.
   El canvas se encoge antes de que precio/IVA queden debajo del borde. */
html.proarte-panel-interno .layout-left > .res-box:not(:has(canvas)) {
    flex: 0 0 auto !important;
    min-height: 72px !important;
    max-height: 138px !important;
    height: auto !important;
    overflow: hidden !important;
    padding: 5px 6px !important;
}
html.proarte-panel-interno .layout-left .res-box .total {
    font-size: clamp(1.35rem, 2.15vw, 2.05rem) !important;
    white-space: nowrap !important;
}
html.proarte-panel-interno .layout-left .res-box .iva-text,
html.proarte-panel-interno .layout-left .res-box .unit-text {
    font-size: clamp(.68rem, .9vw, .90rem) !important;
}
html.proarte-panel-interno .layout-left .res-box .badge {
    font-size: clamp(.68rem, .95vw, .92rem) !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

/* M1/M8 y modulos con canvas independiente: avisos compactos, grafico flexible. */
html.proarte-panel-interno #modal-m1 .layout-left,
html.proarte-panel-interno #modal-m8 .layout-left,
html.proarte-panel-interno #modal-m5 .layout-left {
    gap: 3px !important;
}

/* En interno las fotos comerciales siguen ocultas. Si una product-image-box
   contiene un canvas tecnico en algun modulo futuro, se preserva ese canvas. */
html.proarte-panel-interno .product-image-box:has(canvas) {
    display: flex !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
}
html.proarte-panel-interno .product-image-box:has(canvas) canvas {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* Formularios por secciones: 3 columnas cuando hay suficiente contenido,
   2 cuando el modulo solo tiene dos secciones. */
html.proarte-panel-interno .panel-logical-cols-2 .grid-2,
html.proarte-panel-interno .panel-logical-cols-3 .grid-2 {
    gap: 6px !important;
}
html.proarte-panel-interno .panel-logical-cols-2 input,
html.proarte-panel-interno .panel-logical-cols-2 select,
html.proarte-panel-interno .panel-logical-cols-3 input,
html.proarte-panel-interno .panel-logical-cols-3 select {
    min-width: 0 !important;
}
html.proarte-panel-interno .panel-logical-cols-3 h3,
html.proarte-panel-interno .panel-logical-cols-3 h4 {
    font-size: .72rem !important;
}
html.proarte-panel-interno .panel-logical-cols-3 label {
    font-size: .59rem !important;
}
html.proarte-panel-interno .panel-logical-cols-3 input,
html.proarte-panel-interno .panel-logical-cols-3 select {
    font-size: .71rem !important;
}

/* =========================================================
   PANEL INTERNO · 4 ZONAS (SOLO MODULOS AUDITADOS)
   M1, M2, M3, M4/Flyers y M5.
   Canvas | Datos A | Datos B | Resultado
   ========================================================= */
html.proarte-panel-interno .panel-four-zones.mod-body {
    display: grid !important;
    grid-template-columns: minmax(235px, 1.02fr) minmax(0, 1.14fr) minmax(0, 1.14fr) minmax(205px, .78fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
    overflow: hidden !important;
}
html.proarte-panel-interno .panel-four-zones > .layout-left {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 3px !important;
    overflow: hidden !important;
}
html.proarte-panel-interno .panel-four-zones > .layout-right {
    grid-column: 2 / 4 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    align-self: stretch !important;
}
html.proarte-panel-interno .panel-four-zones > .panel-result-zone {
    grid-column: 4 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    border: 2px dashed #d7dde4;
    border-radius: 11px;
    background: #fafbfc;
    padding: 9px 8px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    overflow: hidden !important;
    text-align: center !important;
}
html.proarte-panel-interno .panel-result-zone-title {
    width: 100%;
    padding-bottom: 5px;
    margin-bottom: 3px;
    border-bottom: 1px solid #e2e8f0;
    color: #64748b;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
html.proarte-panel-interno .panel-result-zone .badge {
    margin: 0 0 2px !important;
    font-size: clamp(.68rem,.9vw,.92rem) !important;
    line-height: 1.15 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}
html.proarte-panel-interno .panel-result-zone .total {
    display: block !important;
    width: 100% !important;
    margin: 2px 0 !important;
    font-size: clamp(1.45rem,2.25vw,2.2rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}
html.proarte-panel-interno .panel-result-zone .iva-text,
html.proarte-panel-interno .panel-result-zone .unit-text {
    width: 100% !important;
    margin: 0 !important;
    font-size: clamp(.68rem,.82vw,.86rem) !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere !important;
}
html.proarte-panel-interno .panel-four-zones .panel-empty-resbox {
    display: none !important;
}

/* El canvas gana toda la altura liberada: precio/resumen ya no vive debajo. */
html.proarte-panel-interno .panel-four-zones > .layout-left > .res-box:has(canvas) {
    flex: 1 1 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 4px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
}
html.proarte-panel-interno .panel-four-zones > .layout-left > .res-box:has(canvas) > div:has(> canvas),
html.proarte-panel-interno .panel-four-zones > .layout-left > div:has(> canvas) {
    flex: 1 1 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
html.proarte-panel-interno .panel-four-zones > .layout-left canvas {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* M1 tiene el canvas fuera de res-box; el resultado generado queda en zona 4. */
html.proarte-panel-interno #modal-m1 .panel-four-zones > .layout-left {
    justify-content: center !important;
}

/* Las DOS columnas de datos son siempre parejas dentro de las zonas 2 y 3. */
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 h3,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 h4 {
    font-size: .74rem !important;
}
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 label {
    font-size: .60rem !important;
}
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 input,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 select {
    font-size: .73rem !important;
}

/* Ploteos: selector de tipo arriba, variante activa repartida en Datos A/B. */
html.proarte-panel-interno #modal-m5 .panel-four-zones > .layout-right > #m5-impresion-ui,
html.proarte-panel-interno #modal-m5 .panel-four-zones > .layout-right > #m5-corte-ui,
html.proarte-panel-interno #modal-m5 .panel-four-zones > .layout-right > #m5-planos-ui {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Fuera de los auditados NO forzamos la distribucion logica de 2/3 columnas. */
html.proarte-panel-interno .modal-overlay:not(#modal-m1):not(#modal-m2):not(#modal-m3):not(#modal-m4):not(#modal-m5) .layout-right.panel-logical-cols-2,
html.proarte-panel-interno .modal-overlay:not(#modal-m1):not(#modal-m2):not(#modal-m3):not(#modal-m4):not(#modal-m5) .layout-right.panel-logical-cols-3 {
    display: flex !important;
    flex-direction: column !important;
    height: max-content !important;
}


/* =========================================================
   PANEL INTERNO · 4 ZONAS · CAMPOS APILADOS EN DATOS A/B
   Solo M1, M2, M3, M4/Flyers y M5 heredan panel-four-zones.
   Dentro de cada seccion: un campo debajo del otro.
   ========================================================= */
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 .grid-2,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 .grid-3,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 .grid-4 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
}
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 .grid-2 > *,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 .grid-3 > *,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 .grid-4 > * {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 .form-group {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 3px !important;
}
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 .form-group label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 2px !important;
}
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 input,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 select,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 textarea {
    width: 100% !important;
    max-width: none !important;
}
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 > h3,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 > h4 {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
}


/* =========================================================
   PANEL INTERNO · 4 ZONAS · CONTENCION HORIZONTAL
   Datos A/B nunca pueden invadir Canvas ni Resultado.
   ========================================================= */
html.proarte-panel-interno .panel-four-zones > .layout-right {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    contain: layout !important;
}
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 > *,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 .grid-2,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 .grid-3,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 .grid-4,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 .form-group,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 .file-section {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
html.proarte-panel-interno .panel-four-zones > .panel-result-zone {
    position: relative !important;
    z-index: 2 !important;
}

/* =========================================================
   PANEL INTERNO · 4 ZONAS · AJUSTE FINAL ANTIRRECORTE
   - margen de seguridad en Datos A/B
   - flecha de selects siempre visible dentro del control
   - ninguna fila depende del ultimo pixel del contenedor
   Solo aplica a los cinco modulos auditados que usan panel-four-zones.
   ========================================================= */
html.proarte-panel-interno .panel-four-zones > .layout-right {
    padding-inline: 0 !important;
    overflow: hidden !important;
}

html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 > [data-panel-logical-col] {
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 .grid-2,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 .grid-3,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 .grid-4,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 .form-group,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 .file-section {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 input,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 textarea,
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 select {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Usamos una flecha interna propia en modo operador. De esta forma sigue
   viendose aun con zoom fraccional y no queda pegada al borde de clipping. */
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 select {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-left: 6px !important;
    padding-right: 28px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.25 6 6.25 11 1.25' fill='none' stroke='%234b5563' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 9px center !important;
    background-size: 10px 7px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 select:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.25 6 6.25 11 1.25' fill='none' stroke='%239ca3af' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Evita que bordes/fondos especiales (p.ej. estuche de Tarjetas) queden
   exactamente contra el limite de Datos B. */
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 [style*="background"],
html.proarte-panel-interno .panel-four-zones .panel-logical-cols-2 [style*="border"] {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* =========================================================
   PANEL INTERNO · 4 ZONAS ESTABLES (FIX DEFINITIVO ANTIRRECORTE)
   Reemplaza el posicionamiento absoluto + zoom de Datos A/B por dos
   columnas de flujo normal. Solo M1, M2, M3, M4 y M5 usan estas clases.
   ========================================================= */
html.proarte-panel-interno .panel-four-zones > .layout-right.panel-stable-cols {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    align-content: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
    contain: none !important;
    zoom: 1 !important;
    box-sizing: border-box !important;
}

html.proarte-panel-interno .panel-four-zones .panel-data-col {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    overflow: visible !important;
}

/* Cada sección queda en flujo normal. Nada de absolute, left, top ni width calc. */
html.proarte-panel-interno .panel-four-zones .panel-data-col > * {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html.proarte-panel-interno .panel-four-zones .panel-data-col > h3,
html.proarte-panel-interno .panel-four-zones .panel-data-col > h4 {
    flex: 0 0 auto !important;
    margin: 2px 0 1px !important;
    padding: 0 0 3px !important;
    font-size: .74rem !important;
    line-height: 1.1 !important;
}

/* En las columnas centrales, todos los campos se apilan verticalmente. */
html.proarte-panel-interno .panel-four-zones .panel-data-col .grid-2,
html.proarte-panel-interno .panel-four-zones .panel-data-col .grid-3,
html.proarte-panel-interno .panel-four-zones .panel-data-col .grid-4 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}
html.proarte-panel-interno .panel-four-zones .panel-data-col .grid-2 > *,
html.proarte-panel-interno .panel-four-zones .panel-data-col .grid-3 > *,
html.proarte-panel-interno .panel-four-zones .panel-data-col .grid-4 > * {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html.proarte-panel-interno .panel-four-zones .panel-data-col .form-group,
html.proarte-panel-interno .panel-four-zones .panel-data-col .file-section,
html.proarte-panel-interno .panel-four-zones .panel-data-col [style*="background"],
html.proarte-panel-interno .panel-four-zones .panel-data-col [style*="border"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

html.proarte-panel-interno .panel-four-zones .panel-data-col .form-group {
    margin: 0 0 2px !important;
}
html.proarte-panel-interno .panel-four-zones .panel-data-col label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 2px !important;
    font-size: .60rem !important;
    line-height: 1.05 !important;
}

/* Selects nativos: al no haber zoom ni clipping recuperamos borde y flecha real. */
html.proarte-panel-interno .panel-four-zones .panel-data-col input,
html.proarte-panel-interno .panel-four-zones .panel-data-col select,
html.proarte-panel-interno .panel-four-zones .panel-data-col textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    font-size: .73rem !important;
}
html.proarte-panel-interno .panel-four-zones .panel-data-col select {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    background-image: none !important;
    background-position: initial !important;
    background-size: initial !important;
    background-repeat: initial !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Densidad: compacta solo EN ALTURA. Nunca usa zoom ni modifica ancho. */
html.proarte-panel-interno .panel-four-zones.panel-density-compact .panel-data-col {
    gap: 4px !important;
}
html.proarte-panel-interno .panel-four-zones.panel-density-compact .panel-data-col > h3,
html.proarte-panel-interno .panel-four-zones.panel-density-compact .panel-data-col > h4 {
    margin: 1px 0 !important;
    padding-bottom: 2px !important;
    font-size: .70rem !important;
}
html.proarte-panel-interno .panel-four-zones.panel-density-compact .panel-data-col input,
html.proarte-panel-interno .panel-four-zones.panel-density-compact .panel-data-col select {
    min-height: 28px !important;
    height: 28px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}
html.proarte-panel-interno .panel-four-zones.panel-density-compact .panel-data-col .grid-2,
html.proarte-panel-interno .panel-four-zones.panel-density-compact .panel-data-col .grid-3,
html.proarte-panel-interno .panel-four-zones.panel-density-compact .panel-data-col .grid-4 {
    gap: 3px !important;
}

html.proarte-panel-interno .panel-four-zones.panel-density-tight .panel-data-col {
    gap: 2px !important;
}
html.proarte-panel-interno .panel-four-zones.panel-density-tight .panel-data-col > h3,
html.proarte-panel-interno .panel-four-zones.panel-density-tight .panel-data-col > h4 {
    font-size: .66rem !important;
    margin: 0 !important;
    padding-bottom: 1px !important;
}
html.proarte-panel-interno .panel-four-zones.panel-density-tight .panel-data-col label {
    font-size: .56rem !important;
    margin-bottom: 1px !important;
}
html.proarte-panel-interno .panel-four-zones.panel-density-tight .panel-data-col input,
html.proarte-panel-interno .panel-four-zones.panel-density-tight .panel-data-col select {
    min-height: 26px !important;
    height: 26px !important;
    font-size: .69rem !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
html.proarte-panel-interno .panel-four-zones.panel-density-tight .panel-data-col .grid-2,
html.proarte-panel-interno .panel-four-zones.panel-density-tight .panel-data-col .grid-3,
html.proarte-panel-interno .panel-four-zones.panel-density-tight .panel-data-col .grid-4 {
    gap: 2px !important;
}

/* M5: selector principal conserva ancho completo; la variante activa usa dos columnas normales. */
html.proarte-panel-interno #modal-m5 .panel-four-zones > .layout-right.panel-m5-root {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
    contain: none !important;
    zoom: 1 !important;
}
html.proarte-panel-interno #modal-m5 .panel-m5-root > #m5-impresion-ui.panel-stable-cols,
html.proarte-panel-interno #modal-m5 .panel-m5-root > #m5-corte-ui.panel-stable-cols,
html.proarte-panel-interno #modal-m5 .panel-m5-root > #m5-planos-ui.panel-stable-cols {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

/* Desactiva explícitamente las reglas antiguas de posicionamiento lógico
   cuando ya está activo el layout estable. */
html.proarte-panel-interno .panel-four-zones .panel-stable-cols.panel-logical-cols-2,
html.proarte-panel-interno .panel-four-zones .panel-stable-cols.panel-logical-cols-3 {
    position: static !important;
    height: 100% !important;
}

/* =========================================================
   GUIAS DE ARMADO - MODAL INTERNO EN 2 COLUMNAS
   Mantiene siempre visibles Volver/Cerrar y evita recortes.
   ========================================================= */
.guia-modal-content {
    border-top: 4px solid #1A535C;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}
.guia-modal-header {
    flex: 0 0 auto;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px 10px 18px;
    border-bottom: 1px solid #dbe3e8;
    background: #fff;
    position: relative;
    z-index: 2;
}
.guia-modal-header h3 {
    margin: 0;
    color: #1A535C;
    font-size: 1.15rem;
    line-height: 1.15;
    text-transform: uppercase;
}
.guia-modal-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.guia-volver,
.guia-cerrar {
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 900;
}
.guia-volver {
    min-height: 36px;
    padding: 0 13px;
    background: #1A535C;
    color: #fff;
}
.guia-cerrar {
    width: 36px;
    height: 36px;
    background: #eef2f4;
    color: #334155;
    font-size: 1.35rem;
    line-height: 1;
}
.guia-modal-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
    overflow: auto;
    align-items: start;
}
.guia-col {
    min-width: 0;
    min-height: 0;
}
.guia-col-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#guia-desc {
    margin: 0;
    color: #555;
    font-size: .9rem;
    line-height: 1.4;
}
#guia-lista {
    margin: 0 0 0 18px;
    padding: 0;
    color: #444;
    font-size: .85rem;
    line-height: 1.45;
}
#guia-lista li { margin-bottom: 7px; }
.guia-link-wrap {
    margin-top: auto;
}
.guia-link-wrap #guia-link {
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    background: #1A535C;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: .88rem;
    border-radius: 9px;
}
.guia-esquema-box {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #d8dee3;
}
.guia-esquema-box h4 {
    margin: 0 0 8px;
    color: #333;
    text-align: center;
    font-size: .9rem;
}
.guia-canvas-wrap {
    flex: 1 1 auto;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#canvas-guia {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
}
.guia-medidas {
    flex: 0 0 auto;
    display: grid;
    gap: 5px;
    margin-top: 9px;
    font-size: .78rem;
    line-height: 1.35;
}
.guia-medida span { font-weight: 900; }
.guia-medida.guia-medida-total { color: #d32f2f; }
.guia-medida.corte { color: #333; }
.guia-medida.segura { color: #2e7d32; }

html.proarte-panel-interno #modal-guia {
    padding: 8px !important;
    align-items: center !important;
}
html.proarte-panel-interno #modal-guia .guia-modal-content {
    width: min(1180px, 98vw) !important;
    max-width: 1180px !important;
    min-width: 0 !important;
    height: min(680px, calc(100vh - 16px));
    max-height: calc(100vh - 16px) !important;
    margin: 0 auto !important;
}
html.proarte-panel-interno #modal-guia .guia-modal-grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
    overflow: hidden;
}
html.proarte-panel-interno #modal-guia .guia-col-info,
html.proarte-panel-interno #modal-guia .guia-col-esquema {
    overflow: auto;
    scrollbar-width: thin;
}
html.proarte-panel-interno #modal-guia .guia-col-info {
    padding-right: 4px;
}
html.proarte-panel-interno #modal-guia .guia-esquema-box {
    min-height: 100%;
}
html.proarte-panel-interno #modal-guia #guia-lista > div {
    margin-top: 8px !important;
    padding: 10px !important;
}
html.proarte-panel-interno #modal-guia #guia-lista .btn-wa {
    min-height: 38px;
    padding: 8px 10px !important;
}

@media (max-width: 820px) {
    .guia-modal-header { align-items: flex-start; }
    .guia-modal-header h3 { font-size: 1rem; }
    .guia-volver { padding: 0 9px; }
    html.proarte-panel-interno #modal-guia .guia-modal-grid,
    .guia-modal-grid { grid-template-columns: 1fr; overflow: auto; }
    html.proarte-panel-interno #modal-guia .guia-col-info,
    html.proarte-panel-interno #modal-guia .guia-col-esquema { overflow: visible; }
    html.proarte-panel-interno #modal-guia .guia-modal-content { height: calc(100vh - 12px); }
}

/* ======================================================================
   ROLLBACK VISUAL INTERNO 2026-09-21
   Objetivo: en ?interno=true cada modulo vuelve a verse como la vista
   publica/cliente. Solo cambia el contenedor: ocupa el espacio del panel,
   las fotos comerciales se ocultan y el excedente vertical usa scroll.
   Carrito y fichas NO se modifican. Copiar / Encargar siguen en el titulo.
   ====================================================================== */

/* El modal ocupa el area asignada por el panel, pero su contenido conserva
   proporciones, tamanos y orden de la vista publica. */
html.proarte-panel-interno .modal-overlay[id^="modal-m"] {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] > .modal-content {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .modal-cap {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Cabezal equivalente al publico. Dejamos reserva a la derecha para
   Copiar / Encargar y el cierre. */
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .mod-header {
    position: relative !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin: 0 0 15px !important;
    padding: 15px 265px 15px 15px !important;
    border-radius: 0 !important;
    display: block !important;
    text-align: center !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .mod-header h2 {
    margin: 0 !important;
    font-size: 1.4rem !important;
    line-height: normal !important;
    text-align: center !important;
    letter-spacing: 1px !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .close-btn {
    top: 11px !important;
    right: 12px !important;
    font-size: 1.55rem !important;
    z-index: 50 !important;
}

/* El scroll vive en el cuerpo del modulo. De esta forma nunca se corta abajo
   y el cabezal con acciones queda siempre visible. */
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .mod-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 30px 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
}

/* MISMA COMPOSICION QUE CLIENTE: izquierda + formulario, sin cuatro zonas,
   sin zoom y sin redistribucion automatica de secciones. */
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .split-layout,
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .mod-body.split-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) !important;
    gap: 20px !important;
    align-items: start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-left {
    position: sticky !important;
    top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-right {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: none !important;
    zoom: 1 !important;
    contain: none !important;
}

/* Anulamos cualquier resto del experimento de columnas internas. */
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .panel-data-col {
    display: contents !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .panel-result-zone {
    display: none !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .panel-logical-cols-2,
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .panel-logical-cols-3,
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .panel-stable-cols {
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
}

/* Fotos comerciales fuera del panel. Si el bloque contiene canvas tecnico,
   el canvas se conserva. */
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .product-image-box:not(:has(canvas)) {
    display: none !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .product-image-box:has(canvas) {
    display: flex !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 15px !important;
    overflow: visible !important;
}

/* Resultado y canvas vuelven al comportamiento publico. */
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-left > div:has(> canvas),
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-left > .res-box,
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-left > .res-box:has(canvas),
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-left > .res-box:not(:has(canvas)) {
    flex: none !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 15px !important;
    padding: 15px !important;
    overflow: visible !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-left > div:has(> canvas) {
    margin: 15px 0 !important;
    padding: 0 !important;
    text-align: center !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-left canvas,
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .res-box canvas,
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-left > .res-box:has(canvas) canvas {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-left .res-box .total {
    font-size: 2rem !important;
    line-height: 1 !important;
    white-space: normal !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-left .res-box .iva-text,
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-left .res-box .unit-text {
    font-size: .9rem !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-left .res-box .badge {
    font-size: inherit !important;
    max-width: none !important;
}

/* Formulario con tamanos y espaciado publicos. */
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-right h3,
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-right h4 {
    font-size: 1rem !important;
    line-height: normal !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .form-group {
    margin-bottom: 12px !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .form-group label,
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-right label {
    font-size: .8rem !important;
    margin-bottom: 4px !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] input,
html.proarte-panel-interno .modal-overlay[id^="modal-m"] select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 10px !important;
    font-size: .95rem !important;
    box-sizing: border-box !important;
    appearance: auto !important;
    background-image: none !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px !important;
    font-size: .95rem !important;
    resize: vertical !important;
    box-sizing: border-box !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .grid-2 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .file-section {
    margin-top: 15px !important;
    padding: 15px !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .file-section-title {
    margin-bottom: 10px !important;
    font-size: .9rem !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .btn-file {
    min-height: 0 !important;
    padding: 10px 15px !important;
    font-size: inherit !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .file-name {
    margin-bottom: 10px !important;
    font-size: .8rem !important;
    line-height: normal !important;
}

/* Las acciones siguen en el titulo, tal como pidio el operador. */
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .mod-body-bottom {
    position: absolute !important;
    z-index: 40 !important;
    top: 10px !important;
    right: 46px !important;
    width: auto !important;
    height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    overflow: visible !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .mod-body-bottom > :not(.btn-costos-interno):not(.btn-captura):not(.btn-wa) {
    display: none !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .mod-body-bottom > .btn-captura,
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .mod-body-bottom > .btn-wa {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 82px !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 4px 9px !important;
    border-radius: 7px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    font-size: 0 !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .mod-body-bottom > .btn-captura::after {
    content: "📋 Copiar";
    font-size: .72rem !important;
    font-weight: 800 !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .mod-body-bottom > .btn-wa::after {
    content: "✓ Encargar";
    font-size: .72rem !important;
    font-weight: 900 !important;
}

/* En paneles angostos mantenemos la misma respuesta del sitio publico. */
@media (max-width: 768px) {
    html.proarte-panel-interno .modal-overlay[id^="modal-m"] .split-layout,
    html.proarte-panel-interno .modal-overlay[id^="modal-m"] .mod-body.split-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-left {
        position: static !important;
        display: contents !important;
    }
    html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-right {
        order: 2 !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    html.proarte-panel-interno .modal-overlay[id^="modal-m"] .res-box {
        order: 4 !important;
        width: 100% !important;
    }
}

/* ======================================================================
   FIX VISUAL INTERNO 2026-09-21b
   - El cuerpo del modulo es tambien .split-layout: el rollback anterior
     anulaba accidentalmente su propio scroll con overflow:visible.
   - Las leyendas/estados del canvas no deben heredar tamanos de precio.
   ====================================================================== */
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .mod-body,
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .mod-body.split-layout {
    min-height: 0 !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    align-content: start !important;
    padding-bottom: 28px !important;
    scrollbar-gutter: stable;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .mod-body::-webkit-scrollbar,
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .mod-body.split-layout::-webkit-scrollbar {
    width: 10px;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .mod-body::-webkit-scrollbar-thumb,
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .mod-body.split-layout::-webkit-scrollbar-thumb {
    background: rgba(90,105,120,.35);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* Mantener el canvas a su tamano natural: puede reducirse si no entra,
   pero nunca agrandarse por la vista interna. */
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-left canvas,
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .res-box canvas {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 310px !important;
}

/* Badge/estado tecnico y mensajes de error del resultado: compactos en panel.
   El span .total tambien se usa para textos de validacion, por eso no puede
   quedar a 2rem dentro de una columna angosta. */
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-left .res-box .badge {
    font-size: .88rem !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
    overflow-wrap: anywhere !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-left .res-box .total {
    font-size: 1.32rem !important;
    line-height: 1.15 !important;
    margin-top: 6px !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-left .res-box .iva-text,
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-left .res-box .unit-text {
    font-size: .78rem !important;
    line-height: 1.25 !important;
}

/* Un poco de aire al final del formulario para que el ultimo control no quede
   pegado al borde inferior cuando se llega al final del scroll. */
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .layout-right {
    padding-bottom: 18px !important;
}

/* Botón explícito para abrir/cerrar el espía de costos en ?interno=true. */
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .mod-body-bottom > .btn-costos-interno {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 68px !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 4px 9px !important;
    border-radius: 7px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: #0f172a !important;
    color: #fff !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .mod-body-bottom > .btn-costos-interno:disabled {
    opacity: .48 !important;
    cursor: default !important;
}

/* =========================================================
   PANEL INTERNO · COSTOS EN EL ÁREA DEL MÓDULO
   El espía deja de flotar debajo/detrás del cotizador y ocupa
   el mismo espacio central hasta volver al módulo.
   ========================================================= */
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .costos-panel-interno {
    position: absolute !important;
    inset: 0 !important;
    z-index: 18 !important;
    display: none;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box !important;
    padding: 44px 14px 14px !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    overflow: hidden !important;
    border-radius: inherit;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .costos-panel-cab {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    padding: 8px 10px !important;
    margin-bottom: 8px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.08) !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .costos-panel-cab strong {
    font-size: .9rem !important;
    font-weight: 900 !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .costos-panel-cerrar {
    border: 0 !important;
    border-radius: 7px !important;
    padding: 6px 10px !important;
    background: #e2e8f0 !important;
    color: #0f172a !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .costos-panel-contenido {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 12px !important;
    border: 1px solid #334155 !important;
    border-radius: 9px !important;
    background: #0f172a !important;
    color: #fff !important;
    font-size: .78rem !important;
    line-height: 1.45 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02) !important;
}

/* =========================================================
   AJUSTES COMUNES · CIERRE DE AUDITORIA GLOBAL 2026-09-21
   ========================================================= */

/* Los canvas tecnicos quedan centrados en el area visual sin modificar
   su escala, medidas ni la logica de dibujo de cada modulo. */
html.proarte-panel-interno .modal-overlay[id^="modal-m"] canvas {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .res-box > div:has(> canvas),
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .product-image-box:has(> canvas) {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
}

/* M19 es una excepcion a la regla interna que pospone los adjuntos:
   el STL se necesita para leer volumen/medidas y poder cotizar. */
html.proarte-panel-interno #modal-m19 #m19-file-section .file-section-title,
html.proarte-panel-interno #modal-m19 #m19-file-section .file-input-wrapper,
html.proarte-panel-interno #modal-m19 #m19-file-section .file-name {
    display: block !important;
}
html.proarte-panel-interno #modal-m19 #m19-file-section {
    display: block !important;
    border: 1px dashed #111 !important;
    background: #fdfdfd !important;
    padding: 10px !important;
    margin-top: 8px !important;
}
html.proarte-panel-interno #modal-m19 #m19-file-section .file-input-wrapper {
    width: 100% !important;
    margin: 4px 0 !important;
}
html.proarte-panel-interno #modal-m19 #m19-file-section .file-name {
    margin: 4px 0 0 !important;
    font-size: .72rem !important;
}
/* Un link remoto no permite al visor local calcular el volumen: para cotizar
   en M19 se mantiene visible la carga local del archivo 3D. */
html.proarte-panel-interno #modal-m19 #m19-file-section .form-group:has(input[type="url"]) {
    display: none !important;
}

/* Checkout: confirmacion visible del archivo elegido y dos slots separados
   cuando M7 incluye Tuck Box. */
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivo-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivo-title small {
    flex: 0 0 auto;
    font-size: .55rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .02em;
}
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivo-slot {
    min-width: 0;
    padding-top: 3px;
    border-top: 1px dashed #e2e8f0;
}
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivo-slot:first-of-type {
    border-top: 0;
    padding-top: 0;
}
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivo-subtitle {
    margin-bottom: 3px;
    font-size: .61rem;
    line-height: 1.05;
    font-weight: 800;
    color: #475569;
}
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivo-slot.archivo-cargado .carrito-archivo-nombre,
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivo-nombre:has(+ *) {
    color: #166534;
}
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivo-nombre {
    font-weight: 700;
}

/* reCAPTCHA completo: sin margen negativo ni recorte inferior. */
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo .carrito-footer {
    overflow: hidden !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo .captcha-box {
    flex: 0 0 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
    padding: 3px 0 !important;
    margin: auto 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    transform: none !important;
}
html.proarte-panel-interno #widget-carrito.carrito-checkout-activo .captcha-box .g-recaptcha {
    flex: 0 0 304px !important;
    width: 304px !important;
    height: 78px !important;
    margin: 0 !important;
    transform: scale(.74) !important;
    transform-origin: center center !important;
}

/* Los cinco productos siguen siendo visibles; si los adjuntos ocupan más alto,
   la grilla de archivos scrollea internamente en vez de cortar controles. */
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivos-grid {
    grid-template-rows: none !important;
    grid-auto-rows: minmax(112px, auto) !important;
    align-content: start !important;
    overflow-y: auto !important;
    padding-right: 3px !important;
}
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivo-card {
    justify-content: flex-start !important;
    overflow: visible !important;
}
html.proarte-panel-interno #carrito-archivos-checkout .carrito-archivo-card-doble {
    grid-row: span 2;
}

/* === ALERTAS DEL SISTEMA SIEMPRE POR ENCIMA DEL CARRITO === */
#modal-alerta {
    z-index: 2147483647 !important;
}
html.proarte-panel-interno #modal-alerta {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    padding: 18px !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(4px) !important;
    background-color: rgba(0,0,0,0.68) !important;
}
html.proarte-panel-interno #modal-alerta > .modal-content {
    width: min(92vw, 430px) !important;
    min-width: 0 !important;
    max-width: 430px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 80vh !important;
    margin: auto !important;
    border-radius: 12px !important;
    overflow: auto !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.38) !important;
}

/* =========================================================
   WEB PUBLICA · ARCHIVOS RECIEN AL AVANZAR CON EL PEDIDO
   La cotizacion conserva la eleccion de diseno, pero los
   adjuntos de produccion se cargan desde el carrito.
   M19 queda fuera porque necesita el archivo para calcular.
   ========================================================= */
html:not(.proarte-panel-interno) .modal-overlay:not(#modal-m19) .file-section .file-input-wrapper,
html:not(.proarte-panel-interno) .modal-overlay:not(#modal-m19) .file-section .file-name,
html:not(.proarte-panel-interno) .modal-overlay:not(#modal-m19) .file-section .btn-limpiar,
html:not(.proarte-panel-interno) .modal-overlay:not(#modal-m19) .file-section .file-section-title,
html:not(.proarte-panel-interno) .modal-overlay:not(#modal-m19) .file-section .form-group:has(input[type="url"]) {
    display: none !important;
}
html:not(.proarte-panel-interno) .modal-overlay:not(#modal-m19) .file-section::after {
    content: "📎 Los archivos se adjuntan al avanzar con el pedido.";
    display: block;
    margin-top: 7px;
    padding: 8px 10px;
    border: 1px dashed #cbd5e1;
    border-radius: 7px;
    background: #f8fafc;
    color: #475569;
    font-size: .78rem;
    line-height: 1.25;
    font-weight: 700;
    text-align: center;
}

/* Checkout publico de archivos. Se usa solamente para productos que
   realmente requieren adjunto; los que incluyen diseno ProArte no bloquean. */
html:not(.proarte-panel-interno) #widget-carrito.carrito-checkout-activo {
    width: min(420px, calc(100vw - 24px)) !important;
}
html:not(.proarte-panel-interno) #widget-carrito.carrito-checkout-activo #carrito-body {
    overflow-y: auto !important;
}
html:not(.proarte-panel-interno) #carrito-body #carrito-archivos-checkout {
    width: 100%;
    min-width: 0;
}
html:not(.proarte-panel-interno) #carrito-archivos-checkout .carrito-archivos-head {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 9px;
    color: #334155;
}
html:not(.proarte-panel-interno) #carrito-archivos-checkout .carrito-archivos-head strong {
    font-size: .9rem;
}
html:not(.proarte-panel-interno) #carrito-archivos-checkout .carrito-archivos-head span {
    font-size: .72rem;
    line-height: 1.25;
    color: #64748b;
}
html:not(.proarte-panel-interno) #carrito-archivos-checkout .carrito-archivos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
html:not(.proarte-panel-interno) #carrito-archivos-checkout .carrito-archivo-card {
    min-width: 0;
    padding: 9px;
    border: 1px solid #dbe3ea;
    border-radius: 9px;
    background: #fff;
}
html:not(.proarte-panel-interno) #carrito-archivos-checkout .carrito-archivo-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    color: #334155;
    font-size: .78rem;
    line-height: 1.2;
    font-weight: 900;
}
html:not(.proarte-panel-interno) #carrito-archivos-checkout .carrito-archivo-title small {
    flex: 0 0 auto;
    color: #64748b;
    font-size: .58rem;
    text-transform: uppercase;
}
html:not(.proarte-panel-interno) #carrito-archivos-checkout .carrito-archivo-slot + .carrito-archivo-slot {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
}
html:not(.proarte-panel-interno) #carrito-archivos-checkout .carrito-archivo-subtitle {
    margin-bottom: 5px;
    color: #475569;
    font-size: .7rem;
    font-weight: 800;
}
html:not(.proarte-panel-interno) #carrito-archivos-checkout .carrito-archivo-controles {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
html:not(.proarte-panel-interno) #carrito-archivos-checkout .carrito-archivo-boton {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: .7rem;
    font-weight: 900;
    cursor: pointer;
}
html:not(.proarte-panel-interno) #carrito-archivos-checkout .carrito-archivo-boton input {
    display: none;
}
html:not(.proarte-panel-interno) #carrito-archivos-checkout .carrito-archivo-nombre {
    min-width: 0;
    overflow: hidden;
    color: #64748b;
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html:not(.proarte-panel-interno) #carrito-archivos-checkout .carrito-archivo-slot.archivo-cargado .carrito-archivo-nombre {
    color: #166534;
    font-weight: 800;
}
html:not(.proarte-panel-interno) #carrito-archivos-checkout .carrito-archivo-link {
    width: 100%;
    min-width: 0;
    height: 31px;
    margin-top: 6px;
    padding: 4px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: .7rem;
}


/* =========================================================
   CARRITO PUBLICO · VISTA ANCHA TIPO PANEL GRAFICA
   Misma lectura en dos zonas: productos + resumen/acciones.
   No modifica precios ni logica comercial.
   ========================================================= */
html:not(.proarte-panel-interno) #widget-carrito {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(1180px, 94vw) !important;
    height: min(720px, 88vh) !important;
    max-width: 1180px !important;
    max-height: 88vh !important;
    margin: 0 !important;
    border: 1px solid #dfe6ec !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 22px 60px rgba(15,23,42,.28) !important;
    grid-template-columns: minmax(0, 2.15fr) minmax(310px, .85fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    animation: none !important;
}
html:not(.proarte-panel-interno) #widget-carrito:not([style*="display: none"]) {
    display: grid !important;
}
html:not(.proarte-panel-interno) #widget-carrito .carrito-header {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-height: 52px !important;
    padding: 9px 16px !important;
    font-size: 1.05rem !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.08) !important;
    z-index: 2 !important;
}
html:not(.proarte-panel-interno) #widget-carrito #carrito-body {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    gap: 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #f4f7f6 !important;
    border-right: 1px solid #e2e8f0 !important;
}
html:not(.proarte-panel-interno) #widget-carrito #carrito-body > div:not(.carrito-item) {
    grid-column: 1 / -1 !important;
}
html:not(.proarte-panel-interno) #widget-carrito .carrito-item {
    min-width: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
    padding: 11px 13px !important;
    border: 1px solid #dfe6ec !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.055) !important;
}
html:not(.proarte-panel-interno) #widget-carrito .carrito-item-title {
    font-size: .9rem !important;
    line-height: 1.15 !important;
    margin-bottom: 5px !important;
}
html:not(.proarte-panel-interno) #widget-carrito .carrito-item-desc {
    font-size: .74rem !important;
    line-height: 1.22 !important;
    color: #5f6b76 !important;
    display: block !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}
/* Los importes conservan sus tamanos originales del carrito. */
html:not(.proarte-panel-interno) #widget-carrito .carrito-item-price {
    margin-top: 5px !important;
}
html:not(.proarte-panel-interno) #widget-carrito .carrito-footer {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 16px 16px !important;
    overflow-y: auto !important;
    background: #fff !important;
    border-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
html:not(.proarte-panel-interno) #widget-carrito .panel-cart-summary-title {
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 6px;
}
html:not(.proarte-panel-interno) #widget-carrito .panel-cart-summary-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}
html:not(.proarte-panel-interno) #widget-carrito .panel-cart-summary-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
    align-items: start;
    font-size: .74rem;
    line-height: 1.18;
    color: #475569;
}
html:not(.proarte-panel-interno) #widget-carrito .panel-cart-summary-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html:not(.proarte-panel-interno) #widget-carrito .panel-cart-summary-row strong {
    color: #334155;
    white-space: nowrap;
}
html:not(.proarte-panel-interno) #widget-carrito .panel-cart-summary-empty {
    color: #94a3b8;
    font-size: .76rem;
    padding: 0 0 6px;
}
html:not(.proarte-panel-interno) #widget-carrito .carrito-total-box {
    margin: 0 0 10px !important;
    padding: 8px 0 10px !important;
    border-bottom: 1px solid #e5e7eb !important;
}
html:not(.proarte-panel-interno) #widget-carrito .captcha-box {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
}
html:not(.proarte-panel-interno) #widget-carrito .btn-carrito-accion {
    width: 100% !important;
    min-height: 40px !important;
    height: auto !important;
    padding: 9px 10px !important;
    margin-bottom: 8px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}
html:not(.proarte-panel-interno) #widget-carrito.carrito-checkout-activo {
    width: min(1180px, 94vw) !important;
    height: min(720px, 88vh) !important;
}
html:not(.proarte-panel-interno) #widget-carrito.carrito-checkout-activo #carrito-body {
    overflow-y: auto !important;
}
@media (max-width: 820px) {
    html:not(.proarte-panel-interno) #widget-carrito,
    html:not(.proarte-panel-interno) #widget-carrito.carrito-checkout-activo {
        width: min(96vw, 620px) !important;
        height: min(92vh, 780px) !important;
        max-height: 92vh !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto minmax(0,1fr) auto !important;
        overflow-y: auto !important;
    }
    html:not(.proarte-panel-interno) #widget-carrito #carrito-body {
        grid-column: 1 !important;
        grid-row: 2 !important;
        grid-template-columns: 1fr !important;
        overflow: visible !important;
        border-right: 0 !important;
    }
    html:not(.proarte-panel-interno) #widget-carrito .carrito-footer {
        grid-column: 1 !important;
        grid-row: 3 !important;
        overflow: visible !important;
        border-top: 1px solid #e5e7eb !important;
    }
}


/* =========================================================
   M8 / CARRITO · AJUSTES ACUMULADOS 2026-09-22
   ========================================================= */
/* El nombre comercial largo de M8 puede envolver sin desbordar la tarjeta. */
.m8-card .module-title { overflow-wrap: anywhere; }

/* En el panel interno, al haber al menos un producto el carrito abre de entrada
   en la vista amplia. No activa checkout: solo mejora tamaño y lectura. */
html.proarte-panel-interno #widget-carrito.carrito-vista-amplia {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(980px, 92vw) !important;
    height: min(650px, 86vh) !important;
    max-width: 980px !important;
    max-height: 86vh !important;
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(290px, .9fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    box-shadow: 0 22px 60px rgba(15,23,42,.32) !important;
}
html.proarte-panel-interno #widget-carrito.carrito-vista-amplia .carrito-header {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
}
html.proarte-panel-interno #widget-carrito.carrito-vista-amplia #carrito-body {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 12px !important;
    background: #f4f7f6 !important;
    border-right: 1px solid #e2e8f0 !important;
}
html.proarte-panel-interno #widget-carrito.carrito-vista-amplia .carrito-footer {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 14px !important;
}
html.proarte-panel-interno #widget-carrito.carrito-vista-amplia.carrito-checkout-activo .carrito-footer {
    grid-column: 2 !important;
    grid-row: 2 !important;
}
@media (max-width: 820px) {
    html.proarte-panel-interno #widget-carrito.carrito-vista-amplia {
        width: 96vw !important;
        height: 92vh !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto minmax(0,1fr) auto !important;
        overflow-y: auto !important;
    }
    html.proarte-panel-interno #widget-carrito.carrito-vista-amplia #carrito-body,
    html.proarte-panel-interno #widget-carrito.carrito-vista-amplia .carrito-footer {
        grid-column: 1 !important;
        border-right: 0 !important;
    }
    html.proarte-panel-interno #widget-carrito.carrito-vista-amplia .carrito-footer { grid-row: 3 !important; }
}

/* ==========================================
   PÍA WEB · AYUDA CONTEXTUAL DE MATERIALES
   ========================================== */
.pia-material-tools { display:flex; flex-wrap:wrap; gap:7px; margin-top:7px; }
.pia-material-tools[hidden] { display:none !important; }
.pia-material-tool { border:1px solid #b8dcef; background:#f4fbff; color:#226789; border-radius:18px; padding:7px 10px; font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:.18s ease; width:auto; }
.pia-material-tool:hover { background:#e7f6fd; border-color:#70bde1; transform:translateY(-1px); }
.pia-material-tool img { width:17px; height:17px; display:block; }
html.proarte-panel-interno .pia-material-tools { display:none !important; }

.pia-material-overlay { position:fixed; inset:0; z-index:12000; background:rgba(16,29,38,.62); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; padding:18px; }
.pia-material-overlay[hidden] { display:none !important; }
.pia-material-dialog { width:min(920px,96vw); max-height:90vh; overflow:auto; background:#fff; border-radius:20px; box-shadow:0 24px 70px rgba(0,0,0,.28); position:relative; }
.pia-material-close { position:absolute; top:10px; right:13px; width:36px; height:36px; border:0; border-radius:50%; background:rgba(255,255,255,.9); color:#345; font-size:1.55rem; line-height:1; cursor:pointer; z-index:2; }
.pia-material-head { display:grid; grid-template-columns:118px 1fr; gap:18px; align-items:center; padding:20px 54px 18px 20px; background:linear-gradient(135deg,#eef9ff,#fff8f3); border-bottom:1px solid #e6eef2; }
.pia-material-avatar { width:128px; height:128px; border-radius:0; object-fit:contain; object-position:center; background:transparent; filter:drop-shadow(0 10px 16px rgba(16,54,75,.12)); }
.pia-material-kicker { display:block; color:#399BD5; font-size:.75rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; margin-bottom:4px; }
.pia-material-head h2 { margin:0 0 5px; font-size:1.45rem; color:#22333d; }
.pia-material-sub { margin:0; color:#60717b; font-size:.9rem; }
.pia-material-body { padding:20px; }
.pia-material-loading,.pia-material-error,.pia-material-intro { margin:0; color:#4d5e68; line-height:1.5; }
.pia-material-error { color:#9a3c32; background:#fff3f1; border:1px solid #f1c1bc; border-radius:10px; padding:10px 12px; }
.pia-material-grid,.pia-compare-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:15px; }
.pia-material-card { border:1px solid #dce8ee; border-radius:14px; padding:14px; background:#fff; display:flex; flex-direction:column; gap:8px; min-width:0; }
.pia-material-card h3 { margin:0; font-size:1rem; color:#263a45; }
.pia-material-card p { margin:0; color:#5b6b74; font-size:.88rem; line-height:1.45; flex:1; }
.pia-material-elegir,.pia-compare-go { border:0; background:#399BD5; color:#fff; border-radius:9px; padding:9px 12px; font-weight:800; cursor:pointer; font-size:.84rem; }
.pia-material-elegir:hover,.pia-compare-go:hover { filter:brightness(.95); }
.pia-compare-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0 10px; }
.pia-compare-field span { display:block; font-size:.76rem; color:#5f7079; font-weight:800; text-transform:uppercase; margin-bottom:4px; }
.pia-compare-go { width:100%; padding:11px 14px; }
.pia-compare-go:disabled { opacity:.65; cursor:wait; }
.pia-compare-result { margin-top:16px; }
.pia-compare-diff { margin-top:12px; padding:13px 14px; border-radius:12px; background:#f6fbfe; border-left:4px solid #399BD5; }
.pia-compare-diff strong { color:#226789; display:block; margin-bottom:4px; }
.pia-compare-diff p { margin:0 0 6px; color:#455861; line-height:1.45; }
.pia-compare-diff small { color:#6b7d86; }
@media (max-width:650px) {
  .pia-material-overlay { padding:8px; align-items:flex-end; }
  .pia-material-dialog { width:100%; max-height:94vh; border-radius:18px 18px 0 0; }
  .pia-material-head { grid-template-columns:76px 1fr; padding:15px 46px 15px 14px; gap:12px; }
  .pia-material-avatar { width:92px; height:92px; border-radius:0; background:transparent; }
  .pia-material-head h2 { font-size:1.18rem; }
  .pia-material-sub { font-size:.8rem; }
  .pia-material-body { padding:14px; }
  .pia-material-grid,.pia-compare-cards,.pia-compare-row { grid-template-columns:1fr; }
}

/* Consolidado161: en modo interno el grid global no debe forzar visibles
   las medidas personalizadas de M17 cuando A5/10x15 estan seleccionadas. */
html.proarte-panel-interno .modal-overlay[id^="modal-m"] #m17-custom-size.m17-hidden {
    display: none !important;
}

/* Ocultamiento de campos condicionales también en panel interno. */
.guillotina-hidden{display:none!important;}

body:not(.modo-interno) .solo-interno { display: none !important; }

/* ================================================================
   Consolidado167 - Panel interno: respetar bloques ocultos por estado
   ----------------------------------------------------------------
   El modo interno fuerza .grid-2 a display:grid !important para su layout.
   Algunos modulos (M4/M8/M10/M15/M17 y otros) usan display:none inline
   mientras la medida personalizada no esta seleccionada. Esta regla de
   estado debe tener prioridad sobre el layout, y deja de aplicar en cuanto
   el JS cambia el inline style a display:grid.
   ================================================================ */
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .grid-2[style*="display:none"],
html.proarte-panel-interno .modal-overlay[id^="modal-m"] .grid-2[style*="display: none"] {
    display: none !important;
}