/* ===== MindTasks Mobile Styles ===== */
/* Estilos responsive para dispositivos móviles */
/* Estrategia: Vista Árbol = solo lectura, Columnas = swipe, Hoy = completa */

/* ===== Variables móviles ===== */
:root {
  --mobile-header-height: 56px;
  --mobile-bottom-nav-height: 60px;
  --mobile-column-width: 100vw;
  --mobile-swipe-threshold: 50px;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  /* Espacio para el indicador de dots y botones */
  --mobile-bottom-space: 80px;
}

/* ===== Detección de móvil ===== */
/* Clase .is-mobile se añade via JS en pantallas touch <= 1024px */

/* ===== MOBILE: Header/Toolbar ===== */
@media (max-width: 767px), (max-width: 1024px) and (pointer: coarse) {
  /* Header compacto - una sola línea */
  .canvas-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    /* Altura total = header + safe area superior */
    height: calc(var(--mobile-header-height) + var(--safe-area-top));
    /* Padding superior para la barra de estado del iPhone */
    padding-top: var(--safe-area-top);
    padding-left: max(12px, var(--safe-area-left));
    padding-right: max(12px, var(--safe-area-right));
    padding-bottom: 0;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* Asegurar que los items estén centrados en la parte visible */
    box-sizing: border-box;
  }

  /* Toolbar left: logo + view switch */
  .toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  /* Logo más pequeño - ocultar en móviles muy pequeños */
  .app-logo {
    font-size: 15px;
    font-weight: 600;
  }

  @media (max-width: 374px) {
    .app-logo {
      display: none;
    }
  }

  /* ===== MÓVIL MINIMALISTA: Ocultar todo lo no esencial ===== */

  /* Ocultar TODOS los labels de texto */
  .toolbar-label {
    display: none !important;
  }

  /* Ocultar divisores, estado guardado, ayuda */
  .toolbar-divider,
  .save-status,
  #save-now,
  #help-btn {
    display: none !important;
  }

  /* Ocultar grupo de utilidades completo (colapsar tareas, expandir nodos, ajustar vista) */
  .utilities-group {
    display: none !important;
  }

  /* Ocultar grupo canvas-mode completo (tema, fullscreen van al menú móvil) */
  .canvas-mode-group {
    display: none !important;
  }

  /* Mostrar undo/redo en toolbar móvil (se ocultan en pantallas muy estrechas) */
  #undo-btn,
  #redo-btn {
    display: flex !important;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
  }

  /* Ocultar undo/redo del dropdown por defecto */
  .mobile-undo-redo-section,
  .mobile-undo-redo-item,
  .mobile-undo-redo-divider {
    display: none !important;
  }

  /* Ocultar logo en móvil */
  .app-logo {
    display: none !important;
  }

  /* ===== MOSTRAR menú de opciones móvil ===== */
  .mobile-options-wrapper {
    display: block !important;
    position: relative;
  }

  #mobile-options-btn {
    min-width: 40px;
    min-height: 40px;
  }

  /* Dropdown flotante debajo del botón (NO bottom-sheet) */
  .mobile-options-dropdown {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    min-width: 180px;
    width: auto;
    border-radius: 12px;
    padding: 6px 0;
    max-height: none;
    overflow: visible;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  }

  /* Items más compactos */
  .mobile-options-item {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
  }

  .mobile-options-item i {
    font-size: 16px;
  }

  /* Botones disabled en el dropdown */
  .mobile-options-item.disabled,
  .mobile-options-item:disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  /* Ocultar secciones/labels para ser más compacto */
  .mobile-options-section {
    display: none;
  }

  .mobile-options-divider {
    margin: 4px 0;
  }

  /* Toolbar center: solo switch de vistas */
  .toolbar-center {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Solo mostrar el view-group con el switch */
  .toolbar-center .view-group {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
  }

  /* Switch de vistas más grande, compacto y bien alineado */
  .view-switch {
    padding: 2px;
    gap: 2px;
    display: flex;
    align-items: center;
  }

  .view-option {
    width: 38px;
    height: 38px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .view-option i {
    font-size: 22px;
    line-height: 1;
  }

  .view-switch-thumb {
    width: 38px;
    height: 38px;
  }

  /* Selector de mapa compacto - más espacio para el título */
  .mindmap-selector-wrapper {
    flex: 1;
    max-width: 200px;
    min-width: 0;
  }

  .mindmap-selector-btn {
    padding: 6px 10px;
    font-size: 14px;
    width: 100%;
    justify-content: center;
    gap: 6px;
  }

  .mindmap-selector-btn .mindmap-title {
    flex: 1;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Mostrar icono del mapa en móvil */
  .mindmap-selector-btn .ph-brain,
  .mindmap-selector-btn #current-mindmap-icon {
    display: inline-flex !important;
    font-size: 16px;
    flex-shrink: 0;
  }

  .mindmap-selector-btn .mindmap-caret {
    font-size: 10px;
    flex-shrink: 0;
  }

  /* Toolbar right - SOLO avatar del usuario */
  .toolbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }

  /* Botones táctiles */
  .toolbar-btn {
    min-width: 40px;
    min-height: 40px;
    border-radius: 10px;
  }

  /* Ocultar toggle tema de toolbar (va al menú usuario) */
  #toggle-theme {
    display: none !important;
  }

  /* Ocultar fullscreen en móvil */
  #toggle-fullscreen {
    display: none !important;
  }

  .user-avatar {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  /* Dropdown del usuario adaptado - bottom sheet */
  .user-dropdown {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-width: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 8px 0 calc(16px + var(--safe-area-bottom));
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 1001;
    background: var(--bg-primary);
  }

  .user-dropdown:not(.hidden) {
    transform: translateY(0);
  }

  /* Asegurar que el backdrop cubra toda la pantalla */
  .user-menu-wrapper {
    position: static;
  }

  .user-dropdown-item {
    padding: 14px 20px;
    font-size: 15px;
  }

  /* Mindmap dropdown adaptado - bottom sheet */
  .mindmap-dropdown {
    position: fixed;
    top: auto !important;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 8px 0 calc(16px + var(--safe-area-bottom));
    max-height: 70vh;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .mindmap-dropdown:not(.hidden) {
    transform: translateY(0);
  }

  .mindmap-dropdown-header {
    padding: 12px 20px;
    font-size: 13px;
  }

  .mindmap-dropdown-item {
    padding: 14px 20px;
    font-size: 15px;
  }

  /* Handle visual para bottom sheets */
  .user-dropdown::before,
  .mindmap-dropdown::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--border-medium);
    border-radius: 2px;
  }

  .user-dropdown,
  .mindmap-dropdown {
    padding-top: 20px;
  }

  /* ===== OVERRIDE COMPLETO de body.mobile-ui ===== */
  /* Estos estilos sobrescriben los de styles.css para eliminar espacios grises */

  /* Canvas area - SIN padding extra */
  .canvas-area,
  body.mobile-ui .canvas-area {
    padding-top: calc(var(--mobile-header-height) + var(--safe-area-top)) !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    height: 100vh;
    height: 100dvh;
  }

  /* Toolbar - posición fija, sin padding extra que cause espacios */
  .canvas-toolbar,
  body.mobile-ui .canvas-toolbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    height: calc(var(--mobile-header-height) + var(--safe-area-top)) !important;
    padding-top: var(--safe-area-top) !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-light) !important;
    box-sizing: border-box !important;
  }

  /* Toolbar right - NO es bottom bar, está en el header */
  .toolbar-right,
  body.mobile-ui .toolbar-right {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 0 !important;
    border-top: none !important;
    box-shadow: none !important;
    background: transparent !important;
    min-height: auto !important;
    justify-content: flex-end !important;
  }

  /* Toolbar center - visible en nuestra implementación */
  body.mobile-ui .toolbar-center {
    display: flex !important;
  }

  /* Banner readonly adaptado */
  .readonly-banner {
    position: fixed;
    top: calc(var(--mobile-header-height) + var(--safe-area-top));
    left: 0;
    right: 0;
    z-index: 999;
    padding: 8px 12px;
    font-size: 12px;
  }

  .readonly-banner + .canvas-container {
    padding-top: 40px;
  }

  /* Mindmap selector dropdown - eliminar delay de hover en móvil */
  .mindmap-item {
    -webkit-tap-highlight-color: transparent;
  }

  .mindmap-item:hover {
    background: transparent;
  }

  .mindmap-item:active {
    background: var(--bg-tertiary);
  }

  /* Mostrar siempre los botones de acción en móvil */
  .mindmap-item-actions {
    opacity: 1;
  }
}

/* ===== MOBILE: Vista Árbol (Solo Lectura con Zoom/Pan) ===== */
@media (max-width: 767px), (max-width: 1024px) and (pointer: coarse) {
  /* Canvas con scroll en ambas direcciones */
  body:not(.kanban-view):not(.today-view) .canvas-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    /* Scroll instantáneo para evitar animaciones */
    scroll-behavior: auto !important;
  }

  /* Nodes container debe ser lo suficientemente grande para el mapa */
  body:not(.kanban-view):not(.today-view) .nodes-container {
    min-width: max-content;
    min-height: max-content;
    width: max-content;
    /* Padding generoso para navegación */
    padding: 20px;
    padding-right: 80px;
    padding-bottom: calc(120px + var(--safe-area-bottom));
  }

  /* Líneas de conexión visibles */
  body:not(.kanban-view):not(.today-view) .connections-layer {
    opacity: 0.6;
  }

  body:not(.kanban-view):not(.today-view) .connections-layer path {
    stroke-width: 2px;
  }

  /* Nodos con ancho generoso para legibilidad */
  body:not(.kanban-view):not(.today-view) .node {
    min-width: 280px;
    max-width: 400px;
    font-size: 15px;
  }

  /* Header de nodo táctil */
  body:not(.kanban-view):not(.today-view) .node-header {
    padding: 12px 14px 12px 0;
    min-height: 48px;
    cursor: pointer;
    gap: 10px;
  }

  /* Barra de color alineada al borde izquierdo */
  body:not(.kanban-view):not(.today-view) .node-color-bar {
    width: 10px;
    margin: -12px 12px -12px 0;
    border-radius: var(--radius-lg) 0 0 0;
  }

  /* Título legible */
  body:not(.kanban-view):not(.today-view) .node-title {
    font-size: 15px;
    line-height: 1.4;
    /* pointer-events: none - DESHABILITADO: interfiere con drag en desktop con ventana pequeña */
    word-break: break-word;
  }

  /* Toggle de expand/collapse táctil */
  body:not(.kanban-view):not(.today-view) .node-toggle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }

  /* Ocultar botones de edición */
  body:not(.kanban-view):not(.today-view) .node .add-child-btn,
  body:not(.kanban-view):not(.today-view) .node-menu-btn,
  body:not(.kanban-view):not(.today-view) .node-color-btn {
    display: none !important;
  }

  /* Tareas legibles */
  body:not(.kanban-view):not(.today-view) .node-tasks {
    padding: 4px 6px 6px;
  }

  body:not(.kanban-view):not(.today-view) .task-item {
    padding: 4px 6px;
    min-height: 32px;
    font-size: 14px;
    gap: 6px;
    /* pointer-events: none - DESHABILITADO: interfiere con drag en desktop con ventana pequeña */
  }

  /* Checkbox de tarea táctil */
  body:not(.kanban-view):not(.today-view) .task-checkbox-custom {
    pointer-events: auto;
    width: 20px;
    height: 20px;
  }

  /* Ocultar botones de tareas */
  body:not(.kanban-view):not(.today-view) .add-task-btn,
  body:not(.kanban-view):not(.today-view) .add-subtask-btn,
  body:not(.kanban-view):not(.today-view) .task-delete,
  body:not(.kanban-view):not(.today-view) .promote-subtask-btn {
    display: none !important;
  }

  /* Subtareas */
  body:not(.kanban-view):not(.today-view) .task-item.subtask {
    padding-left: 32px;
    font-size: 13px;
  }

  /* Indicador visual de modo navegación */
  body:not(.kanban-view):not(.today-view)::after {
    content: 'Doble clic en nodo para editar';
    position: fixed;
    bottom: calc(16px + var(--safe-area-bottom));
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 100;
    pointer-events: none;
  }
}

/* ===== MOBILE: Vista Columnas (Kanban con Swipe) ===== */
@media (max-width: 767px), (max-width: 1024px) and (pointer: coarse) {
  /* Canvas container ocupa todo el espacio disponible SIN espacios */
  .kanban-view .canvas-container {
    overflow: hidden;
    position: absolute !important;
    top: calc(var(--mobile-header-height) + var(--safe-area-top)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Nodes container también sin espacios */
  .kanban-view .nodes-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .kanban-view .kanban-container {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    /* SIN scroll-snap - control manual via JS para evitar conflictos */
    -webkit-overflow-scrolling: touch;
    height: 100% !important;
    /* Ocultar scrollbar horizontal */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  /* Clase para desactivar scroll suave temporalmente (durante DOM updates) */
  .kanban-view .kanban-container.no-smooth-scroll {
    scroll-behavior: auto !important;
  }

  .kanban-view .kanban-container::-webkit-scrollbar {
    display: none;
  }

  /* Cada columna ocupa 90% para mostrar peek de la siguiente */
  .kanban-view .kanban-column {
    flex: 0 0 90%;
    min-width: 90%;
    max-width: 90%;
    /* Sin scroll-snap - control manual via JS */
    border-right: none;
    background: var(--bg-canvas);
  }

  /* En portrait: padding derecho para que la última columna pueda alinearse a la izquierda */
  @media (orientation: portrait) {
    .kanban-view .kanban-container::after {
      content: '';
      flex: 0 0 10%; /* Mismo espacio que el peek de la siguiente columna */
      min-width: 10%;
    }
  }

  /* Deshabilitar transiciones en elementos internos (no afecta scroll) */
  .kanban-view .kanban-card,
  .kanban-view .kanban-card *,
  .kanban-view .node-tasks,
  .kanban-view .task-item {
    transition: none !important;
    animation: none !important;
  }

  /* Card seleccionada tiene borde más visible */
  .kanban-view .kanban-card.selected {
    border-left: 4px solid var(--node-color, var(--accent-primary));
    background: var(--bg-primary);
  }

  /* Botón de volver en header (estilo iOS) */
  .kanban-view .kanban-column[data-column]:not([data-column='0']) .kanban-column-header {
    cursor: pointer;
  }

  .kanban-view .kanban-column[data-column]:not([data-column='0']) .kanban-column-header::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-left: 1.5px solid var(--accent-primary);
    border-bottom: 1.5px solid var(--accent-primary);
    transform: rotate(45deg);
    margin-right: 4px;
    flex-shrink: 0;
  }

  /* Header de columna mínimo (solo informativo) */
  .kanban-view .kanban-column-header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 5px 10px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .kanban-view .kanban-column-title {
    font-size: 11px;
    font-weight: 500;
    flex: 1;
    opacity: 0.8;
  }

  .kanban-view .kanban-column-icon {
    font-size: 12px;
  }

  /* Badge de conteo en header */
  .kanban-view .kanban-column-count {
    font-size: 10px;
    padding: 1px 5px;
    background: var(--bg-tertiary);
    border-radius: 8px;
  }

  /* Indicador de navegación entre columnas */
  .kanban-view .kanban-column-header::after {
    content: attr(data-column-index);
    font-size: 9px;
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    padding: 1px 6px;
    border-radius: 6px;
    margin-left: auto;
  }

  /* Contenido de columna con scroll vertical */
  .kanban-view .kanban-column-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* Espacio suficiente abajo para dots indicator + botones + safe area */
    padding: 12px 12px calc(var(--mobile-bottom-space) + var(--safe-area-bottom) + 20px);
    -webkit-overflow-scrolling: touch;
    /* touch-action aquí para scroll vertical en lista de tareas */
    touch-action: pan-y;
  }

  /* Cards más compactas */
  .kanban-view .kanban-card {
    margin-bottom: 10px;
  }

  /* Indicadores de swipe (puntos) */
  .kanban-view::after {
    content: '';
    position: fixed;
    bottom: calc(20px + var(--safe-area-bottom));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 100;
    pointer-events: none;
  }

  /* Deshabilitar drag HTML5 nativo en móvil - usamos touch drag manual */
  .kanban-view .kanban-card,
  .kanban-view .node-header,
  .kanban-view .task-item,
  .kanban-view [draggable="true"] {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Las cards no bloquean gestos - el scroll se controla en kanban-column-content */
  .kanban-view .kanban-card {
    /* touch-action heredado del contenedor - permite swipe horizontal entre columnas */
  }

  /* Permitir reordenar verticalmente */
  .kanban-view .kanban-card.dragging {
    opacity: 0.8;
    transform: scale(1.02);
    box-shadow: var(--node-shadow-active);
  }

  /* Barra de color más ancha para mejor tap en móvil */
  .kanban-view .kanban-card .node-color-bar {
    width: 20px;
    min-width: 20px;
    margin: -8px 8px -8px 0;
  }
}

/* ===== Indicador de columnas (dots) ===== */
.kanban-dots-indicator {
  display: none;
}

@media (max-width: 767px), (max-width: 1024px) and (pointer: coarse) {
  .kanban-view .kanban-dots-indicator {
    display: flex;
    position: fixed;
    bottom: calc(16px + var(--safe-area-bottom));
    left: 50%;
    transform: translateX(-50%);
    gap: 8px;
    z-index: 100;
    background: var(--bg-primary);
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .kanban-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-medium);
    transition: all 0.2s ease;
  }

  .kanban-dot.active {
    background: var(--accent-primary);
    width: 20px;
    border-radius: 4px;
  }
}

/* ===== MOBILE: Vista Hoy ===== */
@media (max-width: 767px), (max-width: 1024px) and (pointer: coarse) {
  .today-view .canvas-container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(16px + var(--safe-area-bottom));
  }

  .today-view .nodes-container {
    padding: 12px;
  }

  .today-view .today-container {
    padding-bottom: calc(16px + var(--safe-area-bottom));
  }

  /* Grupos de tareas más compactos */
  .today-view .today-group {
    margin-bottom: 16px;
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    overflow: hidden;
  }

  body.mobile-dragging .today-view .today-group {
    overflow: visible;
  }

  .today-view .today-group-header {
    padding: 12px 14px;
    font-size: 14px;
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    z-index: 5;
  }

  .today-view .today-group-title {
    font-size: 16px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
  }

  /* Tareas táctiles */
  .today-view .task-item {
    min-height: 48px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
  }

  .today-view .task-item:last-child {
    border-bottom: none;
  }

  .today-view .today-group-tasks > .task-item:last-child {
    border-bottom: none;
  }

  .today-view .subtasks-container .task-item:last-child {
    border-bottom: none;
  }

  .today-view .task-checkbox-custom {
    width: 22px;
    height: 22px;
  }

  .today-view .task-title {
    font-size: 15px;
  }

  /* Botón añadir tarea */
  .today-view .add-task-btn {
    padding: 12px 14px;
    font-size: 14px;
  }

  /* Indicadores de drop más visibles en móvil */
  .today-view .today-group.drop-before::before,
  .today-view .today-group.drop-after::after {
    top: 0;
    bottom: auto;
    height: 6px;
    background: var(--accent-primary);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent-primary) 60%, transparent);
    z-index: 6;
  }

  .today-view .today-task-item.today-drop-before::before,
  .today-view .today-task-item.today-drop-after::after {
    height: 3px;
    background: var(--accent-primary);
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent-primary) 55%, transparent);
  }

  .today-view .today-group.drop-after::after {
    top: auto;
    bottom: 0;
  }

}

/* ===== MOBILE: Modales ===== */
@media (max-width: 767px), (max-width: 1024px) and (pointer: coarse) {
  /* Modales como bottom sheets */
  .modal-overlay {
    align-items: flex-end;
  }

  .modal-content {
    max-width: none;
    width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 90vh;
    margin: 0;
    padding-bottom: calc(20px + var(--safe-area-bottom));
  }

  .modal-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-light);
  }

  .modal-body {
    padding: 16px;
    overflow-y: auto;
    max-height: 60vh;
  }

  .modal-actions {
    padding: 12px 16px;
    flex-direction: column;
    gap: 8px;
  }

  .modal-btn {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
  }

  /* Context menu como bottom sheet */
  .context-menu {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-width: none;
    padding-bottom: calc(12px + var(--safe-area-bottom));
  }

  .context-menu button {
    min-height: 48px;
    font-size: 15px;
  }

  /* Color picker como bottom sheet */
  .color-picker {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-width: none;
    padding: 20px 16px calc(20px + var(--safe-area-bottom));
    grid-template-columns: repeat(6, 1fr);
  }

  .color-picker button {
    width: 44px;
    height: 44px;
  }
}

/* ===== MOBILE: Feedback widget ===== */
@media (max-width: 767px), (max-width: 1024px) and (pointer: coarse) {
  /* Ocultar completamente el widget de feedback en móvil */
  /* Tapa botones importantes y no es esencial */
  .feedback-widget {
    display: none !important;
  }

  .feedback-toggle {
    display: none !important;
  }

  .feedback-form {
    display: none !important;
  }
}

/* ===== MOBILE: Toast notifications ===== */
@media (max-width: 767px), (max-width: 1024px) and (pointer: coarse) {
  .toast-container {
    bottom: calc(80px + var(--safe-area-bottom));
    left: 16px;
    right: 16px;
  }

  .toast {
    max-width: none;
    width: 100%;
  }
}

/* ===== MOBILE: Tutorial ===== */
@media (max-width: 767px), (max-width: 1024px) and (pointer: coarse) {
  .tutorial-container {
    max-width: none;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }

  .tutorial-slide {
    padding: 20px;
  }

  .tutorial-nav {
    padding: 12px 16px calc(12px + var(--safe-area-bottom));
  }
}

/* ===== Touch feedback ===== */
@media (pointer: coarse) {
  /* Feedback táctil mejorado */
  .toolbar-btn:active,
  .view-option:active {
    transform: scale(0.92);
    opacity: 0.8;
  }

  .kanban-card:active {
    transform: scale(0.98);
  }

  .task-item:active {
    background: var(--bg-tertiary);
  }

  .modal-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
  }

  /* Deshabilitar hover en touch */
  .toolbar-btn:hover,
  .kanban-card:hover,
  .task-item:hover {
    transform: none;
  }
}

/* ===== Landscape móvil ===== */
@media (max-width: 767px) and (orientation: landscape), (max-width: 1024px) and (pointer: coarse) and (orientation: landscape) {
  .canvas-toolbar {
    height: 44px;
    padding: 0 16px;
  }

  .view-option {
    width: 28px;
    height: 28px;
  }

  .kanban-view .kanban-container {
    height: calc(100vh - 44px);
    height: calc(100dvh - 44px);
  }

  /* En landscape móvil, evitar columnas demasiado anchas */
  .kanban-view .kanban-column {
    flex: 0 0 80%;
    min-width: 80%;
    max-width: 80%;
  }
}

/* Landscape tablet: mostrar varias columnas tipo desktop */
@media (min-width: 768px) and (max-width: 1024px) and (pointer: coarse) and (orientation: landscape) {
  .kanban-view .kanban-column {
    flex: 0 0 45%;
    min-width: 45%;
    max-width: 45%;
  }
}

/* Columna placeholder para dar espacio a la derecha - solo en landscape */
.kanban-column-placeholder {
  display: none; /* Oculta por defecto (portrait) */
}

@media (orientation: landscape) {
  .kanban-column-placeholder {
    display: block;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none;
  }
}

/* ===== Prevent overscroll on iOS ===== */
@media (max-width: 767px), (max-width: 1024px) and (pointer: coarse) {
  html,
  body {
    overscroll-behavior: none;
  }

  .canvas-container {
    overscroll-behavior: contain;
  }
}

/* ===== PWA standalone mode ===== */
@media (display-mode: standalone) {
  .canvas-toolbar {
    padding-top: var(--safe-area-top);
  }
}

/* ===== Animaciones reducidas ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== MOBILE: Mejoras de edición ===== */
@media (max-width: 767px), (max-width: 1024px) and (pointer: coarse) {
  /* Hacer títulos de tareas más fáciles de tocar para editar */
  .kanban-view .task-title,
  .today-view .task-title {
    cursor: text;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 8px 4px;
  }

  /* Estilo cuando está en modo edición */
  .task-title.editing {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
  }

  /* Títulos de nodo editables */
  .kanban-view .node-title {
    cursor: text;
    min-height: 32px;
    padding: 4px 8px;
  }

  .kanban-view .node-title.editing {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    outline: 2px solid var(--accent-primary);
  }

  /* Asegurar que los inputs de tareas nuevas reciban focus correctamente */
  .task-item.new-task .task-title {
    caret-color: var(--accent-primary);
  }

  /* Mejorar visibilidad del cursor en inputs */
  .task-title:focus,
  .node-title:focus {
    caret-color: var(--accent-primary);
  }
}

/* ===== MOBILE DRAG & DROP ===== */

/* Estado de preparación (long press iniciando) */
.drag-preparing {
  transition:
    transform 0.15s ease,
    opacity 0.15s ease,
    box-shadow 0.15s ease;
}

@media (max-width: 767px), (max-width: 1024px) and (pointer: coarse) {
  .drag-preparing {
    transform: scale(0.98);
    opacity: 0.85;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  /* Indicador visual de que se puede arrastrar */
  .drag-preparing::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid var(--today-accent);
    border-radius: inherit;
    opacity: 0.6;
    animation: dragPrepPulse 0.3s ease-out;
  }

  @keyframes dragPrepPulse {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 0.6;
      transform: scale(1);
    }
  }
}

/* Elemento siendo arrastrado (original) - SOLO para cards y tareas, NO para body */
.kanban-card.dragging,
.task-item.dragging {
  opacity: 0.3 !important;
  transform: scale(0.95) !important;
  /* pointer-events: none; -- QUITADO: Chrome cancela el drag si el elemento origen pierde pointer-events */
}

/* Body durante drag - prevenir interacciones accidentales */
body.mobile-dragging {
  -webkit-user-select: none;
  user-select: none;
}

/* CRÍTICO iOS Safari: touch-action para elementos draggables
   Usamos pan-y para permitir scroll vertical en listas de tareas.
   El drag se maneja con long-press desde JS. */
@media (max-width: 1024px) {
  /* Headers de nodos y grupos - no necesitan scroll */
  .kanban-view .node-header.draggable,
  .today-view .today-group-header {
    touch-action: none;
    -webkit-touch-callout: none;
  }

  /* Tareas - permitir scroll vertical, drag via long-press */
  .kanban-view .task-item,
  .kanban-view .task-drag-handle,
  .today-view .task-drag-handle {
    touch-action: pan-y;
    -webkit-touch-callout: none;
  }

  /* Durante drag activo, bloquear todo en elementos relevantes */
  body.mobile-dragging .task-item,
  body.mobile-dragging .kanban-card,
  body.mobile-dragging .kanban-column-content {
    touch-action: none;
  }
}

/* Clon visual del elemento arrastrado - hereda estilos de la clase original */
.mobile-drag-clone {
  /* Solo estilos que no sobrescriben la apariencia original */
  will-change: transform;
}

.mobile-drag-clone * {
  pointer-events: none;
}

/* Asegurar que el clon de kanban-card mantenga su estilo */
.mobile-drag-clone.kanban-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
}

/* Asegurar que el clon de task-item mantenga su estilo */
.mobile-drag-clone.task-item {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

/* ===== Drop Indicators ===== */

/* Indicador de posición NODOS: antes */
.kanban-card.drop-before {
  position: relative;
}

.kanban-card.drop-before::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 4px;
  right: 4px;
  height: 4px;
  background: var(--today-accent);
  border-radius: 2px;
  z-index: 100;
  box-shadow: 0 0 8px var(--today-accent);
}

/* Indicador de posición NODOS: después */
.kanban-card.drop-after::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 4px;
  right: 4px;
  height: 4px;
  background: var(--today-accent);
  border-radius: 2px;
  z-index: 100;
  box-shadow: 0 0 8px var(--today-accent);
}

/* Indicador de subordinación NODOS: dentro (mover dentro de nodo) */
/* En móvil con cards con hijos: solo el HEADER se ilumina, no todo el card */
.kanban-card.drop-inside {
  /* Base: outline sutil en todo el card */
  outline: 2px solid var(--today-accent) !important;
  outline-offset: -1px;
}

/* El header se ilumina completamente para indicar "soltar aquí para expandir/añadir" */
.kanban-card.drop-inside .node-header {
  background: var(--today-accent-soft) !important;
  box-shadow: 0 0 12px var(--today-accent) !important;
  border-radius: var(--radius-md);
}

/* Las tareas dentro del card NO deben iluminarse cuando el card está en drop-inside */
/* (las tareas individuales tienen sus propios indicadores) */
.kanban-card.drop-inside .kanban-tasks,
.kanban-card.drop-inside .task-item:not(.drop-before):not(.drop-after):not(.drop-as-subtask) {
  background: transparent !important;
  box-shadow: none !important;
}

/* ===== Drop Indicators para TAREAS ===== */
/* Más sutiles y específicos para tareas */

/* Indicador de reordenar TAREAS: antes (línea arriba) */
.task-item.drop-before {
  position: relative;
}

.task-item.drop-before::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 8px;
  right: 8px;
  height: 3px;
  background: var(--accent-primary);
  border-radius: 2px;
  z-index: 100;
}

/* Indicador de reordenar TAREAS: después (línea abajo) */
.task-item.drop-after::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 8px;
  right: 8px;
  height: 3px;
  background: var(--accent-primary);
  border-radius: 2px;
  z-index: 100;
}

/* Indicador de SUBORDINAR tarea (convertir en subtarea) */
/* Borde izquierdo prominente + fondo sutil - claramente diferente de before/after */
.task-item.drop-as-subtask {
  border-left: 4px solid var(--accent-primary) !important;
  background: var(--accent-light) !important;
  padding-left: calc(var(--task-padding-left, 12px) + 8px) !important;
  border-radius: var(--radius-sm);
}

/* Indicador en cards */
.drop-target-active.kanban-card {
  z-index: 50;
}

.drop-target-active.task-item {
  z-index: 50;
}

/* Indicador de añadir al final de tareas */
.drop-end .node-tasks,
.drop-end .kanban-tasks {
  outline: 2px dashed var(--today-accent);
  outline-offset: -2px;
  background: var(--today-accent-soft);
  border-radius: var(--radius-md);
}

/* Animación sutil para indicadores de drop */
@keyframes dropIndicatorGlow {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* ===== Feedback visual durante drag ===== */
@media (max-width: 767px), (max-width: 1024px) and (pointer: coarse) {
  /* En móvil: mantener opacidad completa en todo - más claro y evita bugs */
  /* Solo el elemento siendo arrastrado tiene opacidad reducida */
  body.mobile-dragging .kanban-card,
  body.mobile-dragging .task-item {
    opacity: 1;
  }

  /* Mejorar visibilidad del clon - mantener estilos originales con sombra destacada */
  .mobile-drag-clone.task-item {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    border-color: var(--accent-primary);
  }

  .mobile-drag-clone.kanban-card {
    max-height: 140px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    border-color: var(--accent-primary);
  }
}

/* ===== Drag Handle para Tareas ===== */
/* Oculto siempre - el drag funciona sin él (clon del desktop) */
.task-drag-handle {
  display: none !important;
}

@media (max-width: 767px), (max-width: 1024px) and (pointer: coarse) {
  /* Indicador visual de hover-expand pendiente - SOLO en el header */
  .kanban-card.hover-expand-pending .node-header {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
    background: var(--accent-light);
    border-radius: var(--radius-md);
  }
}

/* ===== MOBILE: Vista Árbol Solo Lectura ===== */
/* En móvil, la vista árbol es de navegación/lectura.
   Doble tap en un nodo salta a la vista Columnas para editar. */

@media (max-width: 767px), (max-width: 1024px) and (pointer: coarse) {
  /* Ocultar botones de edición en vista árbol (cuando NO es kanban ni today) */
  body.is-mobile:not(.kanban-view):not(.today-view) .add-child-btn,
  body.is-mobile:not(.kanban-view):not(.today-view) .add-task-btn,
  body.is-mobile:not(.kanban-view):not(.today-view) .add-subtask-btn,
  body.is-mobile:not(.kanban-view):not(.today-view) .task-delete,
  body.is-mobile:not(.kanban-view):not(.today-view) .node-menu-btn,
  body.is-mobile:not(.kanban-view):not(.today-view) .node-color-btn {
    display: none !important;
  }

  /* Los títulos no son editables - cursor normal */
  body.is-mobile:not(.kanban-view):not(.today-view) .node-title,
  body.is-mobile:not(.kanban-view):not(.today-view) .task-title {
    cursor: default;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Permitir interacción con el nodo completo para doble tap */
  body.is-mobile:not(.kanban-view):not(.today-view) .node-header {
    cursor: pointer;
    pointer-events: auto;
  }

  /* Permitir el toggle de expansión de nodos */
  body.is-mobile:not(.kanban-view):not(.today-view) .node-toggle {
    display: flex !important;
    pointer-events: auto;
  }

  /* Permitir checkboxes de tareas */
  body.is-mobile:not(.kanban-view):not(.today-view) .task-checkbox,
  body.is-mobile:not(.kanban-view):not(.today-view) .task-checkbox-custom {
    pointer-events: auto;
  }

  /* Indicador visual de que es tocable */
  body.is-mobile:not(.kanban-view):not(.today-view) .node:active .node-header {
    background: var(--bg-tertiary);
  }

  /* Hint visual para doble tap - nodo seleccionado */
  body.is-mobile:not(.kanban-view):not(.today-view) .node.selected .node-header::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid var(--accent-primary);
    border-radius: var(--radius-md);
    opacity: 0.5;
    pointer-events: none;
  }

  /* Deshabilitar zoom de texto y selección accidental en vista árbol */
  body.is-mobile:not(.kanban-view):not(.today-view) #nodes-container {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  /* Deshabilitar selección de texto en vista árbol móvil */
  body.is-mobile:not(.kanban-view):not(.today-view) .node,
  body.is-mobile:not(.kanban-view):not(.today-view) .node-header,
  body.is-mobile:not(.kanban-view):not(.today-view) .node-title,
  body.is-mobile:not(.kanban-view):not(.today-view) .task-item,
  body.is-mobile:not(.kanban-view):not(.today-view) .task-title {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}

/* ===== PWA Install Banner ===== */
.pwa-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  padding: 16px;
  padding-bottom: calc(16px + var(--safe-area-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pwa-install-banner.visible {
  transform: translateY(0);
}

.pwa-install-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pwa-install-icon {
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pwa-install-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pwa-install-text strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.pwa-install-text span {
  font-size: 13px;
  color: var(--text-secondary);
}

.pwa-install-actions {
  display: flex;
  gap: 8px;
}

.pwa-install-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--radius-md, 8px);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
}

.pwa-install-primary {
  background: var(--accent-primary, #6366f1);
  color: white;
}

.pwa-install-primary:active {
  background: var(--accent-hover, #4f46e5);
  transform: scale(0.98);
}

.pwa-install-secondary {
  background: var(--bg-secondary, #f3f4f6);
  color: var(--text-secondary);
}

.pwa-install-secondary:active {
  background: var(--bg-tertiary, #e5e7eb);
}

/* iOS Instructions Modal */
.pwa-ios-modal {
  position: fixed;
  inset: 0;
  z-index: 10002;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.pwa-ios-modal.visible {
  opacity: 1;
}

.pwa-ios-modal-content {
  background: var(--bg-primary);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  overflow: auto;
  padding-bottom: var(--safe-area-bottom, 0px);
}

.pwa-ios-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  font-weight: 600;
  font-size: 16px;
}

.pwa-ios-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.pwa-ios-modal-body {
  padding: 20px;
}

.pwa-ios-modal-body p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

.pwa-ios-share-icon {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md, 8px);
  color: var(--accent-primary, #6366f1);
  font-size: 13px;
}

.pwa-ios-share-icon svg {
  flex-shrink: 0;
}

/* Hide banner on desktop */
@media (min-width: 1025px) {
  .pwa-install-banner {
    display: none;
  }
}

/* Hide PWA mobile banner when auth modal is visible (blocks Google button) */
body:has(.auth-modal:not(.hidden)) .pwa-install-banner,
body:has(.auth-container) .pwa-install-banner {
  display: none !important;
}

/* ===== PWA Install Button en Auth ===== */
/* Botón de instalación en la pantalla de login/registro */
.pwa-install-auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--accent-primary, #6366f1) 0%, #8b5cf6 100%);
  color: white;
  border: none;
  border-radius: var(--radius-md, 8px);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.pwa-install-auth-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.pwa-install-auth-btn:active {
  transform: translateY(0);
}

.pwa-install-auth-btn i {
  font-size: 18px;
}

.pwa-install-auth-btn.hidden {
  display: none !important;
}

/* En móvil mostrar el botón de auth (más visible que el banner inferior) */
@media (max-width: 1024px) {
  .pwa-install-auth-btn {
    display: flex !important;
  }
}

/* ===== MÓVIL ESTRECHO: Selector de mapa compacto (solo icono) ===== */
/* En móviles <480px, mostrar solo el icono del mapa para dar espacio al menú de usuario */
@media (max-width: 480px) {
  .mindmap-selector-wrapper {
    flex: 0 0 auto;
    max-width: none;
    min-width: auto;
  }

  .mindmap-selector-btn {
    padding: 6px 8px;
    width: auto;
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
    gap: 4px;
  }

  /* Ocultar título, mostrar icono y flecha pequeña */
  .mindmap-selector-btn .mindmap-title {
    display: none !important;
  }

  /* Mostrar flecha pequeña para indicar que es desplegable */
  .mindmap-selector-btn .mindmap-caret {
    display: inline-flex !important;
    font-size: 10px;
    opacity: 0.7;
  }

  .mindmap-selector-btn .ph-brain,
  .mindmap-selector-btn #current-mindmap-icon {
    font-size: 20px;
    margin: 0;
  }
}

/* ===== PANTALLAS MUY ESTRECHAS ===== */
/* En móviles <380px, mover undo/redo al dropdown para que el user menu siempre sea visible */
@media (max-width: 380px) {
  /* Ocultar undo/redo del toolbar */
  #undo-btn,
  #redo-btn {
    display: none !important;
  }

  /* Mostrar undo/redo en dropdown */
  .mobile-undo-redo-section,
  .mobile-undo-redo-item,
  .mobile-undo-redo-divider {
    display: flex !important;
  }

  .mobile-undo-redo-section {
    display: block !important;
  }

  /* Hacer el toolbar más compacto */
  .main-toolbar {
    padding: 4px 6px !important;
    gap: 4px !important;
  }

  .toolbar-btn {
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
  }

  /* Save status más compacto */
  .save-status {
    padding: 4px 6px !important;
    gap: 4px !important;
  }

  .save-status-text {
    display: none !important;
  }

  /* Dividers más pequeños */
  .toolbar-divider {
    margin: 0 2px !important;
  }

  /* Asegurar que user menu siempre sea visible */
  .user-menu-wrapper {
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  #user-menu-btn {
    min-width: 32px !important;
    min-height: 32px !important;
  }

  .user-avatar {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
  }
}