/* Calculadora web simplificada ([gsp_calc_simple]) — 15/10/2026.
   Mismo aspecto de tarjetas que el Selector (ver calc-unificada.css,
   .gsp-cu-tarjeta) pero con clases propias .gsp-cs-*, para que este
   widget público no dependa en nada del CSS/JS de Gestión interna. */

.gsp-cs-wrap {
    max-width: 1200px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* 15/10/2026 (corrección v9.02), a petición de Roberto — captura con un
       círculo a mano alzada marcando un hueco en blanco arriba a la
       derecha, junto a las tarjetas: columna izquierda (tarjetas +
       calculadora) y columna derecha (resultados, panel real trasladado
       aquí por calc-simple.js) una al lado de la otra desde arriba del
       todo, y "Contratar" ocupando el ancho completo debajo de ambas. */
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    column-gap: 30px;
    align-items: start;
}

.gsp-cs-columna-izquierda { grid-column: 1; }
.gsp-cs-columna-derecha { grid-column: 2; }

/* El panel (.gsp-cm-panel) es el mismo de siempre dentro de cada
   calculadora incrustada (calc-coche.php/calc-motos.php/
   calc-caravanas.php, sin tocar) — calc-simple.js solo lo traslada aquí.
   calc-motos.css le da flex/min-width pensados para vivir dentro de
   .gsp-cm-wrap; aquí ya no está ahí, así que se reajusta para ocupar
   toda esta columna (calc-simple.css carga después, con más
   especificidad, así que no hace falta !important). */
.gsp-cs-columna-derecha .gsp-cm-panel {
    width: 100%;
    min-width: 0;
}

.gsp-cs-tarjetas {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.gsp-cs-tarjeta {
    flex: 1;
    min-width: 160px;
    max-width: 220px;
    background: #fff;
    border: 2px solid #e2e2e2;
    border-radius: 10px;
    padding: 20px 14px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}
.gsp-cs-tarjeta:hover { transform: translateY(-2px); border-color: #960a25; }
.gsp-cs-tarjeta.active { border-color: #960a25; background: rgba(150,10,37,0.06); }

.gsp-cs-icono {
    width: 54px;
    height: 54px;
    margin: 0 auto 10px;
}
.gsp-cs-icono svg { width: 100%; height: 100%; stroke: #bbb; color: #bbb; }
.gsp-cs-tarjeta.active .gsp-cs-icono svg { stroke: #960a25; color: #960a25; }

.gsp-cs-label {
    font-weight: 600;
    font-size: 0.95em;
    color: #666;
    line-height: 1.25;
}
.gsp-cs-tarjeta.active .gsp-cs-label { color: #222; }

.gsp-cs-contratar {
    /* 15/10/2026 (corrección v9.05), a petición de Roberto ("quita el fondo
       blanco"): ya no es una caja con fondo propio — ahora que solo
       contiene el botón (el formulario vive en la ventana flotante), ese
       recuadro sobraba. */
    grid-column: 1 / -1;
    margin-top: 30px;
    text-align: center;
}

/* -------------------------------------------------------------------
   15/10/2026 (corrección v9.04), a petición de Roberto ("el boton...
   abre una ventana flotante con el formulario"): ventana flotante
   PROPIA de este widget, para el Formulario de "Contratar" — mismo
   patrón visual que la ventana de consentimiento del motor de
   Formularios (.gsp-gf-modal, ver formularios-front.css) pero con
   clases independientes .gsp-cs-modal-*, porque ESA otra ventana
   sigue viviendo, sin tocar, dentro del formulario que se embebe aquí
   dentro (se abre al pulsar "Enviar solicitud", ya con esta ventana
   de Contratar abierta encima — al tener ambas el mismo z-index
   máximo, la ventana de consentimiento, al estar anidada DENTRO de
   esta, pinta por encima de forma natural, sin ningún conflicto).
   ------------------------------------------------------------------- */

.gsp-cs-btn-contratar {
    display: inline-block;
    background: #960a25;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 14px 36px;
    font-size: 1.05em;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}
.gsp-cs-btn-contratar:hover { background: #7d0920; transform: translateY(-1px); }
/* 15/10/2026 (corrección v9.05), a petición de Roberto ("El boton tiene
   que estar condicionado a que el formulario de arriba esté relleno"):
   estado deshabilitado, mientras calc-simple.js no detecta un Total ya
   calculado en la calculadora de arriba. */
.gsp-cs-btn-contratar:disabled {
    background: #ccc;
    color: #888 !important;
    cursor: not-allowed;
}
.gsp-cs-btn-contratar:disabled:hover { background: #ccc; transform: none; }

/* Mismo motivo que .gsp-gf-modal (ver comentario junto a esa clase en
   formularios-front.css): z-index al máximo válido, para ganar siempre
   a cualquier cosa de fuera del plugin (barra de Avada, panel
   flotante del Total...), sin depender de competir número a número. */
.gsp-cs-modal { position: fixed; inset: 0; z-index: 2147483647; display: none; }
.gsp-cs-modal.is-abierto { display: block; }
.gsp-cs-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.gsp-cs-modal-dialog {
    position: relative;
    width: min(680px, calc(100% - 32px));
    max-height: calc(100vh - 64px);
    overflow: auto;
    margin: 40px auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    padding: 32px 36px;
    text-align: left;
}
.gsp-cs-modal-cerrar {
    position: absolute; top: 12px; right: 16px;
    background: none; border: none; font-size: 1.6em; line-height: 1;
    cursor: pointer; color: #666;
}

/* 15/10/2026 (corrección v9.02, reemplazada en v9.08): por debajo de los
   900px, mismo punto de corte que calc-motos.css, se pasa a una sola
   columna.
   v9.06 había puesto aquí el panel de resultado PRIMERO, arriba del
   formulario ("exactamante igual" a como se pidió entonces) — pero
   Roberto aclaró después que lo que de verdad quería con "la version
   smartphone" era el otro patrón que ya existe en Gestión interna/el
   asistente Especial de un Formulario (ver v9.07): una barra flotante de
   Total, fija abajo del todo, que se despliega al pulsarla — no un simple
   reordenado. Se sustituye aquí: el panel real se oculta en móvil (sigue
   intacto en el DOM — calc-simple.js lo sigue leyendo de
   .gsp-cs-columna-derecha para el autorrelleno del Formulario y la
   estadística de uso, sin ningún cambio) y calc-simple.js, al cargar,
   cuelga de <body> una copia visual con las clases
   ".gsp-cm-panel-flotante"/".gsp-cm-panel-barra" — MISMAS clases que
   calc-unificada.js usa en Gestión interna, con el mismo CSS ya cargado
   aquí vía calc-motos.css (ver @media max-width:900px ahí mismo), así que
   no hace falta ni una línea de CSS nueva para la barra en sí. */
@media (max-width: 900px) {
    .gsp-cs-wrap { grid-template-columns: 1fr; row-gap: 20px; }
    .gsp-cs-columna-izquierda, .gsp-cs-columna-derecha { grid-column: 1; }
    .gsp-cs-wrap .gsp-cm-panel { display: none; }
    /* Hueco al final para que la barra flotante colapsada (58px, ver
       calc-motos.css) no tape el botón "Contratar". */
    .gsp-cs-columna-izquierda { padding-bottom: 70px; }
}

@media (max-width: 640px) {
    .gsp-cs-tarjetas { gap: 8px; flex-wrap: nowrap; }
    .gsp-cs-tarjeta { flex: 1 1 0; min-width: 0; max-width: none; padding: 10px 4px; }
    .gsp-cs-icono { width: 34px; height: 34px; margin: 0 auto 6px; }
    .gsp-cs-label { font-size: 0.78em; line-height: 1.15; }
}