/**
 * Embed Register CSS — v4 desde cero
 * Basado en clases reales del HTML: c-commitment-card__content, o-btn--primary,
 * c-form-col, c-step-actions, etc.
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Open+Sans:wght@400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════════
   VARIABLES — reemplaza el verde del tema por azul
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode {
    --lsap-primary:       #00a7e1;
    --lsap-primary-dark:  #0087b8;
    --lsap-primary-light: #e8f6fd;
    --lsap-teal:          #00a7e1;

    --e-blue:       #00a7e1;
    --e-blue-dk:    #0087b8;
    --e-blue-lt:    #e8f6fd;
    --e-text:       #1a2632;
    --e-muted:      #8a9baa;
    --e-border:     #dde6ed;
    --e-bg:         #f4f7fa;
    --e-white:      #ffffff;
    --e-radius:     8px;
    --e-sans:       'Open Sans', sans-serif;
    --e-serif:      'Cormorant Garamond', Georgia, serif;
    --e-ease:       cubic-bezier(0.4,0,0.2,1);
}

/* ══════════════════════════════════════════════════════════
   ANIMACIONES
   ══════════════════════════════════════════════════════════ */
@keyframes emFadeUp {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes emStepIn {
    from { opacity:0; transform:translateX(8px); }
    to   { opacity:1; transform:translateX(0); }
}
@keyframes emBarGrow { from { width:0%; } }

/* ══════════════════════════════════════════════════════════
   BASE BODY
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode {
    background: var(--e-bg);
    font-family: var(--e-sans) !important;
    color: var(--e-text);
    margin: 0; padding: 0;
}

/* Contenedor raíz del embed */
body.lsap-embed-mode #lsap-embed-root {
    padding: 16px;
    background: var(--e-bg);
    min-height: 100vh;
    box-sizing: border-box;
}

/* Sección raíz */
body.lsap-embed-mode .c-section--improved-registration {
    background: transparent !important;
    padding: 0 !important;
    min-height: unset !important;
}

body.lsap-embed-mode .c-section--improved-registration .l-container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Forzar fuente en todo */
body.lsap-embed-mode .c-section--improved-registration,
body.lsap-embed-mode .c-section--improved-registration * {
    font-family: var(--e-sans) !important;
}

/* ══════════════════════════════════════════════════════════
   TARJETA PRINCIPAL
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode .c-registration-wrapper {
    max-width: 860px !important;
    margin: 0 auto !important;
    background: var(--e-white) !important;
    border: 1px solid var(--e-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.07) !important;
    padding: 0 !important;
    overflow: hidden;
    animation: emFadeUp 0.4s var(--e-ease) both;
}

/* Paso activo */
body.lsap-embed-mode .c-registration-step--active {
    animation: emStepIn 0.3s var(--e-ease) both !important;
}

/* topbar eliminado */

/* ══════════════════════════════════════════════════════════
   PROGRESS BAR
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode .c-registration-progress {
    padding: 0 !important;
    margin: 0 !important;
}

/* Ocultar breadcrumb e indicador de texto originales */
body.lsap-embed-mode .c-progress-breadcrumb,
body.lsap-embed-mode .c-progress-indicator {
    display: none !important;
}

/* Barra delgada azul */
body.lsap-embed-mode .c-progress-bar {
    height: 3px !important;
    background: var(--e-border) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
body.lsap-embed-mode .c-progress-bar__fill {
    height: 3px !important;
    background: var(--e-blue) !important;
    border-radius: 0 !important;
    transition: width 0.5s var(--e-ease) !important;
    animation: emBarGrow 0.6s var(--e-ease) both !important;
}

/* ══════════════════════════════════════════════════════════
   STEP 1 — aparece con fade suave tras el splash
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode .c-registration-step[data-step="1"].c-registration-step--active {
    animation: emFadeUp 0.4s var(--e-ease) both !important;
}

/* ══════════════════════════════════════════════════════════
   STEP CONTENT — padding base
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode .c-step-content {
    padding: 24px 28px 8px !important;
}

/* ══════════════════════════════════════════════════════════
   TÍTULOS
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode .c-step-title,
body.lsap-embed-mode .c-step-title--left {
    font-family: var(--e-serif) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--e-text) !important;
    text-align: left !important;
    line-height: 1.2 !important;
    margin: 0 0 6px !important;
}

body.lsap-embed-mode .c-step-description,
body.lsap-embed-mode .c-step-subtitle {
    font-size: 13px !important;
    color: var(--e-muted) !important;
    font-weight: 400 !important;
    text-align: left !important;
    margin: 0 0 20px !important;
    line-height: 1.5 !important;
}

/* ══════════════════════════════════════════════════════════
   CARDS COMPROMISO (paso 1)
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode .c-commitment-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin: 0 auto 8px !important;
    width: 100% !important;
    max-width: 560px !important;
}

body.lsap-embed-mode .c-commitment-card {
    display: block !important;
    cursor: pointer;
}

body.lsap-embed-mode .c-commitment-card__content {
    background: var(--e-white) !important;
    border: 1.5px solid var(--e-border) !important;
    border-radius: var(--e-radius) !important;
    padding: 20px 16px !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-shadow: none !important;
    transform: none !important;
}

body.lsap-embed-mode .c-commitment-card:hover .c-commitment-card__content {
    border-color: var(--e-blue) !important;
    box-shadow: 0 0 0 3px var(--e-blue-lt) !important;
    transform: none !important;
}

body.lsap-embed-mode .c-commitment-card input[type="radio"]:checked + .c-commitment-card__content {
    border: 2px solid var(--e-blue) !important;
    background: var(--e-blue-lt) !important;
    box-shadow: 0 0 0 3px rgba(0,167,225,0.12) !important;
    transform: none !important;
}

/* Check badge */
body.lsap-embed-mode .c-commitment-card input[type="radio"]:checked + .c-commitment-card__content::after {
    background: var(--e-blue) !important;
    width: 20px !important; height: 20px !important;
    font-size: 11px !important;
    top: 10px !important; right: 10px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}

/* Ícono */
body.lsap-embed-mode .c-commitment-card__icon {
    width: 48px !important; height: 48px !important;
    background: var(--e-blue-lt) !important;
    border-radius: 10px !important;
    color: var(--e-blue) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
}

body.lsap-embed-mode .c-commitment-card__icon svg {
    width: 24px !important; height: 24px !important;
    fill: var(--e-blue) !important;
}

body.lsap-embed-mode .c-commitment-card__content h4 {
    font-size: 12px !important; font-weight: 700 !important;
    color: var(--e-text) !important;
    margin: 0 !important; letter-spacing: 0.3px;
}

body.lsap-embed-mode .c-commitment-card__content p {
    font-size: 11px !important; color: var(--e-muted) !important;
    font-weight: 400 !important; line-height: 1.4 !important;
    margin: 0 !important;
}

/* Radio visible */
body.lsap-embed-mode .c-commitment-card__radio {
    width: 16px !important; height: 16px !important;
    border: 2px solid var(--e-border) !important;
    background: var(--e-white) !important;
    border-radius: 50% !important;
    margin-top: 4px !important;
    flex-shrink: 0 !important;
}

body.lsap-embed-mode .c-commitment-card input[type="radio"]:checked + .c-commitment-card__content .c-commitment-card__radio {
    border-color: var(--e-blue) !important;
    background: var(--e-blue) !important;
    box-shadow: inset 0 0 0 3px #fff !important;
}

/* ══════════════════════════════════════════════════════════
   STEP ACTIONS (botón paso 1 centrado)
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode .c-step-actions {
    display: flex !important;
    justify-content: center !important;
    padding: 16px 28px 24px !important;
}

body.lsap-embed-mode .c-step-actions--center {
    justify-content: center !important;
}

/* ══════════════════════════════════════════════════════════
   BOTONES — o-btn
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode .o-btn {
    font-family: var(--e-sans) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    border: none !important;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap;
}

/* Primario — azul redondeado */
body.lsap-embed-mode .o-btn--primary {
    background: var(--e-blue) !important;
    background-image: none !important;
    color: #fff !important;
    border-radius: 99px !important;
    padding: 11px 28px !important;
    box-shadow: 0 2px 12px rgba(0,167,225,0.28) !important;
    border: none !important;
}

body.lsap-embed-mode .o-btn--primary:hover:not(:disabled) {
    background: var(--e-blue-dk) !important;
    background-image: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 18px rgba(0,167,225,0.36) !important;
    border-color: transparent !important;
}

body.lsap-embed-mode .o-btn--primary:disabled {
    background: var(--e-border) !important;
    background-image: none !important;
    color: var(--e-muted) !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
}

body.lsap-embed-mode .o-btn--large {
    padding: 12px 32px !important;
    font-size: 14px !important;
}

/* Secundario — texto gris, flecha izquierda */
body.lsap-embed-mode .o-btn--secondary {
    background: none !important;
    color: var(--e-muted) !important;
    border: none !important;
    padding: 8px 4px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

body.lsap-embed-mode .o-btn--secondary:hover {
    color: var(--e-text) !important;
    transform: none !important;
    text-decoration: none !important;
    background: none !important;
}

/* ══════════════════════════════════════════════════════════
   NAVEGACIÓN PASOS 2 y 3 (back + next alineados)
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode .c-registration-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 28px !important;
    border-top: 1px solid var(--e-border) !important;
    margin-top: 8px !important;
    background: var(--e-white) !important;
}

/* ══════════════════════════════════════════════════════════
   LABELS
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode .c-form-label,
body.lsap-embed-mode label.c-form-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--e-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin-bottom: 5px !important;
    margin-top: 0 !important;
    display: block;
    line-height: 1.2 !important;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   INPUTS / SELECTS
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode .c-form-field input[type="text"],
body.lsap-embed-mode .c-form-field input[type="email"],
body.lsap-embed-mode .c-form-field input[type="password"],
body.lsap-embed-mode .c-form-field input[type="tel"],
body.lsap-embed-mode .c-form-field select,
body.lsap-embed-mode .o-input__control {
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--e-text) !important;
    background: var(--e-white) !important;
    border: 1.5px solid var(--e-border) !important;
    border-radius: var(--e-radius) !important;
    width: 100% !important;
    min-width: 0 !important;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    text-overflow: ellipsis !important;
}

body.lsap-embed-mode .c-form-field input::placeholder,
body.lsap-embed-mode .o-input__control::placeholder {
    color: #a0b0bc !important;
    font-size: 12px !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

body.lsap-embed-mode .c-form-field input:focus,
body.lsap-embed-mode .c-form-field select:focus,
body.lsap-embed-mode .o-input__control:focus {
    border-color: var(--e-blue) !important;
    box-shadow: 0 0 0 3px var(--e-blue-lt) !important;
}

/* Margen entre campos */
body.lsap-embed-mode .c-form-field {
    margin-bottom: 12px !important;
}

/* ══════════════════════════════════════════════════════════
   GRID CAMPOS — 12 columnas proporcionales
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode .c-form-row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -6px !important;
}

body.lsap-embed-mode .c-form-col {
    padding: 0 6px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

body.lsap-embed-mode .c-form-col--2  { flex: 0 0 16.666% !important; max-width: 16.666% !important; }
body.lsap-embed-mode .c-form-col--3  { flex: 0 0 25% !important;     max-width: 25% !important; }
body.lsap-embed-mode .c-form-col--4  { flex: 0 0 33.333% !important; max-width: 33.333% !important; }
body.lsap-embed-mode .c-form-col--5  { flex: 0 0 41.666% !important; max-width: 41.666% !important; }
body.lsap-embed-mode .c-form-col--6  { flex: 0 0 50% !important;     max-width: 50% !important; }
body.lsap-embed-mode .c-form-col--8  { flex: 0 0 66.666% !important; max-width: 66.666% !important; }
body.lsap-embed-mode .c-form-col--9  { flex: 0 0 75% !important;     max-width: 75% !important; }
body.lsap-embed-mode .c-form-col--12 { flex: 0 0 100% !important;    max-width: 100% !important; }

/* ══════════════════════════════════════════════════════════
   LAYOUT INSTITUCIONAL — 2 columnas: izquierda cards / derecha dinámica
   ══════════════════════════════════════════════════════════ */

/* Contenedor principal: 2 columnas */
body.lsap-embed-mode .c-inst-config-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    align-items: start !important;
}

body.lsap-embed-mode .c-inst-config-col--cards,
body.lsap-embed-mode .c-inst-config-col--dynamic {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* ── Cards institución: 3 columnas × 3 filas ── */
body.lsap-embed-mode .c-institution-type-cards,
body.lsap-embed-mode .c-institution-type-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}

body.lsap-embed-mode .c-inst-type-card,
body.lsap-embed-mode .c-institution-type-card {
    background: var(--e-white) !important;
    border: 1.5px solid var(--e-border) !important;
    border-radius: var(--e-radius) !important;
    padding: 12px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    text-align: center !important;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s !important;
    min-height: 82px !important;
}

body.lsap-embed-mode .c-inst-type-card:hover,
body.lsap-embed-mode .c-institution-type-card:hover {
    border-color: var(--e-blue) !important;
    background: var(--e-blue-lt) !important;
    box-shadow: 0 0 0 3px rgba(0,167,225,0.10) !important;
}

body.lsap-embed-mode .c-inst-type-card.is-selected,
body.lsap-embed-mode .c-inst-type-card.is-active,
body.lsap-embed-mode .c-institution-type-card.is-selected,
body.lsap-embed-mode .c-institution-type-card.is-active {
    border-color: var(--e-blue) !important;
    background: var(--e-blue-lt) !important;
    box-shadow: 0 0 0 3px rgba(0,167,225,0.15) !important;
}

/* Íconos grandes */
body.lsap-embed-mode .c-inst-type-card__icon {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--e-blue-lt) !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
}

body.lsap-embed-mode .c-inst-type-card.is-selected .c-inst-type-card__icon,
body.lsap-embed-mode .c-inst-type-card.is-active .c-inst-type-card__icon {
    background: rgba(0,167,225,0.20) !important;
}

body.lsap-embed-mode .c-inst-type-card__icon svg {
    width: 20px !important;
    height: 20px !important;
    color: var(--e-blue) !important;
    fill: var(--e-blue) !important;
}

body.lsap-embed-mode .c-institution-type-card svg,
body.lsap-embed-mode .c-institution-type-card i {
    width: 24px !important;
    height: 24px !important;
    color: var(--e-blue) !important;
    fill: var(--e-blue) !important;
    flex-shrink: 0 !important;
}

body.lsap-embed-mode .c-inst-type-card__label,
body.lsap-embed-mode .c-institution-type-card span {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--e-text) !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
}

/* ── Columna derecha: país, ciudad y campos dinámicos ── */
body.lsap-embed-mode .c-inst-config-col--dynamic .c-form-col--6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
}

body.lsap-embed-mode #dynamic-institution-fields {
    margin-top: 10px !important;
}

/* ══════════════════════════════════════════════════════════
   BASIC INFO + ACCOUNT MANAGER — lado a lado
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode .c-inst-basic-section,
body.lsap-embed-mode .c-delegate-section {
    display: block !important;
}

/* Contenedor que agrupa basic + delegate en 2 cols */
body.lsap-embed-mode .c-inst-basic-section + .c-delegate-section {
    /* No tocar — se manejará con el wrapper abajo */
}

/* Wrapper para las dos secciones lado a lado */
body.lsap-embed-mode .c-inst-two-col-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    align-items: start !important;
    margin: 16px 0 0 !important;
}

body.lsap-embed-mode .c-inst-two-col-wrapper .c-inst-basic-section,
body.lsap-embed-mode .c-inst-two-col-wrapper .c-delegate-section {
    margin: 0 !important;
}

/* Credenciales: 3 columnas en una sola fila */
body.lsap-embed-mode .c-inst-credentials-section {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--e-border) !important;
}

body.lsap-embed-mode .c-inst-credentials-section .c-form-row {
    flex-wrap: nowrap !important;
}

body.lsap-embed-mode .c-inst-credentials-section .c-form-col--4 {
    flex: 1 1 0 !important;
    max-width: none !important;
}

/* ══════════════════════════════════════════════════════════
   TÍTULOS DE SECCIÓN INTERNA
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode .c-section-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--e-text) !important;
    margin: 16px 0 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--e-border) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

body.lsap-embed-mode .c-subsection-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--e-blue) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin: 12px 0 8px !important;
}

/* Nota informativa (religious-congregation, etc.) */
body.lsap-embed-mode .c-info-note {
    background: var(--e-blue-lt) !important;
    border-left: 3px solid var(--e-blue) !important;
    border-radius: var(--e-radius) !important;
}
body.lsap-embed-mode .c-info-note__text {
    color: var(--e-text) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* Caja dinámica (account manager, specific fields) */
body.lsap-embed-mode .c-dynamic-fields-section {
    background: var(--e-bg) !important;
    border: 1px solid var(--e-border) !important;
    border-radius: var(--e-radius) !important;
    padding: 16px !important;
    margin-top: 12px !important;
}

/* Aviso "complete config antes" — heredar diseño base, sin overrides */
body.lsap-embed-mode .c-inst-basic-lock-msg {
    display: none;
}
body.lsap-embed-mode .c-inst-basic-lock-msg.is-visible {
    display: flex !important;
}
body.lsap-embed-mode .c-inst-basic-lock-msg.is-visible::before,
body.lsap-embed-mode .c-inst-basic-lock-msg.is-visible::after {
    content: none !important;
    display: none !important;
}

/* ══════════════════════════════════════════════════════════
   TOGGLE BUTTONS (Sí/No)
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode .c-toggle-btn input[type="radio"]:checked + span {
    background-color: var(--e-blue) !important;
    color: #fff !important;
}

body.lsap-embed-mode .c-toggle-btn span {
    font-size: 12px !important;
    padding: 6px 14px !important;
}

/* ══════════════════════════════════════════════════════════
   REVIEW (paso 3)
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode .c-review-columns {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}

body.lsap-embed-mode .c-review-summary {
    background: var(--e-bg) !important;
    border: 1px solid var(--e-border) !important;
    border-radius: var(--e-radius) !important;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
}

body.lsap-embed-mode .c-review-summary__title {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--e-text) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--e-border) !important;
}

body.lsap-embed-mode .c-review-field__label {
    font-size: 9px !important;
    color: var(--e-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-weight: 600 !important;
}

body.lsap-embed-mode .c-review-field__value {
    font-size: 13px !important;
    color: var(--e-text) !important;
    font-weight: 500 !important;
}

body.lsap-embed-mode .c-review-edit-btn {
    color: var(--e-blue) !important;
    font-size: 11px !important; font-weight: 600 !important;
    background: none !important; border: none !important;
    cursor: pointer !important;
    text-decoration: underline !important; text-underline-offset: 2px !important;
    padding: 0 !important; box-shadow: none !important; border-radius: 0 !important;
    transform: none !important;
}

/* ══════════════════════════════════════════════════════════
   ERRORES / CHECKBOX / LINKS
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode .c-field-error {
    color: #e53935 !important;
    font-size: 11px !important; font-weight: 500 !important;
    margin-top: 3px !important;
}

body.lsap-embed-mode input[type="checkbox"] {
    accent-color: var(--e-blue) !important;
    width: 14px !important; height: 14px !important;
}

body.lsap-embed-mode .c-form-checkbox label,
body.lsap-embed-mode .c-form-checkbox__label {
    font-size: 12px !important;
    color: var(--e-muted) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
}

body.lsap-embed-mode a {
    color: var(--e-blue) !important; font-weight: 500 !important;
}
body.lsap-embed-mode a:hover { color: var(--e-blue-dk) !important; }

/* Footer form "ya tienes cuenta" */
body.lsap-embed-mode .c-form-footer-link {
    font-size: 12px !important; color: var(--e-muted) !important;
    text-align: center !important; padding: 12px 28px !important;
}

/* ══════════════════════════════════════════════════════════
   AUTOCOMPLETE — dropdown compartido (diocese + congregation)
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode .lsap-autocomplete-dropdown,
body.lsap-embed-mode #cong-autocomplete-dropdown {
    background: var(--e-white) !important;
    border: 1px solid var(--e-border) !important;
    border-top: 2px solid var(--e-blue) !important;
    border-radius: 0 0 var(--e-radius) var(--e-radius) !important;
    box-shadow: 0 8px 24px rgba(0,167,225,0.12) !important;
    z-index: 99999;
}

/* Scrollbar */
body.lsap-embed-mode #cong-autocomplete-dropdown::-webkit-scrollbar-thumb {
    background: var(--e-blue) !important;
}
body.lsap-embed-mode #cong-autocomplete-dropdown::-webkit-scrollbar-track {
    background: var(--e-bg) !important;
}

/* Item base */
body.lsap-embed-mode #cong-autocomplete-dropdown .ac-item {
    border-bottom: 1px solid var(--e-border) !important;
}
body.lsap-embed-mode #cong-autocomplete-dropdown .ac-item:hover,
body.lsap-embed-mode #cong-autocomplete-dropdown .ac-item.ac-active {
    background: var(--e-blue-lt) !important;
}

/* Nombre */
body.lsap-embed-mode #cong-autocomplete-dropdown .ac-item__name {
    color: var(--e-text) !important;
    font-size: 13px !important;
}

/* Badge (tipo: Metropolitan, Diocese, acrónimo...) */
body.lsap-embed-mode #cong-autocomplete-dropdown .ac-item__badge {
    background: var(--e-blue) !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-size: 11px !important;
}

/* Pill de género (♂/♀) */
body.lsap-embed-mode #cong-autocomplete-dropdown .ac-item__type {
    background: var(--e-blue) !important;
    color: #fff !important;
    font-size: 11px !important;
}

/* País */
body.lsap-embed-mode #cong-autocomplete-dropdown .ac-item__country {
    color: var(--e-muted) !important;
    font-size: 12px !important;
}

/* Sin resultados */
body.lsap-embed-mode #cong-autocomplete-dropdown .ac-empty {
    color: var(--e-muted) !important;
    font-size: 13px !important;
}

/* Country autocomplete */
body.lsap-embed-mode #country-ac-dropdown {
    border: 1px solid var(--e-border) !important;
    border-top: 2px solid var(--e-blue) !important;
    border-radius: 0 0 var(--e-radius) var(--e-radius) !important;
    box-shadow: 0 8px 24px rgba(0,167,225,0.12) !important;
}
body.lsap-embed-mode #country-ac-dropdown .cac-search-wrap {
    border-bottom: 1px solid var(--e-border) !important;
}
body.lsap-embed-mode #country-ac-dropdown .cac-search-input {
    border: 1px solid var(--e-border) !important;
    color: var(--e-text) !important;
    font-size: 12px !important;
}
body.lsap-embed-mode #country-ac-dropdown .cac-search-input:focus {
    border-color: var(--e-blue) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--e-blue-lt) !important;
}
body.lsap-embed-mode #country-ac-dropdown .cac-list::-webkit-scrollbar-thumb {
    background: var(--e-blue) !important;
}
body.lsap-embed-mode #country-ac-dropdown .cac-list::-webkit-scrollbar-track {
    background: var(--e-bg) !important;
}
body.lsap-embed-mode #country-ac-dropdown .cac-item {
    border-bottom: 1px solid var(--e-border) !important;
    font-size: 13px !important;
    color: var(--e-text) !important;
}
body.lsap-embed-mode #country-ac-dropdown .cac-item:hover,
body.lsap-embed-mode #country-ac-dropdown .cac-item.cac-active {
    background: var(--e-blue-lt) !important;
    color: var(--e-blue) !important;
    font-weight: 600 !important;
}
body.lsap-embed-mode #country-ac-dropdown .cac-empty {
    color: var(--e-muted) !important;
    font-size: 12px !important;
}

/* Fallback genérico */
body.lsap-embed-mode .lsap-autocomplete-item {
    color: var(--e-text) !important;
    font-size: 13px !important;
    padding: 9px 12px !important;
    border-bottom: 1px solid var(--e-border) !important;
    transition: background 0.15s !important;
}
body.lsap-embed-mode .lsap-autocomplete-item:hover,
body.lsap-embed-mode .lsap-autocomplete-item.is-active {
    background: var(--e-blue-lt) !important;
    color: var(--e-text) !important;
}

/* ══════════════════════════════════════════════════════════
   BLOQUEADO
   ══════════════════════════════════════════════════════════ */
body.lsap-embed-mode .c-basic-info--locked {
    opacity: 0.4 !important; pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════════
   DESKTOP / TABLET-PC (≥ 769px) — fuentes +10%
   ══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

    /* Títulos de paso */
    body.lsap-embed-mode .c-step-title,
    body.lsap-embed-mode .c-step-title--left { font-size: 1.93rem !important; }

    /* Subtítulo / descripción de paso */
    body.lsap-embed-mode .c-step-description,
    body.lsap-embed-mode .c-step-subtitle { font-size: 14.3px !important; }

    /* Labels de campo */
    body.lsap-embed-mode .c-form-label,
    body.lsap-embed-mode label.c-form-label { font-size: 11px !important; }

    /* Inputs y selects */
    body.lsap-embed-mode .c-form-field input[type="text"],
    body.lsap-embed-mode .c-form-field input[type="email"],
    body.lsap-embed-mode .c-form-field input[type="password"],
    body.lsap-embed-mode .c-form-field input[type="tel"],
    body.lsap-embed-mode .c-form-field select,
    body.lsap-embed-mode .o-input__control { font-size: 13.2px !important; height: 40px !important; }

    body.lsap-embed-mode .c-form-field input::placeholder,
    body.lsap-embed-mode .o-input__control::placeholder { font-size: 13.2px !important; }

    /* Botones */
    body.lsap-embed-mode .o-btn { font-size: 14.3px !important; }
    body.lsap-embed-mode .o-btn--large { font-size: 15.4px !important; }

    /* Cards institución — label */
    body.lsap-embed-mode .c-inst-type-card__label,
    body.lsap-embed-mode .c-institution-type-card span { font-size: 13.2px !important; }

    /* Títulos de sección interna */
    body.lsap-embed-mode .c-section-title { font-size: 13.2px !important; }
    body.lsap-embed-mode .c-subsection-title { font-size: 12.1px !important; }
    body.lsap-embed-mode .c-section-subtitle { font-size: 12.1px !important; }

    /* Commitment cards */
    body.lsap-embed-mode .c-commitment-card__content h4 { font-size: 13.2px !important; }
    body.lsap-embed-mode .c-commitment-card__content p  { font-size: 12.1px !important; }

    /* Errores */
    body.lsap-embed-mode .c-field-error { font-size: 12.1px !important; }

    /* Nota informativa */
    body.lsap-embed-mode .c-info-note__text { font-size: 13.2px !important; }

    /* Lock message */
    body.lsap-embed-mode .c-inst-basic-lock-msg.is-visible,
    body.lsap-embed-mode #basic-info-locked-notice { font-size: 13.75px !important; }

    /* Review */
    body.lsap-embed-mode .c-review-field__label { font-size: 9.9px !important; }
    body.lsap-embed-mode .c-review-field__value { font-size: 14.3px !important; }
    body.lsap-embed-mode .c-review-edit-btn     { font-size: 12.1px !important; }

    /* Autocomplete items */
    body.lsap-embed-mode #cong-autocomplete-dropdown .ac-item__name { font-size: 14.3px !important; }
    body.lsap-embed-mode #cong-autocomplete-dropdown .ac-item__badge,
    body.lsap-embed-mode #cong-autocomplete-dropdown .ac-item__type { font-size: 12.1px !important; }
    body.lsap-embed-mode #cong-autocomplete-dropdown .ac-item__country { font-size: 13.2px !important; }
    body.lsap-embed-mode #country-ac-dropdown .cac-item { font-size: 14.3px !important; }
    body.lsap-embed-mode #country-ac-dropdown .cac-search-input { font-size: 13.2px !important; }

    /* Toggle buttons */
    body.lsap-embed-mode .c-toggle-btn span { font-size: 13.2px !important; }

    /* Checkboxes */
    body.lsap-embed-mode .c-form-field--checkbox span,
    body.lsap-embed-mode .c-form-checkbox label { font-size: 13.2px !important; }

    /* Footer link */
    body.lsap-embed-mode .c-form-footer-link { font-size: 13.2px !important; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 768px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Padding del root y contenido */
    body.lsap-embed-mode #lsap-embed-root { padding: 10px !important; }
    body.lsap-embed-mode .c-step-content { padding: 20px 18px 8px !important; }
    body.lsap-embed-mode .c-step-actions { padding: 12px 18px 20px !important; }

    /* Wrapper del wizard */
    body.lsap-embed-mode .c-registration-wrapper { border-radius: 10px !important; }

    /* Institutional config: de 2 cols a 1 col (cards arriba, campos abajo) */
    body.lsap-embed-mode .c-inst-config-columns {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Cards institución: 3 cols en tablet */
    body.lsap-embed-mode .c-institution-type-cards,
    body.lsap-embed-mode .c-institution-type-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 7px !important;
    }

    /* País + Ciudad: cada uno 50% */
    body.lsap-embed-mode .c-inst-config-col--dynamic .c-form-col--6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Basic Info + Account Manager: de 2 cols a 1 col apiladas */
    body.lsap-embed-mode .c-inst-two-col-wrapper {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* Credenciales: de 3 cols a 1 col */
    body.lsap-embed-mode .c-inst-credentials-section .c-form-row {
        flex-wrap: wrap !important;
    }
    body.lsap-embed-mode .c-inst-credentials-section .c-form-col--4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Campos generales: 3 cols → 2 cols */
    body.lsap-embed-mode .c-form-col--3 { flex: 0 0 50% !important; max-width: 50% !important; }
    body.lsap-embed-mode .c-form-col--4 { flex: 0 0 50% !important; max-width: 50% !important; }

    /* Commitment cards (personal/institutional): en fila */
    body.lsap-embed-mode .c-commitment-cards {
        grid-template-columns: 1fr 1fr !important;
        max-width: 100% !important;
    }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 480px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    body.lsap-embed-mode #lsap-embed-root { padding: 8px !important; }
    body.lsap-embed-mode .c-step-content { padding: 16px 14px 6px !important; }
    body.lsap-embed-mode .c-step-actions { padding: 10px 14px 18px !important; }

    body.lsap-embed-mode .c-step-title,
    body.lsap-embed-mode .c-step-title--left { font-size: 1.4rem !important; }

    /* Cards institución: 3 cols apretadas en mobile */
    body.lsap-embed-mode .c-institution-type-cards,
    body.lsap-embed-mode .c-institution-type-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
    }

    /* Cards más compactas */
    body.lsap-embed-mode .c-inst-type-card,
    body.lsap-embed-mode .c-institution-type-card {
        padding: 8px 4px !important;
        min-height: 70px !important;
        gap: 5px !important;
    }

    body.lsap-embed-mode .c-inst-type-card__icon {
        width: 28px !important;
        height: 28px !important;
    }
    body.lsap-embed-mode .c-inst-type-card__icon svg { width: 16px !important; height: 16px !important; }

    body.lsap-embed-mode .c-inst-type-card__label,
    body.lsap-embed-mode .c-institution-type-card span {
        font-size: 11px !important;
    }

    /* Todos los cols: ancho completo en mobile */
    body.lsap-embed-mode .c-form-col--2,
    body.lsap-embed-mode .c-form-col--3,
    body.lsap-embed-mode .c-form-col--4,
    body.lsap-embed-mode .c-form-col--5,
    body.lsap-embed-mode .c-form-col--6,
    body.lsap-embed-mode .c-form-col--8,
    body.lsap-embed-mode .c-form-col--9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Excepciones: algunos campos van de 2 en 2 */
    body.lsap-embed-mode .c-form-row .c-form-col--2 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* País + Ciudad: 50/50 */
    body.lsap-embed-mode .c-inst-config-col--dynamic .c-form-col--6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Diocese + Congregation: apiladas */
    body.lsap-embed-mode .c-form-col[id="personal-congregation-row"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Commitment cards: apiladas */
    body.lsap-embed-mode .c-commitment-cards {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }

    /* Botón step actions: ancho completo */
    body.lsap-embed-mode .c-step-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    body.lsap-embed-mode .o-btn--primary.o-btn--large {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Splash en mobile */
    body.lsap-embed-mode #lsap-splash > div { padding: 36px 20px 40px !important; }
    body.lsap-embed-mode #splash-title { font-size: 1.7rem !important; }
}