/* ================================================
   16 — ACCESOS DIRECTOS (Quick Access Cards)
   Scoped bajo .confia-accesos-scope para aislar
   de Divi y otros page builders.
   ================================================ */

/* ── Scope wrapper ─────────────────────────────────────── */
.confia-accesos-scope {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    box-sizing: border-box;
    line-height: 1.5;
}

.confia-accesos-scope *,
.confia-accesos-scope *::before,
.confia-accesos-scope *::after {
    box-sizing: border-box;
}

/* ── Grid ──────────────────────────────────────────────── */
/* grid-template-columns se inyecta inline desde el shortcode
   en función del número de accesos del grupo — sin espacios vacíos. */
.confia-accesos-scope .confia-accesos {
    display: grid !important;
    gap: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* ── Tarjeta ───────────────────────────────────────────── */
.confia-accesos-scope .confia-acceso-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    text-align: center !important;
    text-decoration: none !important;
    color: #1e293b !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.3rem !important;
    cursor: pointer !important;
    transform: none !important;
}

.confia-accesos-scope .confia-acceso-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.1), 0 4px 10px rgba(0,0,0,.06) !important;
    border-color: #274e9d !important;
    text-decoration: none !important;
    color: #1e293b !important;
}

/* ── Ícono ─────────────────────────────────────────────── */
/* width/height/border-radius los inyecta el shortcode según tamano */
.confia-accesos-scope .confia-acceso-card__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

.confia-accesos-scope .confia-acceso-card__icon > span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.confia-accesos-scope .confia-acceso-card__icon svg {
    display: block !important;
}

/* ── Texto ─────────────────────────────────────────────── */
/* font-size la inyecta el shortcode según tamano */
.confia-accesos-scope .confia-acceso-card__title {
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #1e293b !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.confia-accesos-scope .confia-acceso-card__subtitle {
    color: #64748b !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* ── Dark mode ─────────────────────────────────────────── */
body.dark-mode .confia-accesos-scope .confia-acceso-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

body.dark-mode .confia-accesos-scope .confia-acceso-card:hover {
    color: #f1f5f9 !important;
}

body.dark-mode .confia-accesos-scope .confia-acceso-card__title {
    color: #f1f5f9 !important;
}

body.dark-mode .confia-accesos-scope .confia-acceso-card__subtitle {
    color: #94a3b8 !important;
}

/* ── Responsive ────────────────────────────────────────── */
/* Las columnas del grid se controlan por shortcode (inline <style> scoped por UID).
   Solo ajustamos el gap y el padding de tarjetas en móvil. */
@media (max-width: 600px) {
    .confia-accesos-scope .confia-accesos {
        gap: 0.75rem !important;
    }
}

/* ── :active en tarjeta ────────────────────────────────────────── */
.confia-accesos-scope .confia-acceso-card:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
}

/* ── Prefers reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .confia-accesos-scope .confia-acceso-card {
        transition: none !important;
    }
    .confia-accesos-scope .confia-acceso-card:hover {
        transform: none !important;
    }
}