/* ==========================================================================
   Creador de CV Dinámico (Estilos Responsivos para Móviles y Tablets)
   ========================================================================== */

/* 1. Ocultar la navegación móvil por defecto en escritorio */
.mobile-nav-bar {
  display: none;
}

/* Ocultar el ícono de Auto-Ajustar en pantallas de escritorio para conservar el diseño original */
@media (min-width: 1024px) {
  #app-container .zoom-controls-floating .btn-zoom-action .btn-icon {
    display: none;
  }
}

/* 2. Reglas responsivas para pantallas móviles y tablets (Solo aplicadas en visualización)
   Al usar '@media screen', garantizamos que al imprimir ('print') no se aplique 
   ningún padding, flex vertical o margen de móvil que desbarate el formato A4 de impresión. */
@media screen and (max-width: 1023px) {
  
  /* Ocultar elementos exclusivos de escritorio en móvil */
  .desktop-only-controls,
  .desktop-only-btn {
    display: none !important;
  }

  /* Ajuste de contenedores principales */
  body {
    overflow: hidden; /* Evita scrolls dobles en el body */
    height: 100vh !important;
    height: 100dvh !important; /* Adaptar el body al alto dinámico del navegador móvil */
  }

  #app-container {
    height: 100vh;
    height: 100dvh; /* Altura dinámica del viewport en móviles para evitar esconder la barra inferior */
    display: flex;
    flex-direction: column;
    padding-bottom: 0; /* Eliminado padding fijo, barra inferior en flujo normal */
    box-sizing: border-box;
  }

  /* Barra Superior Compacta y Flotante */
  #app-container header.top-bar {
    height: auto;
    padding: var(--space-2) var(--space-3);
    margin: var(--space-2) var(--space-3) var(--space-1) var(--space-3);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-xl);
    gap: 8px;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--surface-float);
    box-shadow: var(--db-shadow-sm);
  }

  #app-container header.top-bar .brand {
    gap: 6px;
  }

  #app-container header.top-bar .brand .logo-icon-pill {
    width: 38px;
    height: 38px;
    font-size: 16px;
    border-radius: 8px;
    padding: 0.15rem;
  }

  /* QUITAR EL TÍTULO EN MÓVIL: Dejar solo el ícono para dar espacio */
  #app-container header.top-bar .brand h1 {
    display: none;
  }

  /* Controles de la cabecera en móvil */
  #app-container header.top-bar .controls-top {
    gap: 6px;
    margin-left: 0;
    width: auto;
    display: flex;
    justify-content: flex-end;
    overflow-x: auto;
    white-space: nowrap;
    padding: 4px 0;
    scrollbar-width: none;
  }

  #app-container header.top-bar .controls-top::-webkit-scrollbar {
    display: none;
  }

  /* Ocultar divisor visual en móvil */
  #app-container header.top-bar .controls-top .controls-divider {
    display: none;
  }

  /* Botones compactos (Iconos solamente) */
  #app-container header.top-bar .controls-top .btn,
  #app-container header.top-bar .controls-top .btn-pill-primary,
  #app-container header.top-bar .controls-top .btn-pill-secondary,
  #app-container header.top-bar .controls-top .btn-icon-only {
    padding: 0;
    height: 36px;
    width: 36px;
    min-width: 36px;
    justify-content: center;
    align-items: center;
    gap: 0;
    border-radius: 50%;
  }

  #app-container header.top-bar .controls-top .btn span,
  #app-container header.top-bar .controls-top .btn-pill-primary span,
  #app-container header.top-bar .controls-top .btn-pill-secondary span {
    display: none; /* Oculta etiquetas de texto */
  }

  #app-container header.top-bar .controls-top .btn .btn-icon,
  #app-container header.top-bar .controls-top .btn-pill-primary i,
  #app-container header.top-bar .controls-top .btn-pill-secondary i,
  #app-container header.top-bar .controls-top .btn-icon-only i {
    margin: 0;
    width: 18px;
    height: 18px;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Trigger del selector de plantillas compacto */
  #app-container #btn-template-select-trigger {
    padding: 0 14px;
    height: 36px;
    width: auto;
    min-width: auto;
    border-radius: 9999px;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
  }

  #app-container #btn-template-select-trigger span {
    display: inline-block !important;
    font-size: 13px;
    font-weight: 500;
  }

  #app-container #btn-template-select-trigger .dropdown-chevron-svg,
  #app-container #btn-template-select-trigger i.ti-chevron-down {
    display: inline-flex !important;
    font-size: 14px;
  }


  /* Centrado absoluto de todos los diálogos modales en móviles */
  body .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    background: var(--surface-overlay);
    padding: 12px;
    box-sizing: border-box;
  }

  /* Optimización de tamaño de los modales en móvil */
  #app-container #template-modal .modal-content, 
  #app-container #grammar-modal .modal-content,
  body .modal-overlay .modal-card {
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    margin: auto; /* Fuerza centrado */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--db-shadow-lg) !important;
  }

  /* Encabezados y contenidos de modales compactos */
  body .modal-overlay .modal-header {
    padding: 16px 20px;
  }

  body .modal-overlay .modal-body {
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Grid del selector de plantillas en móviles (2 columnas compactas) */
  #app-container .template-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  #app-container .template-card {
    padding: 10px;
  }

  #app-container .template-card .template-card-preview {
    width: 110px;
    height: 155px;
  }
  
  #app-container .template-card .template-card-info {
    margin-top: 8px;
    font-size: 11px;
  }

  /* Workspace con Flexbox dinámico para asegurar el scroll correcto en móviles */
  #app-container .workspace {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 0; /* Evita desbordamiento vertical y permite que los hijos resuelvan height: 100% correctamente */
    min-height: 0;
    overflow: hidden;
    position: relative;
  }

  /* Comportamiento según el panel seleccionado */
  #app-container .workspace.show-editor aside.editor-panel {
    display: flex;
    flex-direction: column;
    position: relative;
    width: auto !important;
    height: auto !important;
    flex-grow: 1;
    margin: var(--space-1) var(--space-3) var(--space-2) var(--space-3);
    background: var(--db-card-bg);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-xl);
    box-shadow: var(--db-shadow-sm);
    overflow: hidden;
  }

  #app-container .workspace.show-editor .preview-panel-outer {
    display: none;
  }

  #app-container .workspace.show-preview aside.editor-panel {
    display: none;
  }

  #app-container .workspace.show-preview .preview-panel-outer {
    display: block;
    height: 100%;
    width: 100%;
    overflow: hidden; /* Ocultamos el scroll nativo en móvil para usar Pan&Zoom absoluto */
  }

  /* Reset del cuerpo del editor: eliminar padding y márgenes flotantes de escritorio */
  #app-container .workspace aside.editor-panel .editor-body,
  #app-container .workspace:has(nav.editor-tabs.expanded) aside.editor-panel .editor-body {
    padding-left: 0;
    margin: 0 !important;
    height: calc(100% - 48px);
    width: 100%;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid var(--db-border) !important;
    box-shadow: none !important;
    transition: none;
    display: flex;
    flex-direction: column;
  }
  
  /* Tabs horizontales deslizables en móviles — diseño de pestañas premium */
  #app-container .workspace aside.editor-panel nav.editor-tabs,
  #app-container .workspace aside.editor-panel nav.editor-tabs.expanded {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    margin: 0 !important;
    width: 100% !important;
    height: 48px !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: var(--db-card-bg) !important;
    display: flex; /* Mostrar de nuevo */
    flex-direction: row;
    height: 48px;
    width: 100%;
    background: var(--db-card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-shrink: 0;
    scrollbar-width: none; /* Ocultar barra en Firefox */
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--db-border);
    z-index: 10;
    padding: 0 32px; /* Espacio reservado para los botones de scroll */
    gap: 0;
    box-shadow: none;
    transition: none;
  }

  #app-container .workspace aside.editor-panel nav.editor-tabs::-webkit-scrollbar,
  #app-container .workspace aside.editor-panel nav.editor-tabs.expanded::-webkit-scrollbar {
    display: none; /* Ocultar barra en Webkit */
  }

  /* Ocultar botón hamburguesa de toggle lateral en móvil */
  #app-container .workspace aside.editor-panel nav.editor-tabs .nav-toggle-btn,
  #app-container .workspace aside.editor-panel nav.editor-tabs.expanded .nav-toggle-btn {
    display: none;
  }

  /* Desactivar layout de caja en móvil para que los botones fluyan directo en el nav */
  #app-container .workspace aside.editor-panel nav.editor-tabs .nav-tabs-scroll-area {
    display: contents;
  }

  /* Barra de control segmentada unificada en móvil (evita círculos separados) */
  #app-container header.top-bar .controls-top .controls-segmented-group {
    display: flex;
    align-items: center;
    background: var(--surface-input);
    border: 1px solid var(--db-border);
    border-radius: 9999px;
    padding: 2px;
    gap: 0;
  }

  #app-container header.top-bar .controls-top .controls-segmented-group button,
  #app-container header.top-bar .controls-top .controls-segmented-group .btn-pill-secondary {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: 32px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 0 12px !important;
    min-width: unset !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--db-text-muted) !important;
  }

  #app-container header.top-bar .controls-top .controls-segmented-group button:hover,
  #app-container header.top-bar .controls-top .controls-segmented-group .btn-pill-secondary:hover {
    color: var(--db-text) !important;
  }

  #app-container header.top-bar .controls-top .controls-segmented-group button:not(:last-child),
  #app-container header.top-bar .controls-top .controls-segmented-group .btn-pill-secondary:not(:last-child) {
    border-right: 1px solid var(--db-border) !important;
  }
  
  #app-container header.top-bar .controls-top .controls-segmented-group button i,
  #app-container header.top-bar .controls-top .controls-segmented-group .btn-pill-secondary i {
    font-size: 16px !important;
    margin: 0 !important;
  }

  /* Ocultar etiquetas de texto en los botones segmentados móviles */
  #app-container header.top-bar .controls-top .controls-segmented-group span {
    display: none !important;
  }

  /* Cajón inferior de herramientas (Bottom Sheet) */
  .mobile-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s;
  }

  .mobile-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-drawer-card {
    background: var(--surface-float);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--db-border);
    border-radius: var(--db-radius-xl) var(--db-radius-xl) 0 0;
    width: 100%;
    max-height: 80vh;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mobile-drawer-overlay.active .mobile-drawer-card {
    transform: translateY(0);
  }

  .mobile-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--db-border);
  }

  .mobile-drawer-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--db-text);
  }

  .mobile-drawer-close {
    background: transparent;
    border: none;
    color: var(--db-text-muted);
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-drawer-close svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
  }

  .mobile-drawer-body {
    padding: 12px 20px 32px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
  }

  .mobile-drawer-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: var(--surface-input);
    border: 1px solid var(--db-border);
    border-radius: 12px;
    color: var(--db-text);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .mobile-drawer-btn:active {
    background: var(--db-accent-glow);
    border-color: var(--db-accent);
    color: var(--db-accent);
  }

  .mobile-drawer-btn i,
  .mobile-drawer-btn svg {
    font-size: 18px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .mobile-drawer-btn.btn-danger-text {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.03);
  }

  .mobile-drawer-btn.btn-danger-text:active {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
  }

  /* Ajustes individuales de pestañas: SIN !important en display para respetar display: none de JS */
  #app-container .workspace aside.editor-panel nav.editor-tabs .tab-btn,
  #app-container .workspace aside.editor-panel nav.editor-tabs.expanded .tab-btn,
  #app-container .workspace aside.editor-panel nav.editor-tabs .settings-btn,
  #app-container .workspace aside.editor-panel nav.editor-tabs.expanded .settings-btn {
    padding: 0 16px;
    width: auto;
    height: 36px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    background: rgba(148, 163, 184, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.08) !important;
    border-radius: 8px;
    margin: 6px 4px;
    align-self: center;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: all 0.2s ease;
  }

  #app-container .workspace aside.editor-panel nav.editor-tabs .tab-btn svg,
  #app-container .workspace aside.editor-panel nav.editor-tabs.expanded .tab-btn svg,
  #app-container .workspace aside.editor-panel nav.editor-tabs .settings-btn svg,
  #app-container .workspace aside.editor-panel nav.editor-tabs.expanded .settings-btn svg {
    width: 15px;
    height: 15px;
    opacity: 0.8;
    fill: currentColor;
    display: inline-block;
    margin: 0;
  }

  #app-container .workspace aside.editor-panel nav.editor-tabs .tab-btn .tab-label,
  #app-container .workspace aside.editor-panel nav.editor-tabs.expanded .tab-btn .tab-label,
  #app-container .workspace aside.editor-panel nav.editor-tabs .settings-btn .tab-label,
  #app-container .workspace aside.editor-panel nav.editor-tabs.expanded .settings-btn .tab-label {
    opacity: 1;
    display: inline-block;
    width: auto;
    max-width: none;
    overflow: visible;
    transform: none;
    transition: none;
    font-size: 13px;
    white-space: nowrap;
  }

  #app-container .workspace aside.editor-panel nav.editor-tabs .tab-btn:hover,
  #app-container .workspace aside.editor-panel nav.editor-tabs.expanded .tab-btn:hover,
  #app-container .workspace aside.editor-panel nav.editor-tabs .settings-btn:hover,
  #app-container .workspace aside.editor-panel nav.editor-tabs.expanded .settings-btn:hover {
    color: var(--db-text);
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.18) !important;
  }

  #app-container .workspace aside.editor-panel nav.editor-tabs .tab-btn.active,
  #app-container .workspace aside.editor-panel nav.editor-tabs.expanded .tab-btn.active,
  #app-container .workspace aside.editor-panel nav.editor-tabs .settings-btn.active,
  #app-container .workspace aside.editor-panel nav.editor-tabs.expanded .settings-btn.active {
    color: var(--db-accent) !important;
    background: var(--db-accent-glow) !important;
    border-color: rgba(201, 162, 39, 0.3) !important;
    font-weight: 600;
    box-shadow: none;
  }

  #app-container .workspace aside.editor-panel nav.editor-tabs .tab-btn.active svg,
  #app-container .workspace aside.editor-panel nav.editor-tabs.expanded .tab-btn.active svg,
  #app-container .workspace aside.editor-panel nav.editor-tabs .settings-btn.active svg,
  #app-container .workspace aside.editor-panel nav.editor-tabs.expanded .settings-btn.active svg {
    opacity: 1;
    fill: var(--brand-primary);
  }

  /* Botones de navegación horizontal superpuestos (Scroll) */
  .nav-scroll-btn {
    position: absolute;
    top: 0;
    height: 48px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: var(--text-muted);
    z-index: 15;
    cursor: pointer;
    transition: opacity 0.25s ease, color 0.2s ease;
    padding: 0;
  }

  .nav-scroll-btn.scroll-left {
    left: 0;
    background: linear-gradient(to right, var(--db-card-bg) 70%, transparent);
    padding-right: 8px;
  }

  .nav-scroll-btn.scroll-right {
    right: 0;
    background: linear-gradient(to left, var(--db-card-bg) 70%, transparent);
    padding-left: 8px;
  }

  .nav-scroll-btn:hover {
    color: var(--brand-primary);
  }

  .nav-scroll-btn svg {
    width: 18px;
    height: 18px;
  }

  /* El cuerpo del editor llena todo el espacio vertical en móvil */
  #app-container aside.editor-panel .editor-body {
    padding-left: 0 !important;
    height: calc(100% - 48px);
    width: 100%;
    transition: none;
  }

  /* FORMULARIOS: Contenedor principal con Scroll vertical inercial */
  #app-container aside.editor-panel .editor-content {
    height: 100%;
    flex-grow: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    padding-bottom: 80px; /* Colchón de cortesía inferior */
    gap: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
  
  #app-container aside.editor-panel .editor-content fieldset {
    padding: 12px;
    gap: 12px;
  }

  #app-container aside.editor-panel .editor-content .photo-layout-row {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  
  #app-container aside.editor-panel .editor-content .photo-layout-row .avatar-shape-toggles-side {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  #app-container aside.editor-panel .editor-footer {
    display: none;
  }

  /* Panel de Vista Previa del CV */
  #app-container .preview-panel-outer {
    padding: 0;
  }

  #app-container .preview-panel-outer main#preview-panel {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: auto !important;
    height: calc(100% - var(--space-3)) !important; /* Deja espacio para márgenes superior/inferior */
    margin: var(--space-1) var(--space-3) var(--space-2) var(--space-3) !important;
    overflow: auto !important; /* Activar scroll nativo para móviles */
    -webkit-overflow-scrolling: touch !important; /* Desplazamiento inercial premium en iOS */
    background: var(--db-bg);
    position: relative;
    padding: var(--space-4) !important;
    box-sizing: border-box !important;
    border: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius-xl) !important;
    box-shadow: var(--db-shadow-sm) !important;
  }

  #app-container .preview-panel-outer main#preview-panel .cv-preview-wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: auto !important; /* Centra el CV cuando es pequeño y lo alinea al inicio cuando desborda, sin bloquear scroll */
    flex-shrink: 0 !important;
    box-shadow: var(--db-shadow) !important;
    will-change: transform !important;
    transition: none !important; /* Evita saltos y retrasos durante el escalado en pellizcos */
  }

  /* OCULTAR TOTALMENTE LA BARRA DE ZOOM FLOTANTE EN MÓVIL */
  #app-container .zoom-controls-floating {
    display: none !important;
  }

  /* Barra de Navegación Inferior para Móvil (Estilo cristalera Dock Premium) */
  body .mobile-nav-bar {
    display: flex;
    position: relative;
    flex-shrink: 0; /* Asegurar que no se encoja ante el workspace */
    height: 3.5rem;
    margin: var(--space-1) var(--space-3) var(--space-3) var(--space-3);
    background: var(--surface-float);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-xl);
    z-index: 998;
    justify-content: space-around;
    align-items: center;
    box-shadow: var(--db-shadow);
  }
  
  body .mobile-nav-bar .mobile-nav-btn {
    flex: 1;
    height: 100%;
    background: transparent;
    border: none;
    color: var(--db-text-muted);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 11px;
    font-weight: 500;
  }

  body .mobile-nav-bar .mobile-nav-btn .mobile-nav-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
  }

  body .mobile-nav-bar .mobile-nav-btn:hover {
    color: var(--db-text);
  }

  body .mobile-nav-bar .mobile-nav-btn.active {
    color: var(--db-accent);
    font-weight: 600;
  }
  
  body .mobile-nav-bar .mobile-nav-btn.active .mobile-nav-icon {
    transform: scale(1.1);
  }

  /* Ocultar el tirador de redimensión en móvil */
  .editor-resize-handle {
    display: none !important;
  }

  /* Ocultar wrapper de preferencias en la barra horizontal móvil */
  .nav-settings-wrapper {
    display: none !important;
  }

  /* Mostrar controles de tema en móvil */
  .mobile-only-control {
    display: inline-flex !important;
  }

  /* Ocultar la línea vertical de indicador activo en móvil */
  #app-container .workspace aside.editor-panel nav.editor-tabs .tab-btn::before,
  #app-container .workspace aside.editor-panel nav.editor-tabs.expanded .tab-btn::before {
    display: none !important;
  }
}

/* ==========================================================================
   3. ESTILOS DE IMPRESIÓN (BLINDAJE DE EXPORTACIÓN A PDF)
   Forzamos la ocultación de los controles interactivos de interfaz.
   Aquí sí se justifica el uso de '!important' según la Regla 17 del guardián
   para asegurar que las directivas del sistema de impresión no se ignoren.
   ========================================================================== */
@media print {
  /* Ocultar siempre la barra de navegación inferior móvil al imprimir/guardar */
  .mobile-nav-bar,
  #mobile-nav-bar {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Ocultar la barra de zoom flotante */
  .zoom-controls-floating,
  #zoom-controls-floating {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}