/* Formulario Light Research — mobile first, sobre tokens de /brand/brand.css */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--q-font);
  font-weight: 300;
  color: var(--q-negro);
  background: var(--q-indigo) url("/brand/assets/img/fondo-degradado.jpg") center / cover fixed no-repeat;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom));
}

/* Encabezado */
.top { max-width: 640px; margin: 0 auto; padding: 28px 4px 22px; color: var(--q-blanco); }
.top__logo { width: 132px; height: auto; display: block; margin-bottom: 22px; }
.top__kicker { margin: 0; font-size: 18px; color: var(--q-cyan-texto); }
.top__title { margin: 2px 0 0; font-size: 30px; line-height: 1.1; font-weight: 300; }
.top__title span { display: block; font-weight: 700; }

/* Tarjeta blanca: motivo de las plantillas 12–14 */
.card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--q-blanco);
  border-radius: 24px;
  padding: 24px 20px 28px;
  box-shadow: 0 20px 50px rgba(3, 3, 3, 0.25);
}

/* Campos */
.field { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.field label, .field legend { display: block; font-weight: 500; font-size: 16px; margin-bottom: 6px; padding: 0; }
.field em { color: var(--q-azul-gota); font-style: normal; }
input[type="text"], input[type="url"], input[type="password"], input[type="email"] {
  width: 100%;
  font: 300 17px/1.3 var(--q-font);
  padding: 12px 14px;
  border: 1.5px solid #D5D3DE;
  border-radius: 12px;
  background: #FAFAFC;
  color: var(--q-negro);
  transition: border-color .15s;
}
input:focus { outline: none; border-color: var(--q-azul-gota); background: var(--q-blanco); }
input[aria-invalid="true"] { border-color: #C0264B; }

/* Selector segmentado de mercado */
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); background: #EFEEF4; border-radius: 12px; padding: 4px; gap: 4px; }
.segmented input, .formats input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  margin: 0; text-align: center; padding: 10px 4px; border-radius: 9px; font-weight: 500; font-size: 15px; cursor: pointer;
}
.segmented input:checked + label { background: var(--q-indigo); color: var(--q-blanco); }
.segmented input:focus-visible + label { outline: 2px solid var(--q-azul-gota); }

/* Tarjetas de formato */
.formats { display: grid; gap: 10px; }
.formats label {
  margin: 0; display: block; padding: 14px 16px; border: 1.5px solid #D5D3DE; border-radius: 14px 14px 14px 4px; cursor: pointer;
}
.formats label strong { display: block; font-weight: 700; font-size: 17px; }
.formats label span { font-size: 14px; color: #5B5870; }
.formats input:checked + label { border-color: var(--q-azul-gota); background: #E8F7FC; }
.formats input:focus-visible + label { outline: 2px solid var(--q-azul-gota); }

.divider { display: flex; align-items: center; gap: 10px; margin: 24px 0 14px; color: #5B5870; font-size: 14px; }
.divider::before, .divider::after { content: ""; height: 1px; background: #E2E0EA; flex: 1; }

/* Botones */
.btn {
  width: 100%;
  font: 700 18px var(--q-font);
  color: var(--q-blanco);
  background: var(--q-azul-gota);
  border: 0;
  border-radius: 999px;
  padding: 15px 20px;
  cursor: pointer;
  transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn--ghost { background: transparent; color: var(--q-indigo); border: 1.5px solid var(--q-indigo); }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--q-azul-gota); text-decoration: underline; cursor: pointer; }

.hint { text-align: center; font-size: 14px; color: #5B5870; margin: 12px 0 0; }
.error { background: #FCE8EE; color: #8A1235; border-radius: 10px; padding: 10px 12px; font-size: 15px; margin: 0 0 14px; }
.login__title { margin: 0 0 18px; font-size: 22px; font-weight: 700; color: var(--q-indigo); }

/* Cuenta y cupo del ciclo */
.account { margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid #EFEEF4; }
.account__hello { margin: 0 0 10px; font-size: 16px; color: #5B5870; }
.account__hello strong { color: var(--q-indigo); font-weight: 700; }
.meter__bar { height: 10px; background: #EFEEF4; border-radius: 999px; overflow: hidden; }
.meter__fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--q-azul-gota); transition: width .4s ease; }
.meter__label { margin: 6px 0 0; font-size: 14px; color: #5B5870; }
.meter[data-state="warning"] .meter__fill { background: #E0A100; }
.meter[data-state="blocked"] .meter__fill { background: #C0264B; }
.meter[data-state="blocked"] .meter__label { color: #8A1235; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .meter__fill { transition: none; } }

/* Pop-up de aviso de cupo */
.modal { border: 0; border-radius: 24px; padding: 28px 24px 24px; width: min(420px, calc(100vw - 32px)); text-align: center; box-shadow: 0 24px 60px rgba(3, 3, 3, .4); border-top: 6px solid var(--q-azul-gota); }
.modal::backdrop { background: rgba(38, 31, 73, .72); }
.modal--warning { border-top-color: #E0A100; }
.modal--blocked { border-top-color: #C0264B; }
.modal__gota { width: 48px; height: 48px; }
.modal__title { margin: 8px 0 8px; font-size: 22px; font-weight: 700; color: var(--q-indigo); }
.modal__text { margin: 0 0 20px; font-size: 16px; line-height: 1.45; }

/* Progreso */
.progress__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.progress__gota { width: 44px; height: 44px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.86); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .progress__gota { animation: none; } }
.progress__title { margin: 0; font-weight: 700; font-size: 20px; }
.progress__timer { margin: 0; color: #5B5870; font-variant-numeric: tabular-nums; }
.log { list-style: none; margin: 0; padding: 0; font-size: 15px; max-height: 55vh; overflow-y: auto; }
.log li { padding: 7px 0 7px 18px; border-top: 1px solid #EFEEF4; position: relative; overflow-wrap: anywhere; }
.log li::before { content: ""; position: absolute; left: 0; top: 14px; width: 8px; height: 8px; border-radius: 50% 50% 50% 0; background: var(--q-azul-gota); }
.log li:last-child { font-weight: 500; }

/* Resultado */
.result__meta { font-size: 14px; color: #5B5870; margin: 0 0 12px; }
.result__actions { display: grid; gap: 10px; margin-bottom: 18px; }
.preview { border-top: 1px solid #E2E0EA; padding-top: 6px; margin-bottom: 20px; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.preview h1 { font-size: 24px; font-weight: 700; color: var(--q-indigo); line-height: 1.15; }
.preview h2 { font-size: 20px; font-weight: 700; color: var(--q-azul-gota); margin: 26px 0 8px; }
.preview strong { font-weight: 700; }
.preview a { color: var(--q-azul-gota); }
.preview table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 14px; }
.preview th { background: var(--q-indigo); color: var(--q-blanco); font-weight: 700; text-align: left; }
.preview th, .preview td { padding: 7px 9px; border: 1px solid #E2E0EA; vertical-align: top; min-width: 120px; }
.preview ul { padding-left: 20px; }

.foot { text-align: center; color: rgba(255, 255, 255, .8); font-weight: 700; letter-spacing: .04em; padding: 20px 0 0; }

@media (min-width: 720px) {
  .top { padding-top: 48px; }
  .top__title { font-size: 40px; }
  .card { padding: 36px 40px 40px; }
  .result__actions { grid-template-columns: 1fr 1fr; }
}

/* Pantalla de bienvenida: dos accesos grandes */
.choices { display: grid; gap: 14px; }
.choice {
  display: flex; align-items: center; gap: 16px; padding: 20px 22px; min-height: 84px;
  border: 1.5px solid var(--q-indigo); border-radius: 18px 18px 18px 4px;
  color: var(--q-indigo); text-decoration: none; background: var(--q-blanco);
  transition: filter .15s, transform .05s, box-shadow .15s;
}
.choice:hover { box-shadow: 0 8px 22px rgba(38, 31, 73, .16); }
.choice:active { transform: translateY(1px); }
.choice:focus-visible { outline: 3px solid var(--q-cyan); outline-offset: 2px; }
.choice--primary { background: var(--q-azul-gota); border-color: var(--q-azul-gota); color: var(--q-blanco); }
.choice__icon { width: 44px; height: 44px; flex: none; filter: brightness(0) invert(1); }
.choice__text { display: grid; gap: 2px; }
.choice__text strong { font-size: 20px; font-weight: 700; line-height: 1.15; }
.choice__text span { font-size: 15px; font-weight: 300; opacity: .9; }
.back { display: inline-block; margin: 0 0 14px; font-size: 14px; color: #5B5870; text-decoration: none; }
.back:hover { text-decoration: underline; }

/* Contraseña con botón Mostrar / Ocultar */
.pw { position: relative; }
.pw input { padding-right: 92px; }
.pw__toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font: 500 14px var(--q-font); color: var(--q-azul-gota);
}
.pw__toggle:hover { background: #E8F7FC; }
.pw__toggle:focus-visible { outline: 2px solid var(--q-azul-gota); }