:root {
  --ha-blue: #1B529E;
  --ha-blue-dark: #18478B;
  --ha-teal: #00A69C;
  --ha-teal-light: #90EDF4;
  --ha-gray: #929497;
  --ha-gray-dark: #404041;
  --ha-gray-soft: #E6E7E8;
  --ha-panel: #F4F7FB;
  --ha-border: #D9E3F0;
  --ha-radius: 18px;
  --ha-shadow: 0 8px 24px rgba(27,82,158,.10);
}

html, body {
  background: #fff;
  color: var(--ha-gray-dark);
}

body {
  font-family: 'Quicksand', 'OpenSans', sans-serif;
}

h1,h2,h3,h4,h5,h6,
.header h4,
.header h5,
.header h6,
.section-title,
.mensaje,
label.boton,
a.boton,
.atras,
.adelante {
  font-family: 'Poppins', 'Quicksand', sans-serif;
}

/* Header institucional */
body > header {
  background: #fff !important;
  border-bottom: 3px solid var(--ha-blue) !important;
  box-shadow: 0 4px 14px rgba(27,82,158,.08) !important;
}

body > header a img {
  object-fit: contain;
}

/* Barra de progreso */
#progress-bar {
  background: linear-gradient(90deg, var(--ha-blue) 0%, var(--ha-teal) 100%) !important;
}

/* Headers por pantalla */
.row .col.header,
.tab .header.center.col.s12 {
  background: linear-gradient(135deg, var(--ha-blue) 0%, var(--ha-blue-dark) 100%) !important;
  color: #fff !important;
  border-radius: 0 0 28px 28px;
  box-shadow: 0 6px 24px rgba(24,71,139,.18);
  overflow: hidden;
  position: relative;
}

.row .col.header::before,
.tab .header.center.col.s12::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 62%, rgba(255,255,255,.06) 62% 74%, transparent 74% 100%);
  pointer-events: none;
}

.row .col.header::after,
.tab .header.center.col.s12::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: var(--ha-teal);
}

.tab .header.center.col.s12 h4,
.tab .header.center.col.s12 h6,
.row .col.header h4,
.row .col.header h6,
.instruction-text {
  color: #fff !important;
  position: relative;
  z-index: 1;
}

.tab .header.center.col.s12 h6,
.row .col.header h6 {
  opacity: .92 !important;
  font-weight: 500;
}

/* Tarjetas, contenedores y modales */
.card,
.datos,
.resultado-card,
.result-block,
.modal > div > div,
.modal .contenido,
.bloque,
.box,
.panel {
  border-radius: var(--ha-radius) !important;
  box-shadow: var(--ha-shadow);
}

.modal {
  background: rgba(24,71,139,.82) !important;
}

.modal > div > div {
  border-top: 4px solid var(--ha-blue) !important;
  border-bottom: 4px solid var(--ha-teal) !important;
}

/* Inputs */
input[type=text],
input[type=number],
input[type=email],
textarea,
.select-wrapper input.select-dropdown {
  background: #fff !important;
  border: 2px solid var(--ha-border) !important;
  border-radius: 14px !important;
  padding: 0 14px !important;
  box-shadow: none !important;
}

input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
textarea:focus,
.select-wrapper input.select-dropdown:focus {
  border-color: var(--ha-blue) !important;
  box-shadow: 0 0 0 4px rgba(27,82,158,.10) !important;
}

input:not([type]):focus:not([readonly]),
input[type=text]:focus:not([readonly]),
input[type=password]:focus:not([readonly]),
input[type=email]:focus:not([readonly]),
input[type=url]:focus:not([readonly]),
input[type=time]:focus:not([readonly]),
input[type=date]:focus:not([readonly]),
input[type=datetime]:focus:not([readonly]),
input[type=datetime-local]:focus:not([readonly]),
input[type=tel]:focus:not([readonly]),
input[type=number]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 2px solid var(--ha-blue) !important;
  -webkit-box-shadow: 0 0 0 4px rgba(27,82,158,.10) !important;
  box-shadow: 0 0 0 4px rgba(27,82,158,.10) !important;
}

/* Opciones */
label.opcion {
  background: rgba(255,255,255,.94) !important;
  border: 1.5px solid var(--ha-border) !important;
  border-radius: 16px !important;
  color: var(--ha-blue) !important;
  box-shadow: 0 4px 16px rgba(27,82,158,.08) !important;
  backdrop-filter: blur(4px);
}

label.opcion:hover {
  border-color: var(--ha-teal) !important;
  transform: translateY(-2px);
}

input.opcion:checked + label.opcion,
input[type=radio]:checked + label.opcion,
input[type=checkbox]:checked + label.opcion {
  background: linear-gradient(135deg, var(--ha-blue) 0%, var(--ha-blue-dark) 100%) !important;
  border-color: var(--ha-blue) !important;
  color: #fff !important;
}

input.opcion:checked + label.opcion img,
input[type=radio]:checked + label.opcion img,
input[type=checkbox]:checked + label.opcion img {
  filter: brightness(0) invert(1);
}

/* Botones */
.atras,
.adelante,
label.boton,
a.boton,
.btn,
.btn-large {
  border-radius: 999px !important;
  text-transform: none !important;
  letter-spacing: .2px !important;
}

.adelante,
label.boton,
a.boton,
.btn,
.btn-large {
  background: linear-gradient(135deg, var(--ha-blue) 0%, var(--ha-blue-dark) 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 18px rgba(27,82,158,.18) !important;
}

.atras {
  background: #fff !important;
  color: var(--ha-blue) !important;
  border: 2px solid var(--ha-border) !important;
}

.adelante:hover,
label.boton:hover,
a.boton:hover,
.btn:hover,
.btn-large:hover {
  background: linear-gradient(135deg, var(--ha-blue-dark) 0%, var(--ha-blue) 100%) !important;
}

/* Picker */
.picker,
.picker-container,
.picker-shell,
.picker-wrap {
  background: rgba(255,255,255,.95) !important;
  border: 1px solid rgba(27,82,158,.12) !important;
  box-shadow: var(--ha-shadow) !important;
  border-radius: 20px !important;
}

.picker-center,
.picker-selected,
.selected-item,
.picker-item.active,
.picker .active {
  border-color: var(--ha-blue) !important;
  background: rgba(27,82,158,.06) !important;
}

/* Fondos de secciones: versión más limpia institucional */
#DISCLAIMER::before,
#SEXO::before, #AGE::before,
#FUMAR::before, #ALCOHOL::before,
#KILOS::before, #ALTURA::before,
#CARNE::before, #PROCESADA::before,
#LACTEOS::before, #VERDURAS::before,
#CEREALES::before,
#EJERCICIO::before, #EJERCICIO_B::before,
#SINTOMAS_1::before, #SINTOMAS_2::before, #SINTOMAS_3::before,
#CANCERES::before, #FAMILIARES::before, #EDAD_FAMILIAR::before,
#POLIPOS::before, #MAIL::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.08) 100%),
    linear-gradient(135deg, rgba(27,82,158,.80) 0%, rgba(24,71,139,.72) 58%, rgba(0,166,156,.18) 100%) !important;
}

/* Suaviza acentos no institucionales previos */
#DISCLAIMER,
#SEXO, #AGE,
#MAIL {
  background: #fff !important;
}

/* Resultados */
.hero-resultado,
.resultado-hero,
.summary-box,
.resumen-box,
.result-card,
.riesgo-box,
.cta-box,
.datos {
  background: #fff !important;
  border: 1px solid var(--ha-border) !important;
}

h5, h6 {
  color: var(--ha-blue);
}

.mensaje {
  background: linear-gradient(135deg, rgba(27,82,158,.08) 0%, rgba(144,237,244,.18) 100%) !important;
  border-left: 4px solid var(--ha-teal) !important;
  color: var(--ha-gray-dark) !important;
  padding: 16px 18px !important;
  border-radius: 14px !important;
}

#telefono {
  color: var(--ha-blue) !important;
}

/* Links */
a {
  color: var(--ha-blue);
}

a:hover {
  color: var(--ha-blue-dark);
}

/* Ajustes responsive */
@media (max-width: 768px) {
  body > header {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body > header img {
    max-width: 46vw;
    height: auto !important;
  }

  .row .col.header,
  .tab .header.center.col.s12 {
    border-radius: 0 0 22px 22px;
    min-height: auto !important;
    padding: 26px 18px !important;
  }
}


/* ===== Fixes integrales marzo 2026 ===== */
/* Textos aclaratorios entre paréntesis: simples, claros y con buen contraste */
.instruction-text,
.tab .instruction-text,
.row .instruction-text,
h6.instruction-text {
  color: #EAF2FF !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: center !important;
  display: block !important;
  margin: 12px 0 !important;
  line-height: 1.45 !important;
  opacity: 1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.instruction-text a {
  color: #90EDF4 !important;
  text-decoration: underline !important;
}

/* Inputs: mismo look visible desde el inicio, como edad */
input.browser-default[type=text],
input.browser-default[type=number],
input.browser-default[type=email],
input[type=text],
input[type=number],
input[type=email] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: #ffffff !important;
  border: 2px solid #DDE4F0 !important;
  border-radius: 14px !important;
  color: #1B529E !important;
  box-shadow: 0 2px 8px rgba(27,82,158,.06) !important;
  padding: 16px 20px !important;
  min-height: 56px !important;
}

input.browser-default[type=email]::placeholder,
input[type=email]::placeholder {
  color: rgba(27,82,158,.45) !important;
}

/* Botones de pólipos: mismo estilo que label.opcion (síntomas de alarma) */
label.boton {
  background: rgba(255,255,255,.94) !important;
  border: 1.5px solid var(--ha-border) !important;
  border-radius: 16px !important;
  color: var(--ha-blue) !important;
  box-shadow: 0 4px 16px rgba(27,82,158,.08) !important;
  backdrop-filter: blur(4px);
}
label.boton:hover {
  border-color: var(--ha-teal) !important;
  background: rgba(255,255,255,.94) !important;
  color: var(--ha-blue) !important;
  transform: translateY(-2px);
}
input:checked + label.boton,
input[type=radio]:checked + label.boton,
input[type=checkbox]:checked + label.boton {
  background: linear-gradient(135deg, var(--ha-blue) 0%, var(--ha-blue-dark) 100%) !important;
  color: #ffffff !important;
  border-color: var(--ha-blue) !important;
  box-shadow: 0 8px 18px rgba(27,82,158,.18) !important;
}

/* Fix completo input email en pantalla MAIL */
#MAIL input.browser-default[type=email],
#MAIL input[type=email] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  color: #1B529E !important;
  -webkit-text-fill-color: #1B529E !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative !important;
  z-index: 2 !important;
}

#MAIL input.browser-default[type=email]::placeholder,
#MAIL input[type=email]::placeholder {
  color: rgba(27,82,158,.45) !important;
  opacity: 1 !important;
}

/* Fix autofill Chrome - todos los inputs */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #1B529E !important;
}