@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

:root {
    --color-yellow: #FFDA83;
    --color-red: #FF6565;
    --color-green: #60E2A0;
    --color-orange: #FFAF74;
    --color-blue: #3B86FF;
}

/*#ffcb05*/
@font-face {
    font-family: Dobra;
    src: url(dobra.woff2);
    font-weight: 500;
}

#corn_dashboard
{
    padding: 30px;
    margin: 15px;
    background-color: #f1f1f1;
}

.btnTipo
{
    display: block;
    text-decoration: none;
    padding: 15px 0;
    border: 1px solid #f1f1f1;
    color: #000;
    background-color: #FFF;
}

.btnTipo.activo, .btnTipo:hover
{
    background-color: #000;
    color: #FFF;    
}

.modelo {
    border: 1px solid #000;
    width: 200px;
    text-align: center;
    padding: 5px 0;
    cursor: pointer;
}

.modelo.activo {
    background-color: #000;
    color: #FFF;
}

.loader
{
    text-align: center;
    padding-top: 100px;
    padding-bottom: 50px;
    color: #999;
}

.loader i
{
    font-size: 82px;
    margin-bottom: 10px;
}

.disabled
{
    display: none;
}

.enabled
{
    display: block !important;
}

#corn_dashboard .nav-tabs
{
    border-bottom: 0;
}

#corn_dashboard .nav-tabs .nav-link
{
    border-radius: 0px !important;
    color: #000;
}

.corn_clasificaciones
{
    margin-top: 10px;
    margin-bottom: 10px;
}

.btn-clasificacion
{
    border: 0;
    margin-right: 15px;
    background-color: #FFF;
}

.btn-clasificacion.activo
{
    font-weight: bold;
}

#corn_dashboard .tab-content
{
    background-color: #FFF;
    border: 1px solid #dee2e6;
    padding: 15px;
}

.boxModelo
{
    border: 1px solid #000;
    color: #000;
    cursor: pointer;
    padding: 5px 10px;
    text-align: center;
    font-size: 12px;
    min-height: 3rem;
}

.boxModelo.activo
{
    background-color: #000;
    color: #FFF;
}

.corn_splides
{
    min-height: 80px;
}

.corn_splide
{
    padding-left: 30px;
    padding-right: 30px;
}

.corn_splide .splide__slide
{
    padding: 10px;
    width: calc(16.6667%);
}

.splide__arrow
{
    border-radius: 0 !important;
}

.splide__arrow--prev {
    left: -.25em !important;
}

.splide__arrow--next {
    right: -.25em !important;
}

.corn_ficha h5,
.corn_formulario h5,
.corn_resultado h5 {
    font-size: 24px;
}

.corn_ficha h6
{
    font-size: 22px;
}

.corn_ficha i
{
    font-size: 22px;
}

.corn_ficha .btn-sgte, .corn_formulario .btn-sgte, .btn-sgte
{
    border: 0;
    border-radius: 5px;
    padding: 8px 15px;
    font-weight: bold;
}

a.btn-sgte
{
    display: block;
    text-align: center;
    text-decoration: none;
    color: #000;
}

.corn_formulario
{
    background-color: #FFF;
    padding: 50px 50px !important;
}

.corn_formulario label
{
    font-weight: bold;
}

.corn_formulario .form-control
{
    background-color: #f1f1f1;
}

.corn_error
{
    font-size: 12px;
    color: #dc323c;
}

.corn_haserror
{
    border-color: #dc323c !important;
}

.corn_cotizacion
{
    background-color: #FFF;
    padding: 50px 50px !important;
}

/* Mobile: filtro y modelos como chips en una fila con scroll horizontal
   (mismo patrón que las galerías del sitio). Una línea, alto fijo; si no
   caben, el siguiente queda cortado en el borde, señal de que hay más. */
.corn_chips
{
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0 10px;
    margin-bottom: 4px;
}

.corn_chips::-webkit-scrollbar
{
    display: none;
}

.corn_chip
{
    flex: 0 0 auto;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #000;
    border-radius: 22px;
    background: #FFF;
    color: #000;
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.corn_chip.activo
{
    background: #000;
    color: #FFF;
}

/* Confirmación anterior (en la página, no modal). Ya no está en el markup, pero
   el HTML cacheado por el proxy del sitio puede traerla durante horas junto con
   este CSS (que se pide con versión aleatoria): se conservan sus estilos para que
   no se deforme. El modal nuevo usa clases propias (corn_conf_*). */
.corn_confirmacion
{
    background-color: #FFF;
    padding: 48px 20px;
}

.corn_confirmacion_icono
{
    font-size: 56px;
}

.corn_confirmacion p
{
    font-size: 16px;
    line-height: 1.5;
}

.corn_confirmacion_acciones
{
    margin-top: 28px;
}

.corn_link_secundario
{
    display: block;
    width: 100%;
    margin-top: 10px;
    color: #000;
    font-size: 16px;
    text-decoration: underline;
}

/* Confirmación al enviar: modal sobre la página (se monta en <body> o en el
   modal de Bootstrap del cotizador, ver destinoConfirmacion()). --corn-color
   es el color del formulario (form_color de la configuración) y
   --corn-color-texto el del texto del botón; el tema puede redefinir ambos. */
.corn_confirmacion_overlay
{
    position: fixed;
    inset: 0;
    z-index: 100010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 9, 15, .62);
    overscroll-behavior: contain;
}

.corn_conf_card
{
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 100%;
    overflow-y: auto;
    padding: 56px 40px 52px;
    border-radius: 16px;
    background: #FFF;
    color: #1F2933;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    outline: none;
}

.corn_conf_cerrar
{
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #4B5563;
    font-size: 20px;
    cursor: pointer;
}

.corn_conf_cerrar:hover,
.corn_conf_cerrar:focus-visible
{
    background: #F1F3F5;
    color: #111;
}

.corn_conf_icono
{
    display: block;
    color: #22964F;
    font-size: 64px;
    line-height: 1;
}

.corn_conf_card .corn_conf_titulo
{
    margin: 20px 0 12px;
    color: #0B0F17;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
}

.corn_conf_card p
{
    max-width: 360px;
    margin: 0 auto;
    color: #374151;
    font-size: 16px;
    line-height: 1.6;
}

.corn_conf_btn
{
    display: block;
    width: 100%;
    max-width: 320px;
    height: 52px;
    margin: 34px auto 0;
    border: 0;
    border-radius: 6px;
    background: var(--corn-color, #A99560);
    color: var(--corn-color-texto, #FFF);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .08em;
    cursor: pointer;
}

.corn_conf_btn:hover,
.corn_conf_btn:focus-visible
{
    filter: brightness(.94);
}

.corn_conf_link
{
    display: inline-block;
    margin-top: 26px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--corn-color, #A99560) 55%, #000);
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

@media (max-width: 767.98px)
{
    .corn_conf_card
    {
        padding: 48px 24px 40px;
    }

    .corn_conf_cerrar
    {
        top: 8px;
        right: 8px;
    }

    .corn_conf_icono
    {
        font-size: 56px;
    }

    .corn_conf_card .corn_conf_titulo
    {
        margin-top: 24px;
        font-size: 22px;
    }

    .corn_conf_card p
    {
        max-width: none;
    }

    .corn_conf_btn
    {
        max-width: none;
        margin-top: 30px;
    }
}

.cabecera {
    color: #FFF !important;
    background-color: #dc3546 !important;
    font-weight: 300;
}

.disclaimer
{
    font-size: 12px;
}

.corn_avatar
{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
}

.splide__arrow:disabled {
    opacity: 0 !important;
    pointer-events: none;
}

.corn_splides_wa .corn_splide
{
    padding-left: 0;
    padding-right: 0;
}

.imagenPlanta
{
    max-height: 50vh;
    max-height: 50svh;
}

@media (max-width: 767px) {
    #corn_dashboard
    {
        padding: 10px 0;
        /*min-height: calc(100vh - 30px);*/
        background-color: #FFF;
        border: 1px solid #f1f1f1;
    }

    .cotizador-mobile h3
    {
        font-weight: bold;
        border-bottom: 1px solid rgba(0,0,0,.1);
        padding-bottom: 15px;
        padding-top: 15px;
        margin-bottom: 30px;
    }
    
    .cotizador-mobile h4
    {
        font-weight: bold;
        padding-top: 15px;
        font-size: 16px;
    }

    .btnTipo
    {
        margin-top: 15px;
        border: 1px solid rgba(0, 0, 0, .2);
    }

    .contenedor-opciones
    {
        height: auto;
        margin-bottom: 30px;
    }
    
    .cotizador-mobile .btn, .cotizador-mobile .btn-sgte
    {
        font-weight: bold;
        padding: 8px 15px;
        font-size: 14px !important;
        height: 42px;
    }
    
    .btn-sgte
    {        
        color: #000 !important;
    }

    .corn_splide
    {
        padding-left: 0px;
        padding-right: 0px;
    }

    .imagenPlanta
    {
        max-height: 35vh;
        max-height: 35svh;
    }

    .corn_formulario
    {
        padding: 15px !important;
    }

    .corn_cotizacion
    {
        padding: 5px !important;
    }

    .corn_formulario label
    {
        margin-top: 10px;
    }

    .contenedor-tabla td, .contenedor-tabla th
    {
        font-size: 11px;
        text-align: left;
    }

    .contenedor-tabla td.text-center
    {
        text-align: left !important;
    }
    
    .splide__arrow
    {
        top: 100px !important;
        height: 4em !important;
        width: 3em !important;
    }
    
    .splideModelo p
    {
        padding-bottom: 3px;
    }
    
    .contenedor-tabla
    {
        width: 100%;
        overflow-x: auto;
    }
    
    .tabla-responsiva tr td
    {
        text-wrap-mode: nowrap;
    }
    
    #corn_dashboard {
      scroll-margin: 100px;
    }
}

.modal-backdrop.show {
    opacity: var(--bs-backdrop-opacity);
    z-index: 0 !important; 
}

/* Formulario de consultas (#sec-form-modd): un solo aviso sobre el botón cuando
   hay campos con error; cada campo se marca con el borde rojo e ícono de
   .is-invalid y conserva su nombre en el placeholder. El aviso no suma alto:
   va en posición absoluta y el bloque del botón baja 12px con transform (que no
   mueve el layout) dentro del padding inferior de 20px de #formularioBanner.
   Así el formulario y el hero no cambian de tamaño ni se re-escalan. */
#sec-form-modd .form-envio
{
    position: relative;
}

#sec-form-modd .form-envio.con-error
{
    transform: translateY(12px);
}

#sec-form-modd .form-error-general
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    /* !important: en mobile, ventas y solo-formulario fuerzan
       "#form-slot-mobile p { font-size: 0.78rem !important }" (12,5px) */
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 600;
    color: #ff6b6b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Campos con error o válidos: espacio a la derecha para el ícono de Bootstrap
   (y la flecha en los select). En mobile los templates fuerzan
   "padding: 0.3rem 0.6rem !important" y el texto quedaba debajo del ícono. */
#sec-form-modd .form-control.is-invalid,
#sec-form-modd .form-control.is-valid
{
    padding-right: calc(1.5em + .75rem) !important;
}

#sec-form-modd .form-select.is-invalid,
#sec-form-modd .form-select.is-valid
{
    padding-right: 4.125rem !important;
}