templates/header.html.twig line 1

Open in your IDE?
  1. <header class="header-profesional fixed-top">
  2.     <div class="container-xl">
  3.         <div class="header-content">
  4.             
  5.             {# Logo y marca - Lado izquierdo #}
  6.             <div class="header-brand">
  7.                 {# Botón hamburguesa solo móvil #}
  8.                 <button class="mobile-toggle d-lg-none" type="button" aria-label="Menú principal">
  9.                     <span class="toggle-bar"></span>
  10.                     <span class="toggle-bar"></span>
  11.                     <span class="toggle-bar"></span>
  12.                 </button>
  14.                 <a href="{{ path('home_index') }}" class="brand-link">
  15.                     <div class="brand-logo">
  16.                         <img src="{{ asset('images/logo-clinica.png') }}" 
  17.                              data-logo-light="{{ asset('images/logo-clinica.png') }}"
  18.                              data-logo-dark="{{ asset('images/logo-clinica-dark.png') }}"
  19.                              alt="ImagingPro - Centro de Diagnóstico" 
  20.                              class="logo-img">
  21.                     </div>
  22.                 </a>
  23.             </div>
  25.             {# Navegación principal - Centro #}
  26.             <nav class="header-nav d-none d-lg-flex">
  27.                 <ul class="nav-menu">
  28.                     <li class="nav-item">
  29.                         <a href="{{ path('home_index') }}" class="nav-link active">
  30.                             <i class="bi bi-house-door"></i>
  31.                             <span class="nav-text" data-lang="es">Inicio</span>
  32.                             <span class="nav-text" data-lang="en" style="display:none;">Home</span>
  33.                         </a>
  34.                     </li>
  35.                     <li class="nav-item">
  36.                         <a href="{{ path('home_index') }}#servicios" class="nav-link">
  37.                             <i class="bi bi-cpu-fill"></i>
  38.                             <span class="nav-text" data-lang="es">Servicios</span>
  39.                             <span class="nav-text" data-lang="en" style="display:none;">Services</span>
  40.                         </a>
  41.                     </li>
  42.                     <li class="nav-item">
  43.                         <a href="{{ path('home_index') }}#experiencia" class="nav-link">
  44.                             <i class="bi bi-heart-pulse"></i>
  45.                             <span class="nav-text" data-lang="es">Excelencia Médica</span>
  46.                             <span class="nav-text" data-lang="en" style="display:none;">Medical Excellence</span>
  47.                         </a>
  48.                     </li>
  49.                     <li class="nav-item">
  50.                         <a href="{{ path('home_index') }}#contacto" class="nav-link">
  51.                             <i class="bi bi-telephone"></i>
  52.                             <span class="nav-text" data-lang="es">Contacto</span>
  53.                             <span class="nav-text" data-lang="en" style="display:none;">Contact</span>
  54.                         </a>
  55.                     </li>
  56.                     <li class="nav-item">
  57.                         <a href="{{ path('home_index') }}#formas-medicas" class="nav-link">
  58.                             <i class="fa fa-file-medical"></i>
  59.                             <span class="nav-text" data-lang="es">Formas Médicas</span>
  60.                             <span class="nav-text" data-lang="en" style="display:none;">Medical Forms</span>
  61.                         </a>
  62.                     </li>
  63.                 </ul>
  64.             </nav>
  66.             {# Acciones - Lado derecho #}
  67.             <div class="header-actions">
  68.                 {# Selector de idioma circular moderno #}
  69.                 <div class="language-selector-wrapper">
  70.                     <button class="language-trigger" id="languageTrigger">
  71.                         <span class="current-language">
  72.                             <span class="language-flag"></span>
  73.                         </span>
  74.                         <i class="bi bi-chevron-down language-chevron"></i>
  75.                     </button>
  76.                     
  77.                     <div class="language-dropdown">
  78.                         <div class="language-option" data-lang="es">
  79.                             <span class="option-flag"></span>
  80.                             <div class="option-content">
  81.                                 <span class="option-name" data-lang="es">Español</span>
  82.                                 <span class="option-name" data-lang="en" style="display:none;">Spanish</span>
  83.                                 <span class="option-code">ES</span>
  84.                             </div>
  85.                             <i class="bi bi-check2 option-check"></i>
  86.                         </div>
  87.                         
  88.                         <div class="language-option" data-lang="en">
  89.                             <span class="option-flag"></span>
  90.                             <div class="option-content">
  91.                                 <span class="option-name" data-lang="es">Inglés</span>
  92.                                 <span class="option-name" data-lang="en" style="display:none;">English</span>
  93.                                 <span class="option-code">US</span>
  94.                             </div>
  95.                             <i class="bi bi-check2 option-check"></i>
  96.                         </div>
  97.                     </div>
  98.                 </div>
  100.                 {# Botón modo oscuro/claro #}
  101.                 <button class="theme-toggle" id="themeToggle" aria-label="Cambiar tema">
  102.                     <i class="bi bi-sun-fill theme-icon"></i>
  103.                 </button>
  105.                 {# Botón agendar cita #}
  106.                 <button class="btn-agendar btn-primary" data-bs-toggle="modal" data-bs-target="#agendarCitaModal">
  107.                     <i class="bi bi-calendar-check"></i>
  108.                     <span class="btn-text" data-lang="es">Agendar Cita</span>
  109.                     <span class="btn-text" data-lang="en" style="display:none;">Book Appointment</span>
  110.                 </button>
  112.                 {# Botón portal médico #}
  113.                 <a href="{{ path('app_login') }}" class="btn-portal btn-outline">
  114.                     <i class="bi bi-speedometer2"></i>
  115.                     <span class="btn-text" data-lang="es">Portal Médico</span>
  116.                     <span class="btn-text" data-lang="en" style="display:none;">Medical Portal</span>
  117.                 </a>
  118.             </div>
  119.         </div>
  120.     </div>
  122.     {# Panel lateral móvil #}
  123.     <div class="mobile-sidebar d-lg-none">
  124.         <div class="sidebar-header">
  125.             <div class="sidebar-brand">
  126.                 <div class="brand-logo">
  127.                     <img src="{{ asset('images/logo-clinica.png') }}" 
  128.                          data-logo-light="{{ asset('images/logo-clinica.png') }}"
  129.                          data-logo-dark="{{ asset('images/logo-clinica-dark.png') }}"
  130.                          alt="ImagingPro - Centro de Diagnóstico" 
  131.                          class="logo-img">
  132.                 </div>
  133.             </div>
  134.             <button class="sidebar-close">
  135.                 <i class="bi bi-x-lg"></i>
  136.             </button>
  137.         </div>
  138.         
  139.         <nav class="sidebar-nav">
  140.             <ul class="sidebar-menu">
  141.                 <li class="sidebar-item">
  142.                     <a href="{{ path('home_index') }}" class="sidebar-link active">
  143.                         <i class="bi bi-house-door-fill"></i>
  144.                         <span data-lang="es">Inicio</span>
  145.                         <span data-lang="en" style="display:none;">Home</span>
  146.                     </a>
  147.                 </li>
  148.                 <li class="sidebar-item">
  149.                     <a href="{{ path('home_index') }}#servicios" class="sidebar-link">
  150.                         <i class="bi bi-heart-pulse"></i>
  151.                         <span data-lang="es">Servicios Médicos</span>
  152.                         <span data-lang="en" style="display:none;">Medical Services</span>
  153.                     </a>
  154.                 </li>
  155.                 <li class="sidebar-item">
  156.                     <a href="{{ path('home_index') }}#experiencia" class="sidebar-link">
  157.                         <i class="bi bi-award"></i>
  158.                         <span data-lang="es">Excelencia Médica</span>
  159.                         <span data-lang="en" style="display:none;">Medical Excellence</span>
  160.                     </a>
  161.                 </li>
  162.                 <li class="sidebar-item">
  163.                     <a href="{{ path('home_index') }}#contacto" class="sidebar-link">
  164.                         <i class="bi bi-telephone"></i>
  165.                         <span data-lang="es">Contacto</span>
  166.                         <span data-lang="en" style="display:none;">Contact</span>
  167.                     </a>
  168.                 </li>
  169.                 <li class="sidebar-item">
  170.                     <a href="{{ path('home_index') }}#formas-medicas" class="sidebar-link">
  171.                         <i class="fa fa-file-medical"></i>
  172.                         <span data-lang="es">Formas Médicas</span>
  173.                         <span data-lang="en" style="display:none;">Medical Forms</span>
  174.                     </a>
  175.                 </li>
  176.                 <li class="sidebar-divider"></li>
  177.                 <li class="sidebar-item">
  178.                     <a href="{{ path('app_login') }}" class="sidebar-link">
  179.                         <i class="bi bi-speedometer2"></i>
  180.                         <span data-lang="es">Portal Médico</span>
  181.                         <span data-lang="en" style="display:none;">Medical Portal</span>
  182.                     </a>
  183.                 </li>
  184.             </ul>
  185.         </nav>
  186.         
  187.         <div class="sidebar-footer">
  188.             <button class="btn-agendar-sidebar" data-bs-toggle="modal" data-bs-target="#agendarCitaModal">
  189.                 <i class="bi bi-calendar-check"></i>
  190.                 <span data-lang="es">Agendar Cita Rápida</span>
  191.                 <span data-lang="en" style="display:none;">Quick Appointment</span>
  192.             </button>
  193.         </div>
  194.     </div>
  195.     
  196.     <div class="sidebar-overlay"></div>
  197. </header>
  199. <style>
  200. /* ========== SELECTOR DE IDIOMA CIRCULAR PROFESIONAL ========== */
  201. .language-selector-wrapper {
  202.     position: relative;
  203.     display: inline-block;
  204. }
  206. /* BOTÓN CIRCULAR ELEGANTE - SOLO BANDERA */
  207. .language-trigger {
  208.     display: flex;
  209.     align-items: center;
  210.     justify-content: center;
  211.     width: 35px;
  212.     height: 35px;
  213.     background: var(--bg-white);
  214.     border: 2px solid var(--border-light);
  215.     border-radius: 50%;
  216.     cursor: pointer;
  217.     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  218.     color: var(--text-dark);
  219.     font-weight: 500;
  220.     position: relative;
  221.     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  222.     padding: 0;
  223. }
  225. .language-trigger:hover {
  226.     background: var(--bg-light);
  227.     border-color: var(--primary-blue);
  228.     transform: translateY(-2px);
  229.     box-shadow: 0 4px 12px rgba(26, 75, 140, 0.15);
  230. }
  232. .language-trigger.active {
  233.     background: var(--bg-light);
  234.     border-color: var(--primary-blue);
  235.     box-shadow: 0 4px 12px rgba(26, 75, 140, 0.2);
  236. }
  238. .language-trigger.active .language-chevron {
  239.     transform: rotate(180deg);
  240.     color: var(--primary-blue);
  241. }
  243. .current-language {
  244.     display: flex;
  245.     align-items: center;
  246.     justify-content: center;
  247.     width: 100%;
  248.     height: 100%;
  249. }
  251. .language-flag {
  252.     width: 20px;
  253.     height: 15px;
  254.     background-size: cover;
  255.     background-position: center;
  256.     border-radius: 2px;
  257.     color: transparent;
  258.     display: inline-block;
  259. }
  261. .language-chevron {
  262.     position: absolute;
  263.     bottom: 2px;
  264.     right: 2px;
  265.     font-size: 0.6rem;
  266.     color: var(--text-light);
  267.     background: var(--bg-white);
  268.     border-radius: 50%;
  269.     width: 14px;
  270.     height: 14px;
  271.     display: none;
  272.     align-items: center;
  273.     justify-content: center;
  274.     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  275.     box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  276.     border: 1px solid var(--border-light);
  277. }
  279. /* DROPDOWN COMPACTO Y ELEGANTE */
  280. .language-dropdown {
  281.     position: absolute;
  282.     top: 100%;
  283.     right: 0;
  284.     margin-top: 0.75rem;
  285.     background: var(--bg-white);
  286.     border: 1.5px solid var(--border-light);
  287.     border-radius: 16px;
  288.     box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  289.     min-width: 140px;
  290.     opacity: 0;
  291.     visibility: hidden;
  292.     transform: translateY(-12px) scale(0.95);
  293.     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  294.     z-index: 1000;
  295.     overflow: hidden;
  296.     backdrop-filter: blur(10px);
  297. }
  299. .language-selector-wrapper.active .language-dropdown {
  300.     opacity: 1;
  301.     visibility: visible;
  302.     transform: translateY(0) scale(1);
  303. }
  305. .language-option {
  306.     display: flex;
  307.     align-items: center;
  308.     gap: 0.75rem;
  309.     padding: 0.75rem 1rem;
  310.     background: none;
  311.     border: none;
  312.     cursor: pointer;
  313.     transition: all 0.2s ease;
  314.     color: var(--text-dark);
  315.     width: 100%;
  316.     text-align: left;
  317.     border-bottom: 1px solid var(--border-light);
  318. }
  320. .language-option:last-child {
  321.     border-bottom: none;
  322. }
  324. .language-option:hover {
  325.     background: var(--bg-light);
  326.     transform: translateX(4px);
  327. }
  329. .language-option.active {
  330.     background: var(--primary-blue);
  331.     color: white;
  332. }
  334. .language-option.active .option-code {
  335.     color: rgba(255, 255, 255, 0.8);
  336. }
  338. .language-option.active .option-check {
  339.     opacity: 1;
  340.     color: white;
  341. }
  344. .option-content {
  345.     display: flex;
  346.     flex-direction: column;
  347.     gap: 0.1rem;
  348.     flex: 1;
  349. }
  351. .option-flag {
  352.     width: 20px;
  353.     height: 15px;
  354.     background-size: cover;
  355.     background-position: center;
  356.     border-radius: 2px;
  357.     display: inline-block;
  358. }
  360. .option-name {
  361.     font-weight: 500;
  362.     font-size: 0.8rem;
  363.     line-height: 1.2;
  364. }
  366. .option-code {
  367.     font-size: 0.7rem;
  368.     color: var(--text-light);
  369.     font-weight: 600;
  370.     line-height: 1;
  371. }
  373. .option-check {
  374.     font-size: 0.75rem;
  375.     color: var(--primary-blue);
  376.     opacity: 0;
  377.     transition: all 0.2s ease;
  378.     flex-shrink: 0;
  379. }
  381. /* ========== VARIABLES PARA MODO OSCURO MEJORADAS ========== */
  382. :root {
  383.     /* Colores modo claro (default) */
  384.     --bg-white: #ffffff;
  385.     --bg-light: #f8f9fa;
  386.     --text-dark: #2d3748;
  387.     --text-light: #718096;
  388.     --border-light: #e2e8f0;
  389.     --primary-blue: #1a4b8c;
  390.     --primary-blue-dark: #0d3a6e;
  391.     --shadow: 0 2px 10px rgba(0,0,0,0.08);
  392.     --shadow-hover: 0 4px 20px rgba(0,0,0,0.12);
  393. }
  395. [data-theme="dark"] {
  396.     /* Colores modo oscuro - TEXTO MÁS VISIBLE */
  397.     --bg-white: #1a202c;
  398.     --bg-light: #2d3748;
  399.     --text-dark: #e2e8f0;  /* TEXTO BLANCO GRISÁCEO PARA MEJOR VISIBILIDAD */
  400.     --text-light: #a0aec0; /* Texto secundario visible */
  401.     --border-light: #4a5568;
  402.     --primary-blue: #63b3ed; /* Azul claro para elementos principales */
  403.     --primary-blue-dark: #4299e1;
  404.     --shadow: 0 2px 10px rgba(0,0,0,0.3);
  405.     --shadow-hover: 0 4px 20px rgba(0,0,0,0.4);
  406. }
  408. /* Modo oscuro mejorado para el selector de idioma */
  409. [data-theme="dark"] .language-trigger {
  410.     border-color: #4a5568;
  411.     background: #2d3748;
  412. }
  414. [data-theme="dark"] .language-trigger:hover {
  415.     border-color: var(--primary-blue);
  416.     background: #4a5568;
  417. }
  419. [data-theme="dark"] .language-chevron {
  420.     background: #4a5568;
  421.     color: #a0aec0;
  422.     border-color: #4a5568;
  423. }
  425. [data-theme="dark"] .language-dropdown {
  426.     background: #2d3748;
  427.     border-color: #4a5568;
  428.     box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  429. }
  431. [data-theme="dark"] .language-option {
  432.     border-bottom-color: #4a5568;
  433. }
  435. [data-theme="dark"] .language-option:hover {
  436.     background: #4a5568;
  437. }
  439. /* ========== LOGO CON DEGRADADO SOLO EN MODO OSCURO ========== */
  440. .brand-logo {
  441.     width: 250px;
  442.     height: 110px;
  443.     display: flex;
  444.     align-items: center;
  445.     justify-content: center;
  446.     overflow: hidden;
  447. }
  450. /* ========== BOTÓN TOGGLE ========== */
  451. .theme-toggle {
  452.     background: none;
  453.     border: none;
  454.     padding: 0.5rem;
  455.     border-radius: 50%;
  456.     cursor: pointer;
  457.     display: flex;
  458.     align-items: center;
  459.     justify-content: center;
  460.     width: 40px;
  461.     height: 40px;
  462.     transition: all 0.3s ease;
  463.     color: var(--text-dark);
  464. }
  466. .theme-toggle:hover {
  467.     background: var(--bg-light);
  468.     transform: scale(1.1);
  469. }
  471. .theme-icon {
  472.     font-size: 1.1rem;
  473.     transition: all 0.3s ease;
  474. }
  476. /* ========== HEADER MÁS COMPACTO ========== */
  477. .header-profesional {
  478.     background: var(--bg-white);
  479.     box-shadow: var(--shadow);
  480.     border-bottom: 1px solid var(--border-light);
  481.     padding: 0.75rem 0;
  482.     transition: all 0.3s ease;
  483.     z-index: 1030;
  484. }
  486. /* CONTENEDOR PRINCIPAL - ESPACIO JUSTO */
  487. .header-content {
  488.     display: flex;
  489.     align-items: center;
  490.     justify-content: space-between;
  491.     gap: 1rem; /* Reducido para dar espacio al selector de idioma */
  492. }
  494. /* NAVEGACIÓN - ITEMS MÁS COMPACTOS */
  495. .nav-menu {
  496.     display: flex;
  497.     align-items: center;
  498.     gap: 0.25rem;
  499.     list-style: none;
  500.     margin: 0;
  501.     padding: 0;
  502.     flex-wrap: nowrap;
  503.     white-space: nowrap;
  504. }
  506. .nav-link {
  507.     display: flex;
  508.     align-items: center;
  509.     gap: 0.3rem;
  510.     padding: 0.5rem 0.8rem;
  511.     color: var(--text-dark); /* Texto visible en ambos modos */
  512.     text-decoration: none;
  513.     font-weight: 500;
  514.     border-radius: 6px;
  515.     transition: all 0.3s ease;
  516.     font-size: 0.85rem;
  517.     white-space: nowrap;
  518. }
  520. [data-theme="dark"] .nav-link {
  521.     color: var(--primary-blue);
  522. }    
  524. .nav-link i {
  525.     color: var(--primary-blue); /* ICONOS AZUL CLARO en ambos modos */
  526.     transition: all 0.3s ease;
  527. }
  529. /* HOVER: SE PONEN BLANCOS en modo oscuro */
  530. [data-theme="dark"] .nav-link:hover,
  531. [data-theme="dark"] .nav-link.active {
  532.     background: var(--primary-blue);
  533.     color: white !important; /* Texto blanco en hover */
  534.     transform: translateY(-1px);
  535. }
  537. [data-theme="dark"] .nav-link:hover i,
  538. [data-theme="dark"] .nav-link.active i {
  539.     color: white !important; /* Iconos blancos en hover */
  540. }
  542. /* Estilos normales para modo claro */
  543. .nav-link:hover,
  544. .nav-link.active {
  545.     background: var(--primary-blue);
  546.     color: white;
  547.     transform: translateY(-1px);
  548. }
  550. .nav-link:hover i,
  551. .nav-link.active i {
  552.     color: white;
  553. }
  555. /* BOTONES - MÁS COMPACTOS */
  556. .header-actions {
  557.     display: flex;
  558.     align-items: center;
  559.     gap: 0.5rem; /* Reducido para mejor acomodo */
  560.     flex-shrink: 0;
  561. }
  563. .btn-agendar,
  564. .btn-portal {
  565.     display: flex;
  566.     align-items: center;
  567.     gap: 0.3rem;
  568.     padding: 0.5rem 0.9rem;
  569.     border-radius: 6px;
  570.     font-weight: 600;
  571.     text-decoration: none;
  572.     transition: all 0.3s ease;
  573.     border: none;
  574.     font-size: 0.85rem;
  575.     white-space: nowrap;
  576. }
  578. .btn-agendar {
  579.     background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
  580.     color: white;
  581.     box-shadow: 0 2px 10px rgba(26, 75, 140, 0.3);
  582. }
  584. .btn-agendar:hover {
  585.     transform: translateY(-2px);
  586.     box-shadow: 0 4px 15px rgba(26, 75, 140, 0.4);
  587.     color: white;
  588. }
  590. .btn-portal {
  591.     background: transparent;
  592.     color: var(--primary-blue);
  593.     border: 2px solid var(--primary-blue);
  594. }
  596. .btn-portal:hover {
  597.     background: var(--primary-blue);
  598.     color: white;
  599.     transform: translateY(-1px);
  600. }
  602. .brand-link {
  603.     display: flex;
  604.     align-items: center;
  605.     justify-content: center;
  606.     text-decoration: none;
  607.     color: inherit;
  608.     transition: all 0.3s ease;
  609. }
  611. .brand-link:hover {
  612.     transform: translateY(-2px);
  613. }
  615. .logo-img {
  616.     width: 100%;
  617.     height: auto;
  618.     object-fit: contain;
  619. }
  621. .header-nav {
  622.     flex: 1;
  623.     display: flex;
  624.     justify-content: center;
  625. }
  627. .nav-item {
  628.     position: relative;
  629. }
  631. .mobile-toggle {
  632.     background: none;
  633.     border: none;
  634.     padding: 0.5rem;
  635.     cursor: pointer;
  636.     display: flex;
  637.     flex-direction: column;
  638.     gap: 4px;
  639.     width: 32px;
  640.     height: 32px;
  641.     justify-content: center;
  642. }
  644. .toggle-bar {
  645.     width: 100%;
  646.     height: 2px;
  647.     background: var(--primary-blue);
  648.     border-radius: 2px;
  649.     transition: all 0.3s ease;
  650. }
  652. /* ========== SIDEBAR MÓVIL MEJORADO ========== */
  653. .mobile-sidebar {
  654.     position: fixed;
  655.     top: 0;
  656.     left: -100%;
  657.     width: 320px;
  658.     height: 100vh;
  659.     background: var(--bg-white);
  660.     box-shadow: var(--shadow-hover);
  661.     transition: left 0.3s ease;
  662.     z-index: 1040;
  663.     display: flex;
  664.     flex-direction: column;
  665. }
  667. .mobile-sidebar.active {
  668.     left: 0;
  669. }
  671. .sidebar-header {
  672.     display: flex;
  673.     align-items: center;
  674.     justify-content: space-between;
  675.     padding: 1.5rem;
  676.     border-bottom: 1px solid var(--border-light);
  677. }
  679. .sidebar-close {
  680.     background: none;
  681.     border: none;
  682.     font-size: 1.25rem;
  683.     color: var(--text-light);
  684.     cursor: pointer;
  685.     padding: 0.25rem;
  686. }
  688. .sidebar-nav {
  689.     flex: 1;
  690.     padding: 1rem 0;
  691. }
  693. .sidebar-menu {
  694.     list-style: none;
  695.     margin: 0;
  696.     padding: 0;
  697. }
  699. .sidebar-item {
  700.     margin-bottom: 0.25rem;
  701. }
  703. .sidebar-link {
  704.     display: flex;
  705.     align-items: center;
  706.     gap: 1rem;
  707.     padding: 1rem 1.5rem;
  708.     color: var(--text-dark); /* Texto visible en ambos modos */
  709.     text-decoration: none;
  710.     font-weight: 500;
  711.     transition: all 0.3s ease;
  712.     border-left: 3px solid transparent;
  713. }
  715. .sidebar-link i {
  716.     color: var(--primary-blue); /* ICONOS AZUL CLARO en ambos modos */
  717.     transition: all 0.3s ease;
  718. }
  720. /* HOVER EN SIDEBAR: SE PONEN BLANCOS en modo oscuro */
  721. [data-theme="dark"] .sidebar-link:hover,
  722. [data-theme="dark"] .sidebar-link.active {
  723.     background: var(--primary-blue);
  724.     color: white !important;
  725.     border-left-color: white;
  726. }
  728. [data-theme="dark"] .sidebar-link:hover i,
  729. [data-theme="dark"] .sidebar-link.active i {
  730.     color: white !important;
  731. }
  733. /* Estilos normales para modo claro */
  734. .sidebar-link:hover,
  735. .sidebar-link.active {
  736.     background: var(--bg-light);
  737.     color: var(--primary-blue);
  738.     border-left-color: var(--primary-blue);
  739. }
  741. .sidebar-link:hover i,
  742. .sidebar-link.active i {
  743.     color: var(--primary-blue);
  744. }
  746. .sidebar-divider {
  747.     height: 1px;
  748.     background: var(--border-light);
  749.     margin: 1rem 0;
  750. }
  752. .sidebar-footer {
  753.     padding: 1.5rem;
  754.     border-top: 1px solid var(--border-light);
  755. }
  757. .btn-agendar-sidebar {
  758.     width: 100%;
  759.     display: flex;
  760.     align-items: center;
  761.     justify-content: center;
  762.     gap: 0.5rem;
  763.     padding: 1rem;
  764.     background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
  765.     color: white;
  766.     border: none;
  767.     border-radius: 8px;
  768.     font-weight: 600;
  769.     transition: all 0.3s ease;
  770. }
  772. .btn-agendar-sidebar:hover {
  773.     transform: translateY(-2px);
  774.     box-shadow: 0 4px 15px rgba(26, 75, 140, 0.4);
  775. }
  777. .sidebar-overlay {
  778.     position: fixed;
  779.     top: 0;
  780.     left: 0;
  781.     width: 100%;
  782.     height: 100%;
  783.     background: rgba(0,0,0,0.5);
  784.     z-index: 1035;
  785.     opacity: 0;
  786.     visibility: hidden;
  787.     transition: all 0.3s ease;
  788. }
  790. .sidebar-overlay.active {
  791.     opacity: 1;
  792.     visibility: visible;
  793. }
  795. /* Responsive */
  796. @media (max-width: 1199.98px) {
  797.     .header-nav {
  798.         flex: 0.8;
  799.     }
  800. }
  802. @media (max-width: 991.98px) {
  803.     .header-content {
  804.         gap: 1rem;
  805.     }
  806.     
  807.     .btn-text {
  808.         display: none;
  809.     }
  810.     
  811.     .language-trigger {
  812.         width: 40px;
  813.         height: 40px;
  814.     }
  815.     
  816.     .language-flag {
  817.         font-size: 1.2rem;
  818.     }
  819.     
  820.     .language-chevron {
  821.         width: 12px;
  822.         height: 12px;
  823.         font-size: 0.5rem;
  824.     }
  825. }
  827. @media (max-width: 767.98px) {
  828.     .btn-agendar,
  829.     .btn-portal {
  830.         display: none;
  831.     }
  832.     
  833.     .language-selector-wrapper {
  834.         order: -1;
  835.     }
  836. }
  838. @media (max-width: 575.98px) {
  839.     .header-profesional {
  840.         padding: 0.5rem 0;
  841.     }
  842.     
  843.     .mobile-sidebar {
  844.         width: 280px;
  845.     }
  846.     
  847.     .header-actions {
  848.         gap: 0.25rem;
  849.     }
  850.     
  851.     .language-trigger {
  852.         width: 36px;
  853.         height: 36px;
  854.     }
  855.     
  856.     .language-flag {
  857.         font-size: 1.1rem;
  858.     }
  859. }
  860. </style>
  862. <script>
  863. document.addEventListener('DOMContentLoaded', function() {
  864.     // ========== SELECTOR DE IDIOMA - CLIENTE MANDRA ==========
  865.     const languageTrigger = document.getElementById('languageTrigger');
  866.     const languageOptions = document.querySelectorAll('.language-option');
  867.     const currentLangFlag = languageTrigger.querySelector('.language-flag');
  868.     const languageWrapper = document.querySelector('.language-selector-wrapper');
  869.     
  870.     // Definir las banderas SVG
  871.     const flagES = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23c60b1e' d='M0 0h640v480H0z'/%3E%3Cpath fill='%23ffc400' d='M0 120h640v240H0z'/%3E%3C/svg%3E";
  872.     const flagUS = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23bd3d44' d='M0 0h640v480H0z'/%3E%3Cpath stroke='%23fff' stroke-width='37' d='M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640'/%3E%3Cpath fill='%23192f5d' d='M0 0h364.8v258.5H0z'/%3E%3Cpath fill='%23fff' d='m71 7 7 21.5L98 16l-12 17.5 21-2.5-14.5 16 19.5-7-16 13 16.5 12.5-20-1 12 18L89 57l6.5 20.5-15-15-2 21.5-9-19-10 19-1.5-21.5-15 15L43 57 29.5 68.5l12-18-20 1L38 39 22 52l19.5 7L27 42.5 48 45 36 27.5 50 33 35.5 17 57 24.5 36 16l15 12.5L71 7z'/%3E%3C/svg%3E";
  874.     // 1. PRIMERO: Obtener idioma del CLIENTE (localStorage)
  875.     const clientLang = localStorage.getItem('language') || 'es';
  876.     console.log('🚀 Idioma del CLIENTE:', clientLang);
  877.     
  878.     // 2. INICIALIZAR con el idioma del cliente (NO siempre España)
  879.     initializeLanguageSelector(clientLang);
  880.     
  881.     // 3. INMEDIATAMENTE: Aplicar idioma del cliente
  882.     applyLanguage(clientLang);
  883.     
  884.     // 4. LUEGO: Sincronizar Symfony con el cliente (en segundo plano)
  885.     forceSymfonyLanguage(clientLang);
  886.     
  887.     // Toggle del dropdown
  888.     languageTrigger.addEventListener('click', function(e) {
  889.         e.stopPropagation();
  890.         languageWrapper.classList.toggle('active');
  891.     });
  892.     
  893.     // Cambiar idioma al seleccionar una opción
  894.     languageOptions.forEach(option => {
  895.         option.addEventListener('click', function() {
  896.             const lang = this.getAttribute('data-lang');
  897.             changeLanguage(lang);
  898.         });
  899.     });
  900.     
  901.     // Cerrar dropdown al hacer clic fuera
  902.     document.addEventListener('click', function(e) {
  903.         if (!languageWrapper.contains(e.target)) {
  904.             languageWrapper.classList.remove('active');
  905.         }
  906.     });
  907.     
  908.     // FUNCIÓN CORREGIDA: Inicializar con el idioma del cliente
  909.     function initializeLanguageSelector(lang) {
  910.         console.log('🎨 Inicializando banderas con idioma:', lang);
  911.         
  912.         // Bandera inicial del trigger según el idioma guardado
  913.         if (lang === 'es') {
  914.             currentLangFlag.style.backgroundImage = `url("${flagES}")`;
  915.         } else {
  916.             currentLangFlag.style.backgroundImage = `url("${flagUS}")`;
  917.         }
  918.         
  919.         // Configurar banderas de las opciones
  920.         languageOptions.forEach(option => {
  921.             const optionFlag = option.querySelector('.option-flag');
  922.             const optionLang = option.getAttribute('data-lang');
  923.             
  924.             // Configurar bandera según cada opción
  925.             if (optionLang === 'es') {
  926.                 optionFlag.style.backgroundImage = `url("${flagES}")`;
  927.             } else {
  928.                 optionFlag.style.backgroundImage = `url("${flagUS}")`;
  929.             }
  930.         });
  931.     }
  932.     
  933.     // FUNCIÓN PRINCIPAL: Cambiar idioma (CLIENTE MANDRA)
  934.     async function changeLanguage(lang) {
  935.         try {
  936.             console.log('🔥 FORZANDO idioma:', lang);
  937.             
  938.             // 1. GUARDAR en localStorage (cliente)
  939.             localStorage.setItem('language', lang);
  940.             
  941.             // 2. INICIALIZAR banderas con el nuevo idioma
  942.             initializeLanguageSelector(lang);
  943.             
  944.             // 3. APLICAR INMEDIATAMENTE en frontend
  945.             applyLanguage(lang);
  946.             
  947.             // 4. FORZAR a Symfony a aceptar nuestro idioma
  948.             await forceSymfonyLanguage(lang);
  949.             
  950.             console.log('✅ Idioma forzado exitosamente:', lang);
  951.             
  952.         } catch (error) {
  953.             console.error('❌ Error al forzar idioma:', error);
  954.             // IMPORTANTE: El frontend YA tiene el idioma correcto
  955.         } finally {
  956.             // Cerrar dropdown
  957.             languageWrapper.classList.remove('active');
  958.         }
  959.     }
  960.     
  961.     // FUNCIÓN AGGRESIVA: Forzar idioma en Symfony
  962.     async function forceSymfonyLanguage(lang) {
  963.         try {
  964.             const response = await fetch('/change-language', {
  965.                 method: 'POST',
  966.                 headers: {
  967.                     'Content-Type': 'application/json',
  968.                     'X-Requested-With': 'XMLHttpRequest'
  969.                 },
  970.                 body: JSON.stringify({ 
  971.                     language: lang,
  972.                     force: true,
  973.                     source: 'client_override'
  974.                 })
  975.             });
  976.             
  977.             if (!response.ok) {
  978.                 throw new Error('Symfony rechazó el idioma');
  979.             }
  980.             
  981.             const result = await response.json();
  982.             console.log('🔄 Symfony sincronizado:', result);
  983.             
  984.         } catch (error) {
  985.             console.warn('⚠️ Symfony no respondió, pero el frontend está ok');
  986.         }
  987.     }
  988.     
  989.     // FUNCIÓN MEJORADA: Aplicar idioma (SIN DEPENDER DE SYMFONY)
  990.     function applyLanguage(lang) {
  991.         console.log('🎯 APLICANDO idioma del CLIENTE:', lang);
  992.         
  993.         // 1. Bandera principal (ya está configurada en initializeLanguageSelector)
  994.         if (lang === 'es') {
  995.             languageTrigger.setAttribute('aria-label', 'Cambiar idioma a English');
  996.         } else {
  997.             languageTrigger.setAttribute('aria-label', 'Change language to Spanish');
  998.         }
  999.         
  1000.         // 2. Actualizar textos del DROPDOWN
  1001.         updateDropdownTexts(lang);
  1002.         
  1003.         // 3. Actualizar checkmarks en las opciones
  1004.         languageOptions.forEach(option => {
  1005.             const optionLang = option.getAttribute('data-lang');
  1006.             if (optionLang === lang) {
  1007.                 option.classList.add('active');
  1008.             } else {
  1009.                 option.classList.remove('active');
  1010.             }
  1011.         });
  1012.         
  1013.         // 4. Actualizar TODOS los textos de la página
  1014.         document.querySelectorAll('[data-lang]').forEach(element => {
  1015.             // Excluir elementos dentro del language selector
  1016.             if (element.closest('.language-selector-wrapper')) {
  1017.                 return;
  1018.             }
  1019.             
  1020.             const elementLang = element.getAttribute('data-lang');
  1021.             const isNavText = element.classList.contains('nav-text');
  1022.             const isBtnText = element.classList.contains('btn-text');
  1023.             
  1024.             if (elementLang === lang) {
  1025.                 element.style.display = isNavText || isBtnText ? 'inline' : 'block';
  1026.             } else {
  1027.                 element.style.display = 'none';
  1028.             }
  1029.         });
  1030.         
  1031.         // 5. Forzar atributo HTML
  1032.         document.documentElement.lang = lang;
  1033.         
  1034.         // 6. Placeholders
  1035.         updateDynamicPlaceholders(lang);
  1036.         
  1037.         console.log('✅ Idioma del CLIENTE aplicado exitosamente');
  1038.     }
  1039.     
  1040.     // NUEVA FUNCIÓN: Actualizar textos del dropdown
  1041.     function updateDropdownTexts(lang) {
  1042.         languageOptions.forEach(option => {
  1043.             const optionLang = option.getAttribute('data-lang');
  1044.             const optionNames = option.querySelectorAll('.option-name');
  1045.             
  1046.             optionNames.forEach(optionName => {
  1047.                 const nameLang = optionName.getAttribute('data-lang');
  1048.                 if (nameLang === lang) {
  1049.                     optionName.style.display = 'block';
  1050.                 } else {
  1051.                     optionName.style.display = 'none';
  1052.                 }
  1053.             });
  1054.         });
  1055.     }
  1056.     
  1057.     // Función para actualizar placeholders dinámicamente
  1058.     function updateDynamicPlaceholders(lang) {
  1059.         const placeholders = {
  1060.             'es': {
  1061.                 'firstName': 'Tu nombre',
  1062.                 'lastName': 'Tus apellidos', 
  1063.                 'age': 'Tu edad',
  1064.                 'phone': '+15555555555',
  1065.                 'email': 'ejemplo@dominio.com',
  1066.                 'observaciones': 'Información adicional que consideres relevante'
  1067.             },
  1068.             'en': {
  1069.                 'firstName': 'Your name',
  1070.                 'lastName': 'Your last name',
  1071.                 'age': 'Your age',
  1072.                 'phone': '+15555555555',
  1073.                 'email': 'example@domain.com',
  1074.                 'observaciones': 'Additional information you consider relevant'
  1075.             }
  1076.         };
  1077.         
  1078.         const currentPlaceholders = placeholders[lang] || placeholders['es'];
  1079.         
  1080.         Object.keys(currentPlaceholders).forEach(fieldId => {
  1081.             const element = document.getElementById(fieldId);
  1082.             if (element) {
  1083.                 element.placeholder = currentPlaceholders[fieldId];
  1084.             }
  1085.         });
  1086.     }
  1087.     
  1088.     // ========== FUNCIONALIDAD: MODO OSCURO ==========
  1089.     const themeToggle = document.getElementById('themeToggle');
  1090.     const themeIcon = themeToggle.querySelector('.theme-icon');
  1091.     const html = document.documentElement;
  1092.     
  1093.     // Verificar preferencia guardada
  1094.     const savedTheme = localStorage.getItem('theme') || 'light';
  1095.     
  1096.     // Aplicar tema al cargar
  1097.     applyTheme(savedTheme);
  1098.     
  1099.     // Toggle del tema
  1100.     themeToggle.addEventListener('click', function() {
  1101.         const currentTheme = html.getAttribute('data-theme') || 'light';
  1102.         const newTheme = currentTheme === 'light' ? 'dark' : 'light';
  1103.         applyTheme(newTheme);
  1104.         localStorage.setItem('theme', newTheme);
  1105.     });
  1106.     
  1107.     function applyTheme(theme) {
  1108.         html.setAttribute('data-theme', theme);
  1109.         
  1110.         if (theme === 'dark') {
  1111.             themeIcon.className = 'bi bi-moon-fill theme-icon';
  1112.             themeToggle.setAttribute('aria-label', 'Cambiar a modo claro');
  1113.         } else {
  1114.             themeIcon.className = 'bi bi-sun-fill theme-icon';
  1115.             themeToggle.setAttribute('aria-label', 'Cambiar a modo oscuro');
  1116.         }
  1117.         
  1118.         updateLogoForDarkMode();
  1119.     }
  1120.     
  1121.     function updateLogoForDarkMode() {
  1122.         const logos = document.querySelectorAll('.logo-img[data-logo-dark]');
  1123.         const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
  1124.         const isDarkMode = currentTheme === 'dark';
  1125.         
  1126.         logos.forEach(logo => {
  1127.             const darkSrc = logo.getAttribute('data-logo-dark');
  1128.             const lightSrc = logo.getAttribute('data-logo-light') || logo.src;
  1129.             
  1130.             if (isDarkMode && darkSrc) {
  1131.                 logo.src = darkSrc;
  1132.             } else if (lightSrc) {
  1133.                 logo.src = lightSrc;
  1134.             }
  1135.         });
  1136.     }
  1137.     
  1138.     updateLogoForDarkMode();
  1139.     
  1140.     // ========== FUNCIONALIDAD EXISTENTE DEL HEADER ==========
  1141.     const mobileToggle = document.querySelector('.mobile-toggle');
  1142.     const sidebarClose = document.querySelector('.sidebar-close');
  1143.     const mobileSidebar = document.querySelector('.mobile-sidebar');
  1144.     const sidebarOverlay = document.querySelector('.sidebar-overlay');
  1145.     
  1146.     mobileToggle?.addEventListener('click', function() {
  1147.         mobileSidebar.classList.add('active');
  1148.         sidebarOverlay.classList.add('active');
  1149.         document.body.style.overflow = 'hidden';
  1150.     });
  1151.     
  1152.     function closeSidebar() {
  1153.         mobileSidebar.classList.remove('active');
  1154.         sidebarOverlay.classList.remove('active');
  1155.         document.body.style.overflow = '';
  1156.     }
  1157.     
  1158.     sidebarClose?.addEventListener('click', closeSidebar);
  1159.     sidebarOverlay?.addEventListener('click', closeSidebar);
  1160.     
  1161.     document.querySelectorAll('.sidebar-link').forEach(link => {
  1162.         link.addEventListener('click', closeSidebar);
  1163.     });
  1164.     
  1165.     let lastScroll = 0;
  1166.     const header = document.querySelector('.header-profesional');
  1167.     
  1168.     window.addEventListener('scroll', function() {
  1169.         const currentScroll = window.pageYOffset;
  1170.         
  1171.         if (currentScroll <= 0) {
  1172.             header.style.transform = 'translateY(0)';
  1173.             return;
  1174.         }
  1175.         
  1176.         if (currentScroll > lastScroll && currentScroll > 100) {
  1177.             header.style.transform = 'translateY(-100%)';
  1178.         } else {
  1179.             header.style.transform = 'translateY(0)';
  1180.         }
  1181.         
  1182.         lastScroll = currentScroll;
  1183.     });
  1184. });
  1185. </script>