/* ==========================================================================
   VentanasconIA · tema visual
   ==========================================================================

   ÚNICO origen del color de la aplicación. Lo cargan las dos cáscaras que hay
   —la de React (`app.blade.php`) y la trasladada de Calculadora 2
   (`compat/calculadora2.blade.php`)—, de modo que las dos pantallas hablan el
   mismo idioma visual sin repetir una sola paleta.

   Cómo cambia el color de TODO sin tocar componente por componente:

     1. las variables `--vci-*` de aquí abajo son la paleta;
     2. `infinity-view.css` ya tenía su propio sistema (`--iv-*`, `--mqf-*`):
        se redefine ese sistema con la paleta nueva, y con eso se mueve la mayor
        parte de la calculadora trasladada;
     3. lo que `calculadora2.css` escribió con hexadecimales sueltos —los grises
        pizarra, el índigo de la mano y el naranja— se corrige abajo con reglas
        puntuales sobre sus propias clases;
     4. React no se toca: `resources/css/app.css` remapea los tokens de Tailwind
        a esta misma paleta.

   Este fichero NO toca geometría: ni el SVG técnico, ni cotas, ni tamaños del
   dibujo. Solo color, borde, espacio y tipografía de los contenedores.
   ========================================================================== */

:root {
    /* ── Paleta ────────────────────────────────────────────────────────── */
    --vci-primary:        #246B4A;
    --vci-primary-dark:   #174B35;
    --vci-primary-light:  #DCEFE5;
    --vci-accent:         #4F9B70;
    --vci-background:     #F4F8F5;
    --vci-surface:        #FFFFFF;
    --vci-border:         #CADDD1;
    --vci-border-strong:  #A9C9B7;
    --vci-text:           #19352A;
    --vci-muted:          #688074;
    --vci-danger:         #C74343;
    --vci-danger-soft:    #FDECEC;
    --vci-warning:        #8A6416;
    --vci-warning-soft:   #FBF3DF;

    /* ── Escala compartida ─────────────────────────────────────────────── */
    --vci-radio:          10px;
    --vci-radio-sm:       7px;
    --vci-sombra:         0 1px 2px rgba(23, 75, 53, .06);
    --vci-sombra-md:      0 6px 20px rgba(23, 75, 53, .10);
    --vci-anillo:         0 0 0 3px rgba(36, 107, 74, .18);
    --vci-transicion:     .15s ease;

    /* ── 2 · El sistema de `infinity-view.css`, redefinido ─────────────── */
    /* Cambiar estas es cambiar de golpe topbar, tarjetas, acentos y estados
       de toda la interfaz trasladada: no hace falta reescribir sus reglas. */
    --iv-navy:            #246B4A;
    --iv-navy-light:      #2F8259;
    --iv-orange:          #246B4A;   /* el acento pasa a ser el verde */
    --iv-orange-hover:    #174B35;
    --iv-stone:           #F4F8F5;
    --iv-dark:            #19352A;
    --iv-white:           #FFFFFF;
    --iv-radius:          8px;
    --iv-shadow:          0 1px 2px rgba(23, 75, 53, .06);
    --iv-shadow-lg:       0 8px 24px rgba(23, 75, 53, .14);

    --mqf-bg-sidebar:     #174B35;
    --mqf-bg-topbar:      #FFFFFF;
    --mqf-bg-canvas:      #F4F8F5;
    --mqf-bg-card:        #FFFFFF;
    --mqf-card-bg:        #FFFFFF;
    --mqf-bg-input:       #FFFFFF;
    --mqf-bg-hover:       #EAF4EE;
    --mqf-bg-active:      rgba(36, 107, 74, .10);
    --mqf-bg-dark:        #FFFFFF;
    --mqf-bg-elevated:    #FFFFFF;

    --mqf-color-acento:       #246B4A;
    --mqf-color-acento-text:  #FFFFFF;
    --mqf-color-acento-hover: #174B35;
    --mqf-color-acento-sub:   #174B35;
    --mqf-accent:             #246B4A;

    --mqf-border:         #CADDD1;
    --mqf-border-default: #CADDD1;
    --mqf-border-subtle:  #E1EDE6;
    --mqf-border-strong:  #A9C9B7;
    --border:             #CADDD1;
    --border-light:       #E1EDE6;
    --bg-main:            #F4F8F5;
    --bg-card:            #FFFFFF;
    --bg-muted:           #EAF4EE;
    --bg-dark:            #174B35;

    /* El rojo se reserva para el error y lo destructivo. */
    --mqf-color-error:    #C74343;
    --mqf-color-success:  #246B4A;
    --mqf-color-warning:  #8A6416;
    --mqf-color-info:     #246B4A;
}

/* ==========================================================================
   Navegación — idéntica en las dos cáscaras
   ==========================================================================
   Las mismas clases las usa el componente de React y la vista de la
   calculadora: una sola definición, una sola barra.
   ========================================================================== */

.vci-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    box-sizing: border-box;
    padding: .7rem 1.25rem;
    background: var(--vci-surface);
    color: var(--vci-text);
    border-bottom: 1px solid var(--vci-border);
    box-shadow: var(--vci-sombra);
    font: 500 14px/1.2 'Inter', system-ui, sans-serif;
}

.vci-nav .vci-marca {
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--vci-primary-dark);
    margin-right: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* El punto de la marca: lo único decorativo, y del color de la casa. */
.vci-nav .vci-marca::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--vci-primary);
}

.vci-nav a {
    display: inline-block;
    padding: .45rem .8rem;
    border-radius: var(--vci-radio-sm);
    color: var(--vci-muted);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--vci-transicion), color var(--vci-transicion);
}

.vci-nav a:hover { background: var(--vci-primary-light); color: var(--vci-primary-dark); }
.vci-nav a.vci-activa { background: var(--vci-primary); color: #fff; }
.vci-nav a.vci-activa:hover { background: var(--vci-primary-dark); color: #fff; }
.vci-nav a.vci-borde { border-color: var(--vci-border-strong); color: var(--vci-primary-dark); }
.vci-nav a.vci-borde:hover { background: var(--vci-primary-light); }

.vci-nav .vci-fin { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.vci-nav .vci-quien { color: var(--vci-muted); font-weight: 400; }

/* La marca lleva a Inicio: es el tercer destino, sin ocupar una pestaña. */
.vci-nav a.vci-marca { padding: 0; border: 0; background: none; color: var(--vci-primary-dark); }
.vci-nav a.vci-marca:hover { background: none; color: var(--vci-primary); }

@media (max-width: 480px) {
    .vci-nav { padding: .6rem .9rem; gap: .35rem; }
    .vci-nav .vci-fin { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   3 · Calculadora trasladada: lo que se escribió con hexadecimales sueltos
   ==========================================================================
   Solo color, borde y espacio. Ni una regla toca el `<svg>` del dibujo: los
   selectores de abajo son contenedores, botones y campos.
   ========================================================================== */

/* `infinity-view.css` fija el fondo y el texto con `!important` para ganar a los
   `style="..."` en línea de las páginas de MAIA. Se le responde con la misma
   moneda: es la única forma de cambiar el lienzo sin editar su fichero. */
body.iv-body,
body.iv-body main,
body.iv-body .mqf-content,
body.iv-body .mqf-main {
    background: var(--vci-background) !important;
    color: var(--vci-text) !important;
}

/* Cabecera propia de la calculadora: deja de ser una banda azul marino. */
.c2-top {
    background: var(--vci-surface);
    color: var(--vci-text);
    border-bottom: 1px solid var(--vci-border);
    padding: 14px 22px;
}
.c2-top h1 { color: var(--vci-primary-dark); font-weight: 700; letter-spacing: -.01em; }
.c2-top a { color: var(--vci-muted); opacity: 1; }
.c2-top a:hover { color: var(--vci-primary); }
.c2-badge { background: var(--vci-primary-light); color: var(--vci-primary-dark); font-weight: 600; }

/* Tarjetas y paneles */
.c2-panel {
    background: var(--vci-surface);
    border: 1px solid var(--vci-border);
    border-radius: var(--vci-radio);
    box-shadow: var(--vci-sombra);
    padding: 20px;
}
.c2-panel h2 { color: var(--vci-muted); font-weight: 700; }

/* Campos: mismo borde, mismo radio y mismo foco en toda la aplicación */
.c2-field label { color: var(--vci-muted); font-weight: 600; }
.c2-field input,
.c2-field select,
.c-input-sm,
.p-dyn-field input,
.p-dyn-field select {
    border: 1px solid var(--vci-border) !important;
    border-radius: var(--vci-radio-sm) !important;
    background: var(--vci-surface);
    color: var(--vci-text);
    transition: border-color var(--vci-transicion), box-shadow var(--vci-transicion);
}
.c2-field input:focus,
.c2-field select:focus,
.c-input-sm:focus,
.p-dyn-field input:focus,
.p-dyn-field select:focus {
    outline: none;
    border-color: var(--vci-primary) !important;
    box-shadow: var(--vci-anillo);
}

/* Botones */
.c2-btn { border-radius: var(--vci-radio-sm); transition: background var(--vci-transicion); }
.c2-btn-primary { background: var(--vci-primary); }
.c2-btn-primary:hover:not(:disabled) { background: var(--vci-primary-dark); }
.c2-btn-primary:disabled { background: var(--vci-border-strong); color: #fff; }
.c2-btn-ghost { border: 1px solid var(--vci-border); color: var(--vci-primary-dark); background: var(--vci-surface); }
.c2-btn-ghost:hover:not(:disabled) { background: var(--vci-primary-light); border-color: var(--vci-border-strong); }

/* Avisos: el rojo, solo para el error */
.c2-msg.err { background: var(--vci-danger-soft); color: var(--vci-danger); }
.c2-msg.ok  { background: var(--vci-primary-light); color: var(--vci-primary-dark); }

/* Despiece y totales */
.c2-result th { color: var(--vci-muted); }
.c2-result th, .c2-result td { border-bottom: 1px solid var(--vci-border); }
.c2-mot-row > td { padding: 0 !important; background: #f7faf8; }
.c2-mot-detail { border-left: 3px solid var(--vci-primary); }
.c2-mot-detail summary { display: grid; gap: 12px; align-items: center; padding: 12px 14px; cursor: pointer; list-style: none; transition: background .15s ease; }
.c2-mot-detail summary:hover { background: #edf6f1; }
.c2-mot-detail summary::-webkit-details-marker { display: none; }
.c2-mot-detail summary::before { content: '+'; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--vci-primary); color: #fff; font-weight: 700; line-height: 1; }
.c2-mot-detail[open] summary::before { content: '−'; }
.c2-mot-detail summary { grid-template-columns: 14px minmax(160px, 1.4fr) minmax(80px, .7fr) minmax(120px, 1fr) auto; }
.c2-mot-ref { color: var(--vci-muted); }
.c2-mot-calculo { margin: 0 12px 12px 36px; padding: 12px 16px; background: #fff; border: 1px solid #cfe3d8; border-radius: 8px; box-shadow: 0 2px 8px rgba(17, 70, 47, .06); }
.c2-mot-title { margin-bottom: 6px; color: var(--vci-primary-dark); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.c2-mot-concepto, .c2-mot-total { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(120px, auto) 74px; gap: 18px; padding: 6px 0; border-bottom: 1px solid #edf2ef; }
.c2-mot-concepto strong, .c2-mot-total strong { text-align: right; }
.c2-mot-zero { color: #8b9992; }
.c2-mot-zero strong { font-weight: 500; }
.c2-mot-total { margin-top: 5px; padding-top: 10px; border-top: 2px solid var(--vci-primary); border-bottom: 0; color: var(--vci-primary-dark); }
@media (max-width: 760px) {
  .c2-mot-detail summary { grid-template-columns: 14px 1fr auto; }
  .c2-mot-detail summary .c2-mot-ref, .c2-mot-detail summary span:nth-of-type(3) { display: none; }
  .c2-mot-calculo { margin-left: 10px; padding: 10px 12px; }
  .c2-mot-concepto, .c2-mot-total { grid-template-columns: 1fr auto; }
  .c2-mot-concepto strong, .c2-mot-total strong { grid-column: 2; }
}
.c2-totales { border-top: 2px solid var(--vci-primary); }
.c2-totales .pvp { color: var(--vci-primary-dark); }

/* Pestañas de modo: Plantilla / Constructor libre */
.modo-toggle { border: 1px solid var(--vci-border); border-radius: var(--vci-radio-sm); background: var(--vci-surface); }
.modo-toggle button { color: var(--vci-muted); font-weight: 600; }
.modo-toggle button:hover { background: var(--vci-primary-light); color: var(--vci-primary-dark); }
.modo-toggle button.active,
.modo-toggle .active-btn,
.active-btn { background: var(--vci-primary) !important; color: #fff !important; border-color: var(--vci-primary) !important; }

/* Mano de apertura: era índigo */
.p-mano-btn { border: 1.5px solid var(--vci-border) !important; color: var(--vci-primary-dark) !important; border-radius: var(--vci-radio-sm); }
.p-mano-btn:hover { background: var(--vci-primary-light) !important; }
.p-mano-btn.active { background: var(--vci-primary) !important; color: #fff !important; border-color: var(--vci-primary) !important; }

/* Galería de tipologías */
.tipologia-card { border-radius: var(--vci-radio); border-color: var(--vci-border); }
.tipologia-card:hover { background: var(--vci-primary-light); border-color: var(--vci-primary); box-shadow: var(--vci-sombra-md); }
.tipologia-card.selected { background: var(--vci-primary-light); border-color: var(--vci-primary); box-shadow: var(--vci-anillo); }
.p-btn-volver:hover, .tipologias-acc-toggle:hover { background: var(--vci-primary-light); border-color: var(--vci-primary); color: var(--vci-primary-dark); }

/* Selectores con imagen y sus desplegables: eran naranjas */
.p-sel-img-item:hover,
.p-img-drop-trigger:hover,
.p-img-drop.open .p-img-drop-trigger { border-color: var(--vci-primary) !important; background: var(--vci-primary-light) !important; }
.p-sel-img-item.p-sel-img-active { border-color: var(--vci-primary) !important; background: var(--vci-primary-light) !important; box-shadow: var(--vci-anillo) !important; }
.p-perfil-drop-panel, .p-img-drop-panel { border: 1px solid var(--vci-border) !important; border-radius: var(--vci-radio) !important; box-shadow: var(--vci-sombra-md) !important; }

/* Forro, zonas y conmutadores */
.p-forro-lado-chip.p-active { background: var(--vci-primary); border-color: var(--vci-primary); }
.p-forro-medida-btn.active { background: var(--vci-primary); color: #fff; border-color: var(--vci-primary); }
.p-toggle-switch input:checked ~ .p-toggle-track { background: var(--vci-primary); }
.p-dyn-zone-label, #p-vista-seleccion .serie-header h3 { color: var(--vci-primary-dark); }
#p-vista-seleccion .serie-header { border-bottom-color: var(--vci-primary); }
#p-subdiv-toolbar button:hover { background: var(--vci-primary); border-color: var(--vci-primary); }

/* Bloques con color propio en la fuente: la mano era lavanda con texto índigo y
   el forro, crema con texto ámbar. Pasan a ser el mismo bloque suave verde que
   el resto, para que la vista tenga una sola familia de color. */
.p-mano-bloque,
.p-forro-bloque {
    background: var(--vci-primary-light) !important;
    border: 1px solid var(--vci-border) !important;
    border-radius: var(--vci-radio-sm) !important;
}
.p-mano-label,
.p-forro-bloque-label { color: var(--vci-primary-dark) !important; }
.p-forro-section-label { color: var(--vci-muted) !important; }

/* Cabeceras de sección y acordeones: eran azul marino. */
.p-config-header { border-bottom-color: var(--vci-border) !important; }
.p-config-nombre { color: var(--vci-primary-dark) !important; }
#p-vista-config details.p-acc {
    border: 1px solid var(--vci-border) !important;
    border-radius: var(--vci-radio-sm) !important;
}
#p-vista-config details.p-acc > summary:hover { color: var(--vci-primary) !important; }
#p-vista-config details.p-acc > summary::after { color: var(--vci-muted) !important; }
.p-dyn-global { border-top-color: var(--vci-border) !important; }

/* Rótulos de sección de la columna de configuración (CONFIGURACIÓN, PERSIANA…)
   y de los acordeones. La fuente los dejaba en azul marino y gris pizarra. */
#p-vista-config .p-cfg-titulo,
#p-vista-config .p-sec-label,
#p-vista-config h2,
#p-vista-config h3,
.p-cfg-titulo,
.c2-panel > h2 { color: var(--vci-primary-dark) !important; }

#p-vista-config details.p-acc > summary { color: var(--vci-primary-dark) !important; }

/* El contenedor del dibujo. La geometría de dentro no se toca. */
.c-svg-wrap, .p-svg-wrap {
    background: var(--vci-surface);
    border: 1px solid var(--vci-border);
    border-radius: var(--vci-radio);
}

/* Barra inferior del precio */
#c2-floatbar {
    background: var(--vci-primary-dark) !important;
    border-top: 1px solid var(--vci-primary) !important;
    box-shadow: 0 -6px 20px rgba(23, 75, 53, .18) !important;
}
#c2-floatbar .fb-nombre { color: rgba(255, 255, 255, .72); }
#c2-floatbar .fb-iva    { color: rgba(255, 255, 255, .68); }
#c2-floatbar .fb-precio { letter-spacing: -.01em; }
#c2-floatbar .fb-guardar { background: var(--vci-accent); border-radius: var(--vci-radio-sm); }
#c2-floatbar .fb-guardar:hover:not(:disabled) { background: #5FAE80; }
#c2-floatbar .fb-guardar:disabled { background: rgba(255, 255, 255, .22); }
#c2-floatbar .fb-despiece { border-radius: var(--vci-radio-sm); }
#c2-floatbar .fb-aviso { color: #FBD3D3; }