/* createaccount.xhtml con el mismo lenguaje visual del portal.
   Solo presentación: se carga DESPUÉS del <style> de la página y reasigna sus variables. */
:root {
  --bg: var(--white);
  --surface: var(--white);
  --border: var(--line);
  --field: var(--line);
  --ink-soft: var(--muted);
  --navy: var(--blue);
  --dark: var(--white);
  --dark-soft: var(--muted);
  --green: var(--success);
}

.ea-page,
.ea-confirm,
.ui-confirm-dialog.ui-dialog {
  font-family: var(--font-sans) !important;
}
.ea-page { background: var(--white); color: var(--text); }
.ea-page h1, .ea-page h2, .ea-page h3 { color: var(--ink); font-weight: 700; letter-spacing: -0.02em; }
.ea-page :is(button, a, input, textarea, select) { font-family: inherit; }
.ea-page :is(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blue-dark); outline-offset: 2px; border-radius: 10px;
}

/* ---- Cabecera: blanca, fija, 62px, borde inferior ---- */
.ea-page .ea-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 41; max-width: none; margin: 0;
  min-height: 62px; padding: 10px 36px; gap: 16px; flex-wrap: nowrap;
  background: var(--white); color: var(--ink); border-bottom: 1px solid var(--line);
  box-shadow: 0 1px rgba(22, 35, 74, 0); transition: box-shadow .22s ease;
}
.ea-page .ea-topbar.is-scrolled { box-shadow: 0 12px 30px rgba(22, 35, 74, .10); }
.ea-page { padding-top: 62px; }
.ea-brand { display: inline-flex; align-items: center; flex: none; min-height: 44px; }
.ea-brand img { display: block; width: 140px; height: auto; }
.ea-page .ea-topbar-progress { margin: 0 auto 0 8px; }
.ea-page .ea-topbar-progress .lbl { color: var(--muted); font-size: 12px; letter-spacing: 0; text-transform: none; }
.ea-page .ea-topbar-progress .val { color: var(--ink); font-size: 13px; font-weight: 600; }
.ea-topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }

.ea-page .ea-idioma-switch { border: 1px solid var(--line); background: var(--white); border-radius: 999px; }
.ea-page .ea-idioma-opcion { color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: 0; min-height: 44px; min-width: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; }
.ea-page .ea-idioma-opcion.activa { background: var(--blue); color: var(--white); }

/* ---- Botones: píldora, sin sombra ---- */
.ea-page .ea-btn { border-radius: 999px; min-height: 44px; font-size: 14px; font-weight: 600; box-shadow: none; }
.ea-page .ea-btn-primary { background: var(--blue); color: var(--white); border-color: var(--blue); }
.ea-page .ea-btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); filter: none; }
.ea-page .ea-btn-secondary, .ea-page .ea-btn-ghost { background: var(--white); color: var(--ink); border-color: var(--line); }
.ea-page .ea-tbtn-primary { background: var(--blue); color: var(--white); }
.ea-page .ea-tbtn-ghost { border-color: var(--line); color: var(--ink); min-height: 44px; border-radius: 999px; font-size: 13px; }

/* ---- Titular y portada ---- */
.ea-page .ea-hero h1 { color: var(--ink); font-weight: 700; letter-spacing: -0.02em; }
.ea-page .ea-hero p { color: var(--muted); }
.ea-page .ea-kicker { background: var(--blue-soft); border-color: var(--blue-soft); color: var(--blue-dark); }
.ea-page .ea-group-title { color: var(--muted); font-weight: 600; font-size: 13px; letter-spacing: 0; text-transform: none; }

/* ---- Campos ---- */
.ea-page .ea-field input[type=text],
.ea-page .ea-field input[type=email],
.ea-page .ea-field input[type=tel],
.ea-page .ui-inputfield,
.ea-page .ui-selectonemenu { border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); min-height: 44px; font-family: inherit; }
.ea-page .ea-field input:focus, .ea-page .ui-inputfield:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft);
}
.ea-page .ui-message-error, .ea-page .ui-messages-error { color: var(--danger); }
.ea-page .ui-state-error { border-color: var(--danger) !important; }

/* ---- Tarjetas, chips, sin sombras ---- */
.ea-page :is([class*="ea-card"], [class*="ea-plan"], [class*="ea-panel"], [class*="ea-addon"], [class*="ea-summary"], [class*="ea-step"]) { box-shadow: none; }
.ea-page .ea-chip { min-height: 44px; border-radius: 999px; }
.ea-page .ea-fineprint, .ea-page .ea-addon-copy .desc, .ea-page .ea-toggle-copy .desc, .ea-page .ea-addon-price { font-size: 13px; color: var(--muted); }

/* ---- Barra inferior: blanca, sin sombra ---- */
.ea-page .ea-mobilebar { background: var(--white); color: var(--ink); border-top: 1px solid var(--line); box-shadow: none; }
.ea-page .ea-mobilebar .lbl { color: var(--muted); font-size: 12px; letter-spacing: 0; text-transform: none; }
.ea-page .ea-mobilebar .amt { color: var(--ink); }
.ea-page .ea-mobilebar-back { background: var(--white); border: 1px solid var(--line); color: var(--ink); }

/* ---- Pie: blanco, columnas, redes, línea divisoria ---- */
.ea-page .ea-footer {
  margin-top: 48px; padding: 54px 24px 24px; background: var(--white); border-top: 1px solid var(--line);
  display: block;
}
.ea-footer-inner { max-width: 1180px; margin: 0 auto; display: grid; gap: 30px; }
.ea-footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ea-footer-links h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: 0; }
.ea-footer-links ul { list-style: none; margin: 0; padding: 0; }
.ea-footer-links a { display: inline-flex; align-items: center; min-height: 34px; color: var(--muted); font-size: 14.7px; text-decoration: none; }
.ea-footer-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ea-page .ea-social { flex-direction: column; justify-content: center; gap: 10px; }
.ea-page .ea-social-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.ea-page .ea-social-links a { border-radius: 999px; color: var(--muted); }
.ea-page .ea-social-links a:hover { background: var(--blue-soft); color: var(--blue-dark); }
.ea-footer-social { display: grid; justify-items: center; }
.ea-page .ea-footer-bottom {
  max-width: 1180px; width: 100%; margin: 0 auto; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px;
  font-family: var(--font-sans); font-size: 12.8px; letter-spacing: 0; text-transform: none; color: var(--muted);
}

/* ---- Diálogo de confirmación y toast ---- */
.ui-confirm-dialog .ui-dialog-title { color: var(--ink) !important; }
.ui-confirm-dialog .ea-confirm-yes { background: var(--blue) !important; border-color: var(--blue) !important; }
.ui-confirm-dialog .ui-dialog-buttonpane .ui-button { border-radius: 999px !important; }
.ui-confirm-dialog.ui-dialog { box-shadow: 0 12px 30px rgba(22, 35, 74, .10) !important; border-radius: 12px !important; }
.ea-toast { box-shadow: none; }

/* ---- Móvil ---- */
@media (max-width: 1040px) {
  .ea-footer-links { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ea-page .ea-topbar { padding: 8px 20px; gap: 10px; }
  .ea-brand img { width: 108px; }
  .ea-page .ea-topbar-progress { display: none; }
  .ea-topbar-actions { gap: 8px; }
  .ea-page .ea-wrap { padding-left: 20px; padding-right: 20px; }
  .ea-footer-links { grid-template-columns: 1fr; gap: 20px; }
  .ea-footer-links a { min-height: 44px; }
  .ea-page .ea-social-links a { width: 44px; height: 44px; }
}
@media (max-width: 380px) {
  .ea-page .ea-topbar { padding: 8px 12px; }
  .ea-brand img { width: 88px; }
  .ea-topbar-login { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ea-page .ea-topbar { transition: none; } }
.ea-page .ea-stepchip { min-height: 44px; }

/* ---- Movimiento: secuencia de entrada del hero y cambio de paso ---- */
@keyframes ea-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ea-step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ea-page .ea-stepchip, .ea-page .ea-chip { transition: background .16s ease, border-color .16s ease, color .16s ease; }
.ea-page .ea-btn:active { transform: scale(.98); }
@media (prefers-reduced-motion: no-preference) {
  .ea-page .ea-hero > .ea-kicker,
  .ea-page .ea-hero h1,
  .ea-page .ea-hero-companies,
  .ea-page .ea-stepnav { animation: ea-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
  .ea-page .ea-hero h1 { animation-delay: .08s; }
  .ea-page .ea-hero-companies { animation-delay: .16s; }
  .ea-page .ea-stepnav { animation-delay: .24s; }
  #eaStep1:not([hidden]), #eaStep2:not([hidden]), #eaStep3:not([hidden]), #eaStep4:not([hidden]) { animation: ea-step-in .35s cubic-bezier(.2, .7, .2, 1) both; }
}

/* ---- Ajustes de accesibilidad y responsive (auditoría 320-1920px) ---- */
#eaStep4 .ea-field input[type=text] { min-height: 44px; }
#eaStep4 .ea-step-footer .ea-btn { min-height: 44px; }
.ea-page #eaStep4 .ea-btn-ghost { min-height: 44px !important; }
.ea-page .ea-field-note, .ea-page .ea-plan-note { font-size: 12px; }
.ea-page .ea-plan-badge { font-size: 12px; background: #15803d; }
.ea-page .ea-switch::before { content: ""; position: absolute; inset: -9px -4px; }