/******************
    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;
    }
}

/* Imágenes de contenido (preguntas, textos, descripciones) */
.question-text img,
.answer-container img,
.group-container img,
.ls-question-help img,
.ls-question-text img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   OQV – WELCOME INLINE + CHIPS (super compacto y alineado)
   Scoped: solo afecta a .oqv-welcome-inline
   ============================================================ */

.oqv-welcome-inline,
.oqv-welcome-inline *{
  box-sizing: border-box;
}

.oqv-welcome-inline{
  /* Importante para que NO quede desalineado con el tema */
  width: 100%;
  margin: 0 0 10px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.10);
  background: #fff;

  /* micro-acento “on brand” sin agrandar */
  box-shadow: 0 6px 18px rgba(17,24,39,.06);
}

.oqv-welcome-inline .oqv-line{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
}

.oqv-welcome-inline .oqv-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  color: #ffffff;
  background: linear-gradient(90deg, #4A148C, #2E0B57);
  white-space: nowrap;
}

.oqv-welcome-inline .oqv-copy{
  min-width: 0;
  flex: 1;
}

.oqv-welcome-inline .oqv-title{
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
  color: #1f2937;
}

.oqv-welcome-inline .oqv-money{
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(0,201,200,.14);
  border: 1px solid rgba(0,201,200,.28);
  white-space: nowrap;
}

.oqv-welcome-inline .oqv-sub{
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.35;
  color: #6b7280;
}

.oqv-welcome-inline .oqv-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.oqv-welcome-inline .oqv-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  line-height: 1;
  color: #374151;
  background: #f3f4f6;
  border: 1px solid rgba(17,24,39,.10);
  white-space: nowrap;
}

.oqv-welcome-inline .oqv-chip strong{
  font-weight: 900;
  color: #111827;
}

.oqv-welcome-inline .oqv-chip-link{
  text-decoration: none;
  font-weight: 900;
  color: #4A148C;
  background: rgba(74,20,140,.06);
  border-color: rgba(74,20,140,.16);
}

.oqv-welcome-inline .oqv-chip-link:hover{
  transform: translateY(-1px);
  transition: .15s ease;
}

.oqv-welcome-inline .oqv-chip-ghost{
  background: #ffffff;
  border-style: dashed;
  color: #6b7280;
}

/* Mobile: todavía más apretado */
@media (max-width: 720px){
  .oqv-welcome-inline{
    padding: 9px 10px;
    border-radius: 10px;
  }
  .oqv-welcome-inline .oqv-title{ font-size: 14.5px; }
  .oqv-welcome-inline .oqv-sub{ font-size: 12.8px; }
  .oqv-welcome-inline .oqv-chip{ padding: 6px 9px; font-size: 12.2px; }
}

/* ============================================================
   DESACTIVAR HYPHENATION EN TODO EL TEMPLATE
   ============================================================ */

html, body,
* {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;

  /* aseguramos cortes solo por espacios */
  word-break: normal !important;
  overflow-wrap: normal !important;
}


/* ============================================================
   WELCOME – Survey title (más destacado)
   ============================================================ */

#welcome-container h1:not(.ov-hero-title),
.welcome-container h1:not(.ov-hero-title) {
  display: inline-block !important;
  padding: 0.65rem 1.35rem !important;
  margin: 0 0 1.2rem 0 !important;

  font-size: clamp(1.6rem, 2.2vw, 2.35rem) !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  letter-spacing: .01em !important;

  color: #004d4c !important;
  background: rgba(0,201,200,.16) !important;
  border: 1px solid rgba(0,201,200,.35) !important;
  border-radius: 999px !important;

  box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
  max-width: 100% !important;
}