/******************
    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
/* ======================================================
   CIBERIMAGINARIO — Tema hijo de fruity_Twentythree
   Paleta: #8f1000 #b1040e #333333 #555555 #aaaaaa #f2f2f2
   Fuentes: Montserrat (títulos), Lato (cuerpo)
   ====================================================== */

/* ---------- VARIABLES DE MARCA ---------- */
:root{
  --ci-primary:   #8f1000; /* rojo principal */
  --ci-accent:    #b1040e; /* acento / hover */
  --ci-dark:      #333333; /* texto principal */
  --ci-mid:       #555555; /* texto secundario */
  --ci-muted:     #aaaaaa; /* bordes / separadores */
  --ci-light:     #f2f2f2; /* fondos suaves */

  --ci-link:      var(--ci-primary);

  --ci-font-text:  "Lato", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ci-font-title: "Montserrat", var(--ci-font-text);
}

/* ---------- BASE TIPOGRÁFICO ---------- */
body{
  font-family: var(--ci-font-text);
  color: var(--ci-dark);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,.survey-title,.group-title{
  font-family: var(--ci-font-title);
  letter-spacing:.2px;
}

/* ---------- ANCHO DE LECTURA Y ESPACIADO ---------- */
#outerframeContainer .container,
#outerframeContainer .survey-container,
.container{ max-width: 860px; }
.question-container,.group-container,.welcome-container{ margin-bottom:1.25rem; }
.survey-welcome p,.survey-description p,.survey-info p{ margin-bottom:.6rem; }

/* ---------- TÍTULOS Y DESCRIPCIONES ---------- */
.survey-title,h1.survey-name,h1{
  font-weight: 700;
  font-size: clamp(1.8rem,3.2vw,2.4rem);
  line-height:1.15;
  margin-bottom:.6rem;
  color: var(--ci-dark);
}
.survey-description,.survey-welcome,.survey-info,.survey-intro{
  color: var(--ci-mid);
  font-size: clamp(1rem,1.2vw,1.08rem);
  line-height:1.55;
}

/* ---------- LISTAS DE INSTRUCCIONES ---------- */
.survey-description ul,.survey-info ul,.survey-intro ul{ margin:.75rem 0 1rem 1.25rem; }
.survey-description li,.survey-info li{ margin:.25rem 0; }

/* ---------- NAVBAR & LOGO ---------- */
.navbar .navbar-brand{ display:flex; align-items:center; gap:.5rem; min-height:48px; }
.navbar .navbar-brand::before{
  content:""; display:inline-block; width:140px; height:30px;
  background:url("../files/logo-ciberimaginario.svg") center/contain no-repeat;
}

/* ---------- ENLACES ---------- */
a{ color: var(--ci-link); }
a:hover,a:focus{ color: var(--ci-accent); }

/* ---------- BOTONES ---------- */
.btn-primary,.btn-success{
  background-color: var(--ci-primary); border-color: var(--ci-primary);
  color: #fff;
}
.btn-primary:hover,.btn-success:hover{
  background-color: var(--ci-accent); border-color: var(--ci-accent);
}
.btn-secondary{
  background-color: var(--ci-mid); border-color: var(--ci-mid); color:#fff;
}

#navigator-container .btn,#ls-button-submit,.ls-move-btn{
  min-width:140px; padding:.65rem 1.1rem; font-weight:600; border-radius:10px;
}

/* ---------- ALERTAS ---------- */
.alert,.alert-warning{
  border:1px solid var(--ci-accent);
  background: color-mix(in srgb, var(--ci-accent) 14%, white);
  color:#5a2e2e; padding:.6rem .8rem; border-radius:10px; margin-bottom:.9rem;
}

/* ---------- PROGRESO ---------- */
.progress{ height:6px; background: var(--ci-light); border-radius:6px; }
.progress-bar{ background: var(--ci-primary) !important; }

/* ---------- TARJETAS Y CAMPOS ---------- */
.card,.question-container,.group-container{ border-radius:12px; border:1px solid var(--ci-light); }
.question-title{ color: var(--ci-mid); }
.form-check-input:checked{ background-color: var(--ci-primary); border-color: var(--ci-primary); }
.form-control:focus,.custom-select:focus{
  border-color: var(--ci-primary);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ci-primary) 35%, transparent);
}
input[type="range"]::-webkit-slider-thumb{ background: var(--ci-primary); }
input[type="range"]::-moz-range-thumb{ background: var(--ci-primary); }

/* ---------- BLOQUE INICIAL “HERO” ---------- */
.welcome-container,.survey-description{ padding-top:.25rem; border-top:4px solid var(--ci-primary); }

/* ---------- FOOTER ---------- */
.ciber-footer{
  border-top:1px solid var(--ci-light);
  padding-top:.75rem; font-size:.85rem; color: var(--ci-mid);
}

/* ======================================================
   FIX 1: Espacio bajo logo/navbar
   ====================================================== */
.navbar { margin-bottom: 6px !important; }
#outerframeContainer { padding-top: 0 !important; }
.top-container,
.top-container .progress,
.top-container .progress-container,
#progress-container,
.ls-js-hidden-progress {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.survey-title, h1.survey-name { margin-top: 2px !important; margin-bottom: 8px !important; }
.survey-description, .survey-welcome, .welcome-container { margin-top: 4px !important; }
#outerframeContainer .container:first-of-type { margin-top: 0 !important; }

/* ======================================================
   FIX 2: Alineación botones Anterior / Siguiente
   ====================================================== */
#navigator-container,
.navigator-container,
.navbar-form-buttons,
.ls-move-buttons,
.ls-nav-buttons,
.move-btn-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .5rem !important;
  flex-wrap: nowrap !important;
  margin-top: 8px !important;
}
#navigator-container .btn-group,
.navigator-container .btn-group,
.ls-nav-buttons .btn-group,
.move-btn-container .btn-group {
  display: contents !important;
}
#navigator-container .btn,
.navigator-container .btn,
.ls-move-btn,
#ls-button-previous,
#ls-button-submit,
#ls-button-next {
  min-height: 44px !important;
  padding: .65rem 1.1rem !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#ls-button-previous { order: 1 !important; }
#ls-button-next,
#ls-button-submit { order: 2 !important; margin-left: auto !important; }
#navigator-container .btn:not(#ls-button-previous) { order: 3; }

/* En pantallas pequeñas: apilar al 100% */
@media (max-width: 576px){
  #navigator-container,
  .navigator-container,
  .ls-nav-buttons,
  .move-btn-container {
    flex-wrap: wrap !important;
    row-gap: .5rem !important;
  }
  #ls-button-previous, #ls-button-next, #ls-button-submit {
    width: 100% !important;
    order: unset !important;
    margin-left: 0 !important;
  }
}

/* ---------- DETALLES EXTRA ---------- */
.group-container:last-child,
.question-container:last-child { margin-bottom: .75rem !important; }
.ciber-footer { margin-top: .75rem !important; }


/* ===== FIX: Logo alineado a la izquierda en navbar ===== */
.navbar,
.navbar .container,
.navbar .navbar-inner,
.navbar .navbar-collapse {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;   /* nada centrado */
  text-align: left !important;
}

/* Evita centrados heredados y márgenes auto */
.navbar .navbar-brand {
  margin: 0 !important;
  padding-left: 0 !important;
  flex: 0 0 auto !important;
  order: 0 !important;
}

/* Si hay elementos a la derecha (menú, botones), que se vayan a la derecha */
.navbar .ml-auto,
.navbar .ms-auto,
.navbar .navbar-right,
.navbar .pull-right {
  margin-left: auto !important;
}

/* El pseudo-logo no debe “empujar” nada hacia el centro */
.navbar .navbar-brand::before{
  display:inline-block;
  margin: 0 !important;
  transform: translateX(0) !important;
}

/* Algunos themes centran el wrapper del brand */
.navbar-header,
.navbar .brand,
.navbar .navbar-brand-wrapper {
  text-align: left !important;
  margin: 0 !important;
  width: auto !important;
}

/* En móviles mantenemos la misma regla */
@media (max-width: 576px){
  .navbar,
  .navbar .container,
  .navbar .navbar-collapse { justify-content: flex-start !important; }
}