/* ===================================
   Integración hkaos + AdminLTE
   =================================== */

/* Override AdminLTE con estilos hkaos donde sea apropiado */

/* Content area con padding estilo hkaos */
.app-main .app-content {
    padding: var(--spacing-xl, 32px);
    background-color: var(--hkaos-bg, #F9FAFB);
}

/* Cards estilo hkaos que funcionan con AdminLTE */
.card.hkaos-style {
    background-color: var(--hkaos-card-bg, #FFFFFF);
    border: 1px solid var(--hkaos-border, #E5E7EB);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
    transition: all var(--transition-fast, 150ms ease);
}

.card.hkaos-style:hover {
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    border-color: var(--hkaos-purple-light, #9D8DF1);
}

.card.hkaos-style .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--hkaos-border, #E5E7EB);
    padding: var(--spacing-lg, 24px);
    font-weight: 600;
    color: var(--hkaos-text, #1F2937);
}

.card.hkaos-style .card-body {
    padding: var(--spacing-lg, 24px);
}

/* Botones estilo hkaos que funcionan con AdminLTE */
.btn.btn-hkaos-primary {
    background-color: var(--hkaos-purple, #7B68EE);
    border-color: var(--hkaos-purple, #7B68EE);
    color: white;
    border-radius: var(--radius-md, 8px);
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    font-weight: 500;
    transition: all var(--transition-fast, 150ms ease);
}

.btn.btn-hkaos-primary:hover {
    background-color: var(--hkaos-purple-dark, #6558D3);
    border-color: var(--hkaos-purple-dark, #6558D3);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.btn.btn-hkaos-secondary {
    background-color: white;
    border: 1px solid var(--hkaos-border, #E5E7EB);
    color: var(--hkaos-text, #1F2937);
    border-radius: var(--radius-md, 8px);
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    font-weight: 500;
    transition: all var(--transition-fast, 150ms ease);
}

.btn.btn-hkaos-secondary:hover {
    border-color: var(--hkaos-purple, #7B68EE);
    color: var(--hkaos-purple, #7B68EE);
}

/* Breadcrumb estilo hkaos */
.app-content-header .breadcrumb {
    background-color: transparent;
    padding: 0;
    margin: 0;
}

.app-content-header .breadcrumb-item {
    color: var(--hkaos-text-light, #6B7280);
    font-size: 14px;
}

.app-content-header .breadcrumb-item.active {
    color: var(--hkaos-text, #1F2937);
    font-weight: 500;
}

.app-content-header .breadcrumb-item a {
    color: var(--hkaos-text-light, #6B7280);
    text-decoration: none;
    transition: color var(--transition-fast, 150ms ease);
}

.app-content-header .breadcrumb-item a:hover {
    color: var(--hkaos-purple, #7B68EE);
}

/* Tablas estilo hkaos */
.table.table-hkaos {
    background-color: white;
}

.table.table-hkaos thead {
    background-color: var(--hkaos-bg, #F9FAFB);
}

.table.table-hkaos thead th {
    border-bottom: 1px solid var(--hkaos-border, #E5E7EB);
    padding: var(--spacing-md, 16px);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--hkaos-text-light, #6B7280);
}

.table.table-hkaos tbody td {
    padding: var(--spacing-md, 16px);
    border-bottom: 1px solid var(--hkaos-border, #E5E7EB);
    color: var(--hkaos-text, #1F2937);
}

.table.table-hkaos tbody tr:hover {
    background-color: var(--hkaos-purple-lighter, #E8E5FF);
}

/* Forms estilo hkaos */
.form-control.hkaos-input {
    border: 1px solid var(--hkaos-border, #E5E7EB);
    border-radius: var(--radius-md, 8px);
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    background-color: var(--hkaos-bg, #F9FAFB);
    color: var(--hkaos-text, #1F2937);
    font-size: 14px;
    transition: all var(--transition-fast, 150ms ease);
}

.form-control.hkaos-input:focus {
    outline: none;
    border-color: var(--hkaos-purple, #7B68EE);
    background-color: white;
    box-shadow: 0 0 0 3px var(--hkaos-purple-lighter, #E8E5FF);
}

.form-label.hkaos-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--hkaos-text, #1F2937);
    margin-bottom: var(--spacing-sm, 8px);
}

/* Small boxes / Stat cards estilo hkaos */
.small-box.hkaos-stat {
    border-radius: var(--radius-lg, 12px);
    padding: var(--spacing-lg, 24px);
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 16px);
    border: 1px solid var(--hkaos-border, #E5E7EB);
    background-color: white;
    transition: all var(--transition-fast, 150ms ease);
}

.small-box.hkaos-stat:hover {
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    transform: translateY(-2px);
}

.small-box.hkaos-stat .icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.small-box.hkaos-stat.purple .icon {
    background-color: var(--hkaos-purple-lighter, #E8E5FF);
    color: var(--hkaos-purple, #7B68EE);
}

.small-box.hkaos-stat.blue .icon {
    background-color: #E0F2FE;
    color: var(--hkaos-blue, #49CCF9);
}

.small-box.hkaos-stat.green .icon {
    background-color: #D1FAE5;
    color: var(--hkaos-green, #02C39A);
}

.small-box.hkaos-stat.orange .icon {
    background-color: #FFF7ED;
    color: var(--hkaos-orange, #FF8C42);
}

/* Modales estilo hkaos */
.modal-content.hkaos-modal {
    border: none;
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
}

.modal-content.hkaos-modal .modal-header {
    border-bottom: 1px solid var(--hkaos-border, #E5E7EB);
    padding: var(--spacing-lg, 24px);
    background-color: white;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
}

.modal-content.hkaos-modal .modal-title {
    font-weight: 600;
    color: var(--hkaos-text, #1F2937);
}

.modal-content.hkaos-modal .modal-body {
    padding: var(--spacing-lg, 24px);
}

.modal-content.hkaos-modal .modal-footer {
    border-top: 1px solid var(--hkaos-border, #E5E7EB);
    padding: var(--spacing-lg, 24px);
    background-color: var(--hkaos-bg, #F9FAFB);
    border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
}

/* Alerts estilo hkaos */
.alert.hkaos-alert {
    border-radius: var(--radius-md, 8px);
    border: 1px solid;
    padding: var(--spacing-md, 16px);
    font-size: 14px;
}

.alert.hkaos-alert.alert-info {
    background-color: #E0F2FE;
    border-color: #7DD3FC;
    color: #0369A1;
}

.alert.hkaos-alert.alert-success {
    background-color: #D1FAE5;
    border-color: #6EE7B7;
    color: #065F46;
}

.alert.hkaos-alert.alert-warning {
    background-color: #FEF3C7;
    border-color: #FCD34D;
    color: #92400E;
}

.alert.hkaos-alert.alert-danger {
    background-color: #FEE2E2;
    border-color: #FCA5A5;
    color: #991B1B;
}

/* Badges estilo hkaos */
.badge.hkaos-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.badge.hkaos-badge.badge-purple {
    background-color: var(--hkaos-purple-lighter, #E8E5FF);
    color: var(--hkaos-purple-dark, #6558D3);
}

.badge.hkaos-badge.badge-blue {
    background-color: #E0F2FE;
    color: #0369A1;
}

.badge.hkaos-badge.badge-green {
    background-color: #D1FAE5;
    color: #065F46;
}

.badge.hkaos-badge.badge-yellow {
    background-color: #FEF3C7;
    color: #92400E;
}

.badge.hkaos-badge.badge-red {
    background-color: #FEE2E2;
    color: #991B1B;
}

/* Navegación de tabs estilo hkaos */
.nav-tabs.hkaos-tabs {
    border-bottom: 2px solid var(--hkaos-border, #E5E7EB);
}

.nav-tabs.hkaos-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--hkaos-text-light, #6B7280);
    padding: var(--spacing-md, 16px) var(--spacing-lg, 24px);
    font-weight: 500;
    transition: all var(--transition-fast, 150ms ease);
}

.nav-tabs.hkaos-tabs .nav-link:hover {
    color: var(--hkaos-purple, #7B68EE);
    border-bottom-color: var(--hkaos-purple-light, #9D8DF1);
}

.nav-tabs.hkaos-tabs .nav-link.active {
    color: var(--hkaos-purple, #7B68EE);
    border-bottom-color: var(--hkaos-purple, #7B68EE);
    background-color: transparent;
}

/* Paginación estilo hkaos */
.pagination.hkaos-pagination {
    gap: var(--spacing-xs, 4px);
}

.pagination.hkaos-pagination .page-link {
    border: 1px solid var(--hkaos-border, #E5E7EB);
    border-radius: var(--radius-md, 8px);
    color: var(--hkaos-text, #1F2937);
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    margin: 0;
    transition: all var(--transition-fast, 150ms ease);
}

.pagination.hkaos-pagination .page-link:hover {
    background-color: var(--hkaos-purple-lighter, #E8E5FF);
    border-color: var(--hkaos-purple, #7B68EE);
    color: var(--hkaos-purple, #7B68EE);
}

.pagination.hkaos-pagination .page-item.active .page-link {
    background-color: var(--hkaos-purple, #7B68EE);
    border-color: var(--hkaos-purple, #7B68EE);
    color: white;
}

/* Dropdown menus estilo hkaos */
.dropdown-menu.hkaos-dropdown {
    border: 1px solid var(--hkaos-border, #E5E7EB);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    padding: var(--spacing-sm, 8px);
}

.dropdown-menu.hkaos-dropdown .dropdown-item {
    border-radius: var(--radius-sm, 4px);
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    color: var(--hkaos-text, #1F2937);
    transition: all var(--transition-fast, 150ms ease);
}

.dropdown-menu.hkaos-dropdown .dropdown-item:hover {
    background-color: var(--hkaos-purple-lighter, #E8E5FF);
    color: var(--hkaos-purple, #7B68EE);
}

/* Sidebar override para mejor integración */
.app-sidebar {
    background-color: var(--hkaos-sidebar-bg, #FFFFFF);
    border-right: 1px solid var(--hkaos-border, #E5E7EB);
    z-index: 1000; /* Debajo del header */
}

/* Ocultar el sidebar original de AdminLTE si existe */
.app-sidebar.sidebar {
    display: none !important;
}

.app-sidebar .nav-link {
    border-radius: var(--radius-md, 8px);
    margin: 2px var(--spacing-sm, 8px);
    transition: all var(--transition-fast, 150ms ease);
}

.app-sidebar .nav-link:hover {
    background-color: var(--hkaos-purple-lighter, #E8E5FF);
    color: var(--hkaos-purple-dark, #6558D3);
}

.app-sidebar .nav-link.active {
    background-color: var(--hkaos-purple, #7B68EE);
    color: white;
}

/* Header override - debe estar al lado del sidebar, no arriba */
.app-header {
    background-color: white;
    border-bottom: 1px solid var(--hkaos-border, #E5E7EB);
    z-index: 1020 !important; /* Por encima del sidebar (z-index: 1000) */
    position: fixed !important;
    top: 0;
    left: 260px; /* Ancho del sidebar */
    right: 0;
    transition: left var(--transition-fast, 150ms ease);
}

/* Cuando el sidebar está colapsado, el header ocupa todo el ancho */
body.sidebar-collapse .app-header {
    left: 0 !important;
}

/* Ajustar el padding del contenido para compensar el header fijo */
.app-wrapper .app-main {
    padding-top: 64px; /* Altura del header */
}

/* Cuando el sidebar NO está colapsado, dar espacio para el sidebar */
body:not(.sidebar-collapse) .app-wrapper .app-main {
    margin-left: 260px !important;
}

/* Cuando el sidebar está colapsado, el app-main ocupa todo el ancho */
body.sidebar-collapse .app-wrapper .app-main {
    margin-left: 0 !important;
}

/* Transición suave para el app-main */
.app-wrapper .app-main {
    transition: margin-left var(--transition-fast, 150ms ease) !important;
}

/* Asegurar que el header también se ajuste */
body:not(.sidebar-collapse) .app-header {
    left: 260px !important;
}

body.sidebar-collapse .app-header {
    left: 0 !important;
}

/* ===================================
   RESPONSIVE MOBILE LAYOUT
   =================================== */

@media (max-width: 768px) {
    /* En móvil, resetear posiciones */
    .app-header {
        position: static !important;
        left: 0 !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        z-index: 1020 !important;
    }

    /* El app-main en móvil NO debe tener margin-left nunca */
    .app-wrapper .app-main,
    body:not(.sidebar-collapse) .app-wrapper .app-main,
    body.sidebar-collapse .app-wrapper .app-main {
        margin-left: 0 !important;
        padding-top: 0 !important;
    }

    /* Asegurar que el contenido tenga espacio para el botón toggle móvil */
    .app-main .app-content {
        padding-top: 60px; /* Espacio para el botón toggle */
    }
}

/* Mejoras generales de espaciado */
.hkaos-spacing-sm {
    padding: var(--spacing-sm, 8px);
}

.hkaos-spacing-md {
    padding: var(--spacing-md, 16px);
}

.hkaos-spacing-lg {
    padding: var(--spacing-lg, 24px);
}

.hkaos-spacing-xl {
    padding: var(--spacing-xl, 32px);
}

/* Utility classes */
.hkaos-text-primary {
    color: var(--hkaos-purple, #7B68EE);
}

.hkaos-bg-primary {
    background-color: var(--hkaos-purple, #7B68EE);
}

.hkaos-border-primary {
    border-color: var(--hkaos-purple, #7B68EE);
}

/* Responsive */
@media (max-width: 768px) {
    .app-main .app-content {
        padding: var(--spacing-md, 16px);
    }
}