/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

.flatly .btn-check:focus:checked + .btn-primary, .flatly .btn-check .btn-primary:focus:checked {
    background-color: #32a852;
    border-color: #204d74;
}

.btn-check:active+.btn-primary, .btn-check:checked+.btn-primary, .btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle {
    background-color: #32a852;
    border-color: #204d74;
}

/* ============================================================
   HERO (full width real, padding vertical 10%, lateral 12vw)
   ============================================================ */

.ov-hero {
    background: #4A148C;
    color: #ffffff;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-top: 7vh;       /* antes 10vh: bajamos un poco para que suba el bloque violeta */
    padding-bottom: 10vh;
    padding-left: 12vw;
    padding-right: 12vw;
    box-sizing: border-box;
    margin-bottom: 0;
}


/* Anular wrappers internos del template solo dentro del hero */
.ov-hero .container,
.ov-hero .row,
.ov-hero [class*="col-"] {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Badge */
.ov-badge {
    background: #00C9C8;
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 1.5rem;
}

/* Título + subtítulo hero */
.ov-hero-title {
    font-size: 3.2rem;
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #ffffff;
}

.ov-hero-subtitle {
    font-size: 1.4rem;
    line-height: 1.5;
    max-width: 40rem;
    margin-bottom: 0;
    color: #F3E5F5;
}


/* ============================================================
   HERO CARD — box blanco
   ============================================================ */

.ov-hero-card {
    background: #ffffff;
    border-radius: 1.6rem;
    padding: 2rem 2.2rem;
    border: 1px solid #D0D0D0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    color: #222222;
    font-size: 1.2rem;
}

.ov-hero-list li {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.3rem;
}

.ov-hero-emoji {
    font-size: 1.9rem;
}

.ov-hero-list strong {
    color: #4A148C;
    font-size: 1.25rem;
}

.ov-hero-small {
    font-size: 0.95rem;
    color: #666;
}


/* ============================================================
   SECCIÓN ENCUESTAS (full width, alineada con hero, sin gap)
   ============================================================ */

.ov-surveylist-wrapper {
    background: #EDE7F6;
    width: 100vw;
    margin-left: calc(50% - 50vw);   /* full width, sin márgenes blancos */
    margin-right: calc(50% - 50vw);
    padding-top: 10vh;               /* mismo padding vertical que hero */
    padding-bottom: 10vh;
    padding-left: 12vw;              /* mismo padding lateral que hero */
    padding-right: 12vw;
    box-sizing: border-box;
    margin-top: 0;                   /* pegado al hero */
}

/* Anular wrappers internos sólo dentro de esta sección */
.ov-surveylist-wrapper .container,
.ov-surveylist-wrapper .row,
.ov-surveylist-wrapper [class*="col-"] {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Contenedor lógico de contenido, centrado pero sin desalinear */
.ov-surveys {
    max-width: 1120px;
    margin: 0 auto;
}

/* Títulos sección encuestas */
.ov-section-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: #4A148C;
    margin-top: 0;
    margin-bottom: 1rem;
}

.ov-section-subtitle {
    font-size: 1.2rem;
    color: #3F2A4A;
    margin-bottom: 2rem;
}


/* ============================================================
   TARJETAS DE ENCUESTAS
   ============================================================ */

.ov-survey-card {
    background: #ffffff;
    border: 3px solid #4A148C;
    border-radius: 1.5rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 0 #2E0B57;
    transition: transform 0.2s ease-out;
}

.ov-survey-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 0 #2E0B57;
}

.ov-survey-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1A237E;
    margin-bottom: 0.8rem;
}

.ov-survey-text {
    font-size: 1.15rem;
    color: #444;
    margin-bottom: 1rem;
}

.ov-survey-meta li {
    font-size: 1.05rem;
    color: #666;
}


/* ============================================================
   BOTÓN PRINCIPAL
   ============================================================ */

.ov-btn-primary {
    background: #00C9C8;
    border: none;
    padding: 0.9rem 1.4rem;
    font-size: 1.2rem;
    border-radius: 999px;
    color: #ffffff;
    font-weight: 700;
}

.ov-btn-primary:hover {
    background: #009B9A;
}


/* ============================================================
   ESTADO VACÍO
   ============================================================ */

.ov-empty-state {
    background: #fff;
    border: 2px solid #4A148C;
    padding: 2.8rem 1.7rem;
    border-radius: 1.6rem;
    box-shadow: 0 6px 0 #2E0B57;
    text-align: center;
}

.ov-empty-title {
    font-size: 1.6rem;
    color: #4A148C;
    font-weight: 800;
}

.ov-empty-text {
    font-size: 1.1rem;
    color: #555;
}


/* ============================================================
   ESCRITORIO — boost tipografía base
   ============================================================ */

@media (min-width: 992px) {
    body {
        font-size: 20px;
    }
}
/* Quitar cualquier margin-bottom colapsado del hero */
.ov-hero {
    margin-bottom: 0 !important;
}

/* Quitar cualquier margin-top colapsado del wrapper inferior */
.ov-surveylist-wrapper {
    margin-top: 0 !important;
}

/* Evitar que el primer elemento interno meta margen arriba */
.ov-surveylist-wrapper > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* Separar el texto (izquierda) del recuadro blanco (derecha) en el hero */
@media (min-width: 992px) {
    .ov-hero .row.align-items-center > div:first-child {
        padding-right: 2.5rem !important;   /* espacio entre título/texto y la tarjeta */
    }

    .ov-hero .row.align-items-center > div:last-child {
        padding-left: 2.5rem !important;    /* refuerza el gap desde el lado de la tarjeta */
    }
}
/* ============================================================
   HEADER MINIMAL – ajustes de tamaño, alineación y márgenes
   ============================================================ */

/* por las dudas, que no haya margen del navegador */
body {
    margin: 0;
}

/* header full width, sin margen extra arriba,
   alineado con ov-hero y la sección inferior (12vw) */
.ov-header-minimal {
    background: #ffffff;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0 !important;
    padding: 0.3rem 12vw;       /* poco alto, mismo margen lateral que ov-hero */
    box-sizing: border-box;
    border-bottom: 1px solid #E0E0E0;
    text-align: left;          /* por si algún estilo global centraba el contenido */
}

/* el contenedor NO se centra: ocupa todo el ancho útil */
.ov-header-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    align-items: center;       /* centra verticalmente el logo */
    justify-content: flex-start;
}

/* tamaño de logo base (mobile + desktop), alineado a la izquierda */
.ov-header-logo {
    display: block;
    height: 52px;
    width: auto;
    margin: 0;
}

/* escritorio: logo un poco más grande, sin tocar alineación */
@media (min-width: 992px) {
    .ov-header-minimal {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;   /* menos aire arriba/abajo */
    }

    .ov-header-logo {
        height: 68px;             /* más grande en desktop */
    }
}
/* ============================================================
   HEADER MINIMAL – ajustes de tamaño, alineación y márgenes
   ============================================================ */

/* Header full width, alineado a 12vw y corrigiendo whitespace superior
   (solo afecta al header de esta página) */
.ov-header-minimal {
    background: #ffffff;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    /* esta pequeña corrección negativa compensa el espacio que mete el layout arriba */
    margin-top: -12px;

    padding-top: 0;
    padding-bottom: 0;
    padding-left: 12vw;
    padding-right: 12vw;
    box-sizing: border-box;
    border-bottom: 1px solid #E0E0E0;
}

/* Contenedor interno: sin márgenes extra, logo alineado a la izquierda */
.ov-header-inner {
    width: 100%;
    margin: 0;
    padding: 0;
    max-width: 1120px;
    display: flex;
    align-items: flex-end;   /* logo lo más pegado posible al borde inferior del header */
    justify-content: flex-start;
}

/* Logo base (mobile + desktop) */
.ov-header-logo {
    display: block;
    margin: 0;
    padding: 0;
    height: 52px;
    width: auto;
}

/* Desktop: logo un poco más grande, sin agregar aire extra */
@media (min-width: 992px) {
    .ov-header-minimal {
        margin-top: -16px;   /* ajustamos un poco más en escritorio */
    }

    .ov-header-logo {
        height: 72px;
    }
}

/* Mobile: respetamos tamaño cómodo, sin que se descuadre */
@media (max-width: 991px) {
    .ov-header-minimal {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
        margin-top: -10px;
    }

    .ov-header-logo {
        height: 52px;
    }
}