:root {
  --bg: #fafafa;
  --panel: #ffffff;
  --border: #e6e6e8;
  --border-soft: #f0f0f2;
  --text: #0d0d0f;
  --muted: #78787f;
  --accent: #0d0d0f;
  --accent-soft: #f0f0f2;
  --danger: #d92d20;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(13,13,15,.05);
  --shadow-pop: 0 4px 12px rgba(13,13,15,.08), 0 1px 3px rgba(13,13,15,.06);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  font-size: 13px;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.view { height: 100vh; display: flex; flex-direction: column; }
#gallery { flex-direction: row; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
input[type=text], input[type=search], input[type=number], select {
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 7px; background: #fff;
  min-width: 0; height: 28px;
}
input[type=number] { width: 58px; }
input[type=color] {
  width: 28px; height: 28px; padding: 2px; border: 1px solid var(--border);
  border-radius: 6px; background: #fff; cursor: pointer;
}
.btn-primary {
  background: var(--text); color: #fff; border-radius: 8px; padding: 9px 14px; font-weight: 500;
  transition: background-color 120ms ease;
}
.btn-primary:hover { background: #2a2a30; }
.btn-secondary {
  background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px;
}
.btn-secondary:hover { background: var(--accent-soft); }

.icon-btn {
  width: 28px; height: 28px; border-radius: 6px; display: inline-flex;
  align-items: center; justify-content: center; color: #3a3a42; flex: none;
  transition: background-color 100ms ease-out;
}
.icon-btn:hover { background: var(--border-soft); }
.icon-btn:active { background: #e8e8ea; transition: none; }
.icon-btn.active { background: var(--text); color: #fff; }
.icon-btn.danger:hover { background: #fdecec; color: var(--danger); }
.e-topbar, .e-formatbar { user-select: none; -webkit-user-select: none; }

/* ============ Galeria ============ */
.g-sidebar {
  width: 248px; background: var(--panel); border-right: 1px solid var(--border);
  padding: 22px 16px; display: flex; flex-direction: column; gap: 14px;
}
.g-logo { font-size: 19px; font-weight: 700; letter-spacing: -.035em; }
.g-logo span { color: var(--muted); font-weight: 500; }
.g-folders-head {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  margin-top: 8px;
}
.g-folders-head button {
  width: 22px; height: 22px; border-radius: 6px; background: var(--accent-soft);
  color: var(--text); font-weight: 500;
}
.g-folders-head button:hover { background: #e6e6e8; }
.g-folders { list-style: none; overflow-y: auto; flex: 1; }
.g-folders li {
  padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex;
  justify-content: space-between; align-items: center; gap: 6px;
}
.g-folders li:hover { background: var(--bg); }
.g-folders li.active { background: var(--accent-soft); color: var(--text); font-weight: 500; }
.g-folders li .fx { opacity: 0; font-size: 12px; color: var(--muted); }
.g-folders li:hover .fx { opacity: 1; }
.g-main { flex: 1; padding: 34px 40px; overflow-y: auto; }
.g-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.g-head h1 { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.g-head input { width: 260px; height: 34px; }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.g-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.g-card:hover { border-color: #d4d4d8; box-shadow: var(--shadow-pop); }
.g-thumb {
  height: 132px; background: #fbfbfc; border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center; padding: 14px;
}
.g-thumb svg { max-width: 90%; max-height: 90%; }
.g-card-body { padding: 13px 15px; display: flex; justify-content: space-between; align-items: center; }
.g-card-name { font-weight: 550; letter-spacing: -.012em; }
.g-card-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.g-card-menu { color: var(--muted); padding: 4px 8px; border-radius: 6px; }
.g-card-menu:hover { background: var(--bg); }

/* ============ Editor: topbar ============ */
#editor { background: var(--panel); }
.e-topbar {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  background: var(--panel); border-bottom: 1px solid var(--border); z-index: 30;
  height: 48px;
}
.e-topbar > button:not(.icon-btn), .e-actions > button:not(.icon-btn), .dropdown > button {
  padding: 5px 11px; border-radius: 7px;
}
.e-topbar > button:hover, .e-actions button:hover, .dropdown > button:hover { background: var(--border-soft); }
#btnExport { background: var(--text); color: #fff; }
#btnExport:hover { background: #2a2a30; }
.e-title { font-weight: 600; padding: 4px 8px; border-radius: 6px; outline: none;
  font-size: 14px; letter-spacing: -.018em; }
.e-title:focus { background: var(--accent-soft); }
.e-spacer { flex: 1; }

/* barra inferior: hojas y zoom, estilo Lucid */
.e-bottombar {
  display: flex; align-items: center; gap: 4px; padding: 4px 10px;
  background: var(--panel); border-top: 1px solid var(--border); height: 38px;
  user-select: none; z-index: 25;
}
.e-pages { display: flex; gap: 3px; overflow-x: auto; }
.e-pages button { padding: 5px 12px; border-radius: 7px; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.e-pages button:hover { background: var(--border-soft); }
.e-pages button.active { background: var(--text); color: #fff; font-weight: 500; }
.e-zoom { display: flex; align-items: center; gap: 2px; }
.e-zoom button { padding: 4px 9px; border-radius: 7px; color: var(--muted); font-size: 12.5px; }
.e-zoom button:hover { background: var(--border-soft); color: var(--text); }
#zoomLabel {
  min-width: 46px; text-align: center; font-size: 12.5px; color: var(--muted);
  padding: 4px 6px; border-radius: 7px;
}
#zoomLabel:hover { background: var(--border-soft); color: var(--text); }
.e-bottombar .e-zoom { position: static; border: none; box-shadow: none; padding: 0; }
.e-actions { display: flex; align-items: center; gap: 3px; }
.e-actions .sep, .fb-group .sep {
  width: 1px; height: 20px; background: var(--border); margin: 0 6px; display: inline-block; flex: none;
}
.dropdown { position: relative; }
.dropdown-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-pop); padding: 6px; min-width: 190px; z-index: 200;
}
.dropdown-menu.open { display: block; }
.dropdown-menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 7px; }
.dropdown-menu button:hover { background: var(--accent-soft); }

/* ============ Barra de formato ============ */
.e-formatbar {
  display: flex; align-items: center; gap: 4px; padding: 5px 12px;
  background: var(--panel); border-bottom: 1px solid var(--border);
  height: 40px; z-index: 25; overflow-x: auto; overflow-y: visible;
  scrollbar-width: none;
}
.e-formatbar::-webkit-scrollbar { display: none; }
.fb-group { display: flex; align-items: center; gap: 4px; }
.fb-hint { color: #a2a8ba; font-size: 12.5px; padding-left: 4px; }
.fb-swatch {
  width: 28px; height: 28px; border-radius: 6px; display: inline-flex;
  align-items: center; justify-content: center; flex: none;
}
.fb-swatch:hover { background: var(--border-soft); }
.sw-fill {
  width: 18px; height: 18px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
  background: linear-gradient(180deg, #5a8df5, #2f5fd8); display: block;
}
.sw-ring {
  width: 16px; height: 16px; border-radius: 50%; display: block;
  border: 3.5px solid #2f5fd8; background: transparent;
}
.sw-line { width: 18px; height: 0; border-top: 3px solid #2f5fd8; border-radius: 2px; display: block; }
.sw-text { font-weight: 700; font-size: 13px; line-height: 1; border-bottom: 3px solid #1c2333; padding-bottom: 1px; }
.fb-stepper {
  display: flex; align-items: center; border: 1px solid var(--border); border-radius: 6px;
  height: 28px; overflow: hidden;
}
.fb-stepper button { width: 22px; height: 100%; color: var(--muted); }
.fb-stepper button:hover { background: var(--border-soft); }
.fb-stepper input { width: 30px; border: none; text-align: center; height: 100%; outline: none; }
.fb-seg { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; height: 28px; }
.fb-seg button { width: 30px; display: inline-flex; align-items: center; justify-content: center; color: #444c63; }
.fb-seg button + button { border-left: 1px solid var(--border); }
.fb-seg button.active { background: var(--accent-soft); color: var(--accent); }
#fbConn select { height: 28px; font-size: 12px; }
#connLabel { width: 130px; }
#fbView { margin-left: 8px; }

/* ============ Popover ============ */
.popover {
  position: fixed; z-index: 300; background: var(--panel);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-pop);
  padding: 12px; min-width: 210px;
}
.pop-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
  margin: 8px 0 6px;
}
.pop-body > .pop-title:first-child { margin-top: 0; }
.p-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.mini { font-size: 12px; color: var(--muted); }
.p-swatches { display: flex; flex-wrap: wrap; gap: 6px; max-width: 200px; }
.p-swatch {
  width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(0,0,0,.08); cursor: pointer;
  transition: transform .1s;
}
.p-swatch:hover { transform: scale(1.12); }

/* ============ Editor: cuerpo ============ */
.e-body { flex: 1; display: flex; min-height: 0; }

.e-shapes {
  width: 232px; background: var(--panel); border-right: 1px solid var(--border);
  overflow-y: auto; overflow-x: hidden; padding: 12px 10px 12px 12px; flex: none;
  transition: width 150ms ease, padding 150ms ease;
}
.e-shapes.collapsed { width: 0; padding: 0; border-right: none; overflow: hidden; }
#btnPanelToggle {
  width: 16px; align-self: stretch; flex: none; color: var(--muted);
  border-right: 1px solid var(--border); background: var(--panel); font-size: 10px;
}
#btnPanelToggle:hover { background: var(--border-soft); color: var(--text); }
.sp-search input { width: 100%; margin-bottom: 8px; }
.sp-group-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
  margin: 12px 0 8px; display: flex; align-items: center; gap: 6px;
}
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sp-item {
  height: 44px; border: 1px solid var(--border-soft); border-radius: 8px; background: #fff;
  display: flex; align-items: center; justify-content: center; cursor: grab;
  transition: border-color .12s, background-color .12s;
}
.sp-item:hover { border-color: #d4d4d8; background: var(--accent-soft); }
.sp-item svg { width: 40px; height: 30px; overflow: visible; }
.sp-item svg path { fill: #e4e4e8; stroke: #9a9aa4; stroke-width: 1.2; }

/* ============ Lienzo ============ */
/* La hoja es el fondo del contenedor. La grilla se pinta como background CSS
   (ver FF.renderPage): panear solo mueve background-position, sin rasterizar
   geometria. Antes era un rect gigante con pattern y filtro: eso era el lag. */
.e-canvas-wrap { flex: 1; position: relative; min-width: 0; background-color: #ffffff; }
#svgRoot { width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
#svgRoot.panning { cursor: grab; }
#svgRoot.placing { cursor: crosshair; }
#svgRoot.edgehover { cursor: crosshair; }
.shape { cursor: move; }
.shape-text { pointer-events: none; user-select: none; }
.conn-hit { stroke: transparent; stroke-width: 14; fill: none; cursor: pointer; }
.conn-label { font-size: 12px; font-weight: 500; fill: #3a3a42; pointer-events: none; }
.conn-label-chip { pointer-events: none; }
.sel-outline { fill: none; stroke: var(--text); stroke-width: 1.2; pointer-events: none; }
.hover-outline { fill: none; stroke: #b4b4bc; stroke-width: 1.2; pointer-events: none; }
.target-outline { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-dasharray: 4 3; pointer-events: none; }
.handle { fill: #fff; stroke: var(--text); stroke-width: 1.2; }
.anchor-dot { fill: #fff; stroke: #9a9aa4; stroke-width: 1.2; cursor: crosshair; }
.anchor-dot:hover { fill: var(--text); stroke: var(--text); }
.edge-hint { fill: var(--text); stroke: #fff; stroke-width: 1.5; pointer-events: none; }
.align-guide { stroke: #d92d20; stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
.marquee { fill: rgba(13,13,15,.05); stroke: var(--text); stroke-width: 1; stroke-dasharray: 3 3; }
/* Editor de texto flotante: transparente, para que se siga viendo la figura
   con su relleno real mientras se escribe (antes tapaba todo con blanco y el
   texto blanco quedaba invisible). */
#textEditor {
  position: absolute; z-index: 50; border: none; background: transparent;
  padding: 0 6px; resize: none; outline: none; overflow: hidden;
  text-align: center; line-height: 1.3;
  user-select: text; -webkit-user-select: text; cursor: text;
}
/* La seleccion tiene que VERSE. Con el editor transparente y texto blanco,
   un resaltado translucido era imperceptible y parecia que no habia selector. */
#textEditor::selection { background: #2f5fd8; color: #ffffff; }
#textEditor::-moz-selection { background: #2f5fd8; color: #ffffff; }
/* contorno fino mientras se edita: senal de modo edicion sin tapar la figura */
#textEditor:not(.hidden) { box-shadow: 0 0 0 1.5px #2f5fd8; border-radius: 2px; }

/* panel flotante de formato condicional */
.float-panel {
  position: absolute; top: 12px; right: 12px; z-index: 60; width: 260px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px; box-shadow: var(--shadow-pop);
}
.fp-head { display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; margin-bottom: 10px; letter-spacing: -.015em; }
.fp-head button { color: var(--muted); font-size: 15px; }
.rule-card { border: 1px solid var(--border-soft); border-radius: 9px; padding: 9px; margin-bottom: 8px; }
.rule-del { color: var(--danger); font-size: 12px; margin-left: auto; }
#ruleList { max-height: 300px; overflow-y: auto; }

/* ============ Rotacion, geometria ============ */
.rot-handle { fill: #fff; stroke: var(--text); stroke-width: 1.2; cursor: grab; }
.rot-line { stroke: var(--text); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.geo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.geo-grid label { display: flex; flex-direction: column; gap: 3px; }
.geo-grid input[type=number] { width: 100%; box-sizing: border-box; }
.btn-pair { display: flex; gap: 4px; }
.btn-pair button { flex: 1; border: 1px solid var(--border); border-radius: 7px; height: 28px; background: #fff; }
.btn-pair button:hover { background: var(--accent-soft); }
.btn-pair button.active { background: var(--text); border-color: var(--text); color: #fff; }

/* ============ Quick-connect ============ */
.qc-arrow { fill: #c4c4cc; cursor: pointer; transition: fill .1s; }
.qc-arrow:hover { fill: var(--text); }
.qs-menu {
  position: fixed; z-index: 300; display: grid; grid-template-columns: repeat(3, 46px); gap: 6px;
  padding: 8px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-pop);
}
.qs-item {
  width: 46px; height: 38px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-soft); border-radius: 8px; cursor: pointer; background: #fff;
}
.qs-item:hover { border-color: #d4d4d8; background: var(--accent-soft); }
.qs-item svg { max-width: 36px; max-height: 28px; }
.qs-item svg path { fill: #e4e4e8; stroke: #9a9aa4; stroke-width: 1.2; }

/* ============ Estilos guardados y temas ============ */
.mini-btn {
  border: 1px solid var(--border); background: #fff; border-radius: 6px; width: 20px; height: 20px;
  cursor: pointer; font-size: 13px; line-height: 1;
}
.mini-btn:hover { border-color: var(--text); }
.mini-btn-wide {
  width: 100%; border: 1px solid var(--border); background: #fff; border-radius: 8px;
  padding: 6px; cursor: pointer; font-size: 12px;
}
.mini-btn-wide:hover { border-color: var(--danger); color: var(--danger); }
.style-swatch { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.theme-list { flex-direction: column; align-items: stretch; gap: 4px; }
.theme-btn {
  display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid var(--border-soft);
  background: #fff; border-radius: 8px; cursor: pointer; font-size: 12px;
}
.theme-btn:hover { border-color: #d4d4d8; background: var(--accent-soft); }
.theme-dots { display: inline-flex; gap: 3px; }
.theme-dots i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

/* ============ Iconos de estado ============ */
.icon-set-title { text-transform: capitalize; margin-top: 8px; }
.icon-swatch {
  width: 27px; height: 27px; border: 1px solid var(--border-soft); border-radius: 7px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; background: #fff;
}
.icon-swatch:hover { border-color: #d4d4d8; background: var(--accent-soft); }
.icon-swatch .pie { width: 14px; height: 14px; border-radius: 50%; display: block; }
.icon-pos { display: grid !important; grid-template-columns: repeat(3, 22px); gap: 4px; }
.icon-pos-btn { width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 5px; background: #fff; cursor: pointer; }
.icon-pos-btn:hover, .icon-pos-btn.active { background: var(--text); border-color: var(--text); }
.shape-icon { pointer-events: none; }

/* ============ Lock, lazo, buscar ============ */
.sel-outline.locked { stroke: var(--danger); stroke-dasharray: 4 3; }
.lasso-path { fill: rgba(13,13,15,.04); stroke: var(--text); stroke-width: 1; stroke-dasharray: 4 3; }
#svgRoot.lassoing { cursor: crosshair; }
#svgRoot.painting { cursor: copy; }
.find-bar {
  position: absolute; top: 12px; right: 12px; z-index: 60; display: flex; gap: 6px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 10px; box-shadow: var(--shadow-pop);
}
.find-bar input { width: 134px; }
.find-bar button {
  border: 1px solid var(--border); background: #fff; border-radius: 7px; padding: 4px 9px;
  cursor: pointer; font-size: 12px;
}
.find-bar button:hover { border-color: var(--text); }

/* ============ Guias del documento ============ */
.doc-guide { stroke: #d92d20; stroke-width: 1; opacity: .5; pointer-events: none; }
.doc-guide-hit { stroke: transparent; stroke-width: 10; cursor: move; }

/* ============ Lineas: waypoints ============ */
.wp-handle { fill: #fff; stroke: var(--text); stroke-width: 1.2; }
.wp-add { fill: #d4d4dc; stroke: #fff; stroke-width: 1; cursor: copy; }
.wp-add:hover { fill: var(--text); }

/* ============ Capas y versiones ============ */
.layers-panel, .versions-panel {
  position: absolute; z-index: 70; width: 240px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px; padding: 10px;
  box-shadow: var(--shadow-pop); font-size: 12px;
}
.layers-panel { bottom: 12px; left: 12px; }
.versions-panel { top: 12px; right: 12px; width: 252px; }
.layers-head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; margin-bottom: 8px; letter-spacing: -.015em;
}
.layers-head button { color: var(--muted); font-size: 15px; }
.layer-row { display: flex; align-items: center; gap: 4px; padding: 4px 3px; border-radius: 7px; }
.layer-row:hover { background: var(--bg); }
.layer-row button { color: var(--muted); font-size: 12px; padding: 2px 4px; border-radius: 5px; }
.layer-row button:hover { color: var(--text); background: var(--accent-soft); }
.layer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-row.base .layer-name { color: var(--muted); }
.vp-list { max-height: 300px; overflow-y: auto; margin-top: 6px; }
.vp-list small { color: var(--muted); }
.lp-new {
  width: 100%; margin-top: 8px; border: 1px solid var(--border); background: #fff;
  border-radius: 8px; padding: 6px; cursor: pointer; font-size: 12px;
}
.lp-new:hover { border-color: var(--text); }

/* ============ Menu contextual y command palette ============ */
.ctx-menu {
  position: fixed; z-index: 500; min-width: 224px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 11px; padding: 5px;
  box-shadow: var(--shadow-pop);
}
.ctx-sub { min-width: 214px; }
.ctx-menu button {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  width: 100%; text-align: left; padding: 6px 10px; font-size: 12.5px;
  border-radius: 7px; cursor: pointer; color: var(--text);
}
.ctx-menu button:hover:not(:disabled) { background: var(--accent-soft); }
.ctx-menu button:disabled { color: #b4b4bc; cursor: default; }
.ctx-menu kbd { font-family: inherit; font-size: 11px; color: var(--muted); }
.ctx-sep { height: 1px; background: var(--border-soft); margin: 4px 6px; }
.cmd-pal {
  position: fixed; top: 92px; left: 50%; transform: translateX(-50%); z-index: 600;
  width: min(440px, 90vw); background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-pop); padding: 10px;
}
.cmd-pal input {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 12px; font-size: 14px; margin-bottom: 6px; height: auto;
}
.cmd-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; }
.cmd-list button { text-align: left; padding: 7px 10px; font-size: 13px; border-radius: 7px; cursor: pointer; }
.cmd-list button:hover, .cmd-list button.active { background: var(--accent-soft); }

/* ============ Input inline ============ */
.ff-inline-input {
  position: fixed; z-index: 700; width: 184px; border: 1.5px solid var(--text);
  border-radius: 8px; padding: 6px 9px; font-size: 13px; background: #fff;
  box-shadow: var(--shadow-pop); outline: none; height: auto;
}

/* ============ Modales ============ */
.mmd-modal {
  position: fixed; inset: 0; z-index: 400; background: rgba(13,13,15,.32);
  display: flex; align-items: center; justify-content: center;
}
.mmd-box {
  background: var(--panel); border-radius: 16px; padding: 20px; width: min(560px, 92vw);
  box-shadow: 0 16px 48px rgba(13,13,15,.18);
}
.mmd-head { font-weight: 650; font-size: 16px; margin-bottom: 12px; letter-spacing: -.022em; }
#mmdSrc {
  width: 100%; height: 220px; box-sizing: border-box; font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px; border: 1px solid var(--border); border-radius: 9px; padding: 11px; resize: vertical;
}
.mmd-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.mmd-actions button { border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: 7px 15px; cursor: pointer; }
.mmd-actions button:hover { background: var(--accent-soft); }
.mmd-actions .btn-primary { background: var(--text); border-color: var(--text); color: #fff; }
.mmd-actions .btn-primary:hover { background: #2a2a30; }

/* ============ Plantillas ============ */
.tpl-box { width: min(720px, 94vw); }
.tpl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(202px, 1fr)); gap: 14px;
  max-height: 60vh; overflow-y: auto; padding: 2px;
}
.tpl-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 10px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.tpl-card:hover { border-color: #d4d4d8; box-shadow: var(--shadow-pop); }
.tpl-card b { font-size: 13px; font-weight: 550; letter-spacing: -.012em; }
.tpl-card small { color: var(--muted); font-size: 11.5px; }
.tpl-thumb {
  height: 112px; background: #fbfbfc; border: 1px solid var(--border-soft); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  margin-bottom: 7px; padding: 8px;
}
.tpl-thumb svg { width: 100%; height: 100%; }
.tpl-blank { font-size: 30px; color: #c4c4cc; font-weight: 300; }
.imp-list { display: flex; flex-direction: column; gap: 5px; max-height: 300px; overflow-y: auto; }
.imp-row {
  text-align: left; border: 1px solid var(--border-soft); background: #fff; border-radius: 8px;
  padding: 9px 11px; cursor: pointer; font-size: 13px;
}
.imp-row:hover { border-color: var(--text); background: var(--accent-soft); }

/* ============ Atajos de teclado ============ */
.sc-box { width: min(880px, 95vw); }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 22px;
  max-height: 62vh; overflow-y: auto; }
.sc-title { font-weight: 650; font-size: 13px; margin-bottom: 8px; letter-spacing: -.015em; }
.sc-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0;
  font-size: 12.5px; border-bottom: 1px solid var(--border-soft); }
.sc-row kbd { font-family: inherit; color: var(--muted); font-size: 11.5px; white-space: nowrap; }


/* ============ Inicio: logo, navegacion, arranque rapido ============ */
.g-logo { display: flex; align-items: center; gap: 9px; }
.g-mark { color: var(--text); flex: none; }
.g-word { font-size: 18px; font-weight: 700; letter-spacing: -.035em; }
.g-logo span.g-word { color: var(--text); }
.g-tagline { font-size: 11.5px; color: var(--muted); margin: -8px 0 2px 1px; letter-spacing: -.005em; }

.g-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.g-nav-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px;
  color: var(--muted); text-align: left; font-size: 13px;
}
.g-nav-item svg { flex: none; }
.g-nav-item:hover { background: var(--bg); color: var(--text); }
.g-nav-item.active { background: var(--accent-soft); color: var(--text); font-weight: 500; }

.g-count { font-size: 11px; color: var(--muted); }
.g-empty-mini { color: var(--muted); font-size: 12px; padding: 6px 10px; list-style: none; }
.g-side-foot {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 5px;
}
.g-foot-btn { text-align: left; font-size: 12px; color: var(--muted); padding: 4px 2px; }
.g-foot-btn:hover { color: var(--text); }
.g-foot-meta { font-size: 11px; color: #a4a4ac; padding-left: 2px; }

.g-head { align-items: flex-start; }
.g-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.g-head-tools { display: flex; align-items: center; gap: 8px; }
.g-head-tools select { height: 34px; }
.g-viewseg { height: 34px; }
.g-viewseg button { padding: 0 10px; color: var(--muted); }
.g-viewseg button.active { background: var(--text); color: #fff; }

/* arranque rapido */
.g-quick { margin-bottom: 34px; }
.g-quick-head, .g-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.g-quick h2, .g-sec-head h2 { font-size: 14px; font-weight: 650; letter-spacing: -.018em; }
.g-link { font-size: 12.5px; color: var(--muted); }
.g-link:hover { color: var(--text); }
.g-quick-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.q-tile {
  border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 11px;
  text-align: left; display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.q-tile:hover { border-color: #d4d4d8; box-shadow: var(--shadow-pop); }
.q-art {
  height: 74px; border-radius: 8px; background: #fbfbfc; border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center; margin-bottom: 7px; padding: 8px;
  color: #c4c4cc;
}
.q-art svg { width: 100%; height: 100%; }
.q-tile b { font-size: 12.5px; font-weight: 550; letter-spacing: -.012em; }
.q-tile small { font-size: 11px; color: var(--muted); }
.q-blank .q-art { background: #fff; }

/* vista lista */
.g-list { display: flex; flex-direction: column; gap: 6px; }
.g-row {
  display: flex; align-items: center; gap: 14px; padding: 8px 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
  transition: border-color .15s;
}
.g-row:hover { border-color: #d4d4d8; }
.g-row .g-thumb {
  width: 74px; height: 46px; flex: none; border: 1px solid var(--border-soft);
  border-radius: 7px; padding: 5px; background: #fbfbfc;
}
.g-row .g-card-body { flex: 1; padding: 0; }

/* estado vacio */
.g-empty {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 56px 20px; color: var(--muted); text-align: center;
  border: 1px dashed var(--border); border-radius: 14px; background: #fff;
}
.g-empty svg { color: #d4d4d8; margin-bottom: 4px; }
.g-empty b { color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: -.018em; }
.g-empty span { font-size: 12.5px; }

/* borde arrastrable para redimensionar (todo el lado, no solo la esquina) */
.edge-handle { stroke: transparent; fill: none; }

/* ==================================================================
   Nitidez de chrome. NO toca la paleta (blanco/negro se queda tal cual):
   solo geometria y densidad. Lo "suavizado" venia de radios grandes,
   sombras muy difusas y barras altas con mucho aire.
   ================================================================== */
:root {
  --radius: 6px;
  --shadow: 0 1px 2px rgba(13,13,15,.06);
  --shadow-pop: 0 1px 2px rgba(13,13,15,.10), 0 6px 16px rgba(13,13,15,.10);
}

/* --- controles: cuadrados, compactos --- */
input[type=text], input[type=search], input[type=number], select { border-radius: 5px; height: 27px; }
input[type=color] { border-radius: 5px; width: 27px; height: 27px; }
.btn-primary { border-radius: 6px; padding: 8px 14px; font-weight: 550; }
.btn-secondary { border-radius: 6px; }
.icon-btn { width: 26px; height: 26px; border-radius: 5px; }

/* --- barras del editor: mas bajas, menos aire --- */
.e-topbar { height: 42px; padding: 5px 10px; gap: 6px; }
.e-title { font-size: 13.5px; padding: 3px 7px; border-radius: 5px; }
.e-formatbar { height: 34px; padding: 3px 10px; gap: 3px; }
.e-bottombar { height: 30px; padding: 2px 10px; }
.e-actions { gap: 2px; }
.e-actions .sep, .fb-group .sep { height: 17px; margin: 0 5px; }
.fb-group { gap: 3px; }
.fb-swatch { width: 26px; height: 26px; border-radius: 5px; }
.fb-stepper, .fb-seg { border-radius: 5px; }
.fb-stepper input { font-size: 12px; }
.e-pages button { border-radius: 5px; padding: 4px 11px; font-size: 12.5px; }
.e-zoom button, #zoomLabel { border-radius: 5px; font-size: 12px; padding: 3px 8px; }

/* --- menus, popovers, modales: esquinas contenidas --- */
.dropdown-menu, #popover, .ctx-menu, .qs-menu, .layers-panel, .versions-panel,
.find-bar, .cmd-pal, .float-panel { border-radius: 8px; }
.dropdown-menu button, .ctx-menu button, .cmd-list button,
.qs-item, .icon-swatch, .sp-item, .imp-row, .theme-btn,
.mini-btn, .mini-btn-wide, .lp-new, .icon-pos-btn, .btn-pair button,
.p-swatch, .layer-row, .rule-card, .g-nav-item, .g-folders li { border-radius: 5px; }
.mmd-box { border-radius: 10px; }
.mmd-head { font-size: 15.5px; }
.mmd-actions button { border-radius: 6px; }
#mmdSrc, .cmd-pal input, .ff-inline-input { border-radius: 6px; }
.ctx-menu { padding: 4px; }
.ctx-menu button { padding: 6px 10px; font-size: 12.5px; }
.ctx-sep { margin: 4px 6px; }

/* --- panel de figuras: mas denso --- */
.e-shapes { padding: 10px 8px 10px 10px; }
.sp-group-title { font-size: 10.5px; margin: 10px 0 6px; }
.sp-grid { gap: 5px; }
.sp-item { height: 41px; }

/* --- inicio: tarjetas definidas, no mullidas --- */
.g-sidebar { width: 236px; padding: 16px 12px; gap: 10px; }
.g-main { padding: 26px 30px; }
.g-head h1 { font-size: 21px; }
.g-nav-item, .g-folders li { padding: 6px 9px; font-size: 12.5px; }
.g-folders-head button { border-radius: 5px; }
.g-card, .q-tile, .tpl-card, .g-row, .g-empty { border-radius: 7px; }
.g-thumb, .q-art, .tpl-thumb { border-radius: 4px; }
.g-head input, .g-head-tools select, .g-viewseg { border-radius: 6px; height: 30px; }
.g-viewseg button { border-radius: 4px; }
.sc-box { border-radius: 10px; }

/* --- riel de herramientas: lectura de instrumento, no de documento --- */
.e-rail {
  width: 42px; flex: none; background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 0; gap: 2px; z-index: 20;
}
.rail-btn {
  width: 30px; height: 30px; border-radius: 5px; color: #55555e;
  display: flex; align-items: center; justify-content: center; flex: none;
  transition: background-color 90ms ease;
}
.rail-btn:hover { background: var(--border-soft); color: var(--text); }
.rail-btn.active { background: var(--text); color: #fff; }
.rail-sep { width: 20px; height: 1px; background: var(--border); margin: 5px 0; flex: none; }

/* --- nitidez tipografica: sin tracking negativo ni suavizado que adelgaza --- */
body { letter-spacing: 0; -webkit-font-smoothing: auto; }
.g-head h1 { letter-spacing: -.012em; font-weight: 650; }
.g-word, .e-title, .g-card-name, .q-tile b, .tpl-card b, .mmd-head, .sc-title { letter-spacing: -.008em; }

/* --- panel de figuras denso: mas columnas, tiles chicos, trazo definido --- */
.e-shapes { width: 214px; padding: 9px 7px 9px 9px; }
.sp-search input { height: 26px; margin-bottom: 7px; }
.sp-group-title { font-size: 10px; letter-spacing: .8px; margin: 11px 0 5px; }
.sp-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sp-item { height: 36px; border-radius: 4px; }
.sp-item svg { width: 30px; height: 23px; }
.sp-item svg path { fill: #eceef2; stroke: #6f7480; stroke-width: 1.35; }
.sp-item:hover { background: var(--accent-soft); border-color: #c8c8cf; }
.qs-item svg path { fill: #eceef2; stroke: #6f7480; stroke-width: 1.35; }
.sp-group-title .mini-btn { margin-left: auto; }
#savedShapes .mini, .e-shapes .mini { font-size: 11px; line-height: 1.45; color: var(--muted); }
.sp-grid > .mini { grid-column: 1 / -1; }

/* ==================================================================
   Alineacion con valores medidos en el editor real de Lucidchart
   (computed styles, 2026-08-19). Ver docs/LUCID_FEATURES.md.
   ================================================================== */
:root { --text: #282c33; --accent: #282c33; }

/* alturas de barra: Lucid es MAS alto que lo que yo habia apretado */
.e-topbar { height: 48px; padding: 6px 12px; }
.e-formatbar { height: 41px; padding: 5px 12px; }
.e-bottombar { height: 33px; padding: 3px 12px; }

/* riel: 41px, botones 32x36 sin redondeo */
.e-rail { width: 41px; padding: 5px 0; gap: 1px; }
.rail-btn { width: 32px; height: 36px; border-radius: 3px; }

/* panel de figuras: mas ancho, tiles desnudos de 32px.
   La caja con borde y relleno alrededor de cada figura era lo que hacia
   ver el panel como una plancha de stickers. Lucid muestra solo el glifo. */
.e-shapes { width: 248px; padding: 10px 10px 14px; }
.sp-grid { grid-template-columns: repeat(6, 1fr); gap: 2px; }
.sp-item {
  height: 32px; border: none; background: none; border-radius: 3px;
}
.sp-item:hover { background: #eef0f3; border: none; }
.sp-item svg { width: 26px; height: 21px; }
.sp-item svg path { fill: #ffffff; stroke: #444a54; stroke-width: 1.3; }

/* titulos de grupo: texto normal, no micro-etiqueta en mayusculas */
.sp-group-title {
  font-size: 13px; font-weight: 550; text-transform: none;
  letter-spacing: 0; color: var(--text); margin: 14px 0 6px;
}
/* separacion de secciones, como los grupos del panel de Lucid */
.sp-group-title { border-top: 1px solid var(--border-soft); padding-top: 13px; }
#shapeGroups > .sp-group-title:first-child { border-top: none; padding-top: 2px; margin-top: 4px; }
/* tema activo del documento */
.theme-btn.active { border-color: var(--text); background: var(--accent-soft); font-weight: 550; }