/* Colores de la marca en variables: cambiando estas líneas cambia toda la app. */
:root {
  --noche: #050E1F;       /* textos, iconos y cabecera */
  --acento: #0F766E;      /* herramienta activa y botones principales */
  --acento-claro: #14B8A6;/* selección, tiradores y resaltes */
  --gris: #8FA3BF;        /* textos secundarios y bordes suaves */
  --lienzo: #F5F7FA;
  --puntos: #C9D3E0;      /* cuadrícula */
  --panel: #FFFFFF;
  --campo: #FFFFFF;       /* fondo de campos de texto y listas */
  --hover: #EEF2F7;
  --borde: #E1E7EF;       /* separadores y bordes de paneles */
  --borde-campo: #D5DDE8; /* campos y marcos */
  --texto: #050E1F;       /* textos de la interfaz */
  --texto-2: #46566E;     /* textos secundarios */
  --texto-3: #5B6B82;     /* fechas y autores */
  --tinta: #050E1F;       /* cómo se VE el color tinta por defecto en la pizarra (el dato guardado no cambia) */
  --relleno-blanco: #FFFFFF; /* cómo se VE el relleno blanco de las formas (el dato guardado no cambia) */
  --sobre-acento: #fff;   /* texto encima del acento */
  --peligro: #B42318;
  --muestra-borde: rgba(5, 14, 31, .15);
  --globo-activo: #050E1F;
  --invertido: #050E1F;   /* tooltip y aviso */
  --sobre-invertido: #fff;
  --sombra: 0 1px 3px rgba(5, 14, 31, .08), 0 8px 24px rgba(5, 14, 31, .08);
  --radio: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  color: var(--texto);
  color-scheme: light;
}
/* Modo oscuro: <html data-tema="oscuro"> (lo pone un script en <head> antes del primer pintado y luego js/ui.js). */
:root[data-tema="oscuro"] {
  --acento: #14B8A6;
  --lienzo: #0B1426;
  --puntos: #1E2B45;
  --panel: #111C33;
  --campo: #0B1426;
  --hover: #1A2742;
  --borde: #24324F;
  --borde-campo: #2E3E5E;
  --texto: #E6EDF7;
  --texto-2: #8FA3BF;
  --texto-3: #8FA3BF;
  --tinta: #E6EDF7;
  --relleno-blanco: #1A2742;
  --sobre-acento: #050E1F;
  --peligro: #F97066;
  --muestra-borde: rgba(230, 237, 247, .28);
  --globo-activo: #0F766E;
  --invertido: #E6EDF7;
  --sobre-invertido: #050E1F;
  --sombra: 0 1px 3px rgba(0, 0, 0, .45), 0 10px 30px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
/* Contenido en oscuro: lo pintado con la tinta por defecto (#050E1F) se ve claro. Las notas y los rellenos de color no cambian (el blanco, ver .relleno-blanco). */
[data-tema="oscuro"] .mundo [stroke="#050E1F" i]:not([fill="#050E1F" i]) { stroke: var(--tinta); }
[data-tema="oscuro"] .conector [stroke="#050E1F" i] { stroke: var(--tinta); }
[data-tema="oscuro"] .conector [fill="#050E1F" i] { fill: var(--tinta); }
[data-tema="oscuro"] .trazo.resaltador { mix-blend-mode: normal; } /* "multiply" no se ve sobre fondo oscuro */
[data-tema="oscuro"] .dialogo::backdrop { background: rgba(0, 0, 0, .6); }
/* Logo en oscuro: nota clara, rayas oscuras y flecha verde azulado claro. */
[data-tema="oscuro"] .logo-nota { fill: #E6EDF7; }
[data-tema="oscuro"] .logo-rayas { stroke: #0B1426; }
[data-tema="oscuro"] .logo-flecha { stroke: #14B8A6; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--lienzo);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

button { font: inherit; color: inherit; cursor: pointer; }
/* Los campos de texto sí dejan seleccionar (en iOS, sin esto no se puede escribir en ellos). */
input, textarea { user-select: text; -webkit-user-select: text; }

/* ---------- Lienzo y mundo ---------- */
.lienzo {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background-color: var(--lienzo);
  background-image: radial-gradient(circle at 1px 1px, var(--puntos) 1.1px, transparent 1.6px);
  cursor: default;
}
.lienzo.sin-cuadricula { background-image: none; }
.lienzo[data-herramienta="mano"], .lienzo.espacio { cursor: grab; }
.lienzo.agarrando { cursor: grabbing; }
.lienzo[data-herramienta="nota"], .lienzo[data-herramienta="formas"], .lienzo[data-herramienta="conector"],
.lienzo[data-herramienta="marco"], .lienzo[data-herramienta="comentario"] { cursor: crosshair; }
.lienzo[data-herramienta="texto"] { cursor: text; }
.lienzo[data-herramienta="lapiz"], .lienzo[data-herramienta="lapiz"] * { cursor: crosshair; }

/* Capa "mundo": se transforma con translate() scale() desde la esquina 0,0. */
.mundo { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.elemento { position: absolute; }
.elemento.seleccionado { outline: calc(2px / var(--zoom, 1)) solid var(--acento-claro); outline-offset: calc(1px / var(--zoom, 1)); }

/* ---------- Notas adhesivas ---------- */
.nota {
  display: flex;
  align-items: center;
  border-radius: 3px;
  color: var(--noche);
  box-shadow: 0 1px 2px rgba(5, 14, 31, .12), 0 6px 14px rgba(5, 14, 31, .09);
}
/* Nota blanca: borde gris muy fino para que se distinga del fondo (sigue blanca en modo oscuro). */
.nota.blanca { box-shadow: inset 0 0 0 1px #D5DDE8, 0 1px 2px rgba(5, 14, 31, .12), 0 6px 14px rgba(5, 14, 31, .09); }
.nota-texto {
  width: 100%;
  flex: none;
  min-height: 1.2em;
  text-align: center;
  line-height: 1.22;
  font-weight: 500;
  white-space: pre-wrap;
  overflow-wrap: normal;
  outline: none;
  overflow: hidden;
}
.editando .txt { user-select: text; -webkit-user-select: text; cursor: text; overflow: visible; outline: none; }
.editando .txt:empty::before { content: "Escribe aquí…"; opacity: .45; }

/* Destino resaltado al enganchar un conector */
.elemento.destino { outline: calc(3px / var(--zoom, 1)) solid var(--acento-claro); outline-offset: calc(3px / var(--zoom, 1)); }

/* ---------- Formas ---------- */
.forma { display: flex; align-items: center; justify-content: center; padding: 10px; color: var(--noche); }
.forma.sin-relleno { color: var(--tinta); } /* sin relleno, el texto va sobre el lienzo */
/* En oscuro, el relleno blanco se ve como superficie oscura y su texto claro (el dato guardado no cambia). */
[data-tema="oscuro"] .forma.relleno-blanco { color: var(--tinta); }
[data-tema="oscuro"] .forma.relleno-blanco .forma-svg > :not([fill="none"]) { fill: var(--relleno-blanco); } /* las líneas interiores siguen sin relleno */
.forma-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.forma-texto {
  position: relative; width: 100%; max-height: 100%; overflow: hidden;
  text-align: center; line-height: 1.25; font-weight: 500; white-space: pre-wrap; overflow-wrap: break-word; outline: none;
}

/* ---------- Marcos: el cuerpo deja pasar los clics (para hacer recuadros dentro); el título se puede agarrar ---------- */
.marco { pointer-events: none; border: calc(1px / var(--zoom, 1)) solid var(--borde-campo); border-radius: 4px; background: var(--fondo); }
/* En oscuro, el fondo guardado se ve como un toque de color sobre un azul algo más claro que el lienzo. */
[data-tema="oscuro"] .marco { background: #16223B; background: color-mix(in srgb, var(--fondo) 7%, #16223B); }
.marco-titulo {
  position: absolute; left: 0; bottom: 100%; max-width: 100%;
  margin-bottom: calc(6px / var(--zoom, 1)); padding: 0 calc(3px / var(--zoom, 1));
  font-size: calc(14px / var(--zoom, 1)); font-weight: 600; line-height: 1.3; color: var(--texto);
  white-space: pre; overflow: hidden; text-overflow: ellipsis; pointer-events: auto; cursor: move; outline: none;
}
.editando .marco-titulo { max-width: none; background: var(--panel); border-radius: 4px; }

/* ---------- Texto suelto ---------- */
.texto-suelto { padding: 4px; line-height: 1.3; color: var(--tinta); }
.texto-suelto .txt { min-height: 1.3em; white-space: pre-wrap; overflow-wrap: break-word; outline: none; }

/* ---------- Conectores: un SVG sin tamaño que se desborda; solo la línea y la etiqueta reciben clics ---------- */
.conector { left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.conector svg { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.conector path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.con-halo { stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.elemento.conector.seleccionado { outline: none; }
.conector.seleccionado .con-halo, .conector.destino .con-halo { stroke: rgba(20, 184, 166, .3); }
.con-etiqueta {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
  background: var(--lienzo); color: var(--tinta); font-size: 14px; font-weight: 500;
  padding: 2px 6px; border-radius: 4px; white-space: pre; outline: none;
}
.con-etiqueta:empty { display: none; }
.editando .con-etiqueta { display: block; min-width: 2em; }

/* ---------- Trazos: el div no recibe clics; solo la línea (con un halo invisible más ancho) ---------- */
.trazo { pointer-events: none; }
.trazo svg { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.trazo path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trazo-halo { stroke: transparent; pointer-events: stroke; cursor: pointer; }
.trazo.resaltador { mix-blend-mode: multiply; }
.trazo.resaltador .trazo-linea { stroke-opacity: .55; }
/* Lápiz que se desvanece, como un neón: halo desenfocado (el blur lo pone dibujo.js según el zoom),
   línea del color elegido y núcleo casi blanco. Capas propias por encima de todo y sin clics. */
.capa-efimera { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 1000000; }
.capa-efimera path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.efimero-brillo { stroke-width: 18; stroke-opacity: .85; }
.efimero-linea { stroke-width: 7; }
.efimero-nucleo { stroke: #F4FFFD; stroke-width: 2.5; }

/* ---------- Imágenes ---------- */
.imagen { background: var(--hover); user-select: none; -webkit-user-select: none; }
.imagen img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.imagen.rota img { display: none; }

/* ---------- Selección ---------- */
.capa-sel { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.caja-sel { position: absolute; border: 1.5px solid var(--acento-claro); border-radius: 2px; }
.tirador {
  position: absolute;
  width: 11px; height: 11px;
  background: var(--panel);
  border: 2px solid var(--acento-claro);
  border-radius: 3px;
  pointer-events: auto;
}
.tirador.nw { left: -6px; top: -6px; cursor: nwse-resize; }
.tirador.se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.tirador.ne { right: -6px; top: -6px; cursor: nesw-resize; }
.tirador.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
/* Tiradores de los lados: solo ancho (e, w) o solo alto (n, s). */
.tirador.n { left: 50%; top: -6px; transform: translateX(-50%); cursor: ns-resize; }
.tirador.s { left: 50%; bottom: -6px; transform: translateX(-50%); cursor: ns-resize; }
.tirador.e { top: 50%; right: -6px; transform: translateY(-50%); cursor: ew-resize; }
.tirador.w { top: 50%; left: -6px; transform: translateY(-50%); cursor: ew-resize; }
.sin-tiradores .tirador, .solo-esquinas .tirador.lado, .sin-alto .tirador.n, .sin-alto .tirador.s { display: none; }
@media (pointer: coarse) {
  .tirador { width: 18px; height: 18px; }
  .tirador.nw, .tirador.sw, .tirador.w { left: -10px; }
  .tirador.ne, .tirador.se, .tirador.e { right: -10px; }
  .tirador.nw, .tirador.ne, .tirador.n { top: -10px; }
  .tirador.sw, .tirador.se, .tirador.s { bottom: -10px; }
}
/* Puntitos para sacar conectores y tiradores de los extremos de un conector */
.puerto, .extremo {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  pointer-events: auto; cursor: crosshair;
}
.puerto { background: var(--panel); border: 2px solid var(--acento-claro); }
.puerto:hover { background: var(--acento-claro); }
.extremo { background: var(--acento-claro); border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--acento-claro); cursor: move; }
.arrastrando .puerto { display: none; }
@media (pointer: coarse) {
  .puerto, .extremo { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
}
.recuadro { position: absolute; border: 1px solid var(--acento-claro); background: rgba(20, 184, 166, .08); border-radius: 2px; }

/* ---------- Paneles flotantes ---------- */
.panel {
  position: fixed;
  z-index: 10;
  background: var(--panel);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
}
.separador { width: 1px; height: 24px; background: var(--borde); margin: 0 6px; flex: none; }

.boton-ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--texto);
  flex: none;
}
.boton-ico:hover { background: var(--hover); }
.boton-ico:disabled { opacity: .35; cursor: default; background: transparent; }
.boton-ico.activo { background: var(--acento); color: var(--sobre-acento); }
.boton-ico:focus-visible, .boton-txt:focus-visible, .nombre:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 1px; }

.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico .relleno { fill: currentColor; fill-opacity: .15; }

/* Cabecera (arriba a la izquierda) */
/* max-width: deja sitio al grupo de botones de arriba a la derecha; si falta espacio, encoge el nombre de la pizarra. */
.cabecera { top: 12px; left: 12px; padding: 6px 6px 6px 10px; max-width: calc(100vw - 450px); min-width: 0; }
.marca { display: flex; align-items: center; gap: 8px; flex: none; }
.logo { width: 30px; height: 30px; flex: none; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.05; }
.marca-texto strong { font-size: 18px; letter-spacing: -.02em; }
.marca-texto small { font-size: 10px; color: var(--gris); letter-spacing: .02em; }
.nombre {
  border: 0; background: transparent; border-radius: 8px;
  padding: 8px 10px; font-size: 14px; font-weight: 500;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 0 1 auto;
}
.nombre:hover { background: var(--hover); }
.nombre-input {
  font: inherit; font-size: 14px; font-weight: 500; color: var(--texto); background: var(--campo);
  width: 220px; flex: 0 1 220px; min-width: 60px; padding: 7px 9px;
  border: 1.5px solid var(--acento-claro); border-radius: 8px; outline: none;
}

.menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  flex-direction: column; align-items: stretch; min-width: 220px; padding: 6px;
}
.menu button {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border: 0; background: transparent; text-align: left;
  padding: 9px 10px; border-radius: 8px; font-size: 14px;
}
.menu button:hover, .menu button:focus-visible { background: var(--hover); outline: none; }
.menu em { font-style: normal; font-size: 11px; color: var(--gris); }
.menu hr { border: 0; border-top: 1px solid var(--borde); margin: 4px 2px; }
.menu .peligro { color: var(--peligro); }

/* Arriba a la derecha */
.derecha { top: 12px; right: 12px; gap: 4px; }
.boton-txt {
  display: flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px;
  border: 0; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 500;
}
.boton-txt:hover { background: var(--hover); }
.boton-txt.principal { background: var(--acento); color: var(--sobre-acento); }
.boton-txt.abierto { background: var(--hover); }
.contador { font-size: 11px; min-width: 18px; padding: 1px 5px; border-radius: 9px; background: var(--hover); color: var(--texto); }

/* Barra de herramientas (izquierda, centrada) */
.herramientas {
  left: 12px; top: 50%; transform: translateY(-50%);
  flex-direction: column;
  max-height: calc(100dvh - 160px);
  overflow-y: auto;
  scrollbar-width: none;
}

/* Submenú del lápiz */
.submenu { flex-direction: column; }

/* Panel de formas: dos grupos con rejilla de miniaturas (cabe en el móvil: ancho máximo y desplazamiento si hace falta) */
.panel-formas {
  z-index: 13; display: block; padding: 8px; width: 232px; max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px); overflow-y: auto;
}
.pf-titulo { font-size: 12px; font-weight: 600; color: var(--texto-2); padding: 2px 4px 4px; }
.pf-titulo:not(:first-child) { margin-top: 6px; border-top: 1px solid var(--borde); padding-top: 8px; }
.pf-rejilla { display: grid; grid-template-columns: repeat(5, 40px); gap: 4px; justify-content: start; }
.pf-rejilla .ico { width: 26px; height: 26px; }

/* Barra del lápiz: colores y grosores, arriba en el centro */
.barra-lapiz { top: 70px; left: 50%; transform: translateX(-50%); flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 90px); }
.grosor span { border-radius: 50%; background: var(--noche); }
.grosor.activo { background: var(--hover); }
.velocidad { height: 32px; padding: 0 10px; }
.velocidad.activo { background: var(--acento); color: var(--sobre-acento); }

/* Abajo */
.abajo-izq { left: 12px; bottom: 12px; }
.zoom { right: 12px; bottom: 12px; }
.zoom-pct { border: 0; background: transparent; border-radius: 8px; height: 40px; min-width: 58px; font-size: 13px; font-variant-numeric: tabular-nums; }
.zoom-pct:hover { background: var(--hover); }

/* Barra contextual (si no cabe a lo ancho, se parte en dos filas) */
.barra-contextual { z-index: 12; flex-wrap: wrap; justify-content: center; row-gap: 4px; max-width: calc(100vw - 16px); }
.arrastrando .barra-contextual { display: none; }
.colores { display: flex; gap: 6px; padding: 0 4px; }
.muestra { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--muestra-borde); padding: 0; }
/* El blanco se distingue siempre: borde más marcado (en oscuro, el relleno blanco de las formas se muestra oscuro). */
.muestra[data-color="#FFFFFF"] { border-color: var(--borde-campo); box-shadow: inset 0 0 0 1px var(--muestra-borde); }
[data-tema="oscuro"] .muestra[data-color="#FFFFFF"] { border-color: var(--texto-2); }
.muestra.activa { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--acento); }
.barra-contextual .boton-ico { width: 36px; height: 36px; }
.grupo { display: flex; align-items: center; gap: 4px; padding-right: 6px; margin-right: 4px; border-right: 1px solid var(--borde); }
.grupo:last-child { border: 0; padding: 0; margin: 0; }
.barra-contextual select {
  height: 32px; padding: 0 6px; border: 1px solid var(--borde); border-radius: 8px;
  background: var(--campo); color: var(--texto); font: inherit; font-size: 13px; cursor: pointer;
}
.muestra.ninguno, .punto.ninguno { background: linear-gradient(135deg, #fff 45%, #B42318 45% 55%, #fff 55%); }
.paleta { position: relative; }
.paleta-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 2; }
.punto { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--muestra-borde); }

/* Panel lateral de marcos */
.lateral {
  top: 68px; right: 12px; width: 260px; max-height: calc(100dvh - 150px);
  flex-direction: column; align-items: stretch; gap: 4px; padding: 8px;
}
.lateral-cab { display: flex; align-items: center; justify-content: space-between; padding-left: 8px; font-size: 15px; }
.lista-marcos { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.lista-marcos button {
  width: 100%; text-align: left; border: 0; background: transparent; border-radius: 8px;
  padding: 9px 10px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lista-marcos button:hover, .lista-marcos button:focus-visible { background: var(--hover); outline: none; }
.lista-marcos .vacio { padding: 8px 10px; font-size: 13px; color: var(--texto-2); line-height: 1.4; }

/* Galería de plantillas */
.galeria { max-width: min(760px, calc(100vw - 32px)); }
.galeria-int { padding: 22px; }
.galeria-int > p { margin: 0 0 16px; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.tarjeta {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  border: 1px solid var(--borde); border-radius: 12px; background: var(--panel); padding: 10px;
}
.tarjeta:hover, .tarjeta:focus-visible { border-color: var(--acento-claro); box-shadow: 0 0 0 2px rgba(20, 184, 166, .25); outline: none; }
.tarjeta .mini { width: 100%; height: 100px; background: #F5F7FA; /* la miniatura es un dibujo en claro, también en oscuro */ border-radius: 8px; margin-bottom: 6px; }
.tarjeta strong { font-size: 15px; }
.tarjeta span { font-size: 13px; color: var(--texto-2); line-height: 1.35; }

/* Tooltip y aviso */
.tooltip {
  position: fixed; z-index: 50; pointer-events: none;
  background: var(--invertido); color: var(--sobre-invertido);
  font-size: 12px; padding: 5px 8px; border-radius: 6px; white-space: nowrap;
}
.aviso {
  position: fixed; z-index: 40; left: 50%; bottom: 76px;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  background: var(--invertido); color: var(--sobre-invertido); font-size: 14px;
  padding: 10px 16px; border-radius: 10px; box-shadow: var(--sombra);
  width: max-content; max-width: calc(100vw - 32px); text-align: center; line-height: 1.4;
  transition: opacity .2s, transform .2s;
}
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }

/* Ventana de confirmación */
.dialogo { border: 0; border-radius: 16px; padding: 0; box-shadow: var(--sombra); background: var(--panel); color: var(--texto); max-width: min(420px, calc(100vw - 32px)); }
.dialogo::backdrop { background: rgba(5, 14, 31, .35); }
.dialogo form { padding: 22px; }
.dialogo h2 { margin: 0 0 8px; font-size: 18px; }
.dialogo p { margin: 0 0 20px; color: var(--texto-2); font-size: 14px; line-height: 1.45; }
.dlg-botones { display: flex; justify-content: flex-end; gap: 8px; }
.dlg-botones button { border: 0; border-radius: 8px; padding: 9px 16px; font-weight: 500; }
.secundario { background: var(--hover); }
.peligro-btn { background: #B42318; color: #fff; }

/* ---------- Comentarios ---------- */
/* Capa de globos: no recibe clics salvo en los globos. El globo apunta con su esquina de abajo a la izquierda. */
.capa-com { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.globo {
  position: absolute; left: 0; top: 0; margin-top: -30px;
  width: 30px; height: 30px; padding: 0; pointer-events: auto;
  border: 2px solid var(--panel); border-radius: 50% 50% 50% 4px;
  background: var(--acento); color: var(--sobre-acento); font-size: 13px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(5, 14, 31, .25);
}
.globo:hover, .globo.abierto { background: var(--globo-activo); color: #fff; }
.globo.resuelto { background: var(--gris); }
.hilo {
  z-index: 15; width: 300px; max-width: calc(100vw - 16px); max-height: min(460px, calc(100dvh - 16px));
  flex-direction: column; align-items: stretch; gap: 8px; padding: 10px;
}
.hilo-cab { display: flex; align-items: center; gap: 2px; padding-left: 4px; }
.hilo-cab strong { flex: 1; font-size: 14px; }
.hilo-cab .boton-ico { width: 32px; height: 32px; }
.hilo-cab .ico { width: 18px; height: 18px; }
.hilo-mensajes { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.mensaje { padding: 8px 10px; border-radius: 8px; background: var(--lienzo); }
.mensaje-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.mensaje-meta span { color: var(--texto-3); }
.mensaje-texto { margin: 4px 0 0; font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.mensaje-acciones { display: flex; gap: 10px; margin-top: 4px; }
.mensaje-acciones button { border: 0; background: none; padding: 0; font-size: 12px; color: var(--acento); }
.mensaje-acciones button:hover { text-decoration: underline; }
.hilo-pie { display: flex; flex-direction: column; gap: 6px; }
.hilo-campo, .campo {
  width: 100%; font: inherit; font-size: 14px; color: var(--texto); background: var(--campo); resize: vertical;
  padding: 8px 10px; border: 1.5px solid var(--borde-campo); border-radius: 8px; outline: none;
  user-select: text; -webkit-user-select: text;
}
.hilo-campo:focus, .campo:focus { border-color: var(--acento-claro); }
.mensaje .hilo-campo { margin-top: 4px; background: var(--panel); }
.boton-enviar, .principal-btn { align-self: flex-end; border: 0; border-radius: 8px; padding: 8px 14px; font-weight: 500; background: var(--acento); color: var(--sobre-acento); }
.dialogo .campo { margin-bottom: 18px; }
.filtro { display: flex; align-items: center; gap: 8px; padding: 4px 8px 6px; font-size: 13px; color: var(--texto-2); cursor: pointer; }
.filtro input { accent-color: var(--acento); width: 16px; height: 16px; margin: 0; }
.lista-com .item-com { display: flex; gap: 10px; align-items: flex-start; white-space: normal; }
.item-com.resuelto { opacity: .6; }
.com-num {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center; margin-top: 1px;
  border-radius: 50% 50% 50% 3px; background: var(--acento); color: var(--sobre-acento); font-size: 12px; font-weight: 700;
}
.item-com.resuelto .com-num { background: var(--gris); }
.com-cuerpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.com-texto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.com-meta { font-size: 12px; color: var(--texto-3); }

/* ---------- Pantallas medianas y móvil ---------- */
/* Hasta 900 px: los botones de arriba a la derecha se quedan solo con su icono (y el contador). */
@media (max-width: 900px) {
  .boton-txt span { display: none; }
  .boton-txt { padding: 0 9px; }
  .cabecera { max-width: calc(100vw - 200px); }
}
@media (max-width: 700px) {
  .nombre { padding: 8px 6px; }
  .lateral { top: 60px; right: 8px; width: min(260px, calc(100vw - 80px)); }
}
@media (max-width: 520px) {
  .panel { padding: 4px; }
  /* La cabecera no puede llegar al grupo de la derecha (unos 150 px): sin "by Alturyx Systems" y con el nombre recortado. */
  .cabecera { left: 8px; top: 8px; max-width: calc(100vw - 172px); padding-left: 8px; }
  .marca-texto small { display: none; }
  .derecha { right: 8px; top: 8px; gap: 0; }
  .derecha .boton-txt { padding: 0 8px; gap: 3px; }
  .derecha .boton-ico, .boton-txt { height: 36px; }
  .nombre-input { width: 120px; }
  /* Barra del lápiz: a lo ancho, entre la barra de herramientas y el borde derecho. */
  .barra-lapiz { top: 60px; left: 60px; right: 8px; transform: none; max-width: none; }
  /* Paletas de color en filas de 6 para que quepan. */
  .paleta-pop .colores { flex-wrap: wrap; width: 186px; }
  /* Galería: 2 tarjetas por fila con miniaturas más bajas. */
  .galeria-int { padding: 16px; }
  .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tarjeta { padding: 8px; }
  .tarjeta .mini { height: 70px; }
  .tarjeta span { font-size: 12px; }
  .herramientas { left: 8px; max-height: calc(100dvh - 140px); }
  .herramientas .boton-ico { width: 38px; height: 38px; }
  .abajo-izq { left: 8px; bottom: 8px; }
  .zoom { right: 8px; bottom: 8px; }
  .zoom .boton-ico, .abajo-izq .boton-ico { width: 36px; height: 36px; }
  .zoom-pct { min-width: 48px; height: 36px; }
  .marca-texto strong { font-size: 16px; }
  .marca-texto small { font-size: 9px; }
  .cabecera > .separador { margin: 0 4px; }
  .nombre { font-size: 13px; }
}
@media (max-width: 360px) {
  .cabecera > .separador { display: none; }
  .marca-texto strong { font-size: 15px; }
}

/* ---------- Pantalla de acceso (función 6: solo la primera vez) ---------- */
/* Se ve con <html data-acceso="pendiente"> (lo pone el script de <head>, sin parpadeo). */
.acceso { display: none; }
:root[data-acceso="pendiente"] .acceso {
  display: flex; position: fixed; inset: 0; z-index: 100;
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  background-color: var(--lienzo);
  background-image: radial-gradient(circle at 1px 1px, var(--puntos) 1.1px, transparent 1.6px);
  background-size: 24px 24px;
  user-select: text; -webkit-user-select: text;
}
.acceso-tarjeta {
  margin: auto; width: 100%; max-width: 460px; padding: 28px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra);
}
.acceso .marca-texto small { display: block; } /* en el móvil la cabecera lo oculta; aquí se ve siempre */
.acceso h1 { margin: 22px 0 8px; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; }
.acceso-intro { margin: 0 0 18px; color: var(--texto-2); font-size: 14.5px; line-height: 1.5; }
.acceso-pruebas {
  display: inline-block; margin: 0 0 16px; padding: 4px 10px; border-radius: 999px;
  background: var(--hover); color: var(--texto-2); font-size: 12px; font-weight: 600;
}
.acceso-campo { margin-bottom: 14px; }
.acceso-campo > label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.acceso .campo { font-size: 16px; padding: 10px 12px; resize: none; } /* 16 px: iOS no amplía al enfocar */
.acceso .campo[aria-invalid="true"] { border-color: var(--peligro); }
.acceso-telefono { display: flex; gap: 8px; }
.acceso-telefono select { flex: 0 1 auto; width: auto; max-width: 48%; }
.acceso-telefono input { flex: 1; min-width: 0; }
.acceso-check { display: flex; align-items: flex-start; gap: 10px; }
.acceso-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--acento); }
.acceso-check input[aria-invalid="true"] { outline: 2px solid var(--peligro); outline-offset: 2px; }
.acceso-check label { font-size: 13.5px; line-height: 1.45; color: var(--texto-2); cursor: pointer; }
.acceso a { color: var(--acento); text-underline-offset: 2px; }
.acceso :focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }
.acceso .campo:focus-visible { outline: none; }
.acceso-msg { margin: 5px 0 0; color: var(--peligro); font-size: 12.5px; line-height: 1.4; }
.acceso-msg:empty, .acceso-error:empty { display: none; }
.acceso-error {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.45;
  color: var(--peligro); background: color-mix(in srgb, var(--peligro) 10%, transparent);
}
.acceso-boton {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 10px; padding: 12px 16px; font-size: 16px; font-weight: 600;
  background: var(--acento); color: var(--sobre-acento);
}
.acceso-boton:disabled { opacity: .75; cursor: progress; }
.acceso-giro {
  display: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: acceso-girar .8s linear infinite;
}
.acceso-boton[aria-busy="true"] .acceso-giro { display: inline-block; }
@keyframes acceso-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .acceso-giro { animation-duration: 2.4s; } }
.acceso-nota { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--texto-3); }
/* Campo trampa: fuera de la vista (no con display: none, que algunos robots detectan). */
.acceso-trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Texto solo para lectores de pantalla. */
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 520px) {
  .acceso-tarjeta { padding: 20px; border-radius: 14px; }
  .acceso h1 { margin-top: 18px; font-size: 20px; }
}
@media (max-width: 360px) {
  .acceso-telefono { flex-wrap: wrap; }
  .acceso-telefono select { max-width: none; width: 100%; }
}