/* ==========================================================================
   SISTEMA VISUAL AULA DIVERSA — congelado a partir de la Home pública aprobada
   (AD-F-003). Hoja de estilos GLOBAL (no aislada a un componente): queda
   disponible para cualquier pantalla futura del proyecto.

   IMPORTANTE:
   - Ninguna pantalla existente consume todavía estas clases/tokens.
   - Home.razor / Home.razor.css NO se modificaron: siguen con sus propios
     valores (prefijo ad3-*), autosuficientes. Este archivo es una versión
     PORTABLE de ese mismo lenguaje visual, con prefijo ad-* (sistema),
     lista para que las próximas pantallas la reutilicen sin duplicar
     valores ni inventar variantes nuevas.
   - Los valores de color/espaciado/radio/sombra fueron extraídos
     directamente de Home.razor.css; no se inventó ningún valor nuevo.
   ========================================================================== */

:root {
    /* --- Color --- */
    --ad-navy: #07162F;
    --ad-navy-deep: #020617;
    --ad-violet: #6D28D9;
    --ad-violet-2: #7C22FF;
    --ad-green: #13795B;
    --ad-orange: #D97706;

    --ad-bg: #FFFFFF;
    --ad-bg-soft: #F7F8FC;
    --ad-bg-lilac: #F4F0FF;

    --ad-text: #0B1734;
    --ad-text-muted: #526079;
    --ad-border: #DCE3EC;

    /* --- Radio de borde --- */
    --ad-radius-btn: 10px;
    --ad-radius-card: 16px;

    /* --- Escala de espaciado (8/12/16/24/32/48) --- */
    --ad-space-1: 8px;
    --ad-space-2: 12px;
    --ad-space-3: 16px;
    --ad-space-4: 24px;
    --ad-space-5: 32px;
    --ad-space-6: 48px;

    /* --- Contenedor --- */
    --ad-container-max: 1280px;

    /* --- Movimiento (180–220ms) --- */
    --ad-transition: 200ms ease;

    /* --- Sombras --- */
    --ad-shadow-card: 0 5px 18px rgba(12, 27, 52, .04);
    --ad-shadow-card-hover: 0 14px 32px rgba(12, 27, 52, .1);
    --ad-shadow-btn-violet: 0 10px 28px rgba(109, 40, 217, .2);
    --ad-shadow-btn-violet-hover: 0 14px 34px rgba(109, 40, 217, .28);
    --ad-shadow-btn-green: 0 10px 28px rgba(19, 121, 91, .22);
    --ad-shadow-btn-green-hover: 0 14px 34px rgba(19, 121, 91, .30);
    --ad-shadow-btn-orange: 0 10px 28px rgba(217, 119, 6, .22);
    --ad-shadow-btn-orange-hover: 0 14px 34px rgba(217, 119, 6, .30);
}

/* ---- Contenedor ---- */
.ad-container {
    width: min(var(--ad-container-max), calc(100% - 48px));
    margin-inline: auto;
}

/* ---- Botones ---- */
.ad-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    border: none;
    border-radius: var(--ad-radius-btn);
    font-weight: 700;
    font-family: inherit;
    font-size: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--ad-transition), box-shadow var(--ad-transition), filter var(--ad-transition);
}

.ad-btn:hover {
    transform: translateY(-2px);
}

.ad-btn:active {
    transform: translateY(0);
}

.ad-btn:focus-visible {
    outline: 2px solid var(--ad-violet);
    outline-offset: 2px;
}

.ad-btn-small {
    min-height: 40px;
    padding: 0 17px;
    font-size: .9rem;
}

/* Principal: violeta */
.ad-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--ad-violet), var(--ad-violet-2));
    box-shadow: var(--ad-shadow-btn-violet);
}
.ad-btn-primary:hover {
    box-shadow: var(--ad-shadow-btn-violet-hover);
    filter: brightness(1.04);
}

/* Variante: soluciones institucionales */
.ad-btn-green {
    color: #fff;
    background: linear-gradient(135deg, var(--ad-green), #16a34a);
    box-shadow: var(--ad-shadow-btn-green);
}
.ad-btn-green:hover {
    box-shadow: var(--ad-shadow-btn-green-hover);
    filter: brightness(1.04);
}

/* Variante: contacto / propuestas */
.ad-btn-orange {
    color: #fff;
    background: linear-gradient(135deg, var(--ad-orange), #f59e0b);
    box-shadow: var(--ad-shadow-btn-orange);
}
.ad-btn-orange:hover {
    box-shadow: var(--ad-shadow-btn-orange-hover);
    filter: brightness(1.04);
}

/* Outline: solo sobre fondos oscuros (navy) */
.ad-btn-outline {
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .72);
}
.ad-btn-outline:hover {
    background: rgba(255, 255, 255, .1);
}

/* ---- Tarjetas ---- */
.ad-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    background: var(--ad-bg);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-card);
    box-shadow: var(--ad-shadow-card);
    padding: var(--ad-space-4);
    transition: transform var(--ad-transition), box-shadow var(--ad-transition), border-color var(--ad-transition);
}

.ad-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ad-shadow-card-hover);
    border-color: rgba(109, 40, 217, .28);
}

.ad-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--ad-radius-btn);
    display: grid;
    place-items: center;
    margin-bottom: var(--ad-space-2);
}

.ad-card-icon svg {
    width: 26px;
    height: 26px;
}

.ad-card-icon.is-violet { background: #f0eaff; color: var(--ad-violet); }
.ad-card-icon.is-green  { background: #e9f8f1; color: var(--ad-green); }
.ad-card-icon.is-orange { background: #fff1dc; color: var(--ad-orange); }

.ad-card h3 {
    margin: 0 0 var(--ad-space-1);
    color: var(--ad-text);
}

.ad-card p {
    margin: 0;
    color: var(--ad-text-muted);
    line-height: 1.62;
}

/* CTA de una tarjeta: se pega abajo, misma línea entre tarjetas de una fila */
.ad-card .ad-btn {
    margin-top: auto;
    align-self: flex-start;
}

@media (prefers-reduced-motion: reduce) {
    .ad-btn,
    .ad-card {
        transition: none;
    }
}

/* ==========================================================================
   Diálogos / modales (AD-F-004) — primitivas compartidas por LoginModal y
   CallbackModal, basadas en <dialog> nativo. Cualquier modal futuro puede
   reutilizarlas sin duplicar valores.
   ========================================================================== */

.ad-dialog {
    border: none;
    border-radius: var(--ad-radius-card);
    padding: 0;
    width: min(440px, calc(100% - 32px));
    max-width: 100%;
    background: var(--ad-bg);
    box-shadow: var(--ad-shadow-card-hover);
    color: var(--ad-text);
}

.ad-dialog::backdrop {
    background: rgba(7, 22, 47, .55);
    backdrop-filter: blur(2px);
}

.ad-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ad-space-3);
    padding: var(--ad-space-4) var(--ad-space-4) 0;
}

.ad-dialog-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ad-text);
}

.ad-dialog-subtitle {
    margin: 4px 0 0;
    font-size: .85rem;
    color: var(--ad-text-muted);
}

.ad-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ad-text-muted);
    cursor: pointer;
    transition: background var(--ad-transition), color var(--ad-transition);
}

.ad-dialog-close:hover {
    background: var(--ad-bg-soft);
    color: var(--ad-text);
}

.ad-dialog-close:focus-visible,
.ad-field input:focus-visible,
.ad-field textarea:focus-visible,
.ad-checkbox input:focus-visible {
    outline: 2px solid var(--ad-violet);
    outline-offset: 2px;
}

.ad-dialog-body {
    padding: var(--ad-space-3) var(--ad-space-4) var(--ad-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--ad-space-3);
    max-height: min(80vh, 640px);
    overflow-y: auto;
}

.ad-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ad-field label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ad-text);
}

.ad-field input,
.ad-field textarea {
    font: inherit;
    color: var(--ad-text);
    background: var(--ad-bg-soft);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-btn);
    padding: 10px 12px;
    transition: border-color var(--ad-transition), background var(--ad-transition);
}

.ad-field input:focus,
.ad-field textarea:focus {
    outline: none;
    border-color: var(--ad-violet);
    background: var(--ad-bg);
}

.ad-field textarea {
    resize: vertical;
    min-height: 72px;
}

.ad-field-error {
    margin: 0;
    font-size: .78rem;
    color: #B91C1C;
}

.ad-field-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--ad-space-2);
}

.ad-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--ad-text-muted);
}

.ad-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--ad-violet);
}

.ad-dialog-foot-note {
    margin: 0;
    font-size: .78rem;
    color: var(--ad-text-muted);
    text-align: center;
}

.ad-dialog-link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--ad-violet);
    cursor: pointer;
    text-decoration: underline;
}

.ad-dialog .ad-btn {
    width: 100%;
}

.ad-dialog-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ad-space-2);
    padding: var(--ad-space-2) 0 var(--ad-space-1);
}

.ad-dialog-success-icon {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #e9f8f1;
    color: var(--ad-green);
}

.ad-dialog-success-icon svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 430px) {
    .ad-field-row {
        grid-template-columns: 84px 1fr;
    }
}