/* ============================================================
   styles.css — Proyecto Creator
   ------------------------------------------------------------
   Paleta: grafito profundo + azul-índigo como acento único.
   Tipografía: sans del sistema para UI; monoespaciada solo en
   campos numéricos (coordenadas, opacidad, zoom) — es una
   convención real de herramientas creativas (Figma, Affinity),
   no decoración.
   ============================================================ */

:root {
  --bg-app: #101014;
  --bg-panel: #17171c;
  --bg-elevated: #1f1f26;
  --bg-canvas-frame: #0c0c0f;
  --border: #2a2a33;
  --border-soft: #212129;

  --text: #e6e6ea;
  --text-muted: #93939f;
  --text-faint: #4c4c56;

  --accent: #5b6cf9;
  --accent-hover: #6f7dfb;
  --accent-soft: rgba(91, 108, 249, 0.16);

  --danger: #f2545b;

  --font-ui: -apple-system, "Segoe UI", "Inter", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  --radius-sm: 4px;
  --radius-md: 6px;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  background: var(--bg-app);
  color: var(--text);
  height: 100vh;
  height: 100dvh; /* en mobile, 100vh incluye la zona tapada por la barra del navegador */
  overflow: hidden;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ===== Layout general ===== */
#app {
  display: grid;
  grid-template-rows: 52px 40px 1fr 26px;
  height: 100vh;
  height: 100dvh;
}

/* ===== Top App Bar ===== */
#topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 14px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  flex-shrink: 0;
}

.brand-mark {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.brand-name {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.2px;
}

.brand-credit {
  font-size: 10.5px;
  color: var(--text-faint);
  letter-spacing: 0.2px;
  margin-left: -2px;
}

.menubar {
  display: flex;
  gap: 4px;
  flex: 1;
}

.menu-item {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: default;
  user-select: none;
}

.menu-item:hover {
  background: var(--bg-elevated);
  color: var(--text);
}

/* ===== Dropdown de menú (ej. "Archivo") ===== */
.menu-dropdown {
  position: relative;
}

.menu-item-btn {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

.menu-dropdown.open .menu-item-btn {
  background: var(--bg-elevated);
  color: var(--text);
}

.menu-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
}

.menu-panel[hidden] {
  display: none;
}

.menu-panel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

.menu-panel-item span:first-of-type {
  flex: 1;
}

.menu-panel-shortcut {
  color: var(--text-faint);
  font-size: 11px;
  flex-shrink: 0;
}

.menu-panel-item:disabled .menu-panel-shortcut {
  color: var(--text-faint);
  opacity: 0.6;
}

.menu-panel-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.menu-panel-item:hover {
  background: var(--accent-soft);
}

.menu-panel-sep {
  height: 1px;
  background: var(--border-soft);
  margin: 4px 2px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ===== Botones e inputs comunes ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}

.btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.btn-ghost {
  color: var(--text-muted);
  border-color: var(--border);
  background: var(--bg-elevated);
}

.btn-ghost:hover {
  color: var(--text);
  border-color: #3a3a45;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn:disabled,
button:disabled,
select:disabled,
input:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.btn:disabled:hover {
  border-color: var(--border);
  color: var(--text-muted);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.icon-btn svg {
  width: 16px;
  height: 16px;
}

.icon-btn:hover:not(:disabled) {
  background: var(--bg-elevated);
  color: var(--text);
}

.file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.toolbar-sep {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 6px;
  flex-shrink: 0;
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.tool-btn svg {
  width: 15px;
  height: 15px;
}

.tool-btn:hover {
  color: var(--text);
}

.tool-btn.active {
  background: var(--accent);
  color: #fff;
}

/* ===== Barra de contexto =====
   Contenedor de las columnas por herramienta (.context-group). El
   contenedor en sí ya no tiene layout propio de contenido — cada
   grupo es el que define su fila de controles — así que acá solo
   se resuelve el fondo/borde compartido y que el grupo visible
   ocupe todo el ancho disponible. */
#context-bar {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}

/* Cada .context-group es la columna de controles de UNA
   herramienta. main.js togglea `hidden` para que solo se vea la de
   la tool activa (ver activateToolById) — acá basta con que, cuando
   está visible, se comporte como fila flex con el mismo gap que
   antes tenía #context-bar entero. */
.context-group {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.context-group[hidden] {
  display: none;
}

.context-tool-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}

.context-tool-label svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex-shrink: 0;
}

/* Texto de ayuda para herramientas sin propiedades propias todavía
   (Mano, Selección en v0.1) — mismo rol que un .context-field, pero
   sin controles interactivos. */
.context-hint {
  color: var(--text-faint);
  font-size: 12px;
  font-style: italic;
}

.context-field {
  display: flex;
  align-items: center;
  gap: 6px;
}

.context-field label {
  color: var(--text-faint);
  font-size: 11px;
}

.context-field-label {
  color: var(--text-faint);
  font-size: 11px;
  flex-shrink: 0;
}

.context-field input {
  width: 64px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
}

/* Agrupa visualmente un par de íconos relacionados (girar izq/der,
   flip horizontal/vertical) con un gap chico entre ellos — el gap
   grande de 14px de .context-group queda solo entre GRUPOS
   (separado por .toolbar-sep), no dentro de cada par. */
.context-icon-group {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}

/* ===== Segmented control (Modo: Más / Menos de la tool Zoom) =====
   Radio-group de dos botones con selección exclusiva, mismo
   lenguaje visual que .tool-btn.active (fondo accent al elegido). */
.segmented {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.segmented-btn {
  padding: 6px 12px;
  border: none;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}

.segmented-btn + .segmented-btn {
  border-left: 1px solid var(--border);
}

.segmented-btn:hover {
  color: var(--text);
}

.segmented-btn.active {
  background: var(--accent);
  color: #fff;
}

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ===== Área principal ===== */
#main-area {
  display: grid;
  grid-template-columns: 52px 1fr 280px 40px;
  overflow: hidden;
}

/* ===== Rail de herramientas ===== */
#tool-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 0;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
}

.rail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: not-allowed;
}

.rail-btn svg {
  width: 16px;
  height: 16px;
}

/* Estado "activo" decorativo para íconos deshabilitados del rail
   derecho (panel-rail): mismo lenguaje visual que .tool-btn.active
   pero sin funcionalidad todavía (no hay múltiples vistas de panel
   para cambiar entre sí). */
.rail-btn.active {
  background: var(--bg-elevated);
  color: var(--accent);
  opacity: 1;
}

/* ===== Herramientas reales dentro del rail (Mover/Selección/Mano/
   Zoom). Son .tool-btn (misma clase que ya usa main.js para togglear
   ".active" y leer data-tool/data-label), solo que ahora viven en
   una columna angosta en vez de una fila horizontal arriba: mismo
   tamaño de caja que .rail-btn, ícono centrado, sin el texto del
   <span> (queda como accesibilidad + tooltip vía title). ===== */
#tool-rail .tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

#tool-rail .tool-btn svg {
  width: 16px;
  height: 16px;
}

#tool-rail .tool-btn span {
  /* Visualmente oculto: el nombre de la herramienta sigue disponible
     para lectores de pantalla y como fuente de `data-label`, pero en
     el rail angosto no hay lugar para texto — el tooltip (title) y
     el ícono alcanzan, igual que en Pixlr. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

#tool-rail .tool-btn:hover {
  background: var(--bg-elevated);
  color: var(--text);
}

#tool-rail .tool-btn.active {
  background: var(--accent);
  color: #fff;
}

/* Separador horizontal entre las herramientas reales (arriba) y los
   placeholders de herramientas futuras (abajo) — mismo rol que
   .toolbar-sep pero para una columna vertical. */
.rail-sep {
  width: 24px;
  height: 1px;
  background: var(--border);
  margin: 6px 0;
  flex-shrink: 0;
}

.rail-spacer {
  flex: 1;
}

.color-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a1a1a 50%, #f4f4f4 50%);
  border: 2px solid var(--border);
  cursor: not-allowed;
}

/* ===== Rail derecho (selector de paneles) =====
   Mismo lenguaje visual que #tool-rail pero más angosto y sin
   funcionalidad real todavía (ver comentario en index.html). */
#panel-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 0;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
}

/* ===== Canvas ===== */
#canvas-wrapper {
  display: flex;
  overflow: auto;
  position: relative;
  background:
    linear-gradient(45deg, #26262e 25%, transparent 25%) 0 0 / 20px 20px,
    linear-gradient(-45deg, #26262e 25%, transparent 25%) 0 0 / 20px 20px,
    linear-gradient(45deg, transparent 75%, #26262e 75%) 0 0 / 20px 20px,
    linear-gradient(-45deg, transparent 75%, #26262e 75%) 0 0 / 20px 20px,
    var(--bg-canvas-frame);
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

#canvas-wrapper.drag-over::after {
  content: "Soltá para importar";
  position: absolute;
  inset: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--accent);
  border-radius: var(--radius-md);
  background: rgba(91, 108, 249, 0.1);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
  z-index: 5;
}

#main-canvas {
  margin: auto;
  background: transparent;
  box-shadow: 0 0 0 1px #000, 0 8px 24px rgba(0, 0, 0, 0.4);
  /* Evita el "fantasma" nativo de arrastrar-imagen del navegador al
     dragear sobre el canvas (ej. con la lupa o Mano) — sin esto,
     algunos navegadores interpretan el gesto como un drag & drop
     nativo de imagen en vez de dejarlo 100% en manos de Pointer
     Events, que es lo que usan las tools. */
  -webkit-user-drag: none;
  user-select: none;
  touch-action: none;
}

/* ===== Panel derecho ===== */
#right-panel {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
}

/* ===== Header genérico de panel (Navegar por / Capas / Historia) =====
   Mismo header para los tres paneles del costado derecho, inspirado en
   el patrón de Pixlr: ícono + título a la izquierda, acciones chicas
   (⋯ opciones, – minimizar, × cerrar) a la derecha. Minimizar/cerrar
   son decorativos por ahora (data-action sin listener todavía) — la
   idea es dejar el HUD listo para que esa función se pueda enchufar
   sin tener que rehacer el markup ni el CSS. */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px 10px 12px;
  border-bottom: 1px solid var(--border-soft);
}

.panel-header-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.panel-header-title svg {
  width: 13px;
  height: 13px;
  color: var(--text-faint);
  flex-shrink: 0;
}

.panel-header h3 {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}

.panel-header-actions .icon-btn {
  width: 22px;
  height: 22px;
  color: var(--text-faint);
}

.panel-header-actions .icon-btn svg {
  width: 12px;
  height: 12px;
}

.panel-section {
  border-bottom: 1px solid var(--border-soft);
}

.panel-section:last-child {
  border-bottom: none;
}

.panel-section-body {
  padding: 10px 12px 12px;
}

/* ===== Navigator ("Navegar por") =====
   Thumbnail en vivo del documento + lectura de posición/tamaño y
   control de zoom, tal como en Pixlr. El thumbnail es puro dibujo
   (main.js hace drawImage del canvas principal acá adentro en cada
   redraw): no representa estado propio, es una vista del documento. */
.navigator-thumb-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background:
    linear-gradient(45deg, #26262e 25%, transparent 25%) 0 0 / 12px 12px,
    linear-gradient(-45deg, #26262e 25%, transparent 25%) 0 0 / 12px 12px,
    linear-gradient(45deg, transparent 75%, #26262e 75%) 0 0 / 12px 12px,
    linear-gradient(-45deg, transparent 75%, #26262e 75%) 0 0 / 12px 12px,
    var(--bg-canvas-frame);
  background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

#navigator-canvas {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.navigator-readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  margin-top: 10px;
}

.navigator-readout div {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  color: var(--text-faint);
}

.navigator-readout span.value {
  color: var(--text-muted);
}

.navigator-zoom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.navigator-zoom-row input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
}

.navigator-zoom-row .mono {
  min-width: 38px;
  text-align: right;
  color: var(--text-muted);
}

/* ===== Historia (History panel) =====
   Lista real de Commands ejecutados, no un mock: refleja
   history.undoStack / history.redoStack (ver history.js). El item
   "actual" (tope del undoStack) queda resaltado como posición activa
   del historial; los que están en el redoStack se muestran atenuados
   porque son "futuro" todavía no confirmado. */
#history-list {
  list-style: none;
  margin: 0;
  padding: 4px 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 220px;
  overflow-y: auto;
}

#history-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12px;
  cursor: default;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#history-list li .history-icon {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
}

#history-list li.history-current {
  background: var(--accent-soft);
  color: var(--text);
}

#history-list li.history-current .history-icon {
  background: var(--accent);
}

#history-list li.history-future {
  opacity: 0.45;
}

#history-list li.history-empty {
  color: var(--text-faint);
  font-style: italic;
  cursor: default;
}

#layers-list {
  list-style: none;
  margin: 0;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#layers-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
}

#layers-list li:hover {
  background: var(--bg-elevated);
}

#layers-list li.selected {
  background: var(--accent-soft);
  color: var(--text);
}

.layer-thumb {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.layer-name {
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.layer-name-input {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 2px 5px;
}

.layer-actions {
  display: flex;
  gap: 1px;
  flex-shrink: 0;
}

.layer-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  flex-shrink: 0;
}

.layer-action-btn svg {
  width: 13px;
  height: 13px;
}

.layer-action-btn:hover {
  background: var(--bg-elevated);
  color: var(--text);
}

.layer-action-btn.is-off {
  opacity: 0.4;
}

.layer-action-btn.is-active {
  color: var(--accent);
}

#layers-list li.layer-hidden .layer-name,
#layers-list li.layer-hidden .layer-thumb {
  opacity: 0.45;
}

/* ===== Drag & Drop de capas (reordenar) ===== */
#layers-list li.dragging {
  opacity: 0.4;
}

#layers-list li.drag-over-top {
  box-shadow: inset 0 2px 0 var(--accent);
}

#layers-list li.drag-over-bottom {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.layers-toolbar {
  display: flex;
  gap: 2px;
  padding: 8px;
  border-top: 1px solid var(--border-soft);
  margin-top: 8px;
}

/* ===== (Panel de propiedades eliminado — no existe en Pixlr; ver
   conversación. Los campos de transform quedaron viviendo solo en
   la barra de contexto, #context-bar) ===== */

/* ===== Barra de estado ===== */
#statusbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 11.5px;
}

.status-sep {
  color: var(--border);
}

/* ===== Modal: Nuevo documento ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-overlay[hidden] {
  display: none;
}

/* .modal-field y .modal-checkbox-field definen su propio "display"
   (flex), que por origen de cascada le gana al display:none que el
   navegador aplica por defecto al atributo [hidden] — sin este
   override, un campo de modal con "hidden" queda oculto en el
   atributo pero sigue visible y operable en pantalla. */
.modal-field[hidden],
.modal-checkbox-field[hidden] {
  display: none;
}

.modal {
  width: 360px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
}

.modal-header h3 {
  margin: 0;
  font-size: 14px;
}

.modal-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
}

.modal-field input,
.modal-field select {
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
}

.modal-checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
  cursor: pointer;
}

.modal-checkbox-field input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.modal-checkbox-field span {
  flex: 1;
  min-width: 0;
}

.modal-checkbox-field em {
  font-style: normal;
  color: var(--text-faint);
}

.modal-row {
  display: flex;
  gap: 8px;
}

.modal-row .modal-field {
  flex: 1;
  min-width: 0;
}

.modal-field-sm {
  max-width: 72px;
}

.modal-field-md {
  max-width: 96px;
}

.modal-inline-input {
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-inline-input input {
  flex: 1;
  min-width: 0;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid var(--border-soft);
}

/* ===== Scrubbing en inputs numéricos (arrastrar el número para
   cambiar el valor, como en Photoshop/Figma) ===== */
.context-field input:not(:disabled) {
  cursor: ew-resize;
  touch-action: none;
}

.context-field input:focus {
  cursor: text;
}

.context-field input.scrubbing {
  border-color: var(--accent);
  color: var(--accent);
}