/* ============================================
   accessibility.css — Touch/responsive/A11y
   Garantiza que Gafo funcione bien en móvil, tablet y escritorio,
   y respete prefers-reduced-motion / contrast / focus-visible.
   ============================================ */

/* Base: areas de tap >= 44x44 px (WCAG 2.5.5) en móvil */
@media (hover: none) and (pointer: coarse) {
  button, a, input[type="checkbox"], input[type="radio"], .sb-item, .block-handle, .tt-tab,
  .gv-style-btn, .gv-mode, .gv-seg-btn,
  .mini-water-cup, .mini-habit-cell, .mini-counter-btn, .mini-water-btn, .mini-habit-cfg, .mini-habit-icon,
  .wb-tool, .wb-btn, .tt-btn,
  .db-board-card, .db-board-col-header, .db-add-row {
    min-height: 36px;
  }
  /* Handles de resize en touch ya están definidos en v7.css con
     @media (hover: none) and (pointer: coarse). No duplicar aquí. */
}

/* Safe area iOS (notch / home indicator) */
:root { --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom); }
.app-shell { padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); box-sizing: border-box; }
.topbar { padding-top: max(env(safe-area-inset-top), 0px) !important; }
.tt-widget {
  bottom: calc(20px + env(safe-area-inset-bottom)) !important;
}

/* Focus visible: outline accesible para navegación por teclado */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Inputs/textareas no muestran outline doble */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline-color: color-mix(in srgb, var(--text) 50%, transparent);
}

/* Skip link para usuarios de lector de pantalla */
.skip-link {
  position: absolute;
  left: 8px; top: 8px;
  background: var(--text); color: var(--bg);
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 600;
  z-index: 100000;
  transform: translateY(-200%);
  transition: transform 120ms ease;
}
.skip-link:focus { transform: translateY(0); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast */
@media (prefers-contrast: more) {
  :root { --border: var(--text-3); }
  .block.selected > .block-row > .block-content::before {
    background: color-mix(in srgb, var(--text) 22%, transparent) !important;
    outline: 1px solid var(--text-3);
  }
}

/* ============================================
   RESPONSIVE: tablet y móvil
   ============================================ */

/* Tablet (≤ 1024px): sidebar más estrecha, padding del editor menor */
@media (max-width: 1024px) {
  .sidebar { width: 240px; }
  .editor-content { max-width: 100%; padding: 0 16px !important; }
}

/* Móvil (≤ 768px): sidebar oculta por defecto, accesible con botón hamburguesa */
@media (max-width: 768px) {
  body, html { overflow-x: hidden; }
  /* IMPORTANTE: NO uses display: block en .app-shell — eso rompía la altura
     del .main y el editor-scroll no scrolleaba. Mantenemos flex (column) */
  .app-shell {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh;
    height: 100dvh;
  }
  .main {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  .editor-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    width: 84vw !important;
    max-width: 320px;
    z-index: 9000;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.25);
    pointer-events: none;
  }
  .sidebar.is-open { transform: translateX(0); pointer-events: auto; }
  .sb-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    z-index: 8999; opacity: 0; pointer-events: none;
    transition: opacity 200ms ease;
  }
  .sb-backdrop.is-on { opacity: 1; pointer-events: auto; }

  /* Hamburguesa visible solo en móvil */
  .sb-toggle {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 38px; height: 38px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-right: 8px;
    cursor: pointer;
  }

  /* Editor: padding mobile */
  .editor-content { padding: 0 12px !important; }
  .page-title { font-size: 28px !important; }
  .topbar { padding: 0 10px !important; }

  /* Modales: full-screen en móvil */
  .modal, .tt-modal, .ai-fl-resp-modal {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 92vh !important;
  }

  /* Editor scroll de DBs: scroll horizontal limpio */
  .db-board { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .db-table-wrap, .db-timeline-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Pizarra editor: barra de herramientas wrap */
  .wb-toolbar { flex-wrap: wrap !important; gap: 4px !important; }
  .wb-tool { width: 36px !important; height: 36px !important; }

  /* Charts: alto razonable */
  .chart-wrap { min-height: 240px; }

  /* Timer/widget flotante: pequeño y movible */
  .tt-widget { right: 12px !important; left: auto !important; }

  /* Time tracker tabs scroll */
  .tt-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Slash menu: full width en móvil */
  .slash-menu { width: 90vw !important; max-width: 360px; }
}

/* Móvil estrecho (≤ 480px) */
@media (max-width: 480px) {
  .topbar-actions .btn-text { display: none; }
  .gv-panel { width: 100% !important; max-width: 100% !important; }
  .gv-style-wrap { grid-template-columns: 1fr !important; }
  .editor-content { padding: 0 10px !important; }
}

/* Touch action: evita que el navegador haga scroll/zoom mientras
   se interactúa con el canvas de la pizarra y el grafo 3D. */
.wb-svg, .gv-canvas, #gv-stage canvas { touch-action: none; }

/* En móvil, los botones del topbar son cuadrados sin texto largo */
@media (max-width: 768px) {
  .topbar .btn { padding: 6px 8px; }
}

/* Editor scroll: SIEMPRE permitir scroll vertical en cualquier dispositivo */
.editor-scroll { -webkit-overflow-scrolling: touch; }


/* ============================================
   Mejoras específicas iOS / iPadOS / Android
   ============================================ */

/* iOS Safari: evita el zoom automático en inputs cuando font-size < 16px */
@media (hover: none) and (pointer: coarse) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="search"], input[type="tel"],
  input[type="url"], input[type="date"], input[type="time"],
  textarea, select, [contenteditable="true"] {
    font-size: 16px !important;
  }
  /* Excepción: cells de tablas/databases mantienen tamaño fijo
     para no romper layout (no causan zoom porque están dentro de overflow) */
  .db-table-wrap input, .db-table-wrap [contenteditable="true"],
  .cell-edit, .db-calc-cell {
    font-size: 13px !important;
  }
}

/* iPad / tablet (769-1180px) — sidebar siempre visible más compacta,
   sin hamburguesa, pero con paneles editor optimizados */
@media (min-width: 769px) and (max-width: 1180px) {
  .sidebar { width: 220px !important; }
  .editor-content { padding: 0 24px !important; }
  /* Grafo: panel lateral tipo overlay */
  .gv-panel { width: 280px !important; }
}

/* iPhone landscape (≤ 932px ancho con altura corta) */
@media (max-height: 480px) and (orientation: landscape) {
  .topbar { height: 44px !important; }
  .modal { max-height: 86vh !important; }
  .ai-floating { max-height: 80vh !important; }
}

/* Android Chrome: el address bar se oculta y dispara resize
   spurious. Garantiza que la pizarra/grafo usen 100% del stage */
.gv-stage, .wb-canvas-wrap { min-height: 360px; }

/* Tap highlight color limpio en lugar del azul iOS por defecto */
* { -webkit-tap-highlight-color: rgba(0,0,0,0.05); }
[data-theme="dark"] * { -webkit-tap-highlight-color: rgba(255,255,255,0.06); }

/* Permite scroll suave en contenedores con scrollbar personalizada */
.editor-scroll, .sb-tree, .modal-body, .ai-fl-list, .tt-list {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* iOS Safari: previene el "rubber band" en body */
@supports (-webkit-touch-callout: none) {
  html, body { overscroll-behavior-y: none; }
}

/* Block handles ahora siempre visibles en móvil (ver bloque más abajo) */

/* Daily checklist: acomoda mejor en pantallas estrechas */
@media (max-width: 480px) {
  .daily-checklist-row { flex-wrap: wrap; }
  .daily-checklist-text { flex-basis: 100%; order: 5; padding-left: 30px; }
  .daily-checklist-mode, .daily-checklist-cb { order: 1; }
  .daily-checklist-foot { flex-wrap: wrap; gap: 8px; }
  .daily-checklist-progress { flex: 1 1 100%; order: 5; }
}

/* Modo oscuro: gv-stage respeta tema desde v7.css (no override aquí) */


/* ============================================
   iPad / Apple Pencil — gestos y stylus
   ============================================ */

/* Bloquear gestos de zoom (doble tap, pinch) específicamente sobre canvas
   interactivos. Mantiene pinch en el editor y modales (a11y). */
.wb-svg, .wb-canvas-wrap,
.gv-canvas, .gv-stage, .gv-stage canvas,
.aig-canvas, .aig-svg {
  touch-action: none !important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Editor: la zona externa (contenedor) usa `manipulation` para suprimir el
   delay de 300ms y el doble-tap-zoom en iOS, sin afectar el caret porque
   el contenedor no es editable. */
.editor-blocks, .editor-content, .editor-bottom-space {
  touch-action: manipulation;
}

/* Las zonas editables permiten todo (caret, selección, scribble Pencil) */
.editable, [contenteditable="true"] {
  touch-action: auto;
  -webkit-user-select: text;
  user-select: text;
  -webkit-user-drag: none;
  -webkit-touch-callout: default;
}

/* Bloques: manipulation para click/tap rápido sin doble-tap-zoom */
.block, .block-row, .block-content {
  touch-action: manipulation;
}

/* Stylus específico: en iPadOS el Apple Pencil produce eventos de tipo "pen".
   El cursor por defecto debe ser de texto en zonas editables, no crosshair. */
@media (pointer: fine) and (any-pointer: fine) {
  .editable, [contenteditable="true"] { cursor: text; }
}

/* Bloquear el doble-tap-zoom de Safari en botones/controles */
button, .sb-item, .topbar button, .modal button,
.wb-tool, .wb-btn, .gv-mode, .gv-style-btn {
  touch-action: manipulation;
}

/* iPadOS: cuando se mantiene presionado, evitar el menú de "Compartir" */
@supports (-webkit-touch-callout: none) {
  .wb-svg, .gv-canvas, .gv-stage, .gv-stage canvas,
  .aig-canvas, .aig-svg, .block-handle, .icon-btn {
    -webkit-touch-callout: none;
  }
}


/* ============================================
   Accesibilidad teclado / lectores de pantalla / motion
   ============================================ */

/* Visibility helper para texto solo para lectores de pantalla */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* Live regions: contenedores ARIA para anuncios al lector de pantalla */
[aria-live="polite"], [aria-live="assertive"] {
  position: absolute; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Focus ring premium en todos los focusables */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Soporte explícito para tamaño de texto del usuario (zoom navegador) */
@media (min-resolution: 120dpi) {
  body { font-size: 1.02em; }
}

/* Modo daltónico (Color Blind Mode): reemplaza diferenciaciones por solo color
   con patrones (rayado/punteado) en estados kanban */
@media (prefers-color-scheme: light) {
  /* Light mode keeps default colors; user OS preference */
}

/* Print: oculta UI no esencial */
@media print {
  .sidebar, .topbar, .ai-floating, .tt-widget, .gv-panel, .modal, .auth-screen,
  .skip-link, .sb-toggle, .sb-backdrop, .editor-bottom-space {
    display: none !important;
  }
  body { background: white !important; color: black !important; }
  .editor-content { max-width: 100% !important; padding: 0 !important; }
  .block { page-break-inside: avoid; }
}

/* Pantallas ultra-anchas (>1920px): centro contenido y limita ancho del editor */
@media (min-width: 1920px) {
  .editor-content { max-width: 920px; margin: 0 auto; }
}

/* Forzar respeto de prefers-reduced-motion en animaciones GSAP-like */
@media (prefers-reduced-motion: reduce) {
  .gv-stage canvas { animation: none !important; }
  .auth-loading-overlay .aol-spinner { animation: none !important; border: 3px solid var(--text); border-radius: 50%; }
}


/* ============================================
   FIX MÓVIL: mapa mental, pizarra y editor en pantallas pequeñas
   ============================================ */

/* En móvil/tablet portrait el grafo cambia a layout vertical: panel arriba
   colapsable, stage abajo ocupa el resto. Sin esto el stage queda con 0 ancho
   y no se ve nada. */
@media (max-width: 900px) {
  .gv-body {
    flex-direction: column !important;
  }
  .gv-panel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 38vh;
    overflow-y: auto;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .gv-stage {
    flex: 1 1 auto !important;
    min-height: 50vh !important;
    width: 100% !important;
  }
  /* Pizarra: barra de herramientas se envuelve y el lienzo ocupa todo */
  .wb-toolbar {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    padding: 4px 6px !important;
    gap: 2px !important;
  }
  .wb-tool { width: 40px !important; height: 40px !important; }
  .wb-canvas-wrap, .wb-svg {
    width: 100% !important;
    min-height: 60vh !important;
  }
  /* Whiteboard list grid: 1 columna en móvil */
  .wb-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Block-handle (mover bloques) — en móvil/touch se muestra al lado del bloque
   y se hace más grande y visible permanentemente. Antes estaba oculto en
   <540px o cuando no había hover. */
@media (hover: none) and (pointer: coarse) {
  .block-handle {
    display: flex !important;
    opacity: 0.5 !important;
    pointer-events: auto !important;
    left: -36px !important;
    top: 2px !important;
  }
  .block-handle .bh-btn {
    width: 28px !important;
    height: 28px !important;
  }
  /* El handle debe estar siempre visible, no solo en hover */
  .block:hover > .block-row > .block-handle,
  .block:focus-within > .block-row > .block-handle {
    opacity: 1 !important;
  }
}

/* En pantallas <540px no quitamos el block-handle: lo recolocamos para que
   quepa dentro del padding del editor. */
@media (max-width: 540px) {
  .block-handle {
    display: flex !important;
    left: -34px !important;
  }
  .page-wrap {
    padding-left: 38px !important;
  }
}