:root {
    --emilia-dark: #120b20;
    --emilia-dark-2: #1b1032;
    --emilia-purple: #722cff;
    --emilia-purple-2: #9b6dff;
    --emilia-pink: #ff0f8f;
    --emilia-text: #f8f7ff;
    --emilia-muted: #b8aecf;
    --emilia-border: rgba(155, 109, 255, 0.28);
    --emilia-card-border: rgba(155, 109, 255, 0.18);
}

/* Fondo general tipo EmiliaApp */
.emilia-bg {
    min-height: 100vh;
    background: radial-gradient(circle at 78% 20%, rgba(114, 44, 255, 0.35), transparent 35%), radial-gradient(circle at 18% 78%, rgba(255, 15, 143, 0.14), transparent 35%), linear-gradient(135deg, #0f091b 0%, #160d29 48%, #23113d 100%);
    color: var(--emilia-text);
}

/* Barra superior blanca */
.emilia-navbar {
    height: 72px;
    background: #ffffff;
    display: flex;
    align-items: center;
    box-shadow: 0 8px 30px rgba(15, 9, 27, 0.08);
    z-index: 2;
}

/* Logo */
.emilia-brand {
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #25222b;
    text-decoration: none;
}

    .emilia-brand span {
        color: var(--emilia-purple);
    }

/* Contenedor principal */
.emilia-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.emilia-main {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 4rem 0;
    position: relative;
}

    .emilia-main::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
        background-size: 48px 48px;
        mask-image: linear-gradient(to bottom, black, transparent 90%);
        pointer-events: none;
    }

/* Tarjetas */
.emilia-card {
    position: relative;
    background: rgba(255,255,255,0.96);
    color: #1f1b2d;
    border-radius: 1.4rem;
    padding: 2rem;
    border: 1px solid var(--emilia-card-border);
    box-shadow: 0 24px 80px rgba(0,0,0,0.28), 0 0 0 8px rgba(255,255,255,0.035);
    overflow: hidden;
}

    .emilia-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 6px;
        background: linear-gradient(90deg, var(--emilia-pink), var(--emilia-purple), var(--emilia-purple-2));
    }

.emilia-card-header {
    margin-bottom: 1.8rem;
}

.emilia-card h4,
.emilia-card h5 {
    font-weight: 900;
    letter-spacing: -0.4px;
    margin-bottom: .35rem;
}

.emilia-card p {
    color: #6d647c;
    margin: 0;
}

/* Iconos decorativos */
.emilia-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--emilia-purple), var(--emilia-purple-2));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    box-shadow: 0 14px 30px rgba(114, 44, 255, 0.35);
    margin-bottom: 1rem;
}

.emilia-watermark-icon {
    position: absolute;
    right: 7%;
    top: 16%;
    font-size: 12rem;
    color: rgba(255,255,255,0.035);
    pointer-events: none;
}

/* Textos */
.emilia-title {
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -1.4px;
    margin-bottom: 1.4rem;
    color: #ffffff;
}

    .emilia-title span {
        color: var(--emilia-purple-2);
        text-shadow: 0 0 28px rgba(155, 109, 255, 0.45);
    }

.emilia-subtitle {
    max-width: 620px;
    color: #d7d1e5;
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 2rem;
}

.emilia-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .9rem;
    border-radius: .45rem;
    border: 1px solid var(--emilia-border);
    background: rgba(114, 44, 255, 0.16);
    color: #d9c9ff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

/* Formularios */
.emilia-card .form-label {
    font-weight: 800;
    color: #312b43;
    font-size: .82rem;
    margin-bottom: .45rem;
}

.emilia-card .form-control,
.emilia-card .form-select {
    border-radius: .85rem;
    padding: .8rem .95rem;
    border: 1px solid #e2dbf2;
    background: #fbfaff;
    font-weight: 600;
}

    .emilia-card .form-control:focus,
    .emilia-card .form-select:focus {
        border-color: var(--emilia-purple);
        box-shadow: 0 0 0 .22rem rgba(114, 44, 255, 0.12);
        background: #fff;
    }

.emilia-card .input-group .form-control {
    border-top-left-radius: .85rem;
    border-bottom-left-radius: .85rem;
}

.emilia-card .input-group .btn {
    border-top-right-radius: .85rem;
    border-bottom-right-radius: .85rem;
    border: 1px solid #e2dbf2;
    background: #fbfaff;
}

/* Botones */
.btn-emilia {
    border: none;
    border-radius: .9rem;
    padding: .85rem 1rem;
    font-weight: 900;
    letter-spacing: .2px;
    color: #fff;
    background: linear-gradient(135deg, var(--emilia-purple), #8f49ff);
    box-shadow: 0 0px 30px rgba(114, 44, 255, 0.32);
    transition: .2s ease;
}

    .btn-emilia:hover {
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 18px 38px rgba(114, 44, 255, 0.42);
    }

.btn-emilia-outline {
    border-radius: .9rem;
    padding: .85rem 1rem;
    font-weight: 900;
    color: var(--emilia-purple);
    border: 1px solid var(--emilia-purple);
    background: transparent;
}

    .btn-emilia-outline:hover {
        color: #fff;
        background: var(--emilia-purple);
    }

.emilia-link {
    color: var(--emilia-purple);
    font-weight: 800;
    text-decoration: none;
}

    .emilia-link:hover {
        color: #4f18c9;
        text-decoration: underline;
    }

/* Alertas */
.emilia-card .alert {
    border-radius: .9rem;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 991.98px) {
    .emilia-main {
        padding: 2.5rem 0;
    }

    .emilia-text-center-mobile {
        text-align: center;
        margin-bottom: 2rem;
    }

    .emilia-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .emilia-watermark-icon {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .emilia-navbar {
        height: 64px;
    }

    .emilia-card {
        padding: 1.5rem;
        border-radius: 1rem;
    }

    .emilia-title {
        font-size: 2.1rem;
    }
}