/**
 * Estilos de accesibilidad (WCAG 2.1 / Ley 20.422 Chile)
 * Foco visible, contraste y utilidades para ayudas técnicas
 */

/* --- Skip link (WCAG 2.4.1) --- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 10002;
    padding: 12px 20px;
    background: var(--color-primary, #e95814);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    transition: top 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 8px;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* --- Foco visible (WCAG 2.4.7) --- */
/* Evitar outline: none sin reemplazo; usar :focus-visible para no dibujar anillo en clic de ratón */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary, #e95814);
    outline-offset: 2px;
}

/* Skip link y controles críticos: foco siempre visible */
.skip-link:focus,
.skip-link:focus-visible,
.modern-button:focus-visible,
.btn:focus-visible,
.form-input-modern:focus-visible,
.form-control:focus-visible {
    outline: 2px solid var(--color-primary, #e95814);
    outline-offset: 2px;
}

/* Sidebar y navegación */
.modern-sidebar .nav-link:focus-visible,
.modern-sidebar .sidebar-toggle:focus-visible,
.modern-sidebar .sidebar-search-input:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 2px;
}

/* Reducir ruido visual en focus por ratón (opcional): solo teclado muestra outline */
@media (pointer: fine) {
    a:focus:not(:focus-visible),
    button:focus:not(:focus-visible),
    input:focus:not(:focus-visible),
    select:focus:not(:focus-visible),
    textarea:focus:not(:focus-visible) {
        outline: none;
    }
}

/* --- Contraste mínimo (WCAG 1.4.3) --- */
/* Asegurar que texto principal tenga contraste ≥ 4.5:1 sobre fondo */
body,
.text-body,
.page-content {
    color: var(--color-text-primary, #1e293b);
}

/* Enlaces visibles */
a:not(.btn):not(.nav-link) {
    color: var(--color-primary, #e95814);
}
a:not(.btn):not(.nav-link):hover {
    text-decoration: underline;
}

/* Mensajes de error accesibles */
.invalid-feedback,
.text-danger[role="alert"],
[role="alert"] {
    color: #b91c1c;
}

/* Botones primary (solo sitio público / home): contraste WCAG 1.4.3 */
.modern-button.btn-primary {
    background-color: var(--color-primary-dark, #C2410C) !important;
    border-color: var(--color-primary-dark, #C2410C) !important;
    color: #fff !important;
}
.modern-button.btn-primary:hover {
    background-color: #9a3412 !important;
    border-color: #9a3412 !important;
    color: #fff !important;
}
/* Enlace/botón deshabilitado y paginación: ver accessibility-admin.css para layout administración */
a.btn-outline-primary.disabled,
button.btn-outline-primary.disabled,
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: #374151 !important;
    background-color: #e5e7eb !important;
    border-color: #d1d5db !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    text-decoration: none !important;
}
.badge-success {
    background-color: #15803d !important;
    color: #fff !important;
}
.page-link {
    color: #1e40af !important;
}
.page-link:hover {
    color: #1e3a8a !important;
}
.page-item.active .page-link {
    color: #fff !important;
    background-color: #1e40af !important;
    border-color: #1e40af !important;
}

/* --- Modales: no quitar outline del foco dentro del modal --- */
.modal .form-control:focus-visible,
.modal .btn:focus-visible,
.modal-content:focus-visible {
    outline: 2px solid var(--color-primary, #e95814);
    outline-offset: 2px;
}

/* --- Contraste en modal de perfil profesional (WCAG 1.4.3) --- */
/* Asegurar contraste suficiente para badge y botón en la modal */
#modalProfesional .modal-profesional-badge.badge-primary,
#modalProfesional .badge.badge-primary {
    background-color: #1e40af !important; /* Azul oscuro con buen contraste */
    color: #ffffff !important;
    border: none !important;
}

#modalProfesional .modal-agendar-btn.btn-primary,
#modalProfesional .btn.btn-primary {
    background-color: #1e40af !important; /* Azul oscuro con buen contraste */
    border-color: #1e40af !important;
    color: #ffffff !important;
}

#modalProfesional .modal-agendar-btn.btn-primary:hover,
#modalProfesional .btn.btn-primary:hover {
    background-color: #1e3a8a !important; /* Azul más oscuro en hover */
    border-color: #1e3a8a !important;
    color: #ffffff !important;
}

#modalProfesional .modal-agendar-btn.btn-primary:focus-visible,
#modalProfesional .btn.btn-primary:focus-visible {
    outline: 2px solid #1e40af !important;
    outline-offset: 2px !important;
}

/* --- Tamaño de elementos táctiles (WCAG 2.5.5) --- */
/* Ocultar el logo cuando el sidebar está colapsado para evitar problemas de espacio */
/* Solo mostrar el botón toggle con tamaño mínimo de 48x48px */
aside.modern-sidebar.collapsed .sidebar-header .sidebar-logo,
aside#modernSidebar.collapsed .sidebar-header .sidebar-logo,
.modern-sidebar.collapsed .sidebar-header .sidebar-logo,
.modern-sidebar.collapsed .sidebar-header a.sidebar-logo {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Asegurar que el botón toggle tenga al menos 48x48px cuando el sidebar está colapsado */
/* Alinear el icono del toggle con los iconos del menú (mismo padding y tamaño de icono) */
aside.modern-sidebar.collapsed .sidebar-header .sidebar-toggle,
aside#modernSidebar.collapsed .sidebar-header .sidebar-toggle,
.modern-sidebar.collapsed .sidebar-header .sidebar-toggle,
.modern-sidebar.collapsed .sidebar-header button.sidebar-toggle,
.modern-sidebar.collapsed .sidebar-header #sidebarToggle {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 12px !important; /* Mismo padding vertical que nav-link (var(--space-3) = 12px) */
    box-sizing: border-box !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Asegurar que el icono del toggle tenga el mismo tamaño que los iconos del menú (20px) */
aside.modern-sidebar.collapsed .sidebar-header .sidebar-toggle i,
aside#modernSidebar.collapsed .sidebar-header .sidebar-toggle i,
.modern-sidebar.collapsed .sidebar-header .sidebar-toggle i,
.modern-sidebar.collapsed .sidebar-header button.sidebar-toggle i,
.modern-sidebar.collapsed .sidebar-header #sidebarToggle i {
    font-size: 20px !important; /* Mismo tamaño que los iconos de nav-link */
    width: 24px !important; /* Mismo ancho que los iconos de nav-link */
    text-align: center !important;
}

/* Centrar perfectamente todos los iconos del menú cuando está colapsado */
.modern-sidebar.collapsed .nav-link {
    gap: 0 !important;
    padding: 12px 0 !important; /* Padding vertical igual, horizontal 0 para centrar */
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: none !important; /* Eliminar flex: 1 para centrar correctamente */
}

.modern-sidebar.collapsed .nav-link:hover {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.modern-sidebar.collapsed .nav-link i {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    flex-shrink: 0 !important;
}

.modern-sidebar.collapsed .nav-link span {
    flex: none !important; /* Eliminar flex: 1 del span para centrar correctamente */
}

/* Centrar los headers de grupos también */
.modern-sidebar.collapsed .nav-group-header {
    gap: 0 !important;
    padding: 12px 0 !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.modern-sidebar.collapsed .nav-group-header i {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}