/* =====================================================================
   TOUCH TARGETS - Tamaños mínimos de elementos táctiles
   =====================================================================
   WCAG 2.1 Success Criterion 2.5.5 requiere 44x44px mínimo
   para elementos interactivos en dispositivos táctiles
   ===================================================================== */

/* =====================================================================
   BOTONES - Touch targets mínimos
   ===================================================================== */

/* Botones de icono (solo icono, sin texto) */
.btn-icon,
.icon-btn,
button[aria-label]:not([class*="btn-"]),
.action-btn,
.close-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Botones pequeños en móvil */
@media (max-width: 768px) {
    .btn-sm,
    .btn-xs,
    .modern-btn-sm {
        min-height: 44px;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
}

/* =====================================================================
   ENLACES - Área de toque ampliada
   ===================================================================== */

/* Enlaces de navegación */
.nav-link,
.menu-link,
.sidebar-link,
.dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* Enlaces en listas */
.list-item a,
.list-group-item a {
    display: block;
    padding: 0.75rem;
    margin: -0.75rem;
}

/* =====================================================================
   CHECKBOXES Y RADIOS - Área de toque ampliada
   ===================================================================== */

/* Wrapper para checkbox/radio con área de toque ampliada */
.checkbox-wrapper,
.radio-wrapper,
.form-check {
    position: relative;
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* Label clickeable con área ampliada */
.checkbox-wrapper label,
.radio-wrapper label,
.form-check-label {
    padding: 0.5rem;
    padding-left: 2rem;
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* Input posicionado absolutamente */
.checkbox-wrapper input,
.radio-wrapper input {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}

/* =====================================================================
   ICONOS INTERACTIVOS - Click targets
   ===================================================================== */

/* Iconos que son clickeables */
.clickable-icon,
i.clickable,
[role="button"] > i,
button > i:only-child {
    padding: 0.625rem;
    margin: -0.625rem;
}

/* =====================================================================
   ALERTAS Y TOASTS - Botones de cerrar
   ===================================================================== */

.alert .close,
.alert .btn-close,
.toast .close,
.toast .btn-close,
.alert-dismiss,
.notification-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
}

/* =====================================================================
   TABS Y PILLS
   ===================================================================== */

.nav-tabs .nav-link,
.nav-pills .nav-link,
.tab-link,
.pill-link {
    min-height: 44px;
    padding: 0.75rem 1rem;
}

/* =====================================================================
   DROPDOWN ITEMS
   ===================================================================== */

.dropdown-menu .dropdown-item,
.dropdown-content a,
.select-option {
    min-height: 44px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
}

/* =====================================================================
   CARDS INTERACTIVAS
   ===================================================================== */

/* Cards que son completamente clickeables */
.card-link,
.clickable-card,
a.card {
    cursor: pointer;
}

/* Asegurar que acciones en cards tengan buen touch target */
.card .card-actions button,
.card .card-actions a,
.card-footer button,
.card-footer a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* =====================================================================
   INPUTS - Altura mínima
   ===================================================================== */

@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea,
    .modern-input,
    .modern-select,
    .modern-textarea {
        min-height: 44px;
    }
}

/* =====================================================================
   HEADER ELEMENTS
   ===================================================================== */

/* Hamburger menu button - solo tamaño mínimo, no controlar visibilidad */
.mobile-menu-toggle,
.hamburger-btn,
.menu-toggle {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

/* User menu button */
.user-menu-btn,
.avatar-btn,
.profile-btn {
    min-height: 44px;
}

/* Notification bell */
.notification-btn,
.bell-btn,
.notification-toggle {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =====================================================================
   ACCIONES EN TABLAS
   ===================================================================== */

/* Botones de acción en tablas */
table .btn-action,
table .action-link,
.table-actions a,
.table-actions button,
td .btn-sm,
td .btn-icon {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    table .btn-action,
    table .action-link,
    .table-actions a,
    .table-actions button {
        min-width: 44px;
        min-height: 44px;
    }
}

/* =====================================================================
   BREADCRUMBS
   ===================================================================== */

.breadcrumb-link,
.breadcrumb a,
.breadcrumbs a {
    min-height: 32px;
    padding: 0.25rem 0.5rem;
    display: inline-flex;
    align-items: center;
}

@media (max-width: 768px) {
    .breadcrumb-link,
    .breadcrumb a,
    .breadcrumbs a {
        min-height: 44px;
        padding: 0.5rem;
    }
}

/* =====================================================================
   SEARCH - Input y botón
   ===================================================================== */

.search-btn,
.search-submit,
.input-group-append button {
    min-width: 44px;
    min-height: 44px;
}

/* =====================================================================
   UTILIDADES
   ===================================================================== */

/* Clase para forzar touch target mínimo */
.touch-target {
    min-width: 44px !important;
    min-height: 44px !important;
}

/* Clase para debug - muestra área de touch */
.debug-touch-targets * {
    outline: 1px solid rgba(255, 0, 0, 0.3);
}

.debug-touch-targets [class*="btn"],
.debug-touch-targets a,
.debug-touch-targets button,
.debug-touch-targets input,
.debug-touch-targets select {
    outline: 2px solid rgba(255, 0, 0, 0.5);
}