:root{
  --bg: #f5f6f8;
  --panel: #ffffff;
  --panel2: #fbfbfc;
  --border: rgba(0,0,0,.12);
  --text: #111;
  --muted: rgba(0,0,0,.55);
  --accent: #2b6cff;
  /* Tabs (Controles/Insertar/Texto) – activo en celeste */
  --tab-active: #cfefff;
  --danger: #c62828;

  --toolbar-h: 110px;
  --btn: 38px;
  --radius: 10px;
  --shadow: 0 6px 18px rgba(0,0,0,.08);
}

*{ box-sizing:border-box; }
html, body{
  height:100%;
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
}

#app{
  height:100%;
  display:flex;
  flex-direction:column;
}

.toolbar{
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 50;
}

.toolbar__row{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap: wrap;
}

/* Intento de 1 fila en pantallas grandes.
   Si no cabe, el flex-wrap hace que baje automáticamente. */
.toolbar__row--main{
  padding-bottom: 0;
}

.toolbar__settings{
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 280px;
}

/* Orden / alineación
   Requisito: acciones (Archivo + Undo/Redo + nombre) primero a la izquierda. */
.actions{ order: 1; margin-left: 0; }
.toolset{ order: 2; }
.toolbar__settings{ order: 3; }

.toolset, .actions{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
}

.sep{
  width: 1px;
  height: 26px;
  background: var(--border);
  display:inline-block;
  margin: 0 4px;
}

.toolbtn{
  height: var(--btn);
  min-width: var(--btn);
  padding: 0 10px;
  border: 1px solid var(--border);
  background: var(--panel2);
  border-radius: 10px;
  cursor: pointer;
  user-select:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  font-weight: 600;
  color: var(--text);
}

.toolbtn:active{
  transform: translateY(1px);
}

.toolbtn[disabled]{
  opacity: .45;
  cursor:not-allowed;
}

.toolbtn--danger{
  border-color: rgba(198,40,40,.35);
  color: var(--danger);
}

.toolbtn.is-active{
  outline: 2px solid rgba(43,108,255,.35);
  border-color: rgba(43,108,255,.55);
  background: #eef4ff;
}

.toolbtn--file{
  position: relative;
  overflow:hidden;
}

.toolbtn--file input[type="file"]{
  position:absolute;
  inset: 0;
  opacity:0;
  cursor:pointer;
}

/* =========================
   Menú Archivo (tipo Word/Excel)
   ========================= */
.menu{
  position: relative;
}

.menu > summary{
  list-style: none;
}
.menu > summary::-webkit-details-marker{
  display:none;
}

.menu[open] > summary{
  outline: 2px solid rgba(43,108,255,.35);
  border-color: rgba(43,108,255,.55);
  background: #eef4ff;
}

/* ✅ Permite deshabilitar menús (ej. Encapsular texto cuando no hay texto seleccionado/editando) */
.menu[data-disabled="1"]{
  opacity: .55;
  pointer-events: none;
}
.menu[data-disabled="1"] > summary{
  cursor: not-allowed;
}

.caret{
  font-size: 12px;
  opacity: .7;
}

.menu__panel{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 230px;
  max-width: calc(100vw - 20px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
  /* IMPORTANTE:
     <details> oculta el contenido cuando NO tiene [open], pero la UA stylesheet
     puede ser sobreescrita por estilos del autor. Por eso, por defecto
     ocultamos el panel y lo mostramos solo cuando el menú está abierto.
  */
  display:none;
  flex-direction: column;
  gap: 4px;
  z-index: 80;
}

/* Mostrar panel solo cuando el <details> está abierto */
.menu[open] > .menu__panel{
  display:flex;
}

/* Respeta el atributo [hidden] en toda la app (evita que reglas display:flex lo anulen). */
[hidden]{
  display:none !important;
}

.menu__panel .toolbtn{
  width: 100%;
  justify-content: flex-start;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: 10px;
  padding: 0 12px;
  font-weight: 650;
}

.menu__panel .toolbtn:hover{
  background: #eef4ff;
}

.menu__panel .toolbtn--danger{
  color: var(--danger);
}

.menu__panel .toolbtn--danger:hover{
  background: rgba(198,40,40,.08);
}

.menu__sep{
  height: 1px;
  background: var(--border);
  margin: 4px 6px;
}

/* =========================
   Selector de tabla (estilo Excel, máx 5x5)
   ========================= */
.table-picker{
  padding: 6px 6px 4px;
}

.table-picker__title{
  font-weight: 750;
  font-size: 13px;
  margin: 2px 6px 8px;
}

.table-grid-picker{
  display: grid;
  grid-template-columns: repeat(5, 22px);
  grid-auto-rows: 22px;
  gap: 5px;
  padding: 4px 6px 6px;
}

.table-grid-cell{
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: #ffffff;
  cursor: pointer;
  user-select: none;
}

.table-grid-cell.is-on{
  border-color: rgba(43,108,255,.65);
  background: #eef4ff;
}

.table-picker__label{
  margin: 0 6px 2px;
  font-size: 12px;
  color: var(--muted);
}

/* =========================
   Toggle de barra (móvil/tablet)
   ========================= */
.toolbar-toggle{
  display:none;
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  z-index: 90;

  height: 40px;
  width: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  cursor: pointer;
  user-select: none;

  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;

  touch-action: manipulation;
}

.toolbar-toggle:active{
  transform: translateY(1px);
}

.settings{
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 0;
}

.settings.is-hidden{ display:none; }

/* =========================
   Barra de edición de texto
   - siempre visible y reservando espacio
   - modo pasivo cuando no hay texto seleccionado/editando
   ========================= */
#settingsText.is-passive{
  opacity: .45;
}

/* Evitar que el opacity de [disabled] se multiplique (0.45 * 0.45)
   dentro de la barra pasiva: queremos que el conjunto quede aprox. en 0.45. */
#settingsText.is-passive .toolbtn[disabled],
#settingsText.is-passive .segbtn[disabled]{
  opacity: 1;
}

.segbtn[disabled]{
  opacity: .45;
  cursor: not-allowed;
}

.field{
  display:flex;
  align-items:center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--panel2);
  border-radius: 12px;
  padding: 6px 10px;
}

.field label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.field input[type="color"]{
  width: 36px;
  height: 24px;
  border: none;
  background: transparent;
  padding:0;
}

.field input[type="range"]{
  width: 140px;
}

.field select{
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  background: white;
  font-weight: 600;
}

.field input[type="text"]{
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  background: white;
  font-weight: 650;
  min-width: 140px;
}

.field--docname{
  padding: 4px 8px;
}

.savestatus{
  font-size: 12px;
  color: var(--muted);
  font-weight: 650;
  padding: 0 6px;
  user-select:none;
}

.field--inline{
  border: none;
  background: transparent;
  padding: 0;
}

.segmented{
  display:inline-flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow:hidden;
}

.segbtn{
  border: none;
  background: white;
  height: 34px;
  width: 40px;
  cursor:pointer;
  font-weight: 800;
}
.segbtn.is-active{
  background: #eef4ff;
}

.hint{
  font-size: 12px;
  color: var(--muted);
  padding: 4px 0;
}

.board{
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #fff;
  touch-action: none; /* ✅ required para pointer events + pinch custom */
}

#board{
  width:100%;
  height:100%;
  display:block;
  touch-action: none;
}



.hand{
  position:absolute;
  left:0;
  top:0;
  /* En videosauto la mano es ~900px sobre base 1920 (≈47%). */
  width: clamp(280px, 52vw, 1400px);
  display:block;
  pointer-events:none;
  z-index: 35;
  transform: translate3d(-9999px,-9999px,0);
  opacity: 0;
  visibility: hidden;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.18));
  will-change: transform, opacity;
}

.hand.is-visible{
  opacity: 1;
  visibility: visible;
}

/* ===============================
   Modal (selector de mano)
================================ */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 200;
}
.modal.is-open{ display:flex; }

.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.38);
}

.modal__panel{
  position:relative;
  width: min(760px, 100%);
  max-height: min(78vh, 680px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
  overflow: hidden;

  display: flex;

  flex-direction: column;
}

.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  background: var(--panel2);
  border-bottom: 1px solid var(--border);
}

.modal__body{
  padding: 12px;
  overflow: auto;

  flex: 1;

  min-height: 0;

  overscroll-behavior: contain;

  -webkit-overflow-scrolling: touch;

  touch-action: pan-y;
}

.modal__foot{
  display:flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--panel2);
}

/* Diálogo (alert/confirm) */
.dialog__foot{ justify-content: flex-end; }

.dialog__buttons{
  display:flex;
  gap: 10px;
  width: 100%;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.dialog__body{
  white-space: pre-wrap;
  line-height: 1.35;
  color: var(--text);
}

.hand-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.hand-item{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
  padding: 8px;
  cursor: pointer;
  user-select: none;
}

.hand-item.is-active{
  outline: 2px solid rgba(43,108,255,.45);
  border-color: rgba(43,108,255,.55);
}

.hand-item img{
  width: 100%;
  height: 86px;
  object-fit: contain;
  display:block;
}

/* Los pickers (mano/figuras) también pueden renderizar SVG previews */
.hand-item svg{
  width: 100%;
  height: 86px;
  display:block;
}

.hand-item .cap{
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===============================
   Recuperar (lista de dibujos)
================================ */
.recover-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.recover-item{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
}

.recover-item:hover{
  border-color: rgba(43,108,255,.55);
}

.recover-item.is-active{
  outline: 2px solid rgba(43,108,255,.22);
  border-color: rgba(43,108,255,.55);
}

.recover-item .left{
  min-width: 0;
}

.recover-item .title{
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recover-item .meta{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.hand-tweaks{
  display:flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.text-editor{
  position:absolute;
  left:0;
  top:0;
  min-width: 120px;
  min-height: 40px;
  padding: 8px 10px;
  border: 2px solid rgba(43,108,255,.6);
  border-radius: 10px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  outline: none;
  display:none;
  z-index: 30;
  white-space: pre-wrap;
}

.text-editor.is-visible{
  display:block;
}

/* ✅ Handles DOM (puntos) mientras se edita texto */
.editor-handles{
  position: absolute;
  inset: 0;
  z-index: 35;
  pointer-events: none;
}

.editor-handle{
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid rgba(43,108,255,.95);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  touch-action: none;
}

.editor-handle[data-handle="n"],
.editor-handle[data-handle="s"]{ cursor: ns-resize; }
.editor-handle[data-handle="e"],
.editor-handle[data-handle="w"]{ cursor: ew-resize; }
.editor-handle[data-handle="nw"],
.editor-handle[data-handle="se"]{ cursor: nwse-resize; }
.editor-handle[data-handle="ne"],
.editor-handle[data-handle="sw"]{ cursor: nesw-resize; }
.editor-handle[data-handle="rotate"]{ cursor: grab; }

.hud{
  position:absolute;
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  bottom: 10px;
  background: rgba(0,0,0,.55);
  color: white;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  z-index: 40;


  pointer-events:none;
}
/* =========================
   Sugerencias tipo burbuja (toasts)
   ========================= */
.toast-host{
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  top: var(--toast-top, calc(env(safe-area-inset-top, 0px) + 72px));
  z-index: 95;

  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;

  pointer-events: none;
  max-width: min(340px, calc(100vw - 20px));
}

.toast{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  border-radius: 12px;
  padding: 8px 10px;

  font-size: 12px;
  line-height: 1.25;
  color: #111;
  white-space: pre-line;

  opacity: 0;
  transform: translateX(12px);
  transition: opacity .16s ease, transform .16s ease;
}

.toast.is-in{
  opacity: 1;
  transform: translateX(0);
}

.toast.is-out{
  opacity: 0;
  transform: translateX(12px);
}


/* Botón flotante de eliminar (aparece solo cuando hay un objeto seleccionado) */
.floating-trash{
  position: absolute;
  left: -9999px;
  top: -9999px;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  z-index: 45;

  height: 38px;
  width: 38px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  touch-action: manipulation;
}

.floating-trash.is-visible{
  opacity: 1;
  visibility: visible;
}

@media (max-width: 720px){
  :root{
    --btn: 34px;
  }
  .toolbar{
    padding: 8px 8px;
  }
  .field input[type="range"]{
    width: 110px;
  }
  .hud{
    right: 8px;
    bottom: 8px;
  }
}

/*
  Barra superior dinámica:
  - en móviles/tablets se oculta por defecto y se abre con el botón ☰
  - botones más compactos y ocultar texto largo (solo donde corresponde)
  - en desktop NO se toca el comportamiento
*/
@media (max-width: 1024px){
  :root{
    --btn: clamp(30px, 6.6vw, 36px);
  }

  /* Mostrar el botón de toggle */
  .toolbar-toggle{
    display:inline-flex;
  }

  /* La barra pasa a overlay (no roba espacio de dibujo) */
  .toolbar{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 85;

    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    padding-right: calc(10px + env(safe-area-inset-right, 0px) + 56px); /* espacio para el botón ✕/☰ */
    padding-left: calc(10px + env(safe-area-inset-left, 0px));
    max-height: calc(100vh - 18px);
    overflow: auto;

    transform: translateY(calc(-100% - 22px));
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
  }

  body.toolbar-open .toolbar{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Compactar un poco la UI dentro de la barra */
  .toolbar__row{
    gap: 8px;
  }

  /* En móvil/tablet: acciones primero, luego herramientas, opciones abajo */
  .actions{ order: 1; }
  .toolset{ order: 2; }
  .toolbar__settings{
    order: 3;
    flex-basis: 100%;
    min-width: 0;
  }
  .toolbar__settings .settings{
    width: 100%;
  }

  .toolbtn{
    padding: 0 8px;
    gap: 6px;
    font-size: 14px;
  }

  /* Ocultar texto largo SOLO en botones marcados */
  .toolbtn[data-compact-label="1"] .btntext{
    display:none;
  }

  /* En la barra, el "Archivo" del campo nombre puede ser compacto */
  .field--docname input[type="text"]{
    min-width: 120px;
  }


  /* ✅ Tablet/ móvil: algunos navegadores muestran "parches" negros cuando una imagen grande con filter:drop-shadow
     se mueve con translate3d. En pantallas chicas preferimos estabilidad a shadow. */
  .hand{
    filter: none;
  }
}

/*
  En modo vertical (portrait) en móviles/tablets, 47vw se vuelve demasiado chico
  y se nota el “corte” de la mano. Usamos el alto de pantalla (vh) para
  escalarla sin tocar desktop ni landscape.
*/
@media (orientation: portrait) and (max-width: 1024px){
  .hand{
    /* Fallback CSS (si JS no corre): mano más grande para que el “corte” inferior quede fuera de cuadro */
    width: clamp(320px, 92vh, 1800px);
    max-width: 260vw; /* permitir crecer mucho más que el ancho */
  }
}




/* =========================
   Ribbon (estilo Office)
   ========================= */
.toolbar.ribbon{
  padding: 10px 12px;
}

/*
  Desktop: evitar 3 filas innecesarias.
  Queremos:
  - Fila 1: pestañas (Archivo/Controles/Insertar/Texto)
  - Fila 2: izquierda (nombre + undo/redo) y derecha (panel activo)
*/
@media (min-width: 1025px){
  .toolbar.ribbon{
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "tabs tabs"
      "topbar panels";
    column-gap: 12px;
    row-gap: 8px;
    align-items: start;
  }

  .ribbon__tabs{ grid-area: tabs; margin-bottom: 0; }
  .ribbon__topbar{ grid-area: topbar; padding-bottom: 0; }
  .ribbon__panels{ grid-area: panels; }

  /* En desktop, intentamos mantener el bloque de documento en una sola línea */
  .ribbon__topbar{ flex-wrap: nowrap; }
  .ribbon__topbar .actions{ flex-wrap: nowrap; }
}

.ribbon__topbar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 6px;
}

/*
  ✅ Evitar "brinco" del canvas al activar la pestaña Texto.
  En pantallas angostas, la combinación de controles de Texto + nombre/estado del archivo
  puede forzar un wrap y hacer crecer el header. Ocultamos esos elementos SOLO en Texto.
*/
#toolbar.ribbon-text-active .ribbon__topbar .field--docname,
#toolbar.ribbon-text-active .ribbon__topbar #saveStatus,
#toolbar.ribbon-text-active .ribbon__topbar .sep{
  display:none;
}

.ribbon__tabs{
  display:flex;
  align-items:flex-end;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.ribbon__tabbtn{
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  padding: 8px 12px;
  border-radius: 10px 10px 0 0;
  font-weight: 700;
  color: rgba(0,0,0,.72);
  cursor: pointer;
  user-select: none;
}

.ribbon__tabbtn:hover{
  background: rgba(43,108,255,.08);
}

/* Tabs normales (Controles/Insertar/Texto) */
.ribbon__tabbtn.is-active[data-ribbon-tab]{
  background: var(--tab-active);
  border-color: rgba(43,108,255,.35);
  color: var(--text);
}

/* Tab Archivo (<details>) conserva su estilo */
#fileMenu[open] > summary.ribbon__tabbtn{
  background: var(--panel2);
  border-color: var(--border);
  color: var(--text);
}

.ribbon__tabbtn.is-disabled,
.ribbon__tabbtn[disabled]{
  opacity: .45;
  cursor: not-allowed;
}

/* <details> como tab */
#fileMenu.menu{
  margin-right: 2px;
}
#fileMenu.menu > summary.ribbon__tabbtn{
  list-style: none;
}
#fileMenu.menu > summary.ribbon__tabbtn::-webkit-details-marker{ display:none; }

/* Paneles */
.ribbon__panels{
  display:block;
}

.ribbon__panel{
  /* Solo el panel activo debe verse.
     Esto evita que se “amontonen” opciones de varias pestañas.
  */
  display:none;
  gap: 10px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap: wrap;
}

.ribbon__panel.is-active{
  display:flex;
}

/* Mejoras de menú Archivo dentro de la cinta */
.ribbon__filepanel{
  min-width: 280px;
}

/* Host de imágenes predeterminadas */
.preset-images-host{
  display:flex;
  align-items:center;
}

.preset-img-panel{
  min-width: 260px;
  max-height: min(60vh, 420px);
  overflow: auto;
}

.preset-img-thumb{
  width: 20px;
  height: 20px;
  object-fit: contain;
  display:inline-block;
}

/* En tablets/móvil: tabs más compactos */
@media (max-width: 720px){
  .ribbon__tabbtn{
    padding: 7px 10px;
    font-size: 14px;
  }
}

/* LiveBoard recording controls reuse the original responsive ribbon. */
.liveboard-record { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:6px 12px; border-bottom:1px solid #ddd; font-size:13px; }
.liveboard-record label { display:flex; gap:5px; align-items:center; }
.liveboard-record select { max-width:190px; }
#recordDownloads { display:flex; gap:6px; flex-wrap:wrap; }
#saveStatus { max-width:320px; white-space:normal; }
.recover-item { width:100%; text-align:left; cursor:pointer; }