/* ==========================================
   CEOE Tenerife – Ultra Flat (no borders)
   Accent: #265787
   ========================================== */

:root{
  --accent: #265787;
  --accent-hover: #1f4a73;
  --bg: #f7f8fb;
  --text: #111827;
  --muted: #6b7280;
  --focus: 0 0 0 4px rgba(38, 87, 135, .16);
}

/* Base */
body{
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

/* Más ancho útil (menos “margen” en pantallas grandes) */
#outerframeContainer .container,
#outerframeContainer .container-fluid{
  max-width: 1320px;
}

/* Navbar limpia */
.navbar, .navbar-default{
  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Progreso */
.progress{
  height: 10px !important;
  border-radius: 999px !important;
  background: rgba(17,24,39,.06) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.progress-bar{
  background: var(--accent) !important;
  border-radius: 999px !important;
}

/* Contenedores: sin bordes ni sombras (plano) */
.question-wrapper,
.welcome-container,
.group-container,
.question-container,
#ls-question-box,
.panel,
.card{
  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  margin: 12px 0 !important;
}

/* Títulos y ayuda */
.question-wrapper .ls-question-text,
.question-wrapper .question-title,
.question-wrapper .q-text h3{
  font-size: 1.08rem;
  font-weight: 650;
  margin: 0 0 10px 0;
}
.question-wrapper .ls-questionhelp,
.question-wrapper .help-block,
.text-muted, small, .small{
  color: var(--muted) !important;
}

/* OCULTAR SOLO EL ASTERISCO (no la pregunta) */
.asterisk{
  display: none !important;
}

/* Fallbacks según tema/markup: oculta solo el símbolo dentro del título */
.question-wrapper .ls-question-text .asterisk,
.question-wrapper .question-title .asterisk,
.question-wrapper .q-text .asterisk{
  display: none !important;
}

/* Si el asterisco viene como texto en un <sup> o <span> dentro del título */
.question-wrapper .ls-question-text sup,
.question-wrapper .question-title sup{
  display: none !important;
}

/* Inputs */
.form-control, .form-select, select, textarea, input[type="text"], input[type="email"], input[type="number"]{
  border-radius: 10px !important;
  border: 0 !important;                 /* sin borde */
  background: rgba(17,24,39,.04) !important;
  box-shadow: none !important;
}
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus{
  outline: none !important;
  box-shadow: var(--focus) !important;
  background: rgba(17,24,39,.045) !important;
}

/* Radios/checkboxes con color corporativo */
.form-check-input{
  border-color: rgba(17,24,39,.20) !important;
}
.form-check-input:checked{
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.form-check-input:focus{
  box-shadow: var(--focus) !important;
}

/* Botones */
.btn, button, input[type="submit"]{
  border-radius: 10px !important;
  font-weight: 600;
  box-shadow: none !important;
}
.btn-primary, .ls-move-next-btn, .ls-move-submit-btn{
  background: var(--accent) !important;
  border: 0 !important;
}
.btn-primary:hover, .ls-move-next-btn:hover, .ls-move-submit-btn:hover{
  background: var(--accent-hover) !important;
}

/* Secundarios */
.btn-default, .btn-outline-secondary, .ls-move-previous-btn{
  background: rgba(17,24,39,.05) !important;
  border: 0 !important;
  color: var(--text) !important;
}
.btn-default:hover, .ls-move-previous-btn:hover{
  background: rgba(17,24,39,.08) !important;
}

/* Separadores, cajas antiguas */
hr, .well{
  border: 0 !important;
  box-shadow: none !important;
}

/* Mobile */
@media (max-width: 768px){
  #outerframeContainer .container,
  #outerframeContainer .container-fluid{
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Ocultar el texto automático tipo "Seleccione una de las siguientes opciones" */
.ls-questionhelp,
.questionhelp,
.question-help,
.ls-question-message .ls-questionhelp {
  display: none !important;
}

/* =========================
   DESPLEGABLES – tamaño y legibilidad
   ========================= */

/* Texto del desplegable (cerrado) */
select,
.form-select,
.ls-answers select,
.answer-item select {
  font-size: 1.1rem !important;      /* tamaño de letra */
  line-height: 1.4 !important;
  padding: 0.7rem 1rem !important;   /* altura del campo */
  min-height: 3rem !important;
}

/* Contenedor de respuestas */
.ls-answers,
.answer-item {
  font-size: 1.5rem !important;
}

/* Placeholder "Por favor, escoja..." */
select option[value=""],
select option:disabled {
  font-size: 1.5rem !important;
}

/* Móvil: un poco más compacto */
@media (max-width: 768px) {
  select,
  .form-select,
  .ls-answers select,
  .answer-item select {
    font-size: 1rem !important;
    min-height: 2.6rem !important;
  }
}

/* Sección 0 – Intro comercial */
.ods-hero { margin: 0 0 1rem 0; }
.ods-badge {
  display: inline-block;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-weight: 600;
  background: rgba(0,0,0,.06);
  margin-bottom: .75rem;
}
.ods-title { margin: 0 0 .5rem 0; font-size: 1.45rem; }
.ods-subtitle { margin: 0; font-size: 1.05rem; }

.ods-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
  margin: 1.1rem 0;
}
.ods-card {
  border-radius: 14px;
  padding: 1rem;
  background: rgba(255,255,255,.75);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.ods-icon { font-size: 1.35rem; margin-bottom: .4rem; }
.ods-card-title { font-weight: 700; margin-bottom: .25rem; }
.ods-card-text { font-size: 0.98rem; }

.ods-info {
  border-radius: 14px;
  padding: .9rem 1rem;
  background: rgba(0,0,0,.04);
  margin: 1rem 0;
}
.ods-info-item { margin: .35rem 0; font-size: 1rem; }
.ods-info-ic { margin-right: .35rem; }

.ods-footer { margin-top: 1rem; }
.ods-footer-title { font-weight: 700; margin: 0 0 .25rem 0; }
.ods-footer-text { margin: 0 0 .6rem 0; }
.ods-cta { margin: 0; font-weight: 600; }

/* Responsive */
@media (max-width: 992px) {
  .ods-cards { grid-template-columns: 1fr; }
}
.ods-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 4rem;
}

.ods-hero-image img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
}

.ods-card-icon img {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.ods-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}
@keyframes odsFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ods-hero,
.ods-card,
.ods-info-item {
  animation: odsFadeUp 0.6s ease-out both;
}

.ods-card:nth-child(2) { animation-delay: 0.05s; }
.ods-card:nth-child(3) { animation-delay: 0.1s; }


@media (hover: hover) {
  .ods-card {
    transition: 
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  .ods-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  }
}

.ods-card svg {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

@media (hover: hover) {
  .ods-card:hover svg {
    transform: scale(1.05);
    opacity: 1;
  }
}
:root {
  --ods-accent: var(--primary-color, #2f855a);
  --ods-text: var(--text-color, #1a202c);
  --ods-muted: rgba(0, 0, 0, 0.6);
  --ods-bg-soft: rgba(0, 0, 0, 0.03);
}