templates/admin/base_admin.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Panel de Administración - ImagingPro</title>
  7.     <link rel="icon" type="image/png" href="{{ asset('images/favicon-32-2.png') }}">
  8.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  9.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  11.    <style>
  12.         :root {
  13.             --primary-color: #3498db;
  14.             --secondary-color: #2c3e50;
  15.             --accent-color: #e74c3c;
  16.             --success-color: #27ae60;
  17.             --warning-color: #f39c12;
  18.             --light-color: #ecf0f1;
  19.             --dark-color: #34495e;
  20.             --admin-bg: #f8f9fa;
  21.         }
  22.         
  23.         * {
  24.             margin: 0;
  25.             padding: 0;
  26.             box-sizing: border-box;
  27.             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  28.         }
  29.         
  30.         body {
  31.             background-color: var(--admin-bg);
  32.             color: #333;
  33.             line-height: 1.6;
  34.             overflow-x: hidden; /* Previene scroll horizontal global */
  35.         }
  36.         
  37.         /* ===== LAYOUT PRINCIPAL ===== */
  38.         .admin-container {
  39.             display: flex;
  40.             min-height: 100vh;
  41.             overflow-x: hidden; /* Previene scroll horizontal */
  42.         }
  43.         
  44.         /* ===== SIDEBAR ===== */
  45.         .admin-sidebar {
  46.             width: 280px;
  47.             background: linear-gradient(135deg, var(--secondary-color) 0%, var(--dark-color) 100%);
  48.             color: white;
  49.             transition: all 0.3s ease;
  50.             box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  51.             z-index: 1000;
  52.             position: fixed;
  53.             left: 0;
  54.             top: 0;
  55.             height: 100vh;
  56.             display: flex;
  57.             flex-direction: column;
  58.             overflow: hidden; /* Previene scroll horizontal en el sidebar */
  59.         }
  60.         
  61.         .admin-main-content {
  62.             margin-left: 280px;
  63.             transition: all 0.3s ease;
  64.             min-height: 100vh;
  65.             width: calc(100% - 280px);
  66.             overflow-x: hidden; /* Previene scroll horizontal en el contenido */
  67.         }
  68.         
  69.         /* Header del Sidebar */
  70.         .admin-sidebar-header {
  71.             padding: 1.5rem;
  72.             border-bottom: 1px solid rgba(255,255,255,0.1);
  73.             text-align: center;
  74.             flex-shrink: 0;
  75.         }
  76.         
  77.         .admin-sidebar-header h2 {
  78.             font-size: 1.5rem;
  79.             margin-bottom: 1rem;
  80.         }
  81.         
  82.         .admin-user-info {
  83.             text-align: center;
  84.         }
  85.         
  86.         .admin-avatar {
  87.             width: 70px;
  88.             height: 70px;
  89.             background: linear-gradient(135deg, var(--primary-color), #2980b9);
  90.             border-radius: 50%;
  91.             display: flex;
  92.             align-items: center;
  93.             justify-content: center;
  94.             color: white;
  95.             font-weight: bold;
  96.             font-size: 1.8rem;
  97.             margin: 0 auto 1rem;
  98.             border: 3px solid rgba(255,255,255,0.2);
  99.         }
  100.         
  101.         .admin-user-name {
  102.             font-weight: 600;
  103.             margin-bottom: 0.25rem;
  104.         }
  105.         
  106.         .admin-user-email {
  107.             font-size: 0.85rem;
  108.             color: rgba(255,255,255,0.7);
  109.         }
  110.         
  111.         /* Navegación del Sidebar - Área con scroll */
  112.         .admin-nav-container {
  113.             flex: 1;
  114.             display: flex;
  115.             flex-direction: column;
  116.             overflow: hidden;
  117.             width: 100%; /* Asegura que no se desborde */
  118.         }
  119.         
  120.         .admin-nav {
  121.             padding: 1.5rem 0;
  122.             flex: 1;
  123.             overflow-y: auto;
  124.             overflow-x: hidden; /* Elimina scroll horizontal */
  125.             max-height: calc(100vh - 280px);
  126.             width: 100%; /* Asegura que ocupe todo el ancho disponible */
  127.         }
  128.         
  129.         .admin-nav-section {
  130.             margin-bottom: 1.5rem;
  131.             width: 100%; /* Asegura que no cause desbordamiento */
  132.         }
  133.         
  134.         .admin-nav-title {
  135.             font-size: 0.8rem;
  136.             text-transform: uppercase;
  137.             padding: 0.5rem 1.5rem;
  138.             color: rgba(255,255,255,0.6);
  139.             letter-spacing: 1px;
  140.             margin-bottom: 0.5rem;
  141.             width: 100%;
  142.             overflow: hidden; /* Previene desbordamiento de texto */
  143.         }
  144.         
  145.         .admin-nav-item {
  146.             display: flex;
  147.             align-items: center;
  148.             padding: 0.75rem 1.5rem;
  149.             color: rgba(255,255,255,0.9);
  150.             text-decoration: none;
  151.             transition: all 0.3s ease;
  152.             border-left: 3px solid transparent;
  153.             position: relative;
  154.             width: 100%; /* Ocupa todo el ancho disponible */
  155.             white-space: nowrap; /* Evita que el texto se divida en varias líneas */
  156.             overflow: hidden; /* Oculta cualquier contenido que se desborde */
  157.         }
  158.         
  159.         .admin-nav-item:hover {
  160.             background: rgba(255,255,255,0.1);
  161.             color: white;
  162.             border-left-color: var(--primary-color);
  163.             transform: translateX(5px);
  164.         }
  165.         
  166.         .admin-nav-item.active {
  167.             background: rgba(52, 152, 219, 0.2);
  168.             color: white;
  169.             border-left-color: var(--primary-color);
  170.         }
  171.         
  172.         .admin-nav-icon {
  173.             width: 20px;
  174.             margin-right: 12px;
  175.             font-size: 1.1rem;
  176.             text-align: center;
  177.             flex-shrink: 0; /* Evita que el icono se reduzca */
  178.         }
  179.         
  180.         .admin-nav-badge {
  181.             background: var(--accent-color);
  182.             color: white;
  183.             border-radius: 10px;
  184.             padding: 2px 8px;
  185.             font-size: 0.7rem;
  186.             margin-left: auto;
  187.             flex-shrink: 0; /* Evita que la badge se reduzca */
  188.         }
  190.         /* Submenú para Agenda de Citas */
  191.         .admin-nav-item.has-submenu {
  192.             cursor: pointer;
  193.         }
  195.         .admin-submenu {
  196.             list-style: none;
  197.             max-height: 0;
  198.             overflow: hidden;
  199.             transition: max-height 0.3s ease;
  200.             background: rgba(0, 0, 0, 0.2);
  201.             width: 100%; /* Asegura que ocupe todo el ancho */
  202.         }
  204.         .admin-submenu.open {
  205.             max-height: 300px;
  206.         }
  208.         .admin-submenu-item {
  209.             padding: 0.6rem 1.5rem 0.6rem 3rem;
  210.             color: rgba(255, 255, 255, 0.8);
  211.             text-decoration: none;
  212.             display: block;
  213.             transition: all 0.2s ease;
  214.             border-left: 3px solid transparent;
  215.             font-size: 0.9rem;
  216.             width: 100%; /* Ocupa todo el ancho */
  217.             white-space: nowrap; /* Evita división de texto */
  218.             overflow: hidden; /* Oculta desbordamiento */
  219.         }
  221.         .admin-submenu-item:hover {
  222.             background: rgba(255, 255, 255, 0.05);
  223.             color: white;
  224.             border-left-color: rgba(255, 255, 255, 0.3);
  225.         }
  227.         .admin-submenu-item.active {
  228.             background: rgba(52, 152, 219, 0.15);
  229.             color: white;
  230.             border-left-color: var(--primary-color);
  231.         }
  233.         .admin-nav-arrow {
  234.             transition: transform 0.3s ease;
  235.             margin-left: auto;
  236.             font-size: 0.8rem;
  237.             flex-shrink: 0; /* Evita que la flecha se reduzca */
  238.         }
  240.         .admin-nav-arrow.rotated {
  241.             transform: rotate(180deg);
  242.         }
  243.         
  244.         /* Footer del Sidebar - Siempre visible en la parte inferior */
  245.         .admin-sidebar-footer {
  246.             padding: 1rem 1.5rem;
  247.             border-top: 1px solid rgba(255,255,255,0.1);
  248.             background: rgba(0,0,0,0.1);
  249.             flex-shrink: 0;
  250.             width: 100%; /* Asegura que ocupe todo el ancho */
  251.         }
  252.         
  253.         /* Scroll personalizado para el sidebar */
  254.         .admin-nav::-webkit-scrollbar {
  255.             width: 6px;
  256.         }
  257.         
  258.         .admin-nav::-webkit-scrollbar-track {
  259.             background: rgba(255,255,255,0.1);
  260.             border-radius: 3px;
  261.         }
  262.         
  263.         .admin-nav::-webkit-scrollbar-thumb {
  264.             background: rgba(255,255,255,0.3);
  265.             border-radius: 3px;
  266.         }
  267.         
  268.         .admin-nav::-webkit-scrollbar-thumb:hover {
  269.             background: rgba(255,255,255,0.5);
  270.         }
  271.         
  272.         /* ===== CONTENIDO PRINCIPAL ===== */
  273.         .admin-header {
  274.             background: white;
  275.             border-bottom: 1px solid #e9ecef;
  276.             padding: 1rem 1.5rem;
  277.             box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  278.             display: flex;
  279.             align-items: center;
  280.             justify-content: space-between;
  281.             width: 100%; /* Asegura que no cause desbordamiento */
  282.             overflow: hidden; /* Previene desbordamiento */
  283.         }
  284.         
  285.         .admin-mobile-toggle {
  286.             display: none;
  287.             background: transparent;
  288.             border: 2px solid #e9ecef;
  289.             border-radius: 6px;
  290.             padding: 8px 12px;
  291.             color: var(--secondary-color);
  292.             transition: all 0.3s ease;
  293.             margin-right: 15px;
  294.             flex-shrink: 0; /* Evita que el botón se reduzca */
  295.         }
  296.         
  297.         .admin-mobile-toggle:hover {
  298.             background: var(--primary-color);
  299.             color: white;
  300.             border-color: var(--primary-color);
  301.         }
  302.         
  303.         .admin-content {
  304.             padding: 1.5rem;
  305.             width: 100%; /* Asegura que ocupe todo el ancho disponible */
  306.             overflow-x: hidden; /* Elimina scroll horizontal */
  307.         }
  308.         
  309.         /* ===== OVERLAY PARA MÓVIL ===== */
  310.         .admin-sidebar-overlay {
  311.             position: fixed;
  312.             top: 0;
  313.             left: 0;
  314.             width: 100%;
  315.             height: 100%;
  316.             background: rgba(0,0,0,0.5);
  317.             z-index: 999;
  318.             opacity: 0;
  319.             visibility: hidden;
  320.             transition: all 0.3s ease;
  321.         }
  322.         
  323.         .admin-sidebar-overlay.show {
  324.             opacity: 1;
  325.             visibility: visible;
  326.         }
  327.         
  328.         /* ===== RESPONSIVE ===== */
  329.         @media (max-width: 768px) {
  330.             .admin-sidebar {
  331.                 left: -280px;
  332.             }
  333.             
  334.             .admin-sidebar.mobile-open {
  335.                 left: 0;
  336.             }
  337.             
  338.             .admin-main-content {
  339.                 margin-left: 0;
  340.                 width: 100%;
  341.             }
  342.             
  343.             .admin-mobile-toggle {
  344.                 display: block;
  345.             }
  346.             
  347.             /* Ajustes adicionales para móviles */
  348.             .admin-nav-item,
  349.             .admin-submenu-item {
  350.                 white-space: normal; /* Permite que el texto se divida en móviles */
  351.                 padding: 0.75rem 1rem;
  352.             }
  353.             
  354.             .admin-submenu-item {
  355.                 padding-left: 2.5rem;
  356.             }
  357.         }
  358.         
  359.         @media (min-width: 769px) and (max-width: 1024px) {
  360.             .admin-sidebar {
  361.                 width: 240px;
  362.             }
  363.             
  364.             .admin-main-content {
  365.                 margin-left: 240px;
  366.                 width: calc(100% - 240px);
  367.             }
  368.         }
  370.         .admin-header {
  371.             background: #fff;
  372.             border-bottom: 1px solid #dee2e6;
  373.             padding: 1rem 1.5rem;
  374.             box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  375.         }
  377.         .admin-mobile-toggle {
  378.             background: none;
  379.             border: none;
  380.             color: #6c757d;
  381.             font-size: 1.2rem;
  382.             padding: 0.5rem;
  383.             border-radius: 0.375rem;
  384.             transition: all 0.2s ease;
  385.         }
  387.         .admin-mobile-toggle:hover {
  388.             background: #f8f9fa;
  389.             color: #495057;
  390.         }
  392.         .admin-page-title {
  393.             font-size: 1.1rem;
  394.             font-weight: 600;
  395.             white-space: nowrap;
  396.             overflow: hidden;
  397.             text-overflow: ellipsis;
  398.             max-width: 300px; /* Limita el ancho del título */
  399.         }
  401.         .admin-mobile-avatar {
  402.             width: 36px;
  403.             height: 36px;
  404.             border-radius: 50%;
  405.             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  406.             color: white;
  407.             display: flex;
  408.             align-items: center;
  409.             justify-content: center;
  410.             font-weight: bold;
  411.             font-size: 0.8rem;
  412.             flex-shrink: 0;
  413.         }
  415.         /* Para móviles muy pequeños */
  416.         @media (max-width: 576px) {
  417.             .admin-header {
  418.                 padding: 0.75rem 1rem;
  419.             }
  420.             
  421.             .admin-page-title {
  422.                 font-size: 1rem;
  423.                 max-width: 200px;
  424.             }
  425.             
  426.             .admin-mobile-avatar {
  427.                 width: 32px;
  428.                 height: 32px;
  429.                 font-size: 0.7rem;
  430.             }
  431.             
  432.             .admin-nav-item,
  433.             .admin-submenu-item {
  434.                 padding: 0.6rem 1rem;
  435.             }
  436.         }
  437.     </style>
  438. </head>
  439. <body>
  440.     <div class="admin-container">
  441.         <!-- Overlay para móviles -->
  442.         <div class="admin-sidebar-overlay" id="adminSidebarOverlay"></div>
  443.         
  444.         <!-- Sidebar del Admin -->
  445.         <aside class="admin-sidebar" id="adminSidebar">
  446.             <div class="admin-sidebar-header">
  447.                 <h2>Panel Admin</h2>
  448.                 <div class="admin-user-info">
  449.                     <div class="admin-avatar">
  450.                        {{ app.user.name|first|upper }}{{ app.user.lastName|first|upper }}
  451.                     </div>
  452.                     <div class="admin-user-name">{{ app.user.name }} {{ app.user.lastName }}</div>
  453.                     <div class="admin-user-email">{{ app.user.email }}</div>
  454.                 </div>
  455.             </div>
  456.             
  457.             <!-- Contenedor para la navegación con scroll -->
  458.             <div class="admin-nav-container">
  459.                 <nav class="admin-nav">
  460.                     <div class="admin-nav-section">
  461.                         <a href="{{ path('admin_index') }}" class="admin-nav-item {% if app.request.attributes.get('_route') == 'admin_index' %}active{% endif %}">
  462.                             <i class="fas fa-tachometer-alt admin-nav-icon"></i>
  463.                             Dashboard
  464.                         </a>
  465.                         <a href="{{ path('admin_pacientes') }}" class="admin-nav-item {% if app.request.attributes.get('_route') == 'admin_pacientes' %}active{% endif %}">
  466.                             <i class="fas fa-user-injured admin-nav-icon"></i>
  467.                             Pacientes
  468.                         </a>
  469.                         <a href="{{ path('admin_proveedores') }}" class="admin-nav-item {% if app.request.attributes.get('_route') == 'admin_proveedores' %}active{% endif %}">
  470.                             <i class="fas fa-user-md admin-nav-icon"></i>
  471.                             Proveedores
  472.                         </a>
  473.                         
  474.                         <!-- Agenda de Citas con Submenú -->
  475.                         <div class="admin-nav-item has-submenu {% if 'admin_appointment' in app.request.attributes.get('_route') %}active{% endif %}" id="appointmentsMenu">
  476.                             <div class="d-flex align-items-center w-100">
  477.                                 <i class="fas fa-calendar-check admin-nav-icon"></i>
  478.                                 <span>Agenda de Citas</span>
  479.                                 <i class="fas fa-chevron-down admin-nav-arrow ms-auto" id="appointmentsArrow"></i>
  480.                             </div>
  481.                         </div>
  482.                         
  483.                         <ul class="admin-submenu" id="appointmentsSubmenu">
  484.                             <li>
  485.                                 <a href="{{ path('admin_appointment') }}" class="admin-submenu-item {% if app.request.attributes.get('_route') == 'admin_appointment' and not app.request.query.has('filter') %}active{% endif %}">
  486.                                     <i class="fas fa-list-ul me-2"></i>
  487.                                     Todas las Citas
  488.                                 </a>
  489.                             </li>
  490.                             <li>
  491.                                 <a href="{{ path('admin_appointment') }}?filter=confirmed" class="admin-submenu-item {% if app.request.query.get('filter') == 'confirmed' %}active{% endif %}">
  492.                                     <i class="fas fa-calendar-check me-2 text-success"></i>
  493.                                     Citas Confirmadas
  494.                                 </a>
  495.                             </li>
  496.                             <li>
  497.                                 <a href="{{ path('admin_appointment') }}?filter=completed" class="admin-submenu-item {% if app.request.query.get('filter') == 'completed' %}active{% endif %}">
  498.                                     <i class="fas fa-clipboard-check me-2 text-primary"></i>
  499.                                     Citas Finalizadas
  500.                                 </a>
  501.                             </li>
  502.                             <li>
  503.                                 <a href="{{ path('admin_appointment') }}?filter=cancelled" class="admin-submenu-item {% if app.request.query.get('filter') == 'cancelled' %}active{% endif %}">
  504.                                     <i class="fas fa-calendar-times me-2 text-danger"></i>
  505.                                     Citas Canceladas
  506.                                 </a>
  507.                             </li>
  508.                         </ul>
  509.                         
  510.                         <a href="{{ path('admin_horario') }}" class="admin-nav-item {% if app.request.attributes.get('_route') == 'admin_horario' %}active{% endif %}">
  511.                             <i class="fas fa-clock admin-nav-icon"></i>
  512.                             Horarios Médicos
  513.                         </a>
  514.                         <a href="{{ path('admin_profile') }}" class="admin-nav-item {% if app.request.attributes.get('_route') == 'admin_profile' %}active{% endif %}">
  515.                             <i class="fas fa-user-cog admin-nav-icon"></i>
  516.                             Perfil
  517.                         </a>
  518.                     </div>
  519.                 </nav>
  520.             </div>
  521.             
  522.             <!-- Footer fijo en la parte inferior -->
  523.             <div class="admin-sidebar-footer">
  524.                 <a href="{{ path('home_index') }}" class="admin-nav-item">
  525.                     <i class="fas fa-home admin-nav-icon"></i>
  526.                     Volver al Sitio
  527.                 </a>
  528.                 <a href="{{ path('app_logout') }}" class="admin-nav-item">
  529.                     <i class="fas fa-sign-out-alt admin-nav-icon"></i>
  530.                     Cerrar Sesión
  531.                 </a>
  532.             </div>
  533.         </aside>
  534.         
  535.         <!-- Contenido Principal -->
  536.         <main class="admin-main-content" id="adminMainContent">
  537.             <header class="admin-header">
  538.                 <div class="d-flex align-items-center justify-content-between w-100">
  539.                     <!-- Lado izquierdo: Toggle + Título -->
  540.                     <div class="d-flex align-items-center">
  541.                         <button class="admin-mobile-toggle me-2 me-md-3" id="adminMobileToggle">
  542.                             <i class="fas fa-bars"></i>
  543.                         </button>
  544.                         
  545.                         <!-- Título responsive sin truncar -->
  546.                         <h4 class="mb-0 text-dark admin-page-title">
  547.                             <span class="d-none d-md-inline">Panel de Administración</span>
  548.                             <span class="d-md-none">Panel de Admon</span>
  549.                         </h4>
  550.                     </div>
  551.                     
  552.                     <!-- Lado derecho: Información del usuario -->
  553.                     <div class="d-flex align-items-center">
  554.                         <!-- Versión móvil compacta -->
  555.                         <div class="d-md-none admin-mobile-user me-2">
  556.                             <div class="admin-mobile-avatar">
  557.                                 {{ app.user.name|first|upper }}{{ app.user.lastName|first|upper }}
  558.                             </div>
  559.                         </div>
  560.                         
  561.                         <!-- Versión desktop completa -->
  562.                         <div class="d-none d-md-block">
  563.                             <span class="text-muted">Bienvenido, {{ app.user.name }} {{ app.user.lastName }}</span>
  564.                         </div>
  565.                         
  566.                         <!-- Versión tablet intermedia -->
  567.                         <div class="d-none d-sm-block d-md-none">
  568.                             <span class="text-muted">Hola, {{ app.user.name }}</span>
  569.                         </div>
  570.                     </div>
  571.                 </div>
  572.             </header>
  573.             
  574.             <div class="admin-content">
  575.                {% block content %}{% endblock %}
  576.             </div>
  577.         </main>
  578.     </div>
  580.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  581.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  583.     {% block javascripts %}
  584.     {% endblock %}
  586.     <script>
  587.         document.addEventListener('DOMContentLoaded', function() {
  588.             const adminMobileToggle = document.getElementById('adminMobileToggle');
  589.             const adminSidebar = document.getElementById('adminSidebar');
  590.             const adminSidebarOverlay = document.getElementById('adminSidebarOverlay');
  591.             
  592.             // Elementos del submenú de citas
  593.             const appointmentsMenu = document.getElementById('appointmentsMenu');
  594.             const appointmentsSubmenu = document.getElementById('appointmentsSubmenu');
  595.             const appointmentsArrow = document.getElementById('appointmentsArrow');
  597.             // Control del submenú de citas
  598.             if (appointmentsMenu && appointmentsSubmenu) {
  599.                 appointmentsMenu.addEventListener('click', function(e) {
  600.                     e.preventDefault();
  601.                     appointmentsSubmenu.classList.toggle('open');
  602.                     appointmentsArrow.classList.toggle('rotated');
  603.                 });
  604.             }
  606.             // Control del menú móvil
  607.             if (adminMobileToggle && adminSidebar) {
  608.                 function toggleAdminSidebar() {
  609.                     adminSidebar.classList.toggle('mobile-open');
  610.                     adminSidebarOverlay.classList.toggle('show');
  611.                     document.body.style.overflow = adminSidebar.classList.contains('mobile-open') ? 'hidden' : '';
  612.                 }
  614.                 adminMobileToggle.addEventListener('click', toggleAdminSidebar);
  615.                 adminSidebarOverlay.addEventListener('click', toggleAdminSidebar);
  617.                 // Cerrar menú al hacer clic en un enlace (en móviles)
  618.                 const adminNavLinks = adminSidebar.querySelectorAll('.admin-nav-item, .admin-submenu-item');
  619.                 adminNavLinks.forEach(link => {
  620.                     link.addEventListener('click', function() {
  621.                         if (window.innerWidth <= 768) {
  622.                             toggleAdminSidebar();
  623.                         }
  624.                     });
  625.                 });
  627.                 // Cerrar con tecla Escape
  628.                 document.addEventListener('keydown', function(e) {
  629.                     if (e.key === 'Escape' && adminSidebar.classList.contains('mobile-open')) {
  630.                         toggleAdminSidebar();
  631.                     }
  632.                 });
  634.                 // Ajustar el layout en resize
  635.                 window.addEventListener('resize', function() {
  636.                     if (window.innerWidth > 768) {
  637.                         adminSidebar.classList.remove('mobile-open');
  638.                         adminSidebarOverlay.classList.remove('show');
  639.                         document.body.style.overflow = '';
  640.                     }
  641.                 });
  642.             }
  643.         });
  644.     </script>
  646.     {# Notificaciones globales - se convierten automáticamente a SweetAlert2 #}
  647.     {% include 'partials/_flashes.html.twig' %}
  648. </body>
  649. </html>