/* ==========================================================================
   APOLO SERVICES — Búsqueda de Persona Física (Fase 3)
   Nomenclatura BEM + Tokens de Diseño
   ========================================================================== */

/* ── 1. Contenedor y Navegación ── */
.apolo-busqueda-fisica {
    padding-block: var(--apolo-space-3) var(--apolo-space-8);
}

.apolo-busqueda-fisica__back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--apolo-space-1);
    color: var(--apolo-color-primary);
    font-size: var(--apolo-text-sm);
    font-weight: var(--apolo-font-semibold);
    text-decoration: none;
    margin-bottom: var(--apolo-space-4);
    transition: var(--apolo-transition-color);
}

    .apolo-busqueda-fisica__back-link:hover {
        color: var(--apolo-color-primary-dark);
    }

/* ── 2. Cabecera y Avatar ── */
.apolo-busqueda-fisica__avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--apolo-radius-full);
    background-color: var(--apolo-color-primary);
    color: var(--apolo-n0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.apolo-busqueda-fisica__title {
    font-size: var(--apolo-text-2xl);
    font-weight: var(--apolo-font-bold);
    color: var(--apolo-n900);
    line-height: var(--apolo-leading-tight);
}

.apolo-busqueda-fisica__subtitle {
    font-size: var(--apolo-text-sm);
    color: var(--apolo-text-color-secondary);
}

.apolo-busqueda-fisica__confidentiality {
    font-size: var(--apolo-text-xs);
    color: var(--apolo-text-color-secondary);
    display: inline-flex;
    align-items: center;
    gap: var(--apolo-space-1);
}

.apolo-busqueda-fisica__confidentiality-icon {
    color: var(--apolo-color-success);
}
/* ── Cabecera: Distribución Grid (Opción 1) ── */
.apolo-busqueda-header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: var(--apolo-space-3);
    align-items: center;
}

    .apolo-busqueda-header .apolo-busqueda-fisica__avatar {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: center;
    }

    .apolo-busqueda-header .apolo-busqueda-fisica__title {
        grid-column: 2;
        grid-row: 1;
    }

    .apolo-busqueda-header .apolo-busqueda-fisica__subtitle {
        grid-column: 2;
        grid-row: 2;
    }

    .apolo-busqueda-header .apolo-busqueda-fisica__confidentiality {
        grid-column: 2;
        grid-row: 3;
    }

/* Adaptación móvil (< 768px): Avatar junto al título, textos a todo el ancho y cards 2x2 */
@media (max-width: 767.98px) {
    .apolo-busqueda-header .apolo-busqueda-fisica__subtitle {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 6px;
        text-align: justify; /* Justifica el texto */
        text-justify: inter-word; /* Distribuye el espacio entre palabras */
        hyphens: auto; /* Evita huecos gigantes separando por sílabas si es necesario */
    }
}

        .apolo-busqueda-header .apolo-busqueda-fisica__avatar {
            grid-column: 1;
            grid-row: 1;
            width: 38px;
            height: 38px;
        }

        .apolo-busqueda-header .apolo-busqueda-fisica__title {
            grid-column: 2;
            grid-row: 1;
            font-size: var(--apolo-text-xl);
        }

        .apolo-busqueda-header .apolo-busqueda-fisica__subtitle {
            grid-column: 1 / -1;
            grid-row: 2;
            margin-top: 6px;
        }

        .apolo-busqueda-header .apolo-busqueda-fisica__confidentiality {
            grid-column: 1 / -1;
            grid-row: 3;
        }
}

/* Optimización móvil para tarjetas de validación 2x2 (< 576px) */
@media (max-width: 575.98px) {
    .apolo-validation-card {
        padding: var(--apolo-space-3);
    }

    .apolo-validation-card__title {
        font-size: var(--apolo-text-sm);
        line-height: var(--apolo-leading-tight);
        word-break: break-word;
    }

    .apolo-validation-card__desc {
        font-size: var(--apolo-text-xs);
        line-height: 1.3;
    }

    .apolo-validation-card__header {
        margin-bottom: var(--apolo-space-2);
    }
}
/* ── 3. Botones de Acción Superiores ── */
.apolo-btn-outline-header {
    border: 1px solid var(--apolo-border-color);
    background: var(--apolo-surface-card);
    color: var(--apolo-text-color-primary);
    border-radius: var(--apolo-radius-md);
    font-size: var(--apolo-text-sm);
    font-weight: var(--apolo-font-medium);
    padding: var(--apolo-space-2) var(--apolo-space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--apolo-space-2);
    transition: var(--apolo-transition-color);
}

    .apolo-btn-outline-header:hover {
        background: var(--apolo-n50);
        border-color: var(--apolo-n400);
        color: var(--apolo-n900);
    }

/* ── 4. Tarjeta Principal de Formulario ── */
.apolo-form-card {
    background: var(--apolo-surface-card);
    border: 1px solid var(--apolo-border-color-subtle);
    border-radius: var(--apolo-radius-xl);
    box-shadow: var(--apolo-shadow-sm);
    padding: var(--apolo-space-6);
    margin-bottom: var(--apolo-space-6);
}

.apolo-form-card__title {
    font-size: var(--apolo-text-lg);
    font-weight: var(--apolo-font-bold);
    color: var(--apolo-n900);
    margin-bottom: var(--apolo-space-1);
}

.apolo-form-card__subtitle {
    font-size: var(--apolo-text-sm);
    color: var(--apolo-text-color-secondary);
    margin-bottom: var(--apolo-space-4);
}

.apolo-input-label {
    font-size: var(--apolo-text-sm);
    font-weight: var(--apolo-font-semibold);
    color: var(--apolo-text-color-primary);
    margin-bottom: var(--apolo-space-2);
    display: block;
}

.apolo-form-card__helper {
    font-size: var(--apolo-text-sm);
    color: var(--apolo-color-primary);
    display: flex;
    align-items: center;
    gap: var(--apolo-space-2);
    margin-top: var(--apolo-space-3);
}

/* ── 5. Tarjetas de Validación Avanzada ── */
.apolo-validations__heading {
    font-size: var(--apolo-text-lg);
    font-weight: var(--apolo-font-bold);
    color: var(--apolo-n900);
}

.apolo-validations__subheading {
    font-size: var(--apolo-text-sm);
    color: var(--apolo-text-color-secondary);
    margin-bottom: var(--apolo-space-4);
}

.apolo-validation-card {
    background: var(--apolo-surface-card);
    border: 1px solid var(--apolo-border-color-subtle);
    border-radius: var(--apolo-radius-lg);
    box-shadow: var(--apolo-shadow-sm);
    padding: var(--apolo-space-4);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: var(--apolo-transition-color);
}

    .apolo-validation-card:hover {
        box-shadow: var(--apolo-shadow-md);
    }

.apolo-validation-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--apolo-space-3);
}

.apolo-validation-card__badge {
    width: 36px;
    height: 36px;
    border-radius: var(--apolo-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Variantes de color temáticas de icono */
.apolo-validation-card__badge--siger {
    background-color: var(--apolo-n100);
    color: var(--apolo-n700);
}

.apolo-validation-card__badge--rfc {
    background-color: var(--apolo-color-success-light);
    color: var(--apolo-color-success);
}

.apolo-validation-card__badge--curp {
    background-color: var(--apolo-color-accent-light);
    color: var(--apolo-color-accent-dark);
}

.apolo-validation-card__badge--imss {
    background-color: var(--apolo-color-primary-light);
    color: var(--apolo-color-primary);
}

.apolo-validation-card__badge--sep {
    background-color: var(--apolo-color-danger-light);
    color: var(--apolo-color-danger);
}

.apolo-validation-card__title {
    font-size: var(--apolo-text-base);
    font-weight: var(--apolo-font-bold);
    color: var(--apolo-n900);
    margin-bottom: var(--apolo-space-1);
}

.apolo-validation-card__desc {
    font-size: var(--apolo-text-xs);
    color: var(--apolo-text-color-secondary);
    line-height: var(--apolo-leading-normal);
    margin: 0;
    flex-grow: 1;
}
/* Optimización móvil para tarjetas 2x2 */
@media (max-width: 575.98px) {
    .apolo-validation-card {
        padding: var(--apolo-space-3); /* 12px en lugar de 16px para dar más espacio interno */
    }

    .apolo-validation-card__title {
        font-size: var(--apolo-text-sm); /* 13px para un salto de línea más estético */
        line-height: var(--apolo-leading-tight);
        word-break: break-word;
    }

    .apolo-validation-card__desc {
        font-size: var(--apolo-text-xs); /* 11px */
        line-height: 1.3;
    }

    .apolo-validation-card__header {
        margin-bottom: var(--apolo-space-2); /* 8px en lugar de 12px */
    }
}
/* ── 6. Micro-interacción: Toggle Switch (200ms ease) ── */
.apolo-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
}

    .apolo-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.apolo-switch__track {
    position: absolute;
    inset: 0;
    background-color: var(--apolo-n300);
    border-radius: var(--apolo-radius-full);
    transition: var(--apolo-transition-toggle);
}

.apolo-switch__thumb {
    position: absolute;
    top: 3px;
    left: 0;
    width: 16px;
    height: 16px;
    background-color: var(--apolo-n0);
    border-radius: 50%;
    box-shadow: var(--apolo-shadow-sm);
    transform: translateX(3px);
    transition: transform 200ms ease;
}

.apolo-switch input:checked + .apolo-switch__track {
    background-color: var(--apolo-color-primary);
}

    .apolo-switch input:checked + .apolo-switch__track .apolo-switch__thumb {
        transform: translateX(21px);
    }

/* Modificadores de color temáticos para switches activos */
.apolo-switch--rfc input:checked + .apolo-switch__track {
    background-color: var(--apolo-color-success);
}

.apolo-switch--curp input:checked + .apolo-switch__track {
    background-color: var(--apolo-color-accent);
}

.apolo-switch--imss input:checked + .apolo-switch__track {
    background-color: var(--apolo-color-primary);
}

.apolo-switch--sep input:checked + .apolo-switch__track {
    background-color: var(--apolo-color-danger);
}

.apolo-switch input:focus-visible + .apolo-switch__track {
    outline: 3px solid var(--apolo-color-accent);
    outline-offset: 2px;
    transition: none;
}

/* ── 7. Sección: Datos adicionales para validaciones activas ── */
.apolo-additional-data {
    margin-bottom: var(--apolo-space-8);
}

.apolo-additional-data__title {
    font-size: var(--apolo-text-base);
    font-weight: var(--apolo-font-bold);
    color: var(--apolo-n900);
    margin-bottom: var(--apolo-space-3);
}

.apolo-additional-data__curp-link {
    font-size: var(--apolo-text-xs);
    font-weight: var(--apolo-font-medium);
    color: var(--apolo-color-primary);
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    line-height: 1.2;
    transition: var(--apolo-transition-color);
}

.apolo-additional-data__curp-link:hover {
    color: var(--apolo-color-primary-dark);
    text-decoration: underline;
}

/* Sub-panel para cálculo/datos de CURP */
.apolo-curp-calculator {
    background-color: var(--apolo-n50);
    border: 1px solid var(--apolo-border-color-subtle);
    border-radius: var(--apolo-radius-lg);
    padding: var(--apolo-space-4);
    margin-top: var(--apolo-space-1);
}

.apolo-curp-calculator__title {
    font-size: var(--apolo-text-sm);
    font-weight: var(--apolo-font-semibold);
    color: var(--apolo-n700);
    line-height: 1.2;
}

/* ── 8. CTA Principal y Seguridad ── */
.apolo-cta-search {
    background-color: var(--apolo-color-primary-navy);
    color: var(--apolo-n0);
    border-radius: var(--apolo-radius-md);
    font-weight: var(--apolo-font-semibold);
    font-size: var(--apolo-text-base);
    padding: 12px 36px;
    min-height: 48px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--apolo-space-2);
    transition: var(--apolo-transition-color);
    box-shadow: var(--apolo-shadow-sm);
}

    .apolo-cta-search:hover:not(:disabled) {
        background-color: var(--apolo-color-primary-dark);
        color: var(--apolo-n0);
    }

    .apolo-cta-search:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

.apolo-footer-security {
    font-size: var(--apolo-text-xs);
    color: var(--apolo-text-color-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--apolo-space-1);
    margin-top: var(--apolo-space-4);
}

/* Enlace "Ya conozco mi CURP" pegado al título */
.apolo-additional-data__curp-link {
    font-size: var(--apolo-text-xs);
    font-weight: var(--apolo-font-semibold);
    color: var(--apolo-color-primary);
    border: none;
    background: none;
    cursor: pointer;
}

    .apolo-additional-data__curp-link:hover {
        color: var(--apolo-color-primary-dark);
    }

/* Asegurar que Syncfusion ocupe el 100% de la columna */
.apolo-sf-datepicker.e-control-wrapper {
    width: 100% !important;
}

/* Accesibilidad: Reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
    .apolo-switch__track,
    .apolo-switch__thumb,
    .apolo-cta-search {
        transition: none !important;
    }
}