/**
 * LUUK Bootstrap Fixes
 * Corrige estilos de Bootstrap que fueron sobreescritos incorrectamente en MyCss.css
 * Cargar DESPUES de MyCss.css
 */

/* ============================================
   HEADER CONTRAST - Logo y texto adaptativo
   ============================================ */

/* Logo LUUK - se vuelve blanco en headers oscuros */
.navbar-brand-logo-normal {
    filter: var(--header-logo-filter, none);
    transition: filter 0.2s ease;
}

/* Botón cerrar sesión - color adaptativo */
#logOutButton {
    color: var(--header-text-color, #ffffff) !important;
    transition: color 0.2s ease, opacity 0.2s ease;
}

#logOutButton:hover {
    opacity: 0.8;
}

#logOutButton i {
    color: var(--header-text-color, #ffffff) !important;
}

/* Info del cliente en navbar */
#InfoMenu p,
#NombreCliente,
#EmailCliente {
    color: var(--header-text-color, #ffffff) !important;
}

/* ============================================
   BUTTON FIXES
   MyCss.css tiene btn-danger verde - debe ser rojo
   ============================================ */

/* Primary - Usa el color de la marca */
.btn-primary {
    background-color: var(--color, #29c178) !important;
    border-color: var(--color, #29c178) !important;
    color: var(--colort, #fff) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    background-color: var(--color2, #1a8f5a) !important;
    border-color: var(--color2, #1a8f5a) !important;
}

/* Success - Verde esmeralda */
.btn-success {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    color: #fff !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success.focus {
    background-color: #059669 !important;
    border-color: #059669 !important;
}

/* Warning - Amarillo/Naranja */
.btn-warning {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #fff !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
}

/* Danger - ROJO (MyCss.css lo puso verde) */
.btn-danger {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #fff !important;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
}

/* Default - Gris neutral */
.btn-default {
    background-color: #fff !important;
    border-color: #e5e7eb !important;
    color: #374151 !important;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus {
    background-color: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #1f2937 !important;
}

/* Link - Transparente con color de marca */
.btn-link {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--color, #29c178) !important;
}
.btn-link:hover,
.btn-link:focus {
    color: var(--color2, #1a8f5a) !important;
    text-decoration: underline !important;
    background-color: transparent !important;
}

/* ============================================
   TABLE FIXES
   Estilos modernos para tablas
   ============================================ */

.table {
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.table > thead > tr > th {
    background: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 12px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
}

.table > tbody > tr > td {
    padding: 14px 16px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    border-top: none !important;
    font-size: 14px;
    color: #374151;
    vertical-align: middle;
}

.table > tbody > tr:last-child > td {
    border-bottom: none !important;
}

.table-hover > tbody > tr:hover {
    background: #f9fafb !important;
}

/* ============================================
   PANEL FIXES
   Estilos modernos para paneles
   ============================================ */

.panel {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    background: #fff;
}

.panel-default > .panel-heading {
    background: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 14px 18px !important;
    border-radius: 8px 8px 0 0 !important;
}

.panel-default > .panel-heading .panel-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

.panel-body {
    padding: 18px !important;
}

.panel-footer {
    background: #f9fafb !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 14px 18px !important;
    border-radius: 0 0 8px 8px !important;
}

/* ============================================
   BADGE FIXES
   ============================================ */

.badge {
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
}

.label-success,
.badge-success {
    background-color: #10b981 !important;
}

.label-warning,
.badge-warning {
    background-color: #f59e0b !important;
}

.label-danger,
.badge-danger {
    background-color: #ef4444 !important;
}

.label-info,
.badge-info {
    background-color: #3b82f6 !important;
}

.label-default,
.badge-default {
    background-color: #6b7280 !important;
}

/* ============================================
   FORM CONTROL FIXES
   ============================================ */

.form-control {
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 9px 12px !important;
    font-size: 14px !important;
    color: #374151 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.form-control:focus {
    border-color: var(--color, #29c178) !important;
    box-shadow: 0 0 0 3px rgba(41, 193, 120, 0.15) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: #9ca3af !important;
}

/* ============================================
   ALERT FIXES
   ============================================ */

.alert {
    border-radius: 8px !important;
    padding: 14px 18px !important;
    border-width: 1px !important;
}

.alert-success {
    background-color: #d1fae5 !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
}

.alert-warning {
    background-color: #fef3c7 !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

.alert-danger {
    background-color: #fee2e2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

.alert-info {
    background-color: #dbeafe !important;
    border-color: #bfdbfe !important;
    color: #1e40af !important;
}

/* ============================================
   MODAL FIXES
   ============================================ */

.modal-content {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

.modal-header {
    padding: 18px 24px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.modal-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

.modal-body {
    padding: 24px !important;
}

.modal-footer {
    padding: 18px 24px !important;
    border-top: 1px solid #e5e7eb !important;
    background: #f9fafb !important;
    border-radius: 0 0 12px 12px !important;
}

/* ============================================
   LOGIN & REGISTER PAGE FIXES
   Inputs sobre fondo oscuro - Material Design style
   ============================================ */

/* Input base - borde inferior gris claro */
body.page-login .form-control,
body.page-login input.form-control,
.page-login .form-material .form-control,
body.page-register .form-control,
body.page-register input.form-control,
.page-register .form-material .form-control {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 0 !important;
    color: #fff !important;
    padding: 8px 0 !important;
    box-shadow: none !important;
    font-size: 15px !important;
    transition: border-color 0.2s ease !important;
}

/* Hover - borde verde */
body.page-login .form-control:hover,
body.page-login input.form-control:hover,
.page-login .form-material .form-control:hover,
body.page-register .form-control:hover,
body.page-register input.form-control:hover,
.page-register .form-material .form-control:hover {
    border-bottom: 1px solid var(--color, #29c178) !important;
}

/* Focus - borde verde más grueso */
body.page-login .form-control:focus,
body.page-login input.form-control:focus,
.page-login .form-material .form-control:focus,
body.page-register .form-control:focus,
body.page-register input.form-control:focus,
.page-register .form-material .form-control:focus {
    border-bottom: 2px solid var(--color, #29c178) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Floating labels */
body.page-login .floating-label,
.page-login .form-material .floating-label,
body.page-register .floating-label,
.page-register .form-material .floating-label {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 14px !important;
}

/* Label cuando hay texto o focus */
body.page-login .form-material.floating .form-control:not(.empty) ~ .floating-label,
body.page-login .form-material.floating .form-control:focus ~ .floating-label,
body.page-register .form-material.floating .form-control:not(.empty) ~ .floating-label,
body.page-register .form-material.floating .form-control:focus ~ .floating-label {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 12px !important;
}

/* Botón principal - Login & Register */
body.page-login .btn-primary,
body.page-register .btn-primary {
    background-color: var(--color, #29c178) !important;
    border-color: var(--color, #29c178) !important;
    transition: all 0.2s ease !important;
}

body.page-login .btn-primary:hover,
body.page-login .btn-primary:focus,
body.page-register .btn-primary:hover,
body.page-register .btn-primary:focus {
    background-color: #1fa366 !important;
    border-color: #1fa366 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(41, 193, 120, 0.4) !important;
}

/* ============================================
   LOGIN & REGISTER ANIMATIONS
   ============================================ */

/* Fade in del contenido */
@keyframes loginFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.page-login .page-content,
body.page-login .vertical-align-middle,
body.page-register .page-content,
body.page-register .vertical-align-middle {
    animation: loginFadeIn 0.5s ease-out;
}

/* Logo pulse sutil */
@keyframes logoPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

body.page-login .brand-img,
body.page-register .brand-img {
    animation: logoPulse 3s ease-in-out infinite;
}

/* Input focus animation */
body.page-login .form-control,
body.page-register .form-control {
    transition: border-color 0.2s ease, transform 0.2s ease !important;
}

body.page-login .form-control:focus,
body.page-register .form-control:focus {
    transform: translateX(2px);
}

/* Link hover animations */
body.page-login a,
body.page-login [onclick],
body.page-register a,
body.page-register [onclick] {
    transition: color 0.2s ease, opacity 0.2s ease !important;
}

body.page-login a:hover,
body.page-login [onclick]:hover,
body.page-register a:hover,
body.page-register [onclick]:hover {
    opacity: 0.8;
}

/* ============================================
   GLOBAL ANIMATIONS - Todas las páginas
   ============================================ */

/* Fade in general */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Contenido principal */
.page-content,
.site-menubar-body,
.panel,
.card {
    animation: fadeInUp 0.4s ease-out;
}

/* Stagger para múltiples elementos */
.panel:nth-child(1), .card:nth-child(1) { animation-delay: 0s; }
.panel:nth-child(2), .card:nth-child(2) { animation-delay: 0.05s; }
.panel:nth-child(3), .card:nth-child(3) { animation-delay: 0.1s; }
.panel:nth-child(4), .card:nth-child(4) { animation-delay: 0.15s; }

/* Botones - hover lift más notorio */
.btn {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn:hover {
    transform: translateY(-3px) scale(1.02);
}

.btn:active {
    transform: translateY(-1px) scale(0.98);
}

.btn-primary:hover {
    box-shadow: 0 8px 20px rgba(41, 193, 120, 0.4);
}

.btn-danger:hover {
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
}

.btn-warning:hover {
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
}

.btn-success:hover {
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.btn-default:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Links */
a {
    transition: all 0.2s ease;
}

a:hover {
    color: var(--color, #29c178) !important;
}

/* Cards y Panels - hover más notorio */
.panel,
.card,
.widget {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel:hover,
.card:hover,
.widget:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* Tablas - row hover más visible */
.table > tbody > tr {
    transition: background-color 0.2s ease;
}

.table-hover > tbody > tr:hover {
    background-color: rgba(41, 193, 120, 0.08) !important;
}

/* Inputs - focus */
.form-control {
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Dropdowns */
.dropdown-menu {
    animation: fadeIn 0.15s ease-out;
}

/* Modals */
.modal.fade .modal-dialog {
    transition: transform 0.2s ease-out;
}

.modal.fade.in .modal-dialog {
    transform: translateY(0);
}

/* Tooltips */
.tooltip {
    animation: fadeIn 0.15s ease-out;
}

/* Sidebar items - solo para sidebar vertical */
.site-menubar .site-menu-item {
    transition: all 0.25s ease;
}

.site-menubar .site-menu-item > a {
    transition: all 0.25s ease;
}

.site-menubar .site-menu-item:hover > a {
    color: var(--color, #29c178) !important;
}

/* Menú horizontal - hover sutil */
.site-menu.nav-tabs .site-menu-item > a,
.nav-tabs .site-menu-item > a {
    transition: color 0.2s ease, border-color 0.2s ease;
}

.site-menu.nav-tabs .site-menu-item:hover > a,
.nav-tabs .site-menu-item:hover > a,
.site-menu-item:hover > a {
    color: var(--color, #29c178) !important;
}

.site-menu-item.active > a {
    color: var(--color, #29c178) !important;
    border-bottom-color: var(--color, #29c178) !important;
}

/* Icono del menú - hover scale */
.site-menu-item > a .site-menu-icon {
    transition: transform 0.2s ease;
}

.site-menu-item:hover > a .site-menu-icon {
    transform: scale(1.2);
}

/* Badges pulse para notificaciones */
@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.badge-danger,
.badge-warning {
    animation: badgePulse 2s ease-in-out infinite;
}

/* Loading spinner mejorado */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loader,
.loading-spinner,
.fa-spinner,
.icon-spinner {
    animation: spin 1s linear infinite;
}

/* Checkboxes y switches */
.switchery,
input[type="checkbox"] {
    transition: all 0.2s ease;
}

/* Progress bars */
.progress-bar {
    transition: width 0.4s ease;
}

/* Alerts */
.alert {
    animation: fadeInUp 0.3s ease-out;
}

/* Iconos hover más notorio */
.icon,
[class*="icon-"],
[class*="md-"] {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover .icon,
.btn:hover [class*="icon-"],
a:hover .icon,
a:hover [class*="icon-"] {
    transform: scale(1.2) rotate(5deg);
}

/* Inputs focus más visible */
.form-control:focus {
    border-color: var(--color, #29c178) !important;
    box-shadow: 0 0 0 3px rgba(41, 193, 120, 0.15) !important;
    outline: none !important;
}

/* Checkbox/Radio animations */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    animation: checkPop 0.3s ease;
}

@keyframes checkPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Hover en filas de listas */
.list-group-item {
    transition: all 0.2s ease;
}

.list-group-item:hover {
    transform: translateX(5px);
    border-left: 3px solid var(--color, #29c178);
    background-color: rgba(41, 193, 120, 0.05);
}

/* ============================================
   LAYOUT FIXES
   ============================================ */

.Principal {
    margin-top: 50px;
}

.TituloInforme {
    margin-top: 40px !important;
}

/* Botones Cambiar tipo de tabla - todos a la izquierda */
#TituloCambiarTipoDeTabla {
    margin-bottom: 10px;
    display: block;
    width: 100%;
}

.BotonCambiarQueTabla {
    display: inline-block !important;
    margin-right: 10px;
    margin-bottom: 10px;
    vertical-align: top;
}

.BotonCambiarQueTabla .BotonFiltrarHilos {
    margin: 0;
}

/* Botones cambiar tabla - en línea */
.BotonCambiarQueTabla {
    display: inline-block !important;
    float: none !important;
    vertical-align: top;
}

/* Botón Generar Excel - SIEMPRE en nueva línea */
.BotonExcel {
    display: block !important;
    width: fit-content !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    clear: both !important;
}

/* Forzar salto de línea antes de Excel con pseudo-elemento */
.BotonCambiarQueTabla:last-of-type::after {
    content: "";
    display: block;
    width: 100%;
    clear: both;
}

/* Todo lo que viene después de Excel debe limpiar */
.BotonExcel ~ *,
#FiltrosSeleccionados,
#FiltroColumnasHilos,
.dataTables_wrapper,
#DetalleRespuestas_wrapper {
    clear: both !important;
}

/* ============================================
   DATE PICKER - Usar colores de marca
   ============================================ */

/* Input de fecha - usar color2 */
.InformeEntreDates {
    border: 2px solid var(--color2, #092825) !important;
    border-radius: 6px !important;
    overflow: hidden;
}

.InformeEntreDates .input-group-addon {
    background-color: var(--color2, #092825) !important;
    border: none !important;
    color: var(--colort, #fff) !important;
}

.InformeEntreDates input#FiltroFechas {
    border: none !important;
    font-weight: 500;
    color: var(--color2, #092825);
}

.InformeEntreDates input#FiltroFechas:focus {
    outline: none;
    box-shadow: none;
}

/* Día seleccionado */
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.in-range {
    background-color: var(--color2, #092825) !important;
    border-color: var(--color2, #092825) !important;
    color: var(--colort, #fff) !important;
}

/* Rango entre fechas */
.daterangepicker td.in-range:not(.active) {
    background-color: rgba(9, 40, 37, 0.15) !important;
    color: #333 !important;
}

/* Hover en días */
.daterangepicker td:hover {
    background-color: rgba(9, 40, 37, 0.25) !important;
}

/* Botón Aplicar */
.daterangepicker .btn-primary,
.daterangepicker .applyBtn {
    background-color: var(--color2, #092825) !important;
    border-color: var(--color2, #092825) !important;
}

.daterangepicker .btn-primary:hover,
.daterangepicker .applyBtn:hover {
    background-color: var(--color, #29c178) !important;
    border-color: var(--color, #29c178) !important;
}

/* ============================================
   PAGE-SPECIFIC FIXES
   ============================================ */

/* Hide close popup button only on checkpoint page */
.page-checkpoint #CerrarPopUpExcel,
.page-checkpoint #CerrarPopUpEliminadosExcel {
    display: none !important;
}

/* ============================================
   NAVBAR / HEADER FIXES
   ============================================ */

/* Navbar toolbar links */
.navbar-toolbar-right > li > a {
    color: #64748b !important;
    transition: color 0.2s ease, background-color 0.2s ease !important;
    padding: 10px 15px !important;
    border-radius: 6px !important;
}

.navbar-toolbar-right > li > a:hover,
.navbar-toolbar-right > li > a:focus {
    color: #1e293b !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Cerrar sesión button específico - usa color del header */
#logOutButton {
    color: var(--header-text-color, #ffffff) !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#logOutButton:hover {
    opacity: 0.7 !important;
}

#logOutButton .icon {
    font-size: 16px !important;
    color: var(--header-text-color, #ffffff) !important;
}

/* ============================================
   NAVBAR FIXES - Centrado vertical
   ============================================ */

.site-navbar.navbar-fixed-top {
    min-height: 66px;
}

.navbar-toolbar-right {
    display: flex !important;
    align-items: center !important;
    height: 66px !important;
    margin: 0 !important;
    padding: 0 15px !important;
}

.navbar-toolbar-right > li {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

.navbar-toolbar-right > li > a {
    display: flex !important;
    align-items: center !important;
    height: 40px !important;
    padding: 0 15px !important;
    line-height: 1 !important;
}

#LogoCliente {
    margin: 0 15px 0 0 !important;
    max-height: 36px !important;
    max-width: 150px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

#InfoMenu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10px;
}

#InfoMenu p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    font-size: 11px !important;
}

/* ============================================
   MOBILE RESPONSIVE - Pantallas pequeñas
   ============================================ */

@media (max-width: 991px) {
    /* Sidebar oculto por defecto en mobile */
    .site-menubar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .site-menubar-open .site-menubar {
        transform: translateX(0);
    }

    /* Ajustar contenido principal */
    .page,
    .site-page {
        margin-left: 0 !important;
        padding: 15px !important;
    }

    /* Navbar más compacto */
    .navbar-toolbar-right {
        padding: 0 10px !important;
    }

    #InfoMenu {
        display: none !important;
    }

    /* Cards y paneles */
    .panel,
    .card {
        margin-bottom: 15px;
    }
}

@media (max-width: 768px) {
    /* Navbar ajustes */
    .site-navbar.navbar-fixed-top {
        min-height: 56px;
    }

    .navbar-toolbar-right {
        height: 56px !important;
        padding: 0 8px !important;
    }

    .navbar-brand-logo {
        max-height: 32px !important;
    }

    #LogoCliente {
        max-height: 32px !important;
        margin-right: 10px !important;
    }

    #logOutButton {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    #logOutButton span,
    #logOutButton .text {
        display: none !important;
    }

    /* ========================================
       MOBILE NAVBAR DROPDOWN - 3-dots menu
       El botón .navbar-toggle controla #site-navbar-collapse
       ======================================== */

    /* Botón de toggle (3 puntos) - asegurar visibilidad */
    .navbar-toggle,
    .navbar-toggler,
    button[data-toggle="collapse"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 100002 !important;
    }

    /* ========================================
       NAVBAR HEADER - Layout móvil
       [Burger] [Logo centro] [3-puntos]
       ======================================== */
    .navbar-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 56px !important;
        width: 100% !important;
        padding: 0 8px !important;
    }

    /* Burger a la izquierda - VISIBLE */
    .navbar-header .navbar-toggle-left,
    .navbar-header .navbar-toggle-left.hamburger,
    .navbar-header .navbar-toggle-left.hamburger.hided,
    .navbar-header button.navbar-toggle-left.hamburger.hamburger-close.hided {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        order: 1 !important;
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        flex-shrink: 0 !important;
        background: transparent !important;
        border: none !important;
        overflow: visible !important;
        margin-left: 0 !important;
    }

    /* Logo en el centro */
    .navbar-brand.navbar-brand-center {
        order: 2 !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        text-align: center !important;
    }

    /* 3 puntos a la derecha */
    .navbar-toggle.collapsed,
    .navbar-toggle[data-toggle="collapse"] {
        order: 3 !important;
        position: relative !important;
        margin: 0 !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    /* =============================================
       HAMBURGER - 3 barras usando box-shadow
       La barra del medio + box-shadow crea las 3 líneas
       ============================================= */

    /* Ocultar pseudo-elementos originales */
    .navbar-header .navbar-toggle-left.hamburger::before,
    .navbar-header .navbar-toggle-left.hamburger::after {
        display: none !important;
        content: none !important;
    }

    /* La barra del medio con box-shadow para crear las 3 líneas */
    .navbar-header .navbar-toggle-left.hamburger .hamburger-bar,
    .navbar-header .navbar-toggle-left.hamburger.hided .hamburger-bar,
    .navbar-header .navbar-toggle-left.hamburger.hamburger-close .hamburger-bar,
    .navbar-header .navbar-toggle-left.hamburger.hamburger-close.hided .hamburger-bar,
    .navbar-header button.hamburger .hamburger-bar,
    .hamburger-bar.FondoBlanco {
        display: block !important;
        width: 22px !important;
        height: 3px !important;
        background: var(--header-text-color, #ffffff) !important;
        border-radius: 2px !important;
        margin: 0 !important;
        opacity: 1 !important;
        position: relative !important;
        transform: none !important;
        /* Box-shadow crea las barras superior e inferior */
        box-shadow:
            0 -7px 0 0 var(--header-text-color, #ffffff),
            0 7px 0 0 var(--header-text-color, #ffffff) !important;
    }

    /* Ícono de 3 puntos (md-more) - derecha */
    .navbar-toggle .icon.md-more,
    .navbar-toggle i.icon.md-more {
        display: block !important;
        font-size: 24px !important;
        color: var(--header-text-color, #ffffff) !important;
    }

    .navbar-toggle:hover,
    .navbar-toggle:focus {
        background: rgba(255,255,255,0.1) !important;
        border-radius: 4px !important;
    }

    /* El contenedor cuando está expandido (.in) */
    #site-navbar-collapse.in,
    #site-navbar-collapse.collapse.in,
    .navbar-collapse.in,
    .navbar-collapse-toolbar.in {
        display: block !important;
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        background: #fff !important;
        border-radius: 0 0 12px 12px !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
        z-index: 100001 !important;
        padding: 10px 15px !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        border-top: 1px solid #e5e7eb !important;
    }

    /* La toolbar dentro del collapse */
    #site-navbar-collapse .navbar-toolbar-right,
    .navbar-collapse-toolbar .navbar-toolbar-right {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        background: #fff !important;
        height: auto !important;
        padding: 8px 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Ocultar logo del cliente en el menú mobile */
    #site-navbar-collapse #LogoCliente,
    .navbar-collapse-toolbar #LogoCliente {
        display: none !important;
    }

    /* Los items de la lista */
    #site-navbar-collapse .navbar-toolbar-right > li,
    .navbar-collapse-toolbar .navbar-toolbar-right > li {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Los links dentro de los items */
    #site-navbar-collapse .navbar-toolbar-right > li > a,
    #site-navbar-collapse .navbar-toolbar-right #logOutButton,
    .navbar-collapse-toolbar .navbar-toolbar-right > li > a {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        color: #374151 !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        border-radius: 0 !important;
        transition: background 0.2s ease !important;
    }

    #site-navbar-collapse .navbar-toolbar-right > li > a:hover,
    #site-navbar-collapse .navbar-toolbar-right #logOutButton:hover {
        background: #f3f4f6 !important;
        color: var(--color, #29c178) !important;
    }

    /* Icono de power/logout */
    #site-navbar-collapse #logOutButton .icon,
    #site-navbar-collapse #logOutButton i {
        font-size: 18px !important;
        color: inherit !important;
    }

    /* Mostrar el texto "Cerrar sesión" en mobile */
    #site-navbar-collapse #logOutButton span,
    #site-navbar-collapse #logOutButton .text {
        display: inline !important;
    }

    /* Info del usuario - ocultar o hacer compacto */
    #site-navbar-collapse #InfoMenu,
    #site-navbar-collapse .InfoMenuPadre {
        padding: 10px 20px !important;
        border-top: 1px solid #e5e7eb !important;
        margin-top: 5px !important;
    }

    #site-navbar-collapse #InfoMenu p {
        margin: 2px 0 !important;
        font-size: 12px !important;
        color: #6b7280 !important;
    }

    /* Hamburger toggle izquierdo - ocultar en este contexto */
    #site-navbar-collapse .navbar-toolbar:first-child {
        display: none !important;
    }

    /* Page header - COMPACTO en mobile */
    .page-header,
    .formularios-page-header,
    .ContenedorProcesosHeader {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        position: relative !important;
        z-index: 1 !important;
        padding: 10px 0 !important;
    }

    .page-header h1,
    .formularios-page-header h1,
    .ContenedorProcesosHeader h1,
    .formularios-page-title {
        font-size: 20px !important;
        margin-bottom: 0 !important;
        line-height: 1.2 !important;
    }

    /* Header left - título compacto */
    .formularios-header-left {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Ocultar link ayuda en mobile para ahorrar espacio */
    .formularios-help-link {
        display: none !important;
    }

    /* Header right - botón al lado */
    .formularios-header-right {
        flex-shrink: 0 !important;
    }

    /* Botón crear proceso - OVERRIDE position:fixed de MyCss.css */
    #AgregarTareaBoton {
        position: static !important;
        top: auto !important;
        right: auto !important;
        font-size: 13px !important;
        padding: 10px 20px !important;
        white-space: nowrap !important;
        width: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        background: var(--color, #29c178) !important;
        color: #fff !important;
        border-radius: 6px !important;
        border: none !important;
        z-index: 1 !important;
    }

    .formularios-page-header .btn-crear-proceso {
        font-size: 13px !important;
        padding: 10px 20px !important;
    }

    /* Filtros y controles */
    .InformeEntreDates {
        width: 100% !important;
    }

    .col-sm-4,
    .col-sm-6 {
        width: 100% !important;
        padding: 5px 15px !important;
    }

    /* ===== FORMULARIOS - Cards de procesos ===== */

    /* Card container */
    .panel-body .row {
        margin: 0 !important;
    }

    /* Action buttons - wrap en varias filas */
    .CardTarea .card-actions,
    .card-actions,
    .TareasActions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding-top: 8px !important;
        margin-top: 8px !important;
        border-top: 1px solid #f3f4f6 !important;
    }

    .CardTarea .card-actions .btn,
    .card-actions .btn,
    .TareasActions .btn,
    .TareasActions button {
        flex: 0 0 auto !important;
        font-size: 11px !important;
        padding: 6px 10px !important;
    }

    /* Cards de tareas más compactas */
    .CardTarea,
    .card-tarea {
        margin-bottom: 15px !important;
        padding: 12px !important;
    }

    .CardTarea .card-title,
    .card-tarea h4 {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    /* Icono de tarea más pequeño */
    .CardTarea .task-icon,
    .IconoTarea {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }

    /* Tablas responsive */
    .table-responsive {
        border: none;
    }

    /* Flow visualization toolbar */
    .flow-toolbar {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px !important;
    }

    .flow-toolbar .flow-tool-btn {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }

    .flow-toolbar > div:has(.zoom-out-btn) {
        order: 1;
    }

    /* Ocultar stats en mobile */
    .flow-toolbar > div:has(strong) {
        display: none !important;
    }

    /* Flow container más pequeño */
    .flow-container {
        max-height: 500px !important;
    }

    /* Filtros de secuencia más compactos */
    .sequence-filter-sidebar {
        max-width: 100% !important;
    }

    .flowchart-grid-layout {
        grid-template-columns: 1fr !important;
    }

    .filter-panel-content {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1000 !important;
        background: white !important;
        overflow-y: auto !important;
    }

    /* Botón crear proceso - full width y z-index menor al navbar (1500) */
    .btn-crear-proceso,
    #crearProceso,
    .CrearTarea {
        width: 100% !important;
        margin-bottom: 15px !important;
        z-index: 1400 !important;
    }

    /* Buscador full width */
    .BuscarProcesos,
    input[type="search"],
    .search-input {
        width: 100% !important;
    }

    /* Panel colapsables */
    .panel-heading {
        padding: 12px 15px !important;
    }

    .panel-title {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    /* Extra small screens */
    .page-header h1,
    .panel-title {
        font-size: 16px !important;
    }

    .btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    /* Tabs más pequeños */
    .tab-btn {
        padding: 8px 12px !important;
        font-size: 11px !important;
    }

    /* Nodos del flow más pequeños */
    .flow-node {
        width: 140px !important;
        padding: 10px !important;
        font-size: 11px !important;
    }

    /* Cards de checkpoint */
    .sequence-container {
        margin-bottom: 10px !important;
    }

    .sequence-header {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
}

/* Reducir animaciones si el usuario prefiere */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}