/* Panel AppQRZone. Diseño aprobado en mockups/panel-apariencia.html. */
:root {
  --ui-bg: #f4f5f7;
  --ui-surface: #ffffff;
  --ui-surface-2: #eff1f4;
  --ui-text: #11141a;
  --ui-muted: #5f6875;
  --ui-line: rgba(15, 23, 42, .1);
  --ui-ink: #0f1216;
  --ui-accent: #ff5a36;
  --ui-ok: #12a150;
  --ui-danger: #c62f3c;
  /* Color de marca que se está probando: lo usan las miniaturas de tema */
  --pv-brand: #c8a25a;
  /* Escala del teléfono de la vista previa */
  --z: .78;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 14.5px; line-height: 1.45; color: var(--ui-text); background: var(--ui-bg); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, p { margin: 0; }
:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Estructura ---------- */
.app { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100dvh; }

.side { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 4px; padding: 20px 14px; background: var(--ui-ink); color: #aab1bc; z-index: 30; }
.side-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 22px; color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.side-brand svg { width: 30px; height: 30px; flex: none; }
.nav { display: grid; gap: 2px; }
.nav-group { padding: 18px 12px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b7380; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-weight: 500; transition: background .15s, color .15s; }
.nav-item .ic { font-size: 19px; }
a.nav-item:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.nav-item[aria-current="page"] { background: rgba(255, 255, 255, .09); color: #fff; }
.nav-item[aria-current="page"] .ic { color: var(--ui-accent); }
.nav-item[aria-disabled="true"] { opacity: .4; cursor: default; }

.main { display: flex; flex-direction: column; min-width: 0; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 28px; background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); }
.crumbs { display: flex; align-items: center; gap: 8px; color: var(--ui-muted); font-size: 13.5px; }
.crumbs b { color: var(--ui-text); font-weight: 600; }
.menu-btn { display: none; font-size: 22px; }
.top-right { display: flex; align-items: center; gap: 16px; }
.user { display: flex; align-items: center; gap: 10px; }
.user form { display: contents; }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ui-ink); color: #fff; font-size: 12.5px; font-weight: 700; }
.user-text { display: grid; line-height: 1.2; }
.user-text b { font-size: 13.5px; font-weight: 600; }
.user-text small { font-size: 12px; color: var(--ui-muted); }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-size: 18px; color: var(--ui-muted); }
.icon-btn:hover { background: var(--ui-surface-2); color: var(--ui-text); }

.content { padding: 28px; max-width: 1180px; width: 100%; margin: 0 auto; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px; align-items: start; }
.page-head h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.page-head p { margin-top: 4px; color: var(--ui-muted); max-width: 52ch; }

/* ---------- Formularios ---------- */
.form { display: grid; gap: 16px; }
.sec { padding: 20px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 20px; }
.sec-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.sec-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 19px; background: var(--ui-surface-2); flex: none; }
.sec-head h2 { font-size: 16px; font-weight: 700; }
.sec-head p { color: var(--ui-muted); font-size: 13.5px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 12px; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s, opacity .15s, transform .1s; }
.btn .ic { font-size: 17px; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--ui-ink); color: #fff; }
.btn.ghost { background: var(--ui-surface); border: 1px solid var(--ui-line); }
.btn.ghost:hover { background: var(--ui-surface-2); }
.btn.sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn.block { width: 100%; height: 46px; }
.btn:disabled { opacity: .4; cursor: default; }

.fields { display: grid; gap: 14px; }
/* start: en una fila con un campo más alto (aviso o error debajo), los demás no se corren hacia abajo. */
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-size: 13px; font-weight: 600; }
.field input { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(15, 23, 42, .18); background: var(--ui-surface); }
.field input:focus { outline: 2px solid var(--ui-ink); outline-offset: -1px; }
.field input.input-validation-error { border-color: var(--ui-danger); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-hint, .hint { color: var(--ui-muted); font-size: 12.5px; }
.field-error { color: var(--ui-danger); font-size: 12.5px; }
.field-error:empty { display: none; }
.optional { color: var(--ui-muted); font-weight: 400; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.check input { width: 16px; height: 16px; accent-color: var(--ui-ink); }

.form-errors { padding: 12px 14px; border-radius: 12px; background: #fdecee; color: var(--ui-danger); font-size: 13.5px; }
.form-errors.validation-summary-valid { display: none; }
.form-errors ul { margin: 0; padding-left: 18px; }

.logo-field { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.logo-thumb { display: grid; place-items: center; min-width: 168px; height: 76px; padding: 0 18px; border-radius: 14px; background: #fff; border: 1px dashed rgba(15, 23, 42, .22); }
.logo-thumb img { display: block; max-height: 44px; max-width: 160px; object-fit: contain; }
.logo-empty { color: var(--ui-muted); font-size: 13px; }
.logo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.logo-field .hint { flex-basis: 100%; }

.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 420px; }
.choice { position: relative; display: grid; gap: 10px; padding: 10px; border-radius: 16px; border: 1.5px solid var(--ui-line); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.choice svg.thumb { display: block; width: 100%; height: auto; border-radius: 10px; }
.choice-name, .swatch-name { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 2px; font-weight: 600; }
.choice .tick, .swatch .tick { font-size: 18px; stroke-width: 2.4; opacity: 0; }
.choice:has(input:checked), .swatch:has(input:checked) { border-color: var(--ui-ink); box-shadow: 0 0 0 1px var(--ui-ink); }
.choice:has(input:checked) .tick, .swatch:has(input:checked) .tick { opacity: 1; }
.choice:has(input:focus-visible), .swatch:has(input:focus-visible) { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.swatch { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--ui-line); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.swatch svg.chip { width: 28px; height: 28px; flex: none; }
.swatch-name { flex: 1; padding: 0; font-size: 14px; }

.savebar { position: sticky; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 18px; border-radius: 18px; background: var(--ui-surface); border: 1px solid var(--ui-line); box-shadow: 0 18px 40px -22px rgba(15, 23, 42, .45); }
.save-state { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ui-muted); }
.save-state svg { width: 9px; height: 9px; flex: none; fill: var(--ui-ok); }
.savebar[data-dirty="true"] .save-state { color: var(--ui-text); }
.savebar[data-dirty="true"] .save-state svg { fill: var(--ui-accent); }

/* ---------- Lista de vCards ---------- */
.row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.toolbar { display: flex; gap: 10px; margin: 22px 0 14px; flex-wrap: wrap; }
.search { position: relative; flex: 1; min-width: 220px; max-width: 380px; }
.search .ic { position: absolute; left: 14px; top: 50%; translate: 0 -50%; font-size: 17px; color: var(--ui-muted); }
.search input { width: 100%; height: 42px; padding: 0 14px 0 40px; border-radius: 12px; border: 1px solid rgba(15, 23, 42, .18); background: var(--ui-surface); }
.seg { display: flex; padding: 3px; border-radius: 12px; background: var(--ui-surface-2); }
.seg a { display: grid; place-items: center; padding: 0 14px; height: 36px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--ui-muted); }
.seg a[aria-current="true"] { background: var(--ui-surface); color: var(--ui-text); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.list { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 20px; overflow: hidden; }
.item { display: grid; grid-template-columns: 52px minmax(0, 1.4fr) minmax(0, 1.2fr) 120px auto; gap: 16px; align-items: center; padding: 14px 18px; }
.item + .item { border-top: 1px solid var(--ui-line); }
.item:hover { background: #fafbfc; }
.person-photo { position: relative; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ui-surface-2); font-size: 16px; font-weight: 700; color: var(--ui-muted); }
.person-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.item-main { min-width: 0; }
.item-main b { display: block; font-size: 15px; }
.item-main small { display: block; color: var(--ui-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.url { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.url .ic { font-size: 14px; color: var(--ui-muted); }
.url:hover { text-decoration: underline; }
.state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.state svg { width: 8px; height: 8px; }
.actions { display: flex; gap: 4px; justify-content: flex-end; }
.list-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; color: var(--ui-muted); font-size: 13px; }

/* ---------- Editor de vCard ---------- */
.back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--ui-muted); font-size: 13.5px; font-weight: 600; }
.back:hover { color: var(--ui-text); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.full { grid-column: 1 / -1; }
.field select, .field textarea { width: 100%; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(15, 23, 42, .18); background: var(--ui-surface); }
.field select { height: 44px; }
.field textarea { padding: 11px 14px; min-height: 88px; resize: vertical; line-height: 1.4; }
.field textarea:focus, .field select:focus { outline: 2px solid var(--ui-ink); outline-offset: -1px; }
.field input[readonly] { background: var(--ui-surface-2); color: var(--ui-muted); }
.split-hint { display: flex; justify-content: space-between; gap: 8px; }
.photo-field { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.photo-thumb { position: relative; display: grid; place-items: center; width: 92px; height: 115px; border-radius: 16px; overflow: hidden; background: var(--ui-surface-2); border: 1px dashed rgba(15, 23, 42, .22); font-size: 26px; font-weight: 700; color: var(--ui-muted); }
.photo-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.photo-actions { display: grid; gap: 8px; }
.photo-actions div { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-actions p { color: var(--ui-muted); font-size: 12.5px; max-width: 38ch; }
.links { display: grid; gap: 10px; }
.link-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 170px auto; gap: 8px; align-items: center; }
.link-row select, .link-row input { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(15, 23, 42, .18); background: var(--ui-surface); }
.link-row .row-tools { display: flex; }
.add-link { justify-self: start; margin-top: 10px; }
.public-url { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 10px 10px 14px; border-radius: 12px; background: var(--ui-surface-2); font-weight: 600; font-size: 13.5px; }
.public-url > span { flex: 1; min-width: 160px; overflow-wrap: anywhere; }
.status-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 460px; }
.status { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--ui-line); cursor: pointer; }
.status svg.dot { width: 10px; height: 10px; margin-top: 5px; flex: none; }
.status b { display: block; font-size: 14px; }
.status small { color: var(--ui-muted); font-size: 12.5px; }
.status:has(input:checked) { border-color: var(--ui-ink); box-shadow: 0 0 0 1px var(--ui-ink); }
.status:has(input:focus-visible) { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.btn.danger { color: var(--ui-danger); }

/* ---------- Galería (Apariencia) ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.g-item { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--ui-surface-2); border: 1px solid var(--ui-line); }
.g-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-num { position: absolute; top: 8px; left: 8px; display: grid; place-items: center; width: 24px; height: 24px; }
.g-num svg { position: absolute; inset: 0; width: 24px; height: 24px; fill: rgba(14, 14, 12, .6); }
.g-num span { position: relative; font-size: 12px; font-weight: 700; color: #fff; }
.g-tools { position: absolute; inset: auto 6px 6px; display: flex; justify-content: space-between; }
.g-tools > span { display: flex; gap: 4px; }
.g-tools button { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: 15px; color: #fff; background: rgba(14, 14, 12, .55); backdrop-filter: blur(6px); }
.g-add { display: grid; place-content: center; justify-items: center; gap: 6px; aspect-ratio: 4 / 3; border-radius: 14px; border: 1.5px dashed rgba(15, 23, 42, .25); color: var(--ui-muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.g-add .ic { font-size: 22px; }
.g-add:hover { border-color: var(--ui-ink); color: var(--ui-text); }
.note { margin-top: 12px; color: var(--ui-muted); font-size: 12.5px; }

/* ---------- Tarjetas, cifras y gráficos (Inicio y Métricas) ---------- */
.stack-v { display: grid; gap: 18px; }
.panel-card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 20px; padding: 20px; min-width: 0; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2 { font-size: 15.5px; font-weight: 700; }
.card-head p { color: var(--ui-muted); font-size: 13px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; }
.grid-2e { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile { display: grid; gap: 6px; align-content: start; }
.label { font-size: 13px; font-weight: 600; color: var(--ui-muted); }
.hero-value { font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.tile-value { font-size: 28px; font-weight: 700; line-height: 1.1; }
.delta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.delta.up { color: #0a7d36; }
.delta.down { color: var(--ui-danger); }
.delta .ic { font-size: 14px; stroke-width: 2.2; }
.delta span { color: var(--ui-muted); font-weight: 500; }
.tile svg.spark { width: 100%; height: auto; max-height: 40px; }
.welcome { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.welcome h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.welcome p { color: var(--ui-muted); }
.welcome .actions-row { display: flex; gap: 8px; flex-wrap: wrap; }

.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .gridline { stroke: #e6e8ec; stroke-width: 1; }
.chart .baseline { stroke: #c9ccd3; stroke-width: 1; }
.chart .tick { fill: #8a909b; font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke: #2a78d6; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: #2a78d6; opacity: .1; }
.chart .cross { stroke: #c9ccd3; stroke-width: 1; }
.chart .hover-dot { fill: #2a78d6; stroke: #fff; stroke-width: 2; }
.chart-tip { position: absolute; z-index: 70; pointer-events: none; padding: 8px 10px; border-radius: 10px; background: var(--ui-ink); color: #fff; font-size: 12.5px; line-height: 1.3; white-space: nowrap; transform: translate(-50%, calc(-100% - 12px)); }
.chart-tip b { display: block; font-size: 14px; }
.chart-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.chart-table th, .chart-table td { padding: 6px 8px; border-bottom: 1px solid var(--ui-line); text-align: left; }
.chart-table td:last-child, .chart-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.bars { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 54px; gap: 12px; align-items: center; font-size: 13.5px; }
.bar-row .name { display: flex; align-items: center; gap: 8px; }
.bar-row .name .ic { font-size: 15px; color: var(--ui-muted); }
.bar { display: block; height: 18px; border-radius: 0 4px 4px 0; background: #2a78d6; min-width: 2px; }
.bar-row .value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.stackbar { display: flex; gap: 2px; height: 22px; }
.stackbar span:first-child { border-radius: 4px 0 0 4px; }
.stackbar span:last-child { border-radius: 0 4px 4px 0; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 13px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend svg { width: 10px; height: 10px; }
.legend b { font-variant-numeric: tabular-nums; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.select { height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(15, 23, 42, .18); background: var(--ui-surface); max-width: 100%; }
.seg button, .seg span { display: grid; place-items: center; padding: 0 14px; height: 36px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--ui-muted); }
.seg button[aria-pressed="true"] { background: var(--ui-surface); color: var(--ui-text); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.empty-note { color: var(--ui-muted); font-size: 13.5px; padding: 18px 0; text-align: center; }

.checklist { display: grid; gap: 4px; }
.check-item { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--ui-line); font-size: 14px; }
.check-item:last-child { border-bottom: 0; }
.check-item svg.state-ic { width: 22px; height: 22px; flex: none; }
.check-item.done span { color: var(--ui-muted); text-decoration: line-through; }
.check-item a { margin-left: auto; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.progress { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; color: var(--ui-muted); }
.progress svg { width: 100%; height: 6px; }

/* ---------- Tablas ---------- */
/* relative: un .sr (absoluto) dentro de la tabla queda en este contenedor con scroll y no ensancha la página. */
.table-wrap { position: relative; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 20px; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { padding: 10px 12px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted); text-align: left; border-bottom: 1px solid var(--ui-line); white-space: nowrap; }
.table td { padding: 12px; border-bottom: 1px solid var(--ui-line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .r { text-align: right; font-variant-numeric: tabular-nums; }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who-photo { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; flex: none; background: var(--ui-surface-2); font-size: 12px; font-weight: 700; color: var(--ui-muted); }
.who-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.who b { display: block; font-size: 14px; }
.who small { display: block; color: var(--ui-muted); font-size: 12.5px; }
.type { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ui-muted); white-space: nowrap; }
.type .ic { font-size: 15px; }
.row-actions { display: inline-flex; gap: 2px; }

/* ---------- Códigos QR ---------- */
.callout { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: #eef4fd; color: #19406f; font-size: 13.5px; }
.callout .ic { font-size: 19px; flex: none; margin-top: 1px; }
.qr-mini { display: block; width: 44px; height: 44px; padding: 4px; border-radius: 10px; background: #fff; border: 1px solid var(--ui-line); }
.qr-mini svg { width: 100%; height: 100%; display: block; }
.dest { display: block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-muted); font-size: 13px; }
.short { font-weight: 600; font-size: 14px; }
.spark-cell svg { width: 90px; height: 26px; display: block; }
.qr-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dest-choice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--ui-line); cursor: pointer; }
.dest-choice .ic { font-size: 19px; margin-top: 2px; }
.dest-choice b { display: block; font-size: 14px; }
.dest-choice small { color: var(--ui-muted); font-size: 12.5px; }
.dest-choice:has(input:checked) { border-color: var(--ui-ink); box-shadow: 0 0 0 1px var(--ui-ink); }
.color-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.color-swatch { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid var(--ui-line); cursor: pointer; }
.color-swatch svg { width: 24px; height: 24px; }
.color-swatch:has(input:checked) { border-color: var(--ui-ink); box-shadow: 0 0 0 1px var(--ui-ink); }
.color-swatch:has(input:focus-visible) { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.qr-preview { position: sticky; top: 20px; display: grid; justify-items: center; gap: 14px; padding: 22px; border-radius: 22px; background: var(--ui-surface); border: 1px solid var(--ui-line); }
.qr-art { width: 260px; max-width: 100%; }
.qr-art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 30px rgba(15, 23, 42, .18)); }
.qr-url { font-size: 13px; font-weight: 600; color: var(--ui-muted); text-align: center; overflow-wrap: anywhere; }
.dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }

/* ---------- Dominio ---------- */
.domain-now { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; background: var(--ui-surface-2); }
.domain-now b { font-size: 16px; }
.steps { display: grid; margin-top: 8px; }
.step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 0; }
.step svg.state-ic { width: 26px; height: 26px; }
.step b { display: block; font-size: 14px; }
.step small { color: var(--ui-muted); font-size: 13px; }
.dns { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.dns th { text-align: left; padding: 8px 10px; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); background: var(--ui-surface-2); }
.dns td { padding: 10px; border-bottom: 1px solid var(--ui-line); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; overflow-wrap: anywhere; }
.dns td .icon-btn { display: inline-grid; width: 28px; height: 28px; margin-left: 6px; vertical-align: middle; font-size: 15px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form input { flex: 1; min-width: 200px; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(15, 23, 42, .18); }
.warn-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #fff6e5; color: #6b4a00; font-size: 13.5px; }
.warn-note .ic { font-size: 18px; flex: none; margin-top: 1px; }

/* ---------- Usuarios ---------- */
.roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.role { padding: 14px; border-radius: 16px; background: var(--ui-surface); border: 1px solid var(--ui-line); }
.role b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.role b .ic { font-size: 16px; }
.role p { margin-top: 4px; color: var(--ui-muted); font-size: 12.5px; }
.role-select { height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--ui-line); background: var(--ui-surface); font-size: 13px; }
dialog { width: min(460px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(15, 23, 42, .6); }
dialog::backdrop { background: rgba(15, 18, 22, .45); backdrop-filter: blur(3px); }
.dlg { display: grid; gap: 16px; padding: 24px; }
.dlg h2 { font-size: 19px; }
.dlg p { color: var(--ui-muted); font-size: 13.5px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.link-box { display: flex; gap: 8px; }
.link-box input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(15, 23, 42, .18); background: var(--ui-surface-2); font-size: 12.5px; }

/* ---------- Firmas de email ---------- */
.company-design { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.company-design h2 { font-size: 16px; }
.company-design p { color: var(--ui-muted); font-size: 13.5px; }
/* Miniaturas: la firma real (HTML de correo) achicada; no se puede tocar. */
.thumb-lg { position: relative; width: 280px; height: 104px; border-radius: 12px; border: 1px solid var(--ui-line); background: #fff; overflow: hidden; }
.thumb-lg > div { position: absolute; left: 10px; top: 10px; transform: scale(.47); transform-origin: top left; pointer-events: none; }
.mini-thumb { position: relative; width: 74px; height: 30px; border-radius: 6px; border: 1px solid var(--ui-line); background: #fff; overflow: hidden; flex: none; }
.mini-thumb > div { position: absolute; left: 4px; top: 3px; transform: scale(.13); transform-origin: top left; pointer-events: none; }
.link-btn { padding: 0; border: 0; background: none; font: inherit; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.sig-editor { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 26px; align-items: start; }
.sig-designs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sig-design-opt { display: grid; gap: 8px; padding: 8px; border-radius: 14px; border: 1.5px solid var(--ui-line); cursor: pointer; }
.sig-design-opt .thumb { position: relative; display: block; height: 82px; border-radius: 9px; background: #fff; border: 1px solid var(--ui-line); overflow: hidden; }
.sig-design-opt .thumb > span { position: absolute; left: 7px; top: 7px; transform: scale(.33); transform-origin: top left; pointer-events: none; }
.sig-design-opt .name { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 2px; font-size: 13px; font-weight: 600; }
.sig-design-opt .tick, .sig-design-row .tick { font-size: 16px; stroke-width: 2.4; opacity: 0; }
.sig-design-opt:has(input:checked), .sig-design-row:has(input:checked) { border-color: var(--ui-ink); box-shadow: 0 0 0 1px var(--ui-ink); }
.sig-design-opt:has(input:checked) .tick, .sig-design-row:has(input:checked) .tick { opacity: 1; }
.sig-design-opt:has(input:focus-visible), .sig-design-row:has(input:focus-visible) { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.sig-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }

.sig-preview { position: sticky; top: 20px; display: grid; gap: 12px; min-width: 0; }
.mail { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--ui-line); box-shadow: 0 30px 60px -40px rgba(15, 23, 42, .55); }
.mail-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: #eef1f6; font-size: 13px; font-weight: 700; color: #3a3f47; }
.mail-bar svg { width: 40px; height: 10px; fill: #c9ccd3; }
.mail-row { display: flex; gap: 8px; padding: 9px 16px; border-bottom: 1px solid #edf0f3; font-size: 13px; color: #5f6875; }
.mail-row b { color: #22252b; font-weight: 500; }
.mail iframe { display: block; width: 100%; height: 320px; border: 0; background: #fff; }
.sig-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sig-actions .btn { min-width: 0; height: auto; min-height: 42px; padding: 8px 12px; white-space: normal; line-height: 1.2; text-align: center; }
.sig-preview .note { margin-top: 0; }

.sig-gallery { display: grid; gap: 12px; }
.sig-design-row { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px; border-radius: 16px; border: 1.5px solid var(--ui-line); cursor: pointer; }
.sig-design-row .info { display: grid; gap: 4px; }
.sig-design-row .info b { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.sig-design-row .info span { color: var(--ui-muted); font-size: 13.5px; }
.sig-design-row .info small { font-size: 12.5px; font-weight: 600; }
.sig-design-row .stage { display: block; padding: 18px; border-radius: 12px; background: #fff; border: 1px dashed rgba(15, 23, 42, .14); overflow-x: auto; }
.sig-banner-field { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.sig-banner-thumb { display: grid; place-items: center; width: 270px; max-width: 100%; height: 54px; border-radius: 10px; overflow: hidden; background: var(--ui-surface-2); border: 1px dashed rgba(15, 23, 42, .22); color: var(--ui-muted); font-size: 13px; }
.sig-banner-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sig-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* Igual al banner de texto del correo (SignatureHtml.TextBanner), con el color de marca. */
.sig-banner-preview { display: flex; align-items: center; justify-content: space-between; gap: 14px; max-width: 540px; padding: 12px 16px; border-radius: 10px; background: var(--accent); color: var(--on); font-family: Arial, Helvetica, sans-serif; }
.sig-banner-preview .text { display: grid; gap: 2px; min-width: 0; }
.sig-banner-preview small { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.sig-banner-preview b { font-size: 15px; line-height: 1.3; }
.sig-banner-preview .button { flex: none; padding: 8px 14px; border-radius: 8px; background: var(--on); color: var(--accent); font-size: 12px; font-weight: bold; white-space: pre; }
.sig-mark { display: grid; place-items: center; width: 54px; height: 92px; border-radius: 4px; flex: none; }
.sig-mark img { width: 18px; height: 18px; }

/* ---------- Importar CSV (mockups/panel-importar.html) ---------- */
dialog.import-dialog { width: min(600px, calc(100vw - 32px)); }
.dlg-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.dlg-head p { margin-top: 2px; }
.dlg-head .icon-btn { flex: none; }
.import-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: s; font-size: 13.5px; }
.import-steps li { position: relative; padding-left: 34px; min-height: 24px; }
.import-steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ui-surface-2); font-size: 12px; font-weight: 700; }
.import-template { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ui-line); }
.import-template .file { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #e9f7ef; color: #0a7d36; font-size: 20px; flex: none; }
.import-template b { display: block; font-size: 14px; }
.import-template small { color: var(--ui-muted); font-size: 12.5px; }
.import-template .btn { margin-left: auto; }
/* Zona para soltar: un estado por color, siempre con ícono y texto (no solo color). */
.drop { position: relative; display: grid; justify-items: center; gap: 8px; padding: 28px 20px; border-radius: 18px; border: 2px dashed rgba(15, 23, 42, .22); background: var(--ui-surface-2); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.drop:has(input:focus-visible) { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.drop .big { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--ui-surface); font-size: 24px; color: var(--ui-muted); box-shadow: 0 6px 16px -10px rgba(15, 23, 42, .4); }
.drop b { font-size: 15px; }
.drop small { color: var(--ui-muted); font-size: 12.5px; }
.drop:hover, .drop[data-state="over"] { border-color: var(--ui-ink); background: #eef4fd; }
.drop[data-state="over"] .big { color: var(--ui-ink); }
.drop[data-state="busy"] { cursor: progress; border-style: solid; border-color: var(--ui-line); background: var(--ui-surface); }
.drop[data-state="error"] { border-color: var(--ui-danger); background: #fdecee; }
.drop[data-state="error"] .big { color: var(--ui-danger); }
.drop[data-state="ok"] { cursor: default; border-style: solid; border-color: var(--ui-ok); background: #e9f7ef; }
.drop[data-state="ok"] .big { color: var(--ui-ok); }
.filechip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; background: var(--ui-surface); border: 1px solid var(--ui-line); font-size: 12.5px; font-weight: 600; }
.upload-bar { display: block; width: min(360px, 100%); height: 8px; border-radius: 99px; background: var(--ui-surface-2); overflow: hidden; }
.upload-bar span { display: block; width: 0; height: 100%; border-radius: 99px; background: var(--ui-ink); transition: width .25s; }
.spin { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.import-result { display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; font-size: 13.5px; }
.import-result.error { background: #fdecee; color: #7c1822; }
.import-result.ok { background: #e9f7ef; color: #0b5a2b; }
.result-head { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.result-head .ic { font-size: 18px; margin-top: 1px; }
.import-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; max-height: 200px; overflow: auto; font-weight: 500; }
.import-rows li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .6); }
.import-rows b { font-variant-numeric: tabular-nums; }
.counts { display: flex; gap: 8px; flex-wrap: wrap; }
.counts span { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .7); font-weight: 600; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Vista previa ---------- */
.preview-col { position: sticky; top: 20px; display: grid; justify-items: center; gap: 12px; }
.pv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.live { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.live svg { width: 10px; height: 10px; fill: var(--ui-ok); animation: pulse 1.6s ease-in-out infinite; }
.pv-url { font-size: 12.5px; color: var(--ui-muted); text-align: center; max-width: 320px; overflow-wrap: anywhere; }
a.pv-url:hover { color: var(--ui-text); text-decoration: underline; }

/* El teléfono mide 412 × alto y se escala con --z; el contenedor reserva el espacio escalado. */
.device-wrap { --device-h: min(852px, calc((100dvh - 150px) / var(--z))); width: calc(412px * var(--z)); height: calc(var(--device-h) * var(--z)); }
.device { width: 412px; height: var(--device-h); padding: 10px; border-radius: 54px; background: #090909; transform: scale(var(--z)); transform-origin: top left;
  box-shadow: 0 0 0 1px #2b2b2b inset, 0 40px 70px -40px rgba(15, 23, 42, .6); }
.device iframe { display: block; width: 392px; height: 100%; border: 0; border-radius: 44px; background: #0b0d10; }

/* ---------- Avisos y vacíos ---------- */
.ui-toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; display: flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--ui-ink); color: #fff; font-size: 13.5px; font-weight: 600; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity .25s, transform .25s; }
.ui-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ui-toast .ic { font-size: 16px; stroke-width: 2.4; color: #5fe39a; }

.empty { display: grid; justify-items: center; gap: 8px; max-width: 420px; margin: 60px auto; text-align: center; }
.empty > .ic { font-size: 34px; color: var(--ui-muted); }
.empty .btn { margin-top: 8px; }
.empty h1 { font-size: 20px; }
.empty p { color: var(--ui-muted); }

/* ---------- Ingreso y registro ---------- */
.auth-page { background:
    radial-gradient(circle at 1px 1px, rgba(15, 23, 42, .07) 1px, transparent 0) 0 0 / 22px 22px,
    radial-gradient(900px 600px at 85% 0%, #ffffff, transparent 70%),
    var(--ui-bg); }
.auth { display: grid; justify-items: center; align-content: center; gap: 22px; min-height: 100dvh; padding: 32px 16px; }
.auth-brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.auth-brand svg { width: 34px; height: 34px; }
.auth-card { width: 100%; max-width: 440px; padding: 30px; border-radius: 24px; background: var(--ui-surface); border: 1px solid var(--ui-line); box-shadow: 0 30px 60px -36px rgba(15, 23, 42, .4); }
.auth-card h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.auth-lead { margin-top: 4px; color: var(--ui-muted); }
.auth-form { display: grid; gap: 14px; margin-top: 22px; }
/* Crear clave: fuerza, requisitos y coincidencia (js/password.js). Siempre ícono + texto, no solo color. */
.pw-check { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--ui-surface-2); }
.pw-strength { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.pw-meter { flex: 1; min-width: 60px; }
.pw-meter rect { fill: #d5d9e0; transition: fill .15s; }
.pw-meter[data-level="1"] rect:nth-of-type(-n+1) { fill: var(--ui-danger); }
.pw-meter[data-level="2"] rect:nth-of-type(-n+2) { fill: #eda100; }
.pw-meter[data-level="3"] rect:nth-of-type(-n+3) { fill: #2a78d6; }
.pw-meter[data-level="4"] rect { fill: var(--ui-ok); }
.pw-level { min-width: 9ch; text-align: right; }
.pw-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ui-muted); }
.pw-rules li { display: flex; align-items: center; gap: 8px; }
.pw-rules svg { width: 16px; height: 16px; flex: none; }
.pw-rules li[data-met="true"] { color: var(--ui-text); }
.pw-check[data-missing] .pw-rules li[data-met="false"] { color: var(--ui-danger); font-weight: 600; }
.pw-match { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.pw-match svg { width: 14px; height: 14px; flex: none; }
.pw-match[data-ok="true"] { color: #0b5a2b; }
.pw-match[data-ok="false"] { color: var(--ui-danger); }
@media (max-width: 760px) { .grid2 .pw-confirm-field { order: 1; } }
@media (max-width: 480px) { .pw-rules { grid-template-columns: 1fr; } }

.auth-switch { margin-top: 18px; text-align: center; color: var(--ui-muted); font-size: 13.5px; }
.auth-switch a { color: var(--ui-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.auth-foot { color: var(--ui-muted); font-size: 12.5px; }

/* ---------- Planes y facturación (mockups/planes.html) ---------- */
.pub { min-height: 100dvh; background: radial-gradient(circle at 1px 1px, rgba(15, 23, 42, .07) 1px, transparent 0) 0 0 / 22px 22px, var(--ui-bg); }
.pub-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1180px; margin: 0 auto; padding: 22px 24px; }
.pub-top .link { font-size: 13.5px; }
.pub-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.pub-brand svg { width: 32px; height: 32px; }
.link { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.stepper { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ui-muted); }
.stepper span { display: inline-flex; align-items: center; gap: 6px; }
.stepper b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ui-surface); border: 1px solid var(--ui-line); font-size: 12px; }
.stepper b .ic { font-size: 13px; stroke-width: 2.6; }
.stepper .on { color: var(--ui-text); font-weight: 600; }
.stepper .on b { background: var(--ui-ink); color: #fff; border-color: var(--ui-ink); }
.stepper .done b { background: var(--ui-ok); color: #fff; border-color: var(--ui-ok); }
.stepper i { width: 18px; height: 1px; background: rgba(15, 23, 42, .2); }
.pub-main { max-width: 1180px; margin: 0 auto; padding: 8px 24px 60px; display: grid; gap: 24px; }
.pub-head { text-align: center; display: grid; gap: 8px; justify-items: center; }
.pub-head h1 { font-size: 34px; letter-spacing: -.02em; }
.pub-head p { color: var(--ui-muted); max-width: 60ch; }
.cycle { display: inline-flex; padding: 4px; margin-top: 6px; border-radius: 14px; background: var(--ui-surface); border: 1px solid var(--ui-line); }
.cycle a { height: 36px; padding: 0 16px; border-radius: 10px; font-weight: 600; font-size: 13.5px; color: var(--ui-muted); display: inline-flex; align-items: center; gap: 8px; }
.cycle a[aria-current="true"] { background: var(--ui-ink); color: #fff; }
.cycle .save { padding: 2px 8px; border-radius: 999px; background: #e9f7ef; color: #0b5a2b; font-size: 11px; font-weight: 700; }
.cycle a[aria-current="true"] .save { background: rgba(255, 255, 255, .16); color: #b8f0cc; }

.plans { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px 20px; border-radius: 22px; background: var(--ui-surface); border: 1.5px solid var(--ui-line); }
.plan.featured { border-color: var(--ui-ink); box-shadow: 0 30px 60px -40px rgba(15, 23, 42, .55); }
.plan.custom { background: var(--ui-ink); color: #fff; border-color: var(--ui-ink); }
.plan.custom .for, .plan.custom .price-note { color: #aab1bc; }
.plan.custom .btn.primary { background: #fff; color: var(--ui-ink); }
.plan.custom .feats svg circle { fill: rgba(255, 255, 255, .12); }
.plan.custom .feats svg path { stroke: #7fe0a6; }
.plan .badge { position: absolute; top: -12px; left: 20px; padding: 4px 10px; border-radius: 999px; background: var(--ui-ink); color: #fff; font-size: 11.5px; font-weight: 700; }
.plan .badge.free { background: #0a7d36; }
.plan h2 { font-size: 18px; }
.plan .for { color: var(--ui-muted); font-size: 13px; margin-top: 2px; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.price b { font-size: 34px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price b.custom-price { font-size: 30px; }
.price span { color: var(--ui-muted); font-size: 13px; white-space: nowrap; }
.price-note { color: var(--ui-muted); font-size: 12.5px; min-height: 18px; }
.feats { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; flex: 1; align-content: start; }
.feats li { display: flex; gap: 8px; align-items: flex-start; }
.feats svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.more { text-align: center; color: var(--ui-muted); font-size: 13.5px; }
dialog.lead-dialog { width: min(580px, calc(100vw - 32px)); }
.lead-sent { display: grid; gap: 12px; justify-items: center; text-align: center; }
.lead-sent .big, .limit-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; font-size: 26px; }
.lead-sent .big { background: #e9f7ef; color: var(--ui-ok); }
.limit-ic { background: #fff6e5; color: #8a5c00; }

.two { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; max-width: 980px; margin: 0 auto; width: 100%; }
.box { padding: 26px; border-radius: 22px; background: var(--ui-surface); border: 1px solid var(--ui-line); display: grid; gap: 16px; align-content: start; }
.box h2 { font-size: 20px; }
.box-lead { color: var(--ui-muted); margin-top: 2px; }
.box .auth-form { margin-top: 0; }
.summary { position: sticky; top: 20px; }
.summary .line, .doc-totals .line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.summary .line.total, .doc-totals .line.total { padding-top: 12px; border-top: 1px solid var(--ui-line); font-size: 18px; font-weight: 700; }
.summary .line span:last-child, .doc-totals .line span:last-child { font-variant-numeric: tabular-nums; }
.plan-mini { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--ui-surface-2); }
.plan-mini .ic { font-size: 22px; }
.plan-mini b { display: block; }
.plan-mini small { color: var(--ui-muted); }

.done-card { max-width: 620px; margin: 0 auto; width: 100%; text-align: center; justify-items: center; }
.done-card .big { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: #e9f7ef; color: var(--ui-ok); font-size: 30px; }
.done-steps { text-align: left; width: 100%; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.done-steps li { position: relative; padding-left: 34px; font-size: 14px; }
.done-steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ui-surface-2); font-size: 12px; font-weight: 700; }
.bank { width: 100%; text-align: left; display: grid; gap: 6px; padding: 14px 16px; border-radius: 14px; border: 1px dashed rgba(15, 23, 42, .2); font-size: 13.5px; }
.done-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }

/* Estados (orden, plan): punto + texto. */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.pill svg { width: 8px; height: 8px; }
.pill.ok { background: #e9f7ef; color: #0b5a2b; }
.pill.warn { background: #fff6e5; color: #6b4a00; }
.pill.danger { background: #fdecee; color: #7c1822; }
.pill.off { background: var(--ui-surface-2); color: var(--ui-muted); }

.plan-current { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.plan-current h2 { font-size: 22px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.plan-current p { color: var(--ui-muted); margin-top: 4px; }
.usage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.meter { display: grid; gap: 8px; }
.meter-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; font-weight: 600; }
.meter-top span { color: var(--ui-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.meter svg { width: 100%; height: 8px; }

.plan-banner { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 9px 16px; font-size: 13.5px; font-weight: 600; }
.plan-banner .ic { font-size: 17px; }
.plan-banner a { text-decoration: underline; text-underline-offset: 3px; }
.plan-banner.warn { background: #fff6e5; color: #6b4a00; }
.plan-banner.danger { background: #fdecee; color: #7c1822; }
.plan-banner.info { background: #eef4fd; color: #19406f; }

.order-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.order-actions form { display: contents; }
.lead-msg { max-width: 360px; font-size: 13px; white-space: pre-line; }
.nowrap { white-space: nowrap; }

/* Pagos y facturas (mockups/factura.html) */
.table-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 14px 6px; }
.table-title h2 { font-size: 15.5px; }
.table td small { display: block; color: var(--ui-muted); font-size: 12.5px; margin-top: 2px; }
.inv-num { display: block; font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.file-btns { display: flex; gap: 6px; margin-top: 6px; }
.file-btn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--ui-line); font-size: 12px; font-weight: 700; }
.file-btn .ic { font-size: 14px; }
.file-btn:hover { background: var(--ui-surface-2); }
.waiting { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-muted); font-size: 13px; white-space: nowrap; }
.waiting .ic { font-size: 15px; }
dialog.pay-dialog { width: min(600px, calc(100vw - 32px)); }
.sep { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ui-muted); }
.sep::after { content: ""; flex: 1; height: 1px; background: var(--ui-line); }
.upload { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed rgba(15, 23, 42, .22); font-size: 13px; cursor: pointer; }
.upload .ic { font-size: 18px; color: var(--ui-muted); }
.upload span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload:has(input:focus-visible) { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.upload.done { border-style: solid; border-color: var(--ui-ok); background: #e9f7ef; }
.upload.done .ic { color: var(--ui-ok); }

.status-card { max-width: 820px; margin: 0 auto 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--ui-line); }
.status-card .big { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-size: 22px; }
.status-card .big.ok { background: #e9f7ef; color: var(--ui-ok); }
.status-card .big.warn { background: #fff6e5; color: #8a5c00; }
.status-card .big.danger { background: #fdecee; color: var(--ui-danger); }
.status-card .big.off { background: var(--ui-surface-2); color: var(--ui-muted); }
.status-card h2 { font-size: 17px; }
.status-card p { color: var(--ui-muted); font-size: 13.5px; margin-top: 2px; }
.invoice-box { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--ui-surface-2); }
.invoice-box .file { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #fff; font-size: 20px; flex: none; }
.invoice-box > div { flex: 1; min-width: 220px; }
.invoice-box b { display: block; }
.invoice-box small { color: var(--ui-muted); font-size: 12px; overflow-wrap: anywhere; }
.invoice-box .actions { display: flex; gap: 8px; flex: none; }

/* Orden de compra: documento para imprimir. */
.doc-page { background: #e9ebef; padding: 20px 16px 48px; }
.doc-tools { max-width: 820px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.doc-tools .back { margin: 0; }
.doc { max-width: 820px; margin: 0 auto; background: #fff; border-radius: 6px; box-shadow: 0 30px 60px -40px rgba(15, 23, 42, .55); padding: 44px 48px; font-size: 13.5px; }
.doc-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; padding-bottom: 22px; border-bottom: 2px solid var(--ui-ink); }
.doc-head h1 { font-size: 24px; letter-spacing: .02em; }
.doc-head .meta { text-align: right; display: grid; gap: 2px; }
.doc-issuer { display: grid; gap: 8px; }
.doc-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }
.doc-brand svg { width: 32px; height: 32px; }
.doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 20px 0; }
.doc-parties h3 { margin: 0 0 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-muted); }
.doc table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; }
.doc th { text-align: left; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); padding: 10px 8px; border-bottom: 1px solid var(--ui-line); }
.doc td { padding: 12px 8px; border-bottom: 1px solid var(--ui-line); vertical-align: top; }
.doc .r { text-align: right; font-variant-numeric: tabular-nums; }
.doc-totals { margin-left: auto; width: 300px; max-width: 100%; display: grid; gap: 6px; }
.doc-foot { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 12.5px; color: var(--ui-muted); }
.doc-foot b { color: var(--ui-text); }
.stamp-row { margin-top: 6px; }
.stamp { display: inline-flex; padding: 4px 10px; border: 2px solid; border-radius: 8px; font-weight: 700; font-size: 12px; letter-spacing: .08em; transform: rotate(-4deg); }
.stamp.warn { border-color: #eda100; color: #8a5c00; }
.stamp.ok { border-color: var(--ui-ok); color: #0a7d36; }
.stamp.danger { border-color: var(--ui-danger); color: var(--ui-danger); }
.stamp.off { border-color: #9aa1ad; color: var(--ui-muted); }
@media print {
  .doc-page { background: #fff; padding: 0; }
  .doc-tools, .status-card { display: none; }
  .doc { box-shadow: none; padding: 0; max-width: none; }
}

@media (max-width: 1240px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr 1fr; }
  .two { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
  .usage { grid-template-columns: 1fr; }
  .doc { padding: 28px 22px; }
  .doc-parties, .doc-foot { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .stepper { display: none; }
  .plan-current, .done-actions { grid-template-columns: minmax(0, 1fr); }
  .pub-head h1 { font-size: 28px; }
  .pub-top, .pub-main { padding-left: 16px; padding-right: 16px; }
  .doc-head { flex-direction: column; }
  .doc-head .meta { text-align: left; }
}

@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Pantallas más chicas ---------- */
@media (max-width: 860px) {
  .grid-2, .grid-2e, .qr-split { grid-template-columns: minmax(0, 1fr); }
  .tiles, .tiles.four { grid-template-columns: 1fr 1fr; }
  .qr-preview { position: static; }
  .roles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) {
  .app { grid-template-columns: 68px minmax(0, 1fr); }
  .side { padding: 20px 10px; align-items: center; }
  .side-brand { padding: 2px 0 18px; }
  .side-brand span, .nav-item span, .nav-group, .user-text { display: none; }
  .nav-item { padding: 12px; }
  .content { padding: 20px; }
  .split { gap: 24px; }
  .top { padding: 12px 20px; }
  .item { grid-template-columns: 52px minmax(0, 1fr) 110px auto; }
  .item .col-url { display: none; }
  .link-row { grid-template-columns: 130px minmax(0, 1fr) auto; }
  .link-row input[name$=".Handle"] { grid-column: 2; grid-row: 2; }
}
@media (max-width: 760px) {
  :root { --z: .62; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset: 0 auto 0 0; width: 244px; align-items: stretch; transform: translateX(-100%); transition: transform .2s; }
  .side.open { transform: none; }
  .side .side-brand span, .side .nav-item span, .side .nav-group { display: revert; }
  .menu-btn { display: grid; }
  .content { padding: 16px; }
  .sec { padding: 16px; }
  .pv-head { flex-direction: column; align-items: flex-start; }
  .savebar { flex-wrap: wrap; }
  .save-state { flex-basis: 100%; }
  .savebar .btn { flex: 1; }
  .field-row, .grid2, .status-choice, .choice-row { grid-template-columns: 1fr; }
  .hide-sm { display: none; }
  .dest { max-width: 42vw; }
  .seg { max-width: 100%; overflow-x: auto; }
  .seg a, .seg button { flex: none; }
  .table th, .table td { padding: 10px 8px; }
  .bar-row { grid-template-columns: 100px minmax(0, 1fr) 44px; }
  .hero-value { font-size: 42px; }
  .item { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .item .col-state { display: none; }
  .link-row { grid-template-columns: minmax(0, 1fr) auto; }
  .link-row select { grid-column: 1; }
  .link-row input[name$=".Url"], .link-row input[name$=".Handle"] { grid-column: 1; grid-row: auto; }
  .link-row .row-tools { grid-column: 2; grid-row: 1; }
}
@media (max-width: 1240px) {
  .sig-editor { grid-template-columns: minmax(0, 1fr); }
  .sig-preview { position: static; order: -1; }
}
@media (max-width: 860px) {
  .company-design, .sig-design-row { grid-template-columns: minmax(0, 1fr); }
  .thumb-lg { width: 100%; }
}
@media (max-width: 760px) {
  .sig-checks, .sig-actions, .sig-kinds { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  :root { --z: .72; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .preview-col { position: static; order: -1; }
  .pv-head { flex-direction: row; align-items: center; }
}