/* Cupones Custom Styles */

/* Sidebar Width Adjustment */
.sidebar {
    min-width: 280px !important;
    width: 280px !important;
}

.sidebar.sidebar-mini {
    min-width: 80px !important;
    width: 80px !important;
}

/* Logo Title Adjustment */
.logo-title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* Override h4 font-size specifically for logo-title */
h4.logo-title {
    font-size: 0.6rem !important;
}

/* Más específico para asegurar que se aplique */
.sidebar .navbar-brand h4.logo-title {
    font-size: 0.6rem !important;
}

.sidebar-header .navbar-brand h4.logo-title {
    font-size: 0.6rem !important;
}

/* Sidebar Header Adjustment */
.sidebar-header {
    padding: 1rem 1.5rem !important;
    min-height: 70px !important;
}

.navbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex: 1 !important;
    min-width: 0 !important;
    margin-right: 2rem !important; /* Espacio para el botón del sidebar */
}

/* Sidebar Toggle Button */
.sidebar-toggle {
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* Color #009CDE para el botón de toggle del sidebar */
.sidebar .sidebar-toggle {
    background: #009CDE !important;
    background-color: #009CDE !important;
}

.sidebar .sidebar-toggle .icon svg,
.sidebar .sidebar-toggle .icon-expanded svg,
.sidebar .sidebar-toggle .icon-mini svg {
    stroke: #ffffff !important;
    fill: #ffffff !important;
    color: #ffffff !important;
}

.sidebar .sidebar-toggle:hover {
    background: #009CDE !important;
    background-color: #009CDE !important;
}

.sidebar.sidebar-mini .sidebar-toggle {
    background: #009CDE !important;
    background-color: #009CDE !important;
}

/* Ensure proper spacing for logo and title */
.logo-main {
    flex-shrink: 0 !important;
}

/* Sidebar Menu Items */
.sidebar-list .nav-link {
    padding: 0.75rem 1.5rem !important;
    white-space: nowrap !important;
}

.sidebar-list .item-name {
    white-space: nowrap !important;
    overflow: visible !important;
}

/* Badge positioning */
.badge {
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* Icon arrow positioning */
.icon-arrow {
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sidebar {
        min-width: 260px !important;
        width: 260px !important;
    }
    
    .logo-title {
        font-size: 0.85rem !important;
    }
    
    h4.logo-title {
        font-size: 0.6rem !important;
    }
    
    .sidebar .navbar-brand h4.logo-title {
        font-size: 0.6rem !important;
    }
    
    .sidebar-header .navbar-brand h4.logo-title {
        font-size: 0.6rem !important;
    }
}

/* Ensure main content adjusts properly */
@media (min-width: 992px) {
    .main-content {
        margin-left: 280px !important;
        transition: margin-left 0.3s ease !important;
    }
    
    .sidebar.sidebar-mini ~ .main-content,
    .sidebar-mini ~ .main-content {
        margin-left: 80px !important;
    }
}

@media (max-width: 991.98px) {
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 0 !important;
    }
}

/* Sidebar collapsed state */
.sidebar.sidebar-mini .logo-title {
    display: none !important;
}

.sidebar.sidebar-mini .item-name {
    display: none !important;
}

.sidebar.sidebar-mini .badge {
    display: none !important;
}

.sidebar.sidebar-mini .icon-arrow {
    display: none !important;
}

/* Estilos para el botón de hamburguesa como en Hope UI */
.nav .navbar-toggler .navbar-toggler-icon {
    background-image: none;
}

.nav .navbar-toggler .navbar-toggler-icon .navbar-toggler-bar {
    display: block;
    position: relative;
    width: 22px;
    height: 1px;
    border-radius: 1px;
    background: #8A92A6;
    transition: all 400ms ease;
    margin: 0 auto;
}

.nav .navbar-toggler .navbar-toggler-icon .navbar-toggler-bar.bar2 {
    margin-top: 7px;
}

.nav .navbar-toggler .navbar-toggler-icon .navbar-toggler-bar.bar3 {
    margin-top: 7px;
}

.nav .navbar-toggler[aria-expanded=true] .navbar-toggler-bar.bar1 {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
    margin-top: 4px;
}

.nav .navbar-toggler[aria-expanded=true] .navbar-toggler-bar.bar2 {
    opacity: 0;
}

.nav .navbar-toggler[aria-expanded=true] .navbar-toggler-bar.bar3 {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
    margin-top: 3px;
}

/* Prevenir que el sidebar entre en modo mini automáticamente en móviles */
@media (max-width: 991.98px) {
    .sidebar,
    .sidebar-default,
    .sidebar.sidebar-default {
        min-width: 280px !important;
        width: 280px !important;
        max-width: 280px !important;
    }
    
    .sidebar.sidebar-mini,
    .sidebar-default.sidebar-mini,
    .sidebar.sidebar-default.sidebar-mini {
        min-width: 280px !important;
        width: 280px !important;
        max-width: 280px !important;
    }
    
    /* Forzar que el sidebar no se comporte como mini en móvil */
    .sidebar.sidebar-mini .item-name,
    .sidebar-default.sidebar-mini .item-name {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Sidebar mobile behavior - override any conflicting rules */
@media (max-width: 991.98px) {
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        min-width: 280px !important;
        z-index: 1050 !important;
        -webkit-transform: translateX(-100%) !important;
        -ms-transform: translateX(-100%) !important;
        transform: translateX(-100%) !important;
        -webkit-transition: transform 0.3s ease-in-out !important;
        -o-transition: transform 0.3s ease-in-out !important;
        transition: transform 0.3s ease-in-out !important;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1) !important;
    }
    
    .sidebar.show {
        -webkit-transform: translateX(0) !important;
        -ms-transform: translateX(0) !important;
        transform: translateX(0) !important;
    }
    
    .sidebar.sidebar-mini {
        width: 280px !important;
        min-width: 280px !important;
    }
    
    /* Forzar que los nombres se muestren en móviles */
    .sidebar .item-name,
    .sidebar .logo-title,
    .sidebar .badge,
    .sidebar .icon-arrow {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Asegurar que el botón de toggle dentro del sidebar sea clickeable en móvil */
    .sidebar .sidebar-toggle {
        cursor: pointer !important;
        z-index: 1051 !important;
        pointer-events: auto !important;
        position: relative !important;
    }
    
    .sidebar .sidebar-toggle:hover {
        opacity: 0.8 !important;
    }
    
    .sidebar .sidebar-toggle:active {
        opacity: 0.6 !important;
    }
    
    /* Asegurar que el main content no tenga margen en móvil */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Prevenir scroll del body cuando el sidebar está abierto */
    body.sidebar-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
    
    .sidebar .logo-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sidebar .badge {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sidebar .icon-arrow {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
/* Asegurar que el sidebar no esté en modo mini en móviles */
@media (max-width: 991.98px) {
    .sidebar.sidebar-mini {
        width: 280px !important;
        min-width: 280px !important;
    }
    
    .sidebar.sidebar-mini .item-name {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sidebar.sidebar-mini .logo-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sidebar.sidebar-mini .badge {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sidebar.sidebar-mini .icon-arrow {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Prevenir que el sidebar entre en modo mini en móviles */
    .sidebar {
        min-width: 280px !important;
    }
    
    /* Forzar que el sidebar siempre muestre los nombres en móviles */
    .sidebar .item-name,
    .sidebar .logo-title,
    .sidebar .badge,
    .sidebar .icon-arrow {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* FORZAR TAMAÑO PEQUEÑO DEL TEXTO METRO ENTERPRISE */
.sidebar .sidebar-header .navbar-brand h4.logo-title,
.sidebar .navbar-brand h4.logo-title,
h4.logo-title {
    font-size: 0.6rem !important;
    line-height: 1.2 !important;
}

/* Responsive card adjustments */
@media (max-width: 767.98px) {
    /* Hacer que las cards se apilen verticalmente en móviles */
    .row .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    /* Ajustar el banner principal */
    .iq-banner .iq-banner-content {
        padding: 1.5rem 1rem !important;
    }
    
    .iq-banner .iq-banner-content h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    .iq-banner .iq-banner-content p {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Ajustar las cards de métricas */
    .card-body {
        padding: 1rem !important;
    }
    
    .card-body h6 {
        font-size: 0.9rem !important;
    }
    
    .card-body h3 {
        font-size: 1.5rem !important;
    }
    
    /* Ajustar el main content en móviles */
    .main-content {
        margin-left: 0 !important;
    }
}

@media (max-width: 575.98px) {
    /* Ajustes para móviles muy pequeños */
    .iq-banner .iq-banner-content h1 {
        font-size: 1.25rem !important;
    }
    
    .iq-banner .iq-banner-content p {
        font-size: 0.8rem !important;
    }
    
    /* Ajustar el contenedor principal */
    .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Ajustar las cards */
    .card {
        margin-bottom: 0.75rem !important;
    }
    
    .card-body {
        padding: 0.75rem !important;
    }
    
    /* Ajustar el navbar */
    .iq-navbar .navbar-brand {
        font-size: 1rem !important;
    }
    
    /* Ajustar el sidebar toggle */
    .sidebar-toggle-mobile {
        top: 0.5rem !important;
        left: 0.5rem !important;
        padding: 0.375rem !important;
    }
    
    /* Ajustar el sidebar en móviles */
    .sidebar {
        -webkit-transform: translateX(-100%) !important;
        -ms-transform: translateX(-100%) !important;
        transform: translateX(-100%) !important;
    }
    
    .sidebar.show {
        -webkit-transform: translateX(0) !important;
        -ms-transform: translateX(0) !important;
        transform: translateX(0) !important;
    }
}

/* Color #009CDE para todos los botones primarios en el administrador */
.btn-primary,
button.btn-primary,
a.btn-primary,
input[type="submit"].btn-primary,
input[type="button"].btn-primary {
    background-color: #009CDE !important;
    border-color: #009CDE !important;
    color: #ffffff !important;
}

.btn-primary:hover:not(:disabled),
button.btn-primary:hover:not(:disabled),
a.btn-primary:hover:not(:disabled),
input[type="submit"].btn-primary:hover:not(:disabled),
input[type="button"].btn-primary:hover:not(:disabled) {
    background-color: #0088C0 !important;
    border-color: #0088C0 !important;
    color: #ffffff !important;
}

.btn-primary:focus,
button.btn-primary:focus,
a.btn-primary:focus,
input[type="submit"].btn-primary:focus,
input[type="button"].btn-primary:focus {
    background-color: #009CDE !important;
    border-color: #009CDE !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 156, 222, 0.25) !important;
}

.btn-primary:active:not(:disabled),
button.btn-primary:active:not(:disabled),
a.btn-primary:active:not(:disabled),
input[type="submit"].btn-primary:active:not(:disabled),
input[type="button"].btn-primary:active:not(:disabled) {
    background-color: #0077A8 !important;
    border-color: #0077A8 !important;
    color: #ffffff !important;
}

.btn-primary:disabled,
button.btn-primary:disabled,
a.btn-primary:disabled,
input[type="submit"].btn-primary:disabled,
input[type="button"].btn-primary:disabled {
    background-color: #009CDE !important;
    border-color: #009CDE !important;
    color: #ffffff !important;
    opacity: 0.65 !important;
}

/* Aplicar también a botones sin clase específica que tengan estilos inline o heredados */
button:not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info):not(.btn-secondary):not(.btn-dark):not(.btn-light):not(.btn-link),
a:not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info):not(.btn-secondary):not(.btn-dark):not(.btn-light):not(.btn-link) {
    /* Solo aplicar si no tienen otra clase de botón específica */
}

/* Botones de acción estándar */
.action-buttons .btn-primary,
.action-buttons button.btn-primary,
.action-buttons a.btn-primary {
    background-color: #009CDE !important;
    border-color: #009CDE !important;
    color: #ffffff !important;
}

.action-buttons .btn-primary:hover:not(:disabled),
.action-buttons button.btn-primary:hover:not(:disabled),
.action-buttons a.btn-primary:hover:not(:disabled) {
    background-color: #0088C0 !important;
    border-color: #0088C0 !important;
    color: #ffffff !important;
}

/* Color #009CDE para las cabeceras de los modales (excepto modales de eliminación) */
.modal-header:not([id*="delete"]):not([id*="Delete"]):not([id*="eliminar"]):not([id*="Eliminar"]) {
    background-color: #009CDE !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.modal-header:not([id*="delete"]):not([id*="Delete"]):not([id*="eliminar"]):not([id*="Eliminar"]) .modal-title {
    color: #ffffff !important;
}

.modal-header:not([id*="delete"]):not([id*="Delete"]):not([id*="eliminar"]):not([id*="Eliminar"]) .btn-close {
    filter: invert(1) !important;
}

/* Excluir específicamente el modal de confirmación de eliminación */
[id*="deleteModal"] .modal-header,
[id*="DeleteModal"] .modal-header,
[id*="deleteConfirmation"] .modal-header,
[id*="DeleteConfirmation"] .modal-header,
[id*="eliminarModal"] .modal-header,
[id*="EliminarModal"] .modal-header {
    background-color: transparent !important;
    color: inherit !important;
}

[id*="deleteModal"] .modal-header .modal-title,
[id*="DeleteModal"] .modal-header .modal-title,
[id*="deleteConfirmation"] .modal-header .modal-title,
[id*="DeleteConfirmation"] .modal-header .modal-title,
[id*="eliminarModal"] .modal-header .modal-title,
[id*="EliminarModal"] .modal-header .modal-title {
    color: inherit !important;
}

[id*="deleteModal"] .modal-header .btn-close,
[id*="DeleteModal"] .modal-header .btn-close,
[id*="deleteConfirmation"] .modal-header .btn-close,
[id*="DeleteConfirmation"] .modal-header .btn-close,
[id*="eliminarModal"] .modal-header .btn-close,
[id*="EliminarModal"] .modal-header .btn-close {
    filter: none !important;
}

/* ========================================
   RESPONSIVE STYLES FOR MOBILE DEVICES
   ======================================== */

/* Tablas responsive en móvil */
@media (max-width: 767.98px) {
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        width: 100% !important;
    }
    
    .table {
        font-size: 0.875rem !important;
        min-width: 600px !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }
    
    .table th,
    .table td {
        padding: 0.5rem 0.25rem !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }
    
    /* Botones de acción más pequeños pero táctiles */
    .btn-sm {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.75rem !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    
    /* Badges más pequeños */
    .badge {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    /* Asegurar que las cards sean responsive */
    .card {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Modales responsive */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .modal-content {
        border-radius: 0.5rem;
    }
    
    .modal-header {
        padding: 0.75rem 1rem;
    }
    
    .modal-title {
        font-size: 1rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .modal-footer {
        padding: 0.75rem 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .modal-footer .btn {
        width: 100%;
        margin: 0;
    }
    
    /* Formularios en móvil */
    .form-control,
    .form-select {
        font-size: 16px; /* Previene zoom en iOS */
        padding: 0.75rem;
    }
    
    .form-label {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }
    
    /* Cards más compactas */
    .card {
        margin-bottom: 1rem;
        border-radius: 0.5rem;
    }
    
    .card-header {
        padding: 0.75rem 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .card-title {
        font-size: 1.1rem;
    }
}

/* Mejoras para pantallas táctiles */
@media (hover: none) and (pointer: coarse) {
    /* Botones más grandes para facilitar el toque */
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 1rem;
    }
    
    .btn-sm {
        min-height: 36px;
        min-width: 36px;
        padding: 0.375rem 0.75rem;
    }
    
    /* Links más grandes */
    a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    
    /* Inputs más grandes */
    .form-control,
    .form-select {
        min-height: 44px;
    }
    
    /* Switches más grandes */
    .form-check-input {
        width: 3.5rem;
        height: 2rem;
    }
}

/* Header móvil mejorado */
@media (max-width: 991.98px) {
    .iq-banner {
        padding: 0.5rem 0;
    }
    
    .iq-banner .iq-banner-content {
        padding: 1rem 0.75rem;
    }
    
    .iq-banner .iq-banner-content h1 {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }
    
    .iq-banner .iq-banner-content p {
        font-size: 0.875rem;
    }
    
    /* Botón de menú móvil */
    .btn-primary.btn-sm {
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Paginación responsive */
@media (max-width: 575.98px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }
    
    .pagination .page-link {
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
        min-width: 36px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .pagination .page-item:first-child .page-link,
    .pagination .page-item:last-child .page-link {
        padding: 0.375rem 0.75rem;
    }
    
    .pagination-container {
        padding: 0.5rem;
    }
    
    .pagination-container .text-muted {
        font-size: 0.75rem;
        margin-top: 0.5rem;
    }
}

/* Dropdowns responsive */
@media (max-width: 575.98px) {
    .dropdown-menu {
        max-width: calc(100vw - 2rem);
        left: auto !important;
        right: 1rem !important;
    }
    
    .dropdown-item {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* Sidebar overlay para móvil */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: none;
}

@media (max-width: 991.98px) {
    .sidebar-overlay {
        display: block;
    }
    
    .sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }
}

/* Ajustes para el header móvil */
@media (max-width: 991.98px) {
    .d-lg-none {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .user-info {
        display: none;
    }
    
    .user-dropdown-btn {
        padding: 0.25rem !important;
    }
    
    .logo-title {
        font-size: 0.9rem !important;
    }
}

/* Mejoras para formularios de búsqueda y filtros */
@media (max-width: 767.98px) {
    .universal-search-filter {
        padding: 0.75rem;
    }
    
    .search-input-group {
        margin-bottom: 0.75rem;
    }
    
    .filter-buttons {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .filter-btn {
        flex: 1 1 auto;
        min-width: calc(50% - 0.25rem);
    }
}

/* Ajustes para switches en móvil */
@media (max-width: 575.98px) {
    .form-check-input.status-switch {
        width: 3.5rem;
        height: 2rem;
    }
    
    .form-check-label {
        font-size: 0.875rem;
    }
}

/* Mejoras de espaciado en móvil */
@media (max-width: 767.98px) {
    .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
    
    .row > * {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .mb-3 {
        margin-bottom: 0.75rem !important;
    }
    
    .mb-4 {
        margin-bottom: 1rem !important;
    }
    
    .mt-4 {
        margin-top: 1rem !important;
    }
}

/* Ajustes para el contenedor principal */
@media (max-width: 575.98px) {
    .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    .card {
        border-radius: 0.5rem !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        margin-bottom: 1rem !important;
    }
    
    /* Asegurar que el contenido no se desborde */
    .iq-banner {
        padding: 0.5rem 0 !important;
    }
    
    .iq-banner .iq-banner-content {
        padding: 1rem 0.75rem !important;
    }
}