/* app.css — la piel de MyLinks del panel hospedado, encima de admin.css (compartido con la plantilla: no se edita).
   Valores del sistema de diseño MyLinks (design-system/project/tokens.json): papel y tinta, un solo naranja, la píldora como forma.
   Primero los tokens, después admin.css re-mapeado a ellos, después lo propio del panel hospedado. */

/* ---------- fuentes (servidas desde el panel; licencia OFL, ver fonts/README.md) ---------- */

@font-face {
  font-family: "Funnel Display"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/funnel-display-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Funnel Display"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/funnel-display-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Funnel Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/fonts/funnel-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Funnel Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/fonts/funnel-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/geist-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens MyLinks (claro; el oscuro sigue al sistema) ---------- */

:root {
  --paper: #f6f3ee;
  --surface: #ffffff;
  --surface-sunken: #eeeae3;
  --line: #e2ddd4;
  --line-strong: #8c857a;
  --ink: #17150f;
  --ink-muted: #5e584f;
  --ink-faint: #a39c91;
  --on-ink: #f6f3ee;
  --accent: #ff5a1f;
  --on-accent: #17150f;
  --accent-ink: #c23800;
  --accent-soft: #ffe3d6;
  --success: #1e7a4a;
  --success-soft: #ddf2e5;
  --warning: #8a5a00;
  --warning-soft: #fbefd2;
  --danger: #b4232f;
  --danger-soft: #fbe1e3;
  --scrim: rgba(23, 21, 15, 0.48);
  --shadow-1: 0 1px 2px rgba(23, 21, 15, 0.06), 0 1px 1px rgba(23, 21, 15, 0.04);
  --shadow-2: 0 12px 32px rgba(23, 21, 15, 0.10), 0 2px 6px rgba(23, 21, 15, 0.06);
  --bar-glass: rgba(246, 243, 238, 0.92);
  --device: #17150f;
  --mp-photo: linear-gradient(165deg, #f2c38f 0%, #d9784a 52%, #7b3f55 100%); /* una "foto" dibujada para los teléfonos en miniatura de la portada (no es una foto real) */
  --rainbow: conic-gradient(from 0deg, hsl(0 85% 60%), hsl(55 90% 55%), hsl(130 65% 48%), hsl(190 80% 50%), hsl(250 80% 62%), hsl(310 80% 60%), hsl(360 85% 60%));

  --font-display: "Funnel Display", "Funnel Sans", system-ui, sans-serif;
  --font-sans: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-full: 999px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* admin.css (compartido) leído en valores MyLinks */
  --bg: var(--paper);
  --card: var(--surface);
  --muted: var(--ink-muted);
  --warn-bg: var(--warning-soft);
  --warn-line: var(--warning-soft);
  --warn-ink: var(--warning);
  --radius: var(--radius-l);
  --font: var(--font-sans);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121110;
    --surface: #1b1a18;
    --surface-sunken: #0c0b0a;
    --line: #2c2a27;
    --line-strong: #746e66;
    --ink: #f3efe8;
    --ink-muted: #a7a096;
    --ink-faint: #5f5951;
    --on-ink: #121110;
    --accent: #ff6a33;
    --accent-ink: #ff7a45;
    --accent-soft: #3a1e12;
    --success: #4cc487;
    --success-soft: #12301f;
    --warning: #f2b544;
    --warning-soft: #33270c;
    --danger: #ff7a82;
    --danger-soft: #3a1417;
    --scrim: rgba(0, 0, 0, 0.64);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
    --bar-glass: rgba(18, 17, 16, 0.9);
    --device: #2c2a27;
    color-scheme: dark;
  }
}

/* ---------- base ---------- */

body { font: 16px/1.5 var(--font-sans); font-feature-settings: "ss01" 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
::selection { background: var(--accent-soft); color: var(--ink); }
.topbar h1, .section-title, .sheet-title, .dialog-title, .gate-card h2, .profile-name, .total-n {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em;
}

/* ---------- barra superior y cuenta ---------- */

.topbar { background: var(--bar-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.topbar h1 { line-height: 0; }
.brand-logo { display: block; height: 26px; width: auto; }
.save-status { margin-top: 6px; font-size: 13px; line-height: 1.3; }
.save-status[data-state="error"] { color: var(--danger); }

.account { padding: 4px 16px 12px; }
.account-email { font-size: 13px; color: var(--ink-muted); }

/* ---------- botones: la píldora ---------- */

.btn { border-radius: var(--radius-full); font-weight: 600; letter-spacing: -0.005em; transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-danger { background: var(--danger); color: var(--surface); }
.btn-icon, .btn-ghost { border-radius: var(--radius-full); }
.btn-icon-danger, .act-danger { color: var(--danger); }
@media (hover: hover) {
  .btn-secondary:hover, .btn-icon:hover:not(:disabled), .btn-ghost:hover, .act:hover:not(:disabled) { background: var(--surface-sunken); }
  .btn-primary:hover:not(:disabled) { background: var(--ink); opacity: 0.88; }
}

/* ---------- tarjetas, perfil y bloques ---------- */

.card { background: var(--surface); border-color: var(--line); border-radius: var(--radius-l); }
.avatar { background: var(--surface-sunken); color: var(--ink-muted); }
.profile { padding: 16px; gap: 14px 16px; }
.avatar { width: 64px; height: 64px; }
.profile-name { font-size: 20px; line-height: 1.2; }

.section-title { margin: 28px 4px 12px; font-size: 20px; }
.count-pill, .badge { background: var(--surface-sunken); color: var(--ink-muted); font-size: 12px; font-weight: 600; }
.badge-warn { background: var(--warning-soft); color: var(--warning); }

.blocks { gap: 10px; }
.block { padding: 6px; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.block.is-hidden { border-style: dashed; border-color: var(--line-strong); background: transparent; }
.block.is-incomplete { border-color: var(--warning); }
.block-main { border-radius: var(--radius-m); }
.type-ico { width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink); }
.block-title { font-weight: 600; }
.block-meta { color: var(--ink-muted); font-size: 13px; }
.block-actions { border-top-color: var(--line); }
.act { color: var(--ink-muted); border-radius: var(--radius-m); font-size: 12px; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
@media (hover: hover) {
  .block-main:hover { background: var(--surface-sunken); }
  .act:hover:not(:disabled) { color: var(--ink); }
}
.empty { color: var(--ink-muted); }

/* ---------- capas: hojas, pantalla completa, diálogos ---------- */

.backdrop { background: var(--scrim); }
.panel { background: var(--paper); }
.layer-sheet .panel { border-radius: var(--radius-l) var(--radius-l) 0 0; box-shadow: var(--shadow-2); }
.layer-dialog .panel { border-radius: var(--radius-l); box-shadow: var(--shadow-2); }
.sheet-head { background: var(--paper); border-bottom-color: var(--line); }
.sheet-title { font-size: 18px; }
.dialog-title { font-size: 22px; }
.dialog-text { color: var(--ink-muted); }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }
.layer-sheet .panel, .layer-full .panel { animation-duration: 240ms; animation-timing-function: var(--ease); }

/* ---------- formularios ---------- */

input[type="text"], input[type="url"], input[type="password"], input[type="email"], input[type="tel"], textarea, select.account-select {
  border-color: var(--line-strong); border-radius: var(--radius-m); background: var(--surface); color: var(--ink);
  transition: border-color 160ms var(--ease);
}
input:focus, textarea:focus, select.account-select:focus { border-color: var(--accent-ink); outline: 2px solid var(--accent-ink); outline-offset: 2px; }
::placeholder { color: var(--ink-muted); }
.field label, .label, legend { font-weight: 600; font-size: 15px; }
.hint { color: var(--ink-muted); }
.err, .hint.is-error, .is-error { color: var(--danger); }
.group-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }

.seg-row, .tabs { background: var(--surface-sunken); border-radius: var(--radius-full); }
.seg-opt span, .tabs [role="tab"] { border-radius: var(--radius-full); color: var(--ink-muted); }
.seg-opt input:checked + span, .tabs [aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.check input { accent-color: var(--ink); }
/* Aviso del mail en la entrada y términos pendientes: los links de los textos legales se ven como links (subrayados) y las casillas aguantan varias líneas. */
.hint a, .terms-check a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.terms-check { align-items: flex-start; line-height: 1.4; }
.terms-check input { flex: none; margin-top: 1px; }
#terms-form { display: grid; gap: 12px; }

.picker-btn { border-color: var(--line-strong); border-radius: var(--radius-m); background: var(--surface); }
.picker-ico { background: var(--surface-sunken); border-radius: var(--radius-full); }
.picker-cell { border-color: var(--line); border-radius: var(--radius-m); background: var(--surface); }
.picker-cell[aria-checked="true"] { border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); background: var(--accent-soft); font-weight: 600; }
.picker-sec-title { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink-muted); letter-spacing: 0; }

.thumb { background: var(--surface-sunken); color: var(--ink-muted); border-radius: var(--radius-m); }
.img-side label.btn:has(+ input:focus-visible) { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.sub-card { border-color: var(--line); border-radius: var(--radius-l); background: var(--surface); }
.group { border-color: var(--line); border-radius: var(--radius-l); background: var(--surface); }

/* ---------- avisos y toasts ---------- */

.banner { background: var(--danger-soft); border-color: transparent; color: var(--danger); border-radius: var(--radius-m); }
.notice { background: var(--danger-soft); border-color: transparent; color: var(--danger); border-radius: var(--radius-m); }
/* El aviso dentro de un diálogo (confirmDialog) es informativo, no un error: el del plan y el de bloques sin completar. Los errores del diálogo usan .err. */
.dialog-body .notice { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.toast { background: var(--ink); color: var(--on-ink); border-radius: var(--radius-m); box-shadow: var(--shadow-2); }
.toast-error { background: var(--danger); color: var(--surface); }
.phone-status[data-state="ok"], .hint.ok { color: var(--success); }

/* ---------- barra de abajo ---------- */

.bottombar { background: var(--bar-glass); border-top-color: var(--line); }

/* ---------- vista previa ---------- */

.phone { background: var(--surface); }
@media (min-width: 600px) {
  .phone { border: 10px solid var(--device); border-radius: 44px; box-shadow: var(--shadow-2); }
}

/* ---------- estadísticas ---------- */

.bar { background: var(--surface-sunken); }
.bar span { background: var(--accent); }

/* ---------- dibujos de cada tipo de bloque (cuando no hay miniatura real) ---------- */

.sk { background: var(--surface-sunken); border-radius: var(--radius-m); }
.sk-destacado { background: var(--accent); }
.sk-destacado i { background: rgba(23, 21, 15, 0.7); }
.sk-destacado i + i { background: rgba(23, 21, 15, 0.35); }
.sk-destacado b { background: var(--ink); border-radius: var(--radius-full); }
.sk-tarjeta, .sk-fila { background: var(--surface); border-color: var(--line-strong); }
.sk-tarjeta i, .sk-fila i { background: var(--ink-muted); }
.sk-tarjeta i + i { background: var(--line-strong); }
.sk-tarjeta b { background: var(--ink); border-radius: var(--radius-full); }
.sk-fila { border-radius: var(--radius-full); }
.sk-fila u, .sk-redes u { background: var(--ink); }
.sk-fila s { border-color: var(--ink-muted); }
.sk-libros u { background: var(--ink-muted); }
.sk-libros u:nth-child(2) { background: var(--line-strong); }
.sk-libros u:nth-child(3) { background: var(--ink-faint); }

/* ---------- lo propio del panel hospedado: cuenta, dirección, entrada ---------- */

input[type="email"] {
  display: block; width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--line-strong); font: inherit; font-size: 16px;
}
select.account-select {
  min-height: 44px; max-width: 100%; padding: 0 36px 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-full);
  font: inherit; font-size: 15px; font-weight: 500;
}

.account { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.account-email { flex: 1 1 140px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.signup-intro { overflow-wrap: anywhere; }
.or { margin: 0; }
.turnstile { margin: 0 0 14px; min-height: 0; }

.addr { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface); overflow: hidden; }
.addr:focus-within { border-color: var(--accent-ink); outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.addr-prefix { display: flex; align-items: center; padding: 0 0 0 12px; color: var(--ink-muted); white-space: nowrap; font-family: var(--font-mono); font-size: 15px; font-weight: 500; }
.addr input[type="text"] { border: 0; border-radius: 0; background: transparent; padding-left: 2px; min-width: 0; font-family: var(--font-mono); font-size: 15px; font-weight: 500; }
.addr input[type="text"]:focus { outline: 0; }

.gate-card { padding: 28px 20px; gap: 16px; }
.gate-card h2 { font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; }
.gate-ico { background: var(--accent-soft); color: var(--accent-ink); border-radius: var(--radius-full); }

/* ---------- la entrada («Entrá a MyLinks»): sola, angosta y centrada ----------
   gate.js le pone `is-login` a #app mientras se ve la entrada (o la pantalla del código). El logo pasa de la esquina a quedar centrado arriba de la tarjeta, y el bloque
   logo + tarjeta se centra en vertical cuando la pantalla es alta (los márgenes `auto` hacen que, en una pantalla baja, el bloque arranque arriba y se pueda scrollear). */
#app.is-login {
  display: flex; flex-direction: column; align-items: stretch;
  width: 100%; max-width: 452px; margin: 0 auto; padding: 0 16px; /* 452 = 420 de tarjeta + 16 de margen a cada lado */
}
#app.is-login .topbar {
  position: static; margin: auto 0 0; padding: calc(40px + env(safe-area-inset-top)) 0 28px;
  justify-content: center; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
}
#app.is-login .topbar-text { display: flex; justify-content: center; }
#app.is-login .brand-logo { height: 30px; }
#app.is-login .gate { margin: 0 auto auto; width: 100%; max-width: 420px; padding: 0 0 calc(40px + env(safe-area-inset-bottom)); }
#app.is-login .gate-card { padding: 28px 20px; }
#app.is-login .gate-card .gate-ico { justify-self: start; }
#app.is-login .gate-card > .or { margin-block: -2px; }
@media (min-width: 480px) {
  #app.is-login .gate-card { padding: 32px; gap: 18px; }
}
@media (min-height: 700px) {
  #app.is-login { min-height: 100dvh; padding-bottom: 6vh; } /* un poco por arriba del centro exacto: así se ve centrado */
}

/* «Continuar con Google»: el botón oficial de Google Identity (https://developers.google.com/identity/branding-guidelines).
   Tema claro de Google sobre el panel claro y tema oscuro sobre el panel oscuro. Medidas de la guía: 12 px a la izquierda de la «G», 10 px entre la «G» y el texto, 12 px a la derecha,
   texto de 14/20 en peso medio. La tipografía de Google (Google Sans) no se incluye: se usa Roboto si el sistema la tiene y, si no, la sans del sistema (la CSP del panel es solo 'self'). */
.btn-google {
  --g-bg: #ffffff; --g-line: #747775; --g-ink: #1f1f1f; --g-hover: rgba(48, 48, 48, 0.08);
  gap: 10px; min-height: 44px; padding: 0 12px; background: var(--g-bg); color: var(--g-ink); border: 1px solid var(--g-line);
  font-family: "Google Sans", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0.25px;
}
.btn-google svg { width: 20px; height: 20px; }
@media (hover: hover) {
  .btn-google:hover { background-image: linear-gradient(var(--g-hover), var(--g-hover)); }
}
.btn-google:active { background-image: linear-gradient(var(--g-hover), var(--g-hover)); }
@media (prefers-color-scheme: dark) {
  .btn-google { --g-bg: #131314; --g-line: #8e918f; --g-ink: #e3e3e3; --g-hover: rgba(227, 227, 227, 0.08); }
}

/* «Entrar con llave de acceso»: la opción callada, sin caja */
.passkey-btn { justify-content: center; padding: 0 12px; color: var(--ink-muted); font-size: 15px; font-weight: 500; }
@media (hover: hover) {
  .passkey-btn:hover:not(:disabled) { color: var(--ink); }
}


/* ---------- tarjetas de bloque compactas ----------
   El botón grande del bloque ya abre el editor: el "Editar" repetido sobra. Las acciones quedan como íconos
   (cada una conserva su aria-label con el nombre del bloque). En pantallas de 480 px o más, todo en una fila. */

.block { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 4px; }
.block-main { min-height: 64px; padding: 8px 10px; gap: 14px; }
.block-actions { display: flex; justify-content: flex-end; gap: 6px; margin: 0; padding: 0 4px 4px; border-top: 0; }
.block-actions .act[data-act="edit"] { display: none; }
.act { flex-direction: row; width: 40px; min-height: 40px; height: 40px; padding: 0; border-radius: var(--radius-full); }
.act > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.act:disabled { opacity: 0.3; }
@media (min-width: 480px) {
  .block { grid-template-columns: minmax(0, 1fr) auto; }
  .block-actions { padding: 0 6px 0 0; }
}

/* el destacado se reconoce de lejos: su ícono en naranja (es el único naranja de la lista) */
.block-main .type-ico:has(path[d^="m12 2 3.09"]) { background: var(--accent); color: var(--on-accent); }

/* ---------- publicar: el botón dice el estado ---------- */

#btn-publish[data-state="published"] { opacity: 1; background: transparent; color: var(--success); border-color: var(--line); }
#btn-publish[data-state="published"]::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: currentColor; flex: none;
}
#btn-publish:not(:disabled):not([data-state="published"])::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--accent); flex: none;
}

/* ---------- vista previa en vivo (escritorio) ---------- */

.live { display: none; }
/* Un teléfono de verdad: pantalla de 390 × 844 (la página se dibuja como en el celular), barra de estado con la hora y la isla.
   live-preview.js calcula --phone-scale para achicarlo entero cuando la ventana es más baja que el teléfono. */
.live-phone {
  position: relative; flex: none; width: 414px; height: 868px; overflow: hidden;
  border: 12px solid var(--device); border-radius: 60px; background: #17150f; box-shadow: var(--shadow-2);
  transform: scale(var(--phone-scale, 1)); transform-origin: top center;
}
.phone-status {
  position: relative; display: flex; align-items: center; justify-content: space-between; height: 47px; padding: 4px 30px 0 36px;
  background: #17150f; color: #f6f3ee; font: 600 15px/1 var(--font-sans); letter-spacing: -0.01em;
}
.phone-island { position: absolute; top: 11px; left: 50%; width: 120px; height: 34px; margin-left: -60px; border-radius: var(--radius-full); background: #000; }
.phone-batt { position: relative; width: 25px; height: 12px; border: 1.5px solid rgba(246, 243, 238, 0.5); border-radius: 4px; }
.phone-batt::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; border-radius: 2px; background: #f6f3ee; }
.live-screen { height: 797px; background: var(--surface); }
.live-screen iframe { display: block; width: 100%; height: 100%; border: 0; }
.live-screen iframe[hidden] { display: none; }
.live-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; width: 390px; margin: 0 0 12px; padding: 0 8px; }
.live-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.live-note { font-size: 13px; color: var(--ink-muted); }

/* Teléfono / Pantalla completa: dos botones con aria-pressed, con la misma cara que .seg-opt (ocupan una fila debajo del título) */
.live-mode { flex: 1 0 100%; }
.live-mode-opt {
  flex: 1; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink-muted);
  font: 600 14px/1.2 var(--font-sans); cursor: pointer;
}
.live-mode-opt[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.live-mode-opt:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* Pantalla completa: la página al ancho de la ventana, sobre todo el panel. La barra de arriba lleva la X. */
.live-full .panel { display: flex; flex-direction: column; }
.live-full-bar {
  display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px 6px 20px;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.live-full-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.live-full-stage { position: relative; flex: 1; min-height: 0; background: var(--surface); }
.live-full-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.live-full-stage iframe[hidden], .live-full-stage > p[hidden] { display: none; }
.live-full-msg { padding: 40px 16px; }

/* Barra de secciones (#tabs) en tablet y escritorio (>= 720 px): siempre en el mismo lugar y del mismo tamaño en las cuatro vistas.
   Vive en .navrow, una franja pegada arriba (sticky) y por debajo de la cabecera (logo y cuenta), que se va con el scroll. Mide lo que miden sus cuatro
   botones (no se estira) y queda alineada a la izquierda con el contenido. Ritmo vertical: 24 px de la cabecera a la barra (12 del padding de .account
   + 12 de la franja) y 24 px de la barra al primer contenido (12 de la franja + 12 de main), igual en todas las vistas.
   En el celular (< 720 px) la barra es la fija de abajo (más abajo en este archivo) y .navrow no ocupa lugar. */
@media (min-width: 720px) {
  .topbar { position: static; }
  .navrow {
    position: sticky; top: 0; z-index: 10; padding: 12px 16px;
    background: var(--bar-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .navrow:has(> #tabs[hidden]), #app.is-gated:not(.has-nav) .navrow { display: none; }
  .navrow .tabs { width: max-content; max-width: 100%; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .navrow .tabs::-webkit-scrollbar { display: none; }
  .navrow .tabs [role="tab"] { flex: none; padding: 0 20px; white-space: nowrap; }
  main { padding-top: 12px; }
}

@media (min-width: 1080px) {
  #app {
    max-width: 1160px; padding: 0 32px;
    display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); column-gap: 64px; align-items: start;
    align-content: start; /* sin esto, con poco contenido y la ventana alta, la grilla reparte el alto que sobra entre sus filas: se abren huecos entre la cabecera, la barra y el contenido */
  }
  .topbar, .account, .banner, .gate, .offline, .install, .navrow { grid-column: 1 / -1; }
  #app .offline, #app .install { margin-left: 0; margin-right: 0; } /* con #app: .install y .offline se declaran más abajo en el archivo y, sin esto, quedaban 16 px corridos del resto */
  .topbar { margin: 0 -32px; padding-left: 32px; padding-right: 32px; }
  .navrow { margin: 0 -32px; padding-left: 32px; padding-right: 32px; }
  .account, .gate { padding-left: 0; padding-right: 0; }
  main { grid-column: 1; padding: 12px 0 24px; }
  /* alto 0: el teléfono desborda hacia abajo sin estirar las filas de la grilla (si no, en páginas cortas la barra de abajo flota a media pantalla) */
  .live:not([hidden]) {
    display: flex; flex-direction: column; align-items: center;
    grid-column: 2; grid-row: span 2; position: sticky; top: 96px; padding: 12px 0 32px; /* 96 = franja de la barra (76) + 20 */
  }
  .live:not([hidden]) { height: 0; overflow: visible; }
  .bottombar {
    grid-column: 1; position: sticky; left: auto; bottom: 0; transform: none; width: auto;
    margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-radius: var(--radius-l) var(--radius-l) 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled) { transform: none; }
}

/* En escritorio, con la vista previa en vivo a la derecha, el editor de un bloque se abre sobre la columna izquierda
   (sin velo): lo que escribís aparece en el teléfono mientras tanto. Las hojas (agregar bloque) y los diálogos no cambian. */
@media (min-width: 1080px) {
  body:has(#live:not([hidden])) .layer-full .backdrop { background: transparent; }
  body:has(#live:not([hidden])) .layer-full .panel {
    top: 16px; bottom: 16px; left: calc(max(0px, (100vw - 1160px) / 2) + 16px); right: auto; width: 592px; margin: 0;
    border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-2);
  }
  /* ...salvo la pantalla completa de la vista previa, que tapa toda la ventana */
  body:has(#live:not([hidden])) .layer-full.live-full .panel {
    inset: 0; width: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none;
  }
}

/* ---------- página sin bloques: el símbolo Filas, a medio armar ---------- */

.empty {
  gap: 16px; margin-top: 4px; padding: 40px 24px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-l);
  color: var(--ink-muted); font-size: 15px;
}
.empty::before {
  content: ""; width: 72px; height: 84px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 840'%3E%3Crect width='720' height='240' rx='120' fill='%23ff5a1f'/%3E%3Crect y='300' width='560' height='240' rx='120' fill='none' stroke='%238c857a' stroke-width='24' stroke-dasharray='60 40'/%3E%3Crect y='600' width='400' height='240' rx='120' fill='none' stroke='%238c857a' stroke-width='24' stroke-dasharray='60 40'/%3E%3C/svg%3E") center / contain no-repeat;
}
.empty p { max-width: 26ch; }

/* "o" entre el link por mail y Google: con líneas a los lados */
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-muted); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Las acciones son íconos: con mouse o teclado, su nombre aparece como etiqueta arriba del botón. */
.act { position: relative; }
@media (hover: hover) {
  .act:hover > span, .act:focus-visible > span {
    width: auto; height: auto; overflow: visible; clip-path: none;
    bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 5;
    padding: 4px 10px; border-radius: var(--radius-full); background: var(--ink); color: var(--on-ink);
    font-size: 12px; font-weight: 600; line-height: 1.3; pointer-events: none;
  }
}

/* ---------- estadísticas: frase, cifras, gráfico, listas y mapa de calor ---------- */

/* Sin vista previa en vivo al lado, la pestaña usa todo el ancho (con tope). */
@media (min-width: 1080px) {
  #app[data-tab="stats"] .live, #app[data-tab="settings"] .live { display: none; }
  /* la barra de secciones no cambia: solo el contenido de abajo se ensancha, alineado a la izquierda con ella */
  #app[data-tab="stats"] main, #app[data-tab="settings"] main { grid-column: 1 / -1; width: 100%; max-width: 880px; justify-self: start; }
}

.sta-body { display: grid; gap: 16px; }
.sta-body > * { min-width: 0; }

.sta-summary {
  margin: 4px 2px 0; font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.25; letter-spacing: -0.015em;
  color: var(--ink); text-wrap: pretty;
}
@media (min-width: 720px) { .sta-summary { font-size: 30px; } }

.sta-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sta-figs[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sta-fig { min-width: 0; padding: 14px 12px; }
.sta-fig-n { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 7.4vw, 36px); line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sta-fig-l { margin-top: 4px; font-size: 13px; line-height: 1.25; color: var(--ink-muted); }
.sta-chg { margin-top: 8px; font-size: 13px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sta-rate { margin: -4px 2px 0; font-size: 15px; }

.sta-card { min-width: 0; padding: 16px; }
.sta-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.sta-h { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; }
.sta-sub-h { font-size: 14px; font-weight: 600; }

/* gráfico: visitas en barras anchas (neutras), consultas (o toques) en barras angostas (el naranja); los cambios, líneas de puntos numeradas */
.sta-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: -4px 0 8px; font-size: 13px; color: var(--ink-muted); }
.sta-key { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.sta-key-views { background: var(--line-strong); }
.sta-key-clicks { background: var(--accent); }
.sta-chart { min-height: 188px; overflow: hidden; }
.sta-svg { display: block; max-width: none; }
.sta-gridline { stroke: var(--line); stroke-width: 1; }
.sta-axis { fill: var(--ink-muted); font: 11px var(--font-sans); font-variant-numeric: tabular-nums; }
.sta-bar-views { fill: var(--line-strong); }
.sta-bar-clicks { fill: var(--accent); }
.sta-hit { fill: transparent; }
.sta-mark { pointer-events: none; }
.sta-mark-line { stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.sta-mark-dot { fill: var(--ink); }
.sta-mark-n { fill: var(--on-ink); font: 600 10px var(--font-sans); }
.sta-changes { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-muted); }
@media (hover: hover) { .sta-hit:hover { fill: var(--surface-sunken); } }

/* listas con barra: lo más tocado, de dónde vienen, desde dónde */
.sta-rows { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sta-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sta-row-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.sta-pill { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink-muted); font-size: 12px; font-weight: 600; line-height: 1.5; vertical-align: 1px; }
.sta-row-sub { display: block; font-size: 13px; font-weight: 400; color: var(--ink-muted); }
.sta-row-n { flex: none; font-size: 14px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sta-card .bar { height: 8px; margin-top: 8px; overflow: hidden; border-radius: var(--radius-full); background: var(--surface-sunken); }
.sta-card .bar span { display: block; width: var(--w, 0%); height: 100%; border-radius: inherit; background: var(--line-strong); }
.sta-rows:not([data-key]) .bar span { background: var(--accent); }

.sta-more { margin-top: 14px; }
.sta-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.sta-more .sta-rows { margin-top: 6px; }
.sta-untapped { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.sta-untapped-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; padding: 0; list-style: none; }
.sta-untapped-list li { padding: 3px 10px; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink); font-size: 14px; }

/* de dónde vienen | desde dónde: dos columnas desde tablet, sin huecos; "con qué entran" va debajo, a lo ancho y compacto */
.sta-pair { display: grid; gap: 16px; }
.sta-pair > * { min-width: 0; }
@media (min-width: 720px) {
  .sta-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .sta-pair > :only-child { grid-column: 1 / -1; }
}
.sta-strip .sta-head { margin-bottom: 10px; }
.sta-strip-body { min-width: 0; }
@media (min-width: 720px) {
  .sta-strip { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 0 16px; }
  .sta-strip .sta-head { margin-bottom: 0; }
  .sta-strip.sta-locked { grid-template-columns: 1fr; }
  .sta-strip.sta-locked .sta-head { margin-bottom: 12px; }
}

/* tus links para cada lugar */
.sta-links-hint { margin: -4px 0 12px; font-size: 15px; }
.sta-links { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sta-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name btn" "url url"; align-items: center; gap: 6px 12px; min-width: 0; }
.sta-link-name { grid-area: name; font-size: 14px; font-weight: 600; }
.sta-link-btns { grid-area: btn; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.sta-copy, .sta-share { min-width: 92px; min-height: 44px; padding: 0 14px; }
.sta-link-url {
  grid-area: url; display: block; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-m);
  background: var(--surface-sunken); color: var(--ink); font: 13px/1.4 var(--font-mono); overflow-wrap: anywhere; user-select: all;
}
@media (min-width: 720px) {
  .sta-links { gap: 10px; }
  .sta-link { grid-template-columns: 150px minmax(0, 1fr) auto; grid-template-areas: "name url btn"; gap: 0 12px; }
  .sta-link-url { display: flex; align-items: center; }
}

/* hoja Compartir (share-sheet.js): link, QR e imágenes para historias y publicaciones */
.share-body { display: grid; gap: 24px; align-content: start; }
.share-sec { display: grid; gap: 12px; min-width: 0; }
.share-sec .group-title, .share-sec .hint { margin: 0; }
.share-url {
  display: block; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-m);
  background: var(--surface-sunken); color: var(--ink); font: 13px/1.4 var(--font-mono); overflow-wrap: anywhere; user-select: all;
}
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.share-actions .btn { flex: 1 1 140px; min-height: 44px; }
.share-qr-wrap { display: flex; justify-content: center; }
.share-qr { display: block; width: min(100%, 240px); height: auto; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius-m); image-rendering: pixelated; }
.share-figs { display: grid; gap: 20px; }
.share-fig { display: grid; gap: 8px; margin: 0; justify-items: center; min-width: 0; }
.share-fig .btn { width: 100%; min-height: 44px; }
.share-img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-m); }
.share-img-story { width: min(100%, 180px); aspect-ratio: 9 / 16; }
.share-img-post { width: 100%; aspect-ratio: 1200 / 630; }
.share-fig figcaption { margin: 0; }

/* Configuración: "Aparecer en Google" por página */
.set-index { display: grid; gap: 4px; margin-top: 8px; }
.set-index .check { min-height: 44px; }
.set-index .hint { margin: 0 0 0 36px; }

/* con qué entran: una barra apilada */
.sta-stack { display: flex; gap: 2px; height: 14px; overflow: hidden; border-radius: var(--radius-full); background: var(--surface-sunken); }
.sta-seg { display: block; width: var(--w, 0%); height: 100%; }
.sta-seg-0, .sta-key-seg-0 { background: var(--ink-muted); }
.sta-seg-1, .sta-key-seg-1 { background: var(--line-strong); }
.sta-seg-2, .sta-key-seg-2 { background: var(--line); }
.sta-stack-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-muted); }
.sta-stack-legend strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* cuándo entran: 7 días × 24 horas; la tabla se desliza dentro de su tarjeta */
.sta-busy { margin: 0 0 12px; font-size: 16px; }
.sta-heat-scroll { position: relative; margin: 0 -4px; padding: 0 4px 4px; overflow-x: auto; border-radius: var(--radius-s); }
.sta-heat { width: 100%; min-width: 540px; table-layout: fixed; border-collapse: separate; border-spacing: 2px; }
.sta-heat thead td { width: 34px; }
.sta-hour { padding: 0; overflow: visible; font-size: 11px; font-weight: 500; text-align: left; white-space: nowrap; color: var(--ink-muted); }
.sta-day { padding: 0 4px 0 0; font-size: 12px; font-weight: 500; text-align: left; color: var(--ink-muted); }
.sta-cell { position: relative; height: 22px; padding: 0; border-radius: 4px; background: var(--surface-sunken); }
.sta-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--accent); opacity: 0; }
.sta-cell.lv-1 .sta-fill { opacity: 0.22; }
.sta-cell.lv-2 .sta-fill { opacity: 0.45; }
.sta-cell.lv-3 .sta-fill { opacity: 0.7; }
.sta-cell.lv-4 .sta-fill { opacity: 1; }
.sta-heat-hint { display: none; margin-top: 6px; }
@media (max-width: 640px) { .sta-heat-hint { display: block; } }
.sta-heat-legend { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 12px; color: var(--ink-muted); }
.sta-heat-legend .sta-cell { display: inline-block; width: 16px; height: 16px; }
.sta-heat-legend .sta-cell:first-of-type { margin-left: 4px; }
.sta-heat-legend .sta-cell:last-of-type { margin-right: 4px; }

/* lo que el plan no incluye: dibujo de ejemplo, claramente rotulado y sin cifras */
.sta-sample { position: relative; margin: 6px 0 10px; padding: 18px 14px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-m); }
.sta-tag { position: absolute; top: -10px; left: 12px; padding: 0 8px; background: var(--surface); color: var(--ink-muted); font-size: 12px; font-weight: 600; }
.sta-sample-svg { display: block; width: 100%; height: auto; max-height: 96px; }
.sta-s-label { fill: var(--line); }
.sta-s-track { fill: var(--surface-sunken); }
.sta-s-bar { fill: var(--line-strong); }
.sta-s-mid { fill: var(--ink-faint); }
.sta-s-cell { fill: var(--surface-sunken); }
.sta-s-cell.lv-1 { fill: var(--accent); fill-opacity: 0.22; }
.sta-s-cell.lv-2 { fill: var(--accent); fill-opacity: 0.45; }
.sta-s-cell.lv-3 { fill: var(--accent); fill-opacity: 0.7; }
.sta-s-cell.lv-4 { fill: var(--accent); }

.sta-empty { padding: 28px 20px; text-align: center; color: var(--ink-muted); font-size: 16px; }
.sta-empty p { max-width: 38ch; margin: 0 auto; }
.sta-foot { margin: 4px 0 8px; text-align: center; }

/* ---------- estilo de la página ---------- */

/* La tarjeta de la lista: título de sección, una muestra de lo elegido ahora con su resumen, y el botón. */
.estilo-card { display: grid; justify-items: start; gap: 12px; padding: 16px; }
.estilo-summary { font-size: 15px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.estilo-card .hint { margin: 0; }
.estilo-now { display: flex; align-items: center; gap: 14px; min-width: 0; max-width: 100%; }
.estilo-now .estilo-summary { margin: 0; min-width: 0; }

/* La muestra: el fondo elegido, "Aa" en la letra de los títulos con la tinta del fondo, y una píldora del color de acento (--sw-fill, --sw-ink y --sw-accent vienen de los datos, puestos desde JS). */
.est-sample { --sw-line: var(--line-strong); flex: none; box-sizing: border-box; display: grid; place-content: center; justify-items: center; gap: 5px; width: 56px; height: 56px; border-radius: var(--radius-m); background: var(--sw-bg, var(--sw-fill, var(--surface))); color: var(--sw-ink, var(--ink)); box-shadow: inset 0 0 0 1px var(--sw-line); }
@supports (color: color-mix(in srgb, red 15%, transparent)) {
  .est-sample.is-light { --sw-line: color-mix(in srgb, var(--sw-ink, currentColor) 15%, transparent); }
}
.est-sample-aa { font-size: 22px; line-height: 1; }
.est-sample-pill { width: 24px; height: 7px; border-radius: var(--radius-full); background: var(--sw-accent, var(--accent)); }
/* Con una portada con foto la muestra lleva la foto (la miniatura de 480 px): en "fondo" llena el cuadrado con un velo oscuro; en "tarjeta" y "se funde" es la mitad de arriba y se desvanece hacia el color. */
.est-sample.has-photo { position: relative; overflow: hidden; }
.est-sample-photo { position: absolute; top: 0; left: 0; z-index: 0; display: block; width: 100%; height: 52%; object-fit: cover; }
.est-sample.has-photo > :not(.est-sample-photo) { position: relative; z-index: 1; }
.est-sample.is-photo-top { align-content: end; gap: 3px; padding-bottom: 5px; }
.est-sample.is-photo-top .est-sample-aa { font-size: 17px; }
.est-sample.is-photo-top .est-sample-photo { -webkit-mask-image: linear-gradient(black 55%, transparent); mask-image: linear-gradient(black 55%, transparent); }
.est-sample.is-photo-full { color: white; }
.est-sample.is-photo-full .est-sample-photo { height: 100%; }
.est-sample.is-photo-full::after { content: ""; position: absolute; inset: 0; z-index: 0; background: color-mix(in srgb, black 38%, transparent); }

/* El círculo de un fondo (el relleno y el aro vienen de los datos: --sw-fill y --sw-ink, puestos desde JS). */
.est-dot { --sw-line: var(--line-strong); display: block; flex: none; border-radius: var(--radius-full); background: var(--sw-bg, var(--sw-fill, var(--surface))); box-shadow: inset 0 0 0 1px var(--sw-line); }
@supports (color: color-mix(in srgb, red 15%, transparent)) {
  .est-dot.is-light { --sw-line: color-mix(in srgb, var(--sw-ink, currentColor) 15%, transparent); }
}
/* "Otro" sin un color elegido todavía: un aro de arcoíris (el token está arriba, con los demás). */
.est-dot.est-dot-rainbow { background: var(--rainbow); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* La hoja: el cuerpo con scroll y el "Listo" fijo abajo. */
.estilo-body { padding-top: 4px; }
.estilo-group + .estilo-group { margin-top: 28px; }
.est-head { margin: 20px 0 12px; }
.estilo-group:first-child .est-head { margin-top: 12px; }
.est-head .group-title { margin: 0; }
.est-head .hint { margin-top: 2px; }
.est-foot { flex: none; display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); }
.est-done { flex: 1; min-height: 48px; }
.est-undo { flex: none; min-height: 48px; padding-inline: 20px; }
.est-undo:disabled { opacity: .45; cursor: default; }

/* Cada opción es un radio de verdad, invisible y encima de su etiqueta (como .seg-opt): teclado y lector de pantalla funcionan solos. */
.est-opt { position: relative; display: block; min-width: 0; cursor: pointer; }
.est-opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.est-opt input:focus-visible + .est-face { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.est-face { min-width: 0; border: 1px solid var(--line); background: var(--surface); transition: background-color 160ms var(--ease), border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.est-opt input:checked + .est-face { background: var(--accent-soft); border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
@media (hover: hover) {
  .est-opt input:not(:checked):hover + .est-face { background: var(--surface-sunken); }
}

/* Combinaciones listas: nueve, tres por tres (también en el celular: tarjetas chicas de 114 px de ancho en 390 px, con más de 44 px de alto), "Aa" en la letra de los títulos. */
.est-combos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 480px) {
  .est-combos { gap: 10px; }
}
.est-combo .est-face { display: grid; align-content: center; justify-items: start; gap: 2px; min-height: 76px; padding: 10px 12px; border-radius: var(--radius-l); }
@media (min-width: 480px) {
  .est-combo .est-face { gap: 4px; min-height: 92px; padding: 14px 16px; }
}
.est-aa { max-width: 100%; overflow: hidden; font-size: 26px; line-height: 1.1; white-space: nowrap; }
.est-cname { font-size: 14px; font-weight: 600; color: var(--ink); }

/* Fondos: once círculos de 44 px con su nombre; cuatro por fila en el celular, seis desde 480 px. */
.est-fondos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
@media (min-width: 480px) {
  .est-fondos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.est-fondo .est-face { display: grid; justify-items: center; gap: 6px; padding: 8px 4px; border-color: transparent; border-radius: var(--radius-l); background: transparent; }
.est-fondo .est-dot { width: 44px; height: 44px; }
.est-sw-name { font-size: 13px; color: var(--ink-muted); text-align: center; }
.est-fondo input:checked + .est-face { background: var(--accent-soft); border-color: var(--accent-ink); }
.est-fondo input:checked + .est-face .est-sw-name,
.est-boton input:checked + .est-face .est-sw-name,
.est-tarjeta input:checked + .est-face .est-sw-name,
.est-forma input:checked + .est-face .est-sw-name { color: var(--accent-ink); font-weight: 600; }
@media (hover: hover) {
  .est-fondo input:not(:checked):hover + .est-face { background: var(--surface-sunken); }
}

/* La insignia "Pro": en la etiqueta de las opciones del plan Pro. Seleccionada la cara tiene el mismo fondo, así que lleva un aro. */
.est-badge { display: inline-block; padding: 1px 6px; border-radius: var(--radius-full); background: var(--accent-soft); color: color-mix(in srgb, var(--accent-ink) 85%, var(--ink)); font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.est-opt input:checked + .est-face .est-badge { box-shadow: inset 0 0 0 1px var(--accent-ink); }

/* Color: diez círculos de 40 px (el relleno es el color, viene de los datos); cinco por fila. */
.est-acentos, .est-texturas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 4px; }
/* Texturas: tres por fila en el celular (cuatro o cinco no entran con su nombre) y todas en una fila desde 480 px (quietas y con movimiento son hasta cinco cada una). */
.est-texturas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 480px) {
  .est-texturas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.est-acentos .est-face, .est-texturas .est-face { padding-left: 2px; padding-right: 2px; }
/* "Todos los colores": 16 círculos, cuatro por fila (cinco dejaban uno solo en la última). */
.est-acentos-todos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Un color casi blanco o casi negro se confunde con el panel (claro u oscuro): aro fuerte, el de los bordes de los campos (pisa el aro finito de .is-light). */
.est-dot.est-acc.is-pale, .est-dot.est-acc.is-deep { --sw-line: var(--line-strong); }
.est-acento .est-dot { width: 40px; height: 40px; }
.est-acento .est-sw-name, .est-textura .est-sw-name { font-size: 12px; overflow-wrap: anywhere; }
/* Vidrio (botones): un círculo esmerilado dibujado con CSS (solo tokens): colores suaves de fondo y, encima, un disco translúcido con desenfoque y un borde fino. Es el mismo en todos los estilos. */
.est-dot.est-dot-vidrio {
  position: relative; overflow: hidden;
  background: linear-gradient(color-mix(in srgb, var(--surface) 40%, transparent), color-mix(in srgb, var(--surface) 40%, transparent)), var(--rainbow);
}
.est-dot.est-dot-vidrio::after {
  content: ""; position: absolute; inset: 7px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface) 50%, transparent); border: 1px solid color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 14%, transparent);
}

/* Botones, forma y textura: miniaturas con el fondo (--sw-fill), la tinta (--sw-ink), la superficie y el color elegidos ahora; sync() los pone en el cuerpo de la hoja. */
.est-botones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.est-formas, .est-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 480px) {
  .est-botones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.est-boton .est-face, .est-tarjeta .est-face, .est-forma .est-face { display: grid; justify-items: center; gap: 6px; padding: 8px; border-radius: var(--radius-l); }
.est-stage {
  --sw-line: color-mix(in srgb, var(--sw-ink, var(--ink)) 15%, transparent);
  position: relative; display: grid; place-items: center; width: 100%; height: 56px; overflow: hidden;
  border-radius: var(--radius-m); background: var(--sw-pv, var(--sw-fill, var(--paper))); box-shadow: inset 0 0 0 1px var(--sw-line);
}
.est-pill { position: relative; z-index: 1; box-sizing: border-box; width: 64%; height: 26px; border: 1px solid var(--sw-line); border-radius: var(--radius-full); }
.est-prev-relleno .est-pill { border-color: transparent; background: var(--sw-accent, var(--accent)); }
.est-prev-borde .est-pill { border: 2px solid var(--sw-ink, var(--ink)); }
.est-prev-sombra .est-pill { border: 2px solid var(--sw-ink, var(--ink)); background: var(--sw-accent, var(--accent)); box-shadow: 3px 3px 0 var(--sw-ink, var(--ink)); }
.est-prev-vidrio::before { content: ""; position: absolute; left: 20%; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--sw-accent, var(--accent)); }
.est-prev-vidrio .est-pill {
  border-color: transparent; /* el botón de vidrio no lleva línea (como en la página) */
  background: color-mix(in srgb, var(--sw-surface, var(--surface)) 55%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.est-bar { display: flex; align-items: center; gap: 6px; box-sizing: border-box; width: 84%; height: 30px; padding: 0 9px; border: 1px solid var(--sw-line); background: var(--sw-surface, var(--surface)); border-radius: 8px; }
.est-shape-pildora .est-bar { border-radius: var(--radius-full); }
.est-shape-redondeado .est-bar { border-radius: 8px; }
.est-shape-recto .est-bar { border-radius: 3px; }
/* Formas de borde irregular (ondas, papel rasgado, festón): la miniatura no se enmascara; el relleno (::before) y el aro (::after) son capas detrás del contenido con los mismos mosaicos SVG que la página (a escala). */
.est-shape-ondas .est-bar, .est-shape-papel .est-bar, .est-shape-festones .est-bar { position: relative; isolation: isolate; border: 0; border-radius: 3px; background: none; }
.est-shape-ondas .est-bar::before, .est-shape-papel .est-bar::before, .est-shape-festones .est-bar::before,
.est-shape-ondas .est-bar::after, .est-shape-papel .est-bar::after, .est-shape-festones .est-bar::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 3px; mask-repeat: repeat-x, repeat-x, no-repeat, no-repeat; -webkit-mask-repeat: repeat-x, repeat-x, no-repeat, no-repeat; }
.est-shape-ondas .est-bar::before, .est-shape-papel .est-bar::before, .est-shape-festones .est-bar::before { background: var(--sw-surface, var(--surface)); mask-image: var(--edge-fill); mask-size: var(--edge-fill-size); mask-position: var(--edge-fill-pos); -webkit-mask-image: var(--edge-fill); -webkit-mask-size: var(--edge-fill-size); -webkit-mask-position: var(--edge-fill-pos); }
.est-shape-ondas .est-bar::after, .est-shape-papel .est-bar::after, .est-shape-festones .est-bar::after { background: color-mix(in srgb, var(--sw-ink, var(--ink)) 40%, transparent); mask-image: var(--edge-ring); mask-size: var(--edge-ring-size); mask-position: var(--edge-ring-pos); -webkit-mask-image: var(--edge-ring); -webkit-mask-size: var(--edge-ring-size); -webkit-mask-position: var(--edge-ring-pos); }
.est-shape-ondas .est-bar { --edge-fill: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'56'%20height%3D'7'%20viewBox%3D'0%200%2056%207'%3E%3Cpath%20d%3D'M0%200C10.2%200%2017.8%206%2028%206S45.8%200%2056%200V7H0Z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'56'%20height%3D'7'%20viewBox%3D'0%200%2056%207'%3E%3Cpath%20transform%3D'matrix(1%200%200%20-1%200%207)'%20d%3D'M0%206C10.2%206%2017.8%200%2028%200S45.8%206%2056%206V7H0Z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E"),linear-gradient(black,black); --edge-fill-size: 30.8px 3.85px, 30.8px 3.85px, 100% calc(100% - 6.6px); --edge-fill-pos: 50% 0, 50% 100%, 0 3.3px; --edge-ring: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'56'%20height%3D'9'%20viewBox%3D'0%200%2056%209'%3E%3Cpath%20d%3D'M0%200C10.2%200%2017.8%206%2028%206S45.8%200%2056%200V2C45.8%202%2038.2%208%2028%208S10.2%202%200%202Z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'56'%20height%3D'9'%20viewBox%3D'0%200%2056%209'%3E%3Cpath%20transform%3D'matrix(1%200%200%20-1%200%209)'%20d%3D'M0%206C10.2%206%2017.8%200%2028%200S45.8%206%2056%206V8C45.8%208%2038.2%202%2028%202S10.2%208%200%208Z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E"),linear-gradient(black,black),linear-gradient(black,black); --edge-ring-size: 30.8px 4.95px, 30.8px 4.95px, 1.1px calc(100% - 2.2px), 1.1px calc(100% - 2.2px); --edge-ring-pos: 50% 0, 50% 100%, 0 1.1px, 100% 1.1px; }
.est-shape-papel .est-bar { --edge-fill: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'7'%20viewBox%3D'0%200%20120%207'%3E%3Cpath%20d%3D'M0%200L3.5%202.2L9.8%200.7L20.2%201.6L26.7%200.8L28.9%201.7L35.2%203.2L37.7%205.5L42.9%202.5L49.8%205.7L52.2%203.3L63%201.2L65.9%204.4L68.3%203.4L74%201.8L76.3%200.9L83.9%201.9L86%201L91.6%203.5L102.4%205.3L106.3%205.6L112.4%204.4L120%200V7H0Z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'7'%20viewBox%3D'0%200%20120%207'%3E%3Cpath%20transform%3D'matrix(1%200%200%20-1%200%207)'%20d%3D'M0%200L3.5%200.5L10.2%202.2L16.4%200.6L21.1%201L28.8%201.8L32.9%201L43.7%201.8L50.6%203.4L59.1%205.1L61.1%203.2L63.9%204.8L72.6%205.4L76.8%203.6L80.9%201.4L86.7%200.7L90.4%203.4L98%204.9L108.2%205.2L110.6%202.6L115.3%201.3L120%200V7H0Z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E"),linear-gradient(black,black); --edge-fill-size: 60px 3.5px, 60px 3.5px, 100% calc(100% - 6px); --edge-fill-pos: 50% 0, 50% 100%, 0 3px; --edge-ring: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'9'%20viewBox%3D'0%200%20120%209'%3E%3Cpath%20d%3D'M0%200L3.5%202.2L9.8%200.7L20.2%201.6L26.7%200.8L28.9%201.7L35.2%203.2L37.7%205.5L42.9%202.5L49.8%205.7L52.2%203.3L63%201.2L65.9%204.4L68.3%203.4L74%201.8L76.3%200.9L83.9%201.9L86%201L91.6%203.5L102.4%205.3L106.3%205.6L112.4%204.4L120%200L120%202L112.4%206.4L106.3%207.6L102.4%207.3L91.6%205.5L86%203L83.9%203.9L76.3%202.9L74%203.8L68.3%205.4L65.9%206.4L63%203.2L52.2%205.3L49.8%207.7L42.9%204.5L37.7%207.5L35.2%205.2L28.9%203.7L26.7%202.8L20.2%203.6L9.8%202.7L3.5%204.2L0%202Z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'9'%20viewBox%3D'0%200%20120%209'%3E%3Cpath%20transform%3D'matrix(1%200%200%20-1%200%209)'%20d%3D'M0%200L3.5%200.5L10.2%202.2L16.4%200.6L21.1%201L28.8%201.8L32.9%201L43.7%201.8L50.6%203.4L59.1%205.1L61.1%203.2L63.9%204.8L72.6%205.4L76.8%203.6L80.9%201.4L86.7%200.7L90.4%203.4L98%204.9L108.2%205.2L110.6%202.6L115.3%201.3L120%200L120%202L115.3%203.3L110.6%204.6L108.2%207.2L98%206.9L90.4%205.4L86.7%202.7L80.9%203.4L76.8%205.6L72.6%207.4L63.9%206.8L61.1%205.2L59.1%207.1L50.6%205.4L43.7%203.8L32.9%203L28.8%203.8L21.1%203L16.4%202.6L10.2%204.2L3.5%202.5L0%202Z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E"),linear-gradient(black,black),linear-gradient(black,black); --edge-ring-size: 60px 4.5px, 60px 4.5px, 1px calc(100% - 2px), 1px calc(100% - 2px); --edge-ring-pos: 50% 0, 50% 100%, 0 1px, 100% 1px; }
.est-shape-festones .est-bar { --edge-fill: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'14'%20height%3D'8'%20viewBox%3D'0%200%2014%208'%3E%3Cpath%20d%3D'M0%200A7%207%200%200%201%207%207A7%207%200%200%201%2014%200V8H0Z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'14'%20height%3D'8'%20viewBox%3D'0%200%2014%208'%3E%3Cpath%20transform%3D'matrix(1%200%200%20-1%200%208)'%20d%3D'M0%200A7%207%200%200%201%207%207A7%207%200%200%201%2014%200V8H0Z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E"),linear-gradient(black,black); --edge-fill-size: 8.4px 4.8px, 8.4px 4.8px, 100% calc(100% - 8.4px); --edge-fill-pos: 50% 0, 50% 100%, 0 4.2px; --edge-ring: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'14'%20height%3D'10'%20viewBox%3D'0%200%2014%2010'%3E%3Cpath%20d%3D'M0%201A6%206%200%200%201%206%207M8%207A6%206%200%200%201%2014%201'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%2F%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'14'%20height%3D'10'%20viewBox%3D'0%200%2014%2010'%3E%3Cpath%20transform%3D'matrix(1%200%200%20-1%200%2010)'%20d%3D'M0%201A6%206%200%200%201%206%207M8%207A6%206%200%200%201%2014%201'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%2F%3E%3C%2Fsvg%3E"),linear-gradient(black,black),linear-gradient(black,black); --edge-ring-size: 8.4px 6px, 8.4px 6px, 1.2px calc(100% - 2.4px), 1.2px calc(100% - 2.4px); --edge-ring-pos: 50% 0, 50% 100%, 0 1.2px, 100% 1.2px; }
.est-bar-dot { flex: none; width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--sw-accent, var(--accent)); }
.est-bar-line { flex: 1; height: 4px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--sw-ink, var(--ink)) 45%, transparent); }
/* Tarjetas: una tarjeta (punto + línea) con el estilo elegido; «Igual que los botones» es una de trazo discontinuo con un «=». La sombra de las tarjetas es suave (la de los botones es dura). */
.est-tarj-box { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; box-sizing: border-box; width: 84%; height: 30px; padding: 0 9px; border: 1px solid var(--sw-line); border-radius: 8px; background: var(--sw-surface, var(--surface)); }
.est-tarj-borde .est-tarj-box { border: 2px solid var(--sw-ink, var(--ink)); background: transparent; }
.est-tarj-sombra .est-tarj-box { box-shadow: 0 6px 12px -3px color-mix(in srgb, var(--ink) 30%, transparent), 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent); }
.est-tarj-vidrio::before { content: ""; position: absolute; left: 18%; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--sw-accent, var(--accent)); }
.est-tarj-vidrio .est-tarj-box { background: color-mix(in srgb, var(--sw-surface, var(--surface)) 55%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.est-tarj-igual .est-tarj-box, .est-shape-igual .est-bar { justify-content: center; border: 1px dashed color-mix(in srgb, var(--sw-ink, var(--ink)) 45%, transparent); background: transparent; border-radius: 8px; }
.est-igual::before { content: "="; }
.est-igual { font-weight: 700; font-size: 16px; line-height: 1; color: color-mix(in srgb, var(--sw-ink, var(--ink)) 70%, transparent); }
.est-tarjetas-nota { margin-top: 8px; }
.est-tarjetas-colores { margin-top: 4px; }

/* Texturas: cuadrados de 48 px con el dibujo (más marcado que en la página, para que se vea en chico) sobre el fondo elegido.
   Las que tienen movimiento animan una capa propia (::before) solo con transform; con "reducir movimiento" quedan quietas. */
.est-tex {
  --tex: color-mix(in srgb, var(--sw-ink, var(--ink)) 30%, transparent);
  position: relative; display: block; width: 48px; height: 48px; overflow: hidden; border-radius: var(--radius-m); background-color: var(--sw-fill, var(--paper));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sw-ink, var(--ink)) 15%, transparent);
}
.est-tex-grano { background-image: radial-gradient(var(--tex) 0.7px, transparent 1px), radial-gradient(var(--tex) 0.7px, transparent 1px); background-size: 5px 5px, 8px 8px; background-position: 0 0, 2px 3px; }
.est-tex-puntos { background-image: radial-gradient(var(--tex) 1.5px, transparent 2px); background-size: 9px 9px; }
.est-tex-cuadricula { background-image: linear-gradient(var(--tex) 1px, transparent 1px), linear-gradient(90deg, var(--tex) 1px, transparent 1px); background-size: 12px 12px; }
.est-tex-ondas { background-image: repeating-radial-gradient(circle at 50% 120%, transparent 0 5px, var(--tex) 5px 6px); }

.est-tex-aurora::before,
.est-tex-grano-vivo::before,
.est-tex-ondas-vivas::before,
.est-tex-burbujas::before { content: ""; position: absolute; inset: -30%; }
.est-tex-aurora::before {
  background:
    radial-gradient(38% 38% at 30% 35%, color-mix(in srgb, var(--sw-accent, var(--accent)) 60%, transparent), transparent 72%),
    radial-gradient(34% 34% at 72% 68%, color-mix(in srgb, var(--sw-ink, var(--ink)) 28%, transparent), transparent 72%);
  animation: est-drift 7s ease-in-out infinite alternate; will-change: transform;
}
.est-tex-grano-vivo::before {
  inset: -12px; background-image: radial-gradient(var(--tex) 0.7px, transparent 1px), radial-gradient(var(--tex) 0.7px, transparent 1px); background-size: 5px 5px, 8px 8px; background-position: 0 0, 2px 3px;
  animation: est-jitter 700ms steps(1) infinite;
}
.est-tex-ondas-vivas::before {
  background-image: repeating-radial-gradient(circle at 50% 120%, transparent 0 5px, var(--tex) 5px 6px); animation: est-sway 5s ease-in-out infinite alternate; will-change: transform;
}
.est-tex-burbujas::before {
  background-image:
    radial-gradient(circle at 50% 50%, transparent 0 3px, var(--tex) 3.5px 4.5px, transparent 5px),
    radial-gradient(circle at 50% 50%, transparent 0 4px, var(--tex) 4.5px 5.5px, transparent 6px),
    radial-gradient(circle at 50% 50%, transparent 0 7px, var(--tex) 7.5px 8.5px, transparent 9px);
  background-size: 20px 20px, 30px 30px, 60px 60px; background-position: 0 0, 10px 5px, 25px 15px;
  /* la capa llega 60 px más abajo y sube de a 60 px (el múltiplo común de las tres mallas): vuelve a empezar sin salto y solo se mueve con transform */
  inset: 0 0 -60px 0; animation: est-rise 6s linear infinite; will-change: transform;
}
.est-tex-destellos::before, .est-tex-destellos::after { content: ""; position: absolute; inset: 0; }
.est-tex-destellos::before {
  background-image: radial-gradient(circle, var(--sw-accent, var(--accent)) 1.2px, transparent 2px), radial-gradient(circle, var(--tex) 1px, transparent 1.8px), radial-gradient(circle, var(--sw-accent, var(--accent)) 0.9px, transparent 1.6px);
  background-size: 23px 19px, 31px 27px, 17px 29px; background-position: 4px 6px, 15px 3px, 9px 14px;
  animation: est-twinkle 2.6s ease-in-out infinite;
}
.est-tex-destellos::after {
  background-image: radial-gradient(circle, var(--tex) 1.1px, transparent 1.9px), radial-gradient(circle, var(--sw-accent, var(--accent)) 1px, transparent 1.7px);
  background-size: 27px 21px, 19px 33px; background-position: 13px 12px, 2px 9px;
  animation: est-twinkle 3.4s ease-in-out -1.3s infinite;
}
@keyframes est-twinkle { 0%, 100% { opacity: 0.1; } 50% { opacity: 1; } }
@keyframes est-drift { from { transform: translate3d(-9%, -5%, 0) rotate(0deg); } to { transform: translate3d(9%, 6%, 0) rotate(14deg); } }
@keyframes est-sway { from { transform: translate3d(0, 5%, 0) scale(1); } to { transform: translate3d(0, -5%, 0) scale(1.08); } }
@keyframes est-jitter { 0% { transform: translate(0, 0); } 25% { transform: translate(-3px, 2px); } 50% { transform: translate(2px, -3px); } 75% { transform: translate(-2px, -2px); } }
@keyframes est-rise { to { transform: translate3d(0, -60px, 0); } }

/* Una lista por lugar: la familia escrita en su propia letra (20 px) y la etiqueta a la derecha. */
.est-list { display: grid; gap: 8px; }
.est-row .est-face { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 20px; border-radius: var(--radius-full); }
.est-fname { min-width: 0; font-size: 20px; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.est-flabel { flex: none; font-size: 13px; color: var(--ink-muted); }

/* "Otro": la fila del color propio, debajo de las opciones del fondo o del color; solo se ve mientras "Otro" está elegido. */
.est-custom { display: grid; gap: 8px; margin-top: 14px; }
.est-custom[hidden] { display: none; }
.est-custom-fields { display: flex; align-items: flex-end; gap: 12px; }
.est-custom-color { flex: none; box-sizing: border-box; width: 52px; height: 52px; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface); cursor: pointer; }
.est-custom-color::-webkit-color-swatch-wrapper { padding: 0; }
.est-custom-color::-webkit-color-swatch { border: 0; border-radius: var(--radius-s); }
.est-custom-color::-moz-color-swatch { border: 0; border-radius: var(--radius-s); }
.est-custom-field { display: grid; gap: 4px; flex: 1; min-width: 0; max-width: 200px; }
.est-custom-label { font-size: 13px; color: var(--ink-muted); }
.est-custom-code { box-sizing: border-box; width: 100%; min-height: 52px; padding: 0 14px; font-family: var(--font-mono); font-size: 16px; }
.est-custom-code[aria-invalid="true"] { border-color: var(--danger); }
.est-custom-hint { margin: 0; font-size: 13px; }

/* "Otro" de los degradés (a medida): una muestra del degradé, dos o tres colores (selector + código, como "Otro color"), "+ Tercer color" y las cuatro direcciones. */
.est-degrade { gap: 14px; }
.est-degrade-preview { height: 56px; border-radius: var(--radius-m); box-shadow: inset 0 0 0 1px var(--line-strong); }
.est-degrade-slots { display: grid; gap: 12px; }
.est-degrade-slot[hidden] { display: none; }
.est-degrade-slot { flex-wrap: wrap; }
.est-degrade-remove, .est-degrade-add { flex: none; align-self: flex-end; }
.est-degrade-add { justify-self: start; }
.est-degrade-add[hidden] { display: none; }
.est-degrade-dirs { display: flex; flex-wrap: wrap; gap: 8px; }
.est-dir { flex: none; }
.est-dir .est-face { display: grid; place-items: center; width: 56px; height: 48px; border-radius: var(--radius-m); color: var(--ink); }

/* Subgrupos (lisos y degradés, quietas y con movimiento): un título chico y su grilla, todos en el mismo grupo de radios. */
.est-sub { margin: 14px 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.est-subgroups > .est-sub:first-child { margin-top: 0; }
.est-grid-otro { margin-top: 12px; }

/* La insignia Pro de un encabezado o de un subtítulo. */
.group-title .est-badge, .est-sub .est-badge { margin-left: 6px; vertical-align: middle; }
.est-places { margin-top: 28px; }
.est-places > .est-head { margin: 0 0 4px; }
.est-places .estilo-group { margin-top: 22px; }
.est-places .est-head { margin: 0 0 10px; }
.est-sub-title { font-size: 16px; }
/* Sub-pestañas de Textos (Nombre · Frase · Títulos · Texto · Botones): una fila de chips sueltos, sin barra detrás (ya hay dos filas de pestañas arriba: esta es la tercera y la más liviana), con un solo lugar a la vista; si no entran, se deslizan. El título de cada lugar es el de su pestaña: queda solo para el lector de pantalla. */
/* En el celular la regla de `.tabs` pega la barra de secciones abajo de todo (position: fixed): esta va en el flujo, dentro de la hoja. */
.est-places .est-subtabs { position: static; z-index: auto; display: flex; gap: 4px; height: auto; margin: 0 0 6px; padding: 0; overflow-x: auto; scrollbar-width: none; border-top: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.est-places .est-subtabs::-webkit-scrollbar { display: none; }
.est-places .est-subtabs [role="tab"] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 40px; padding: 0 10px; border-radius: var(--radius-full); background: transparent; box-shadow: none; font-size: 15px; white-space: nowrap; cursor: pointer; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.est-places .est-subtabs [role="tab"][aria-selected="true"] { background: var(--surface-sunken); box-shadow: none; color: var(--ink); font-weight: 700; }
@media (hover: hover) {
  .est-places .est-subtabs [role="tab"][aria-selected="false"]:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
}
.est-places .est-subtabs [role="tab"]:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.est-subpanel[hidden] { display: none; }
.est-places .est-subpanel .estilo-group { margin-top: 14px; }
.est-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.est-fname-igual { font-size: 16px; font-weight: 600; }


/* Pestañas de la hoja (Estilos · Textos · Fondo · Botones · Redes): la barra queda pegada arriba del cuerpo con scroll, y en el celular se desliza de costado si no entra.
   Usa la misma clase .tabs que "Tu página | Estadísticas". El punto avisa (plan Gratis) que lo elegido en esa pestaña es del Pro. */
.estilo-body.has-tabs { padding-top: 0; }
.est-tabbar { position: sticky; top: 0; z-index: 3; margin: 0 -16px 8px; padding: 10px 16px; background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.est-tabs { margin: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.est-tabs::-webkit-scrollbar { display: none; }
.est-tabs [role="tab"] { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; white-space: nowrap; cursor: pointer; }
@media (max-width: 479px) {
  .est-tabs [role="tab"] { padding: 0 8px; font-size: 14px; } /* las cinco entran en 390 px (con algún punto del Pro también); si no, la barra se desliza */
}
.est-tabs [role="tab"]:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.est-tab-dot { flex: none; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--accent-ink); }
.est-tab-dot[hidden], .est-panel[hidden], .est-slot-portada[hidden], .est-icon-color[hidden] { display: none; }
.est-slot-portada + .estilo-group .est-head { margin-top: 12px; }

/* Portada (arriba de la pestaña Fondo): los tres modos como un control segmentado con un teléfono en miniatura (solo CSS) cada uno, la foto de ahora con sus acciones y, abajo, la biblioteca. */
.est-slot-portada:not([hidden]) { margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.est-portada .est-head { margin-top: 12px; }
.est-por-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--radius-l); background: var(--surface-sunken); }
.est-por-opt { position: relative; display: block; min-width: 0; cursor: pointer; }
.est-por-opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.est-por-face { display: grid; justify-items: center; align-content: start; gap: 8px; box-sizing: border-box; height: 100%; padding: 12px 4px; border-radius: calc(var(--radius-l) - 4px); color: var(--ink-muted); text-align: center; transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease), color 160ms var(--ease); }
.est-por-opt input:checked + .est-por-face { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1), inset 0 0 0 1.5px var(--accent-ink); }
.est-por-opt input:focus-visible + .est-por-face { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.est-por-name { font-size: 13px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.est-por-opt input:checked + .est-por-face .est-por-name { color: var(--accent-ink); }
.est-por-name .est-badge { display: table; margin: 5px auto 0; }
@media (hover: hover) {
  .est-por-opt input:not(:checked):hover + .est-por-face { background: color-mix(in srgb, var(--surface) 60%, transparent); }
}
.est-por-msg { margin: 12px 0 0; }
.est-por-msg[hidden], .est-photo-note[hidden], .est-foto-clear[hidden], .est-lib[hidden], .est-foto-img[hidden], .est-foto-empty[hidden] { display: none; }
.est-photo-note { margin: 4px 0 0; font-size: 13px; }

/* [encabezado] Foto de perfil (pestaña Fondo, después de la portada): tres lados como un control segmentado, igual que los modos de la portada; cada cara lleva un esquema (círculo y dos rayas) pegado a ese lado. */
.est-slot-encabezado:not([hidden]) { margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.est-slot-encabezado[hidden] { display: none; }
.est-slot-encabezado + .estilo-group .est-head { margin-top: 12px; }
.est-encabezado .est-head { margin-top: 12px; }
.est-enc-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--radius-l); background: var(--surface-sunken); }
.est-enc-opt { position: relative; display: block; min-width: 0; min-height: 44px; cursor: pointer; }
.est-enc-opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.est-enc-face { display: grid; justify-items: center; align-content: start; gap: 8px; box-sizing: border-box; height: 100%; min-height: 44px; padding: 12px 4px; border-radius: calc(var(--radius-l) - 4px); color: var(--ink-muted); text-align: center; transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease), color 160ms var(--ease); }
.est-enc-opt input:checked + .est-enc-face { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1), inset 0 0 0 1.5px var(--accent-ink); }
.est-enc-opt input:focus-visible + .est-enc-face { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.est-enc-name { font-size: 13px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.est-enc-opt input:checked + .est-enc-face .est-enc-name { color: var(--accent-ink); }
@media (hover: hover) {
  .est-enc-opt input:not(:checked):hover + .est-enc-face { background: color-mix(in srgb, var(--surface) 60%, transparent); }
}
.est-enc-mini { display: grid; gap: 4px; box-sizing: border-box; width: 56px; padding: 8px 6px; border-radius: 10px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.enc-dot { display: block; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--mp-photo); }
.enc-line { display: block; width: 78%; height: 4px; border-radius: var(--radius-full); background: var(--ink-faint); }
.enc-line.is-short { width: 48%; }
.enc-izquierda { justify-items: start; }
.enc-centro { justify-items: center; }
.enc-derecha { justify-items: end; }
@media (prefers-reduced-motion: reduce) { .est-enc-face { transition: none; } }

/* [escritorio] En la compu (pestaña Fondo, después de la foto de perfil): una columna o dos como un control segmentado, igual que el del lado del encabezado; cada cara lleva un esquema de la página en una pantalla ancha. */
.est-slot-escritorio:not([hidden]) { margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.est-slot-escritorio[hidden] { display: none; }
.est-slot-escritorio + .estilo-group .est-head { margin-top: 12px; }
.est-escritorio .est-head { margin-top: 12px; }
.est-esc-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--radius-l); background: var(--surface-sunken); }
.est-esc-opt { position: relative; display: block; min-width: 0; min-height: 44px; cursor: pointer; }
.est-esc-opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.est-esc-face { display: grid; justify-items: center; align-content: start; gap: 8px; box-sizing: border-box; height: 100%; min-height: 44px; padding: 12px 4px; border-radius: calc(var(--radius-l) - 4px); color: var(--ink-muted); text-align: center; transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease), color 160ms var(--ease); }
.est-esc-opt input:checked + .est-esc-face { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1), inset 0 0 0 1.5px var(--accent-ink); }
.est-esc-opt input:focus-visible + .est-esc-face { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.est-esc-name { font-size: 13px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.est-esc-opt input:checked + .est-esc-face .est-esc-name { color: var(--accent-ink); }
.est-esc-name .est-badge { display: table; margin: 5px auto 0; }
@media (hover: hover) {
  .est-esc-opt input:not(:checked):hover + .est-esc-face { background: color-mix(in srgb, var(--surface) 60%, transparent); }
}
.est-esc-mini { display: flex; align-items: flex-start; justify-content: center; gap: 6px; box-sizing: border-box; width: 84px; height: 56px; padding: 8px 8px; border-radius: 8px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.esc-side { display: grid; justify-items: center; align-content: start; gap: 4px; }
.esc-main { display: grid; align-content: start; gap: 4px; }
.esc-bar { display: block; height: 5px; border-radius: var(--radius-full); background: var(--ink-faint); }
.esc-una-columna { flex-direction: column; align-items: center; }
.esc-una-columna .esc-side { grid-template-columns: auto auto; align-items: center; gap: 6px; }
.esc-una-columna .esc-side .enc-dot { width: 10px; height: 10px; }
.esc-una-columna .esc-side .enc-line { width: 22px; }
.esc-una-columna .esc-main { width: 44px; }
.esc-dos-columnas .esc-side { width: 22px; }
.esc-dos-columnas .esc-side .enc-line { width: 100%; }
.esc-dos-columnas .esc-main { flex: 1; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .est-esc-face { transition: none; } }

/* El teléfono en miniatura: se funde = la foto arriba que se desvanece; tarjeta = una tarjeta redondeada con el texto encima; fondo = la foto detrás de todo y filas de vidrio. */
.est-minphone { position: relative; display: block; box-sizing: border-box; width: 46px; height: 76px; overflow: hidden; border-radius: 10px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.mp-photo { position: absolute; top: 0; left: 0; right: 0; height: 52%; background: var(--mp-photo); -webkit-mask-image: linear-gradient(black 50%, transparent); mask-image: linear-gradient(black 50%, transparent); }
.mp-rows { position: absolute; left: 6px; right: 6px; bottom: 7px; display: grid; gap: 4px; }
.mp-line { display: block; height: 5px; border-radius: var(--radius-full); background: var(--ink-faint); }
.mp-line.is-short { width: 62%; }
.mp-card { position: absolute; top: 6px; left: 5px; right: 5px; height: 52%; display: flex; align-items: flex-end; overflow: hidden; border-radius: 7px; background: var(--mp-photo); }
.mp-ontext { display: grid; gap: 3px; box-sizing: border-box; width: 100%; padding: 14px 5px 5px; background: linear-gradient(transparent, color-mix(in srgb, black 60%, transparent)); }
.mp-line.is-light { height: 3px; background: color-mix(in srgb, white 92%, transparent); }
.mp-fondo { background: linear-gradient(color-mix(in srgb, black 22%, transparent), color-mix(in srgb, black 22%, transparent)), var(--mp-photo); box-shadow: none; }
.mp-fondo .mp-rows { top: 24px; bottom: auto; gap: 5px; }
.mp-glass { display: block; height: 10px; border-radius: var(--radius-full); background: color-mix(in srgb, white 34%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, white 55%, transparent); }

/* La foto de ahora y las acciones. */
.est-foto { margin-top: 24px; }
.est-foto-head { margin: 0 0 10px; }
.est-foto-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.est-foto-thumb { flex: none; position: relative; display: grid; place-items: center; box-sizing: border-box; width: 64px; height: 64px; overflow: hidden; border-radius: var(--radius-m); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); }
.est-foto-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.est-foto-empty { position: relative; display: block; box-sizing: border-box; width: 100%; height: 100%; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-m); }
.est-foto-sun { position: absolute; top: 13px; left: 16px; width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--ink-faint); }
.est-foto-hill { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 16px; background: var(--ink-faint); clip-path: polygon(0 100%, 34% 25%, 56% 62%, 74% 38%, 100% 100%); }
.est-foto-text { min-width: 0; }
.est-foto-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.est-foto-sub { margin: 2px 0 0; font-size: 13px; }
.est-foto-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.est-foto-lib[aria-expanded="true"] { border-color: var(--accent-ink); background: var(--accent-soft); color: var(--accent-ink); }

/* La biblioteca: las fotos por tema, tres por fila en el celular y más en pantallas anchas. Cada una es un radio (invisible, encima de la miniatura); la elegida lleva un aro y una marca. */
.est-lib { margin-top: 14px; padding: 14px 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.est-lib-group + .est-lib-group { margin-top: 18px; }
.est-lib .est-sub { margin: 0 0 8px; }
.est-lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 520px) {
  .est-lib-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .est-lib-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.est-lib-opt { position: relative; display: block; min-width: 0; cursor: pointer; }
.est-lib-opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.est-lib-face { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-m); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); }
.est-lib-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.est-lib-opt input:checked + .est-lib-face { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-ink); }
.est-lib-opt input:checked + .est-lib-face::after { content: "\2713\FE0E"; position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--accent-ink); color: white; font-size: 12px; font-weight: 700; line-height: 1; }
.est-lib-opt input:focus-visible + .est-lib-face { outline: 2px solid var(--ink); outline-offset: 5px; }
@media (hover: hover) {
  .est-lib-opt input:not(:checked):hover + .est-lib-face { box-shadow: inset 0 0 0 2px var(--ink-muted); }
}

/* Botones, color: "De tu fondo" (tres, más el Vidrio) y, debajo, "Todos los colores". */
.est-de-fondo:empty { display: none; margin: 0; }
.est-de-fondo + .est-todos { margin-top: 20px; }
.est-color .est-sub:first-child { margin-top: 0; }

/* Redes: la forma de los íconos, con tres íconos de muestra dibujados con el fondo, el color y la forma de cada opción (--sw-ico-fg y --sw-ico-bg solo están si se eligió un color). */
.est-iconos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) {
  .est-iconos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.est-iprev { display: flex; align-items: center; justify-content: center; gap: 6px; }
.est-ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; color: var(--sw-ico-fg, var(--sw-ink, var(--ink))); }
.est-ico svg { display: block; width: 15px; height: 15px; }
.est-iprev-circulo .est-ico, .est-iprev-circulo-color .est-ico { border-radius: var(--radius-full); }
.est-iprev-circulo .est-ico { background: var(--sw-ico-bg, transparent); box-shadow: inset 0 0 0 1.5px currentColor; color: var(--sw-ico-fg, var(--sw-ico-bg-on, var(--sw-ink, var(--ink)))); }
.est-iprev-circulo-color .est-ico { background: var(--sw-ico-bg, var(--sw-accent, var(--accent))); color: var(--sw-ico-fg, var(--sw-ico-bg-on, var(--sw-on, var(--on-accent)))); }
.est-iprev-cuadrado .est-ico { border-radius: 8px; background: var(--sw-ico-bg, var(--sw-surface, var(--surface))); box-shadow: inset 0 0 0 1px var(--sw-line); color: var(--sw-ico-fg, var(--sw-ico-bg-on, var(--sw-ink, var(--ink)))); }
.est-icon-color .est-fcolor { margin-top: 0; }
.est-icon-color + .est-icon-color { margin-top: 24px; }

/* Buscar en Google Fonts (uno por lugar, Pro): una fila-botón que abre, en el mismo lugar, el buscador; lo elegido se ve arriba con su nombre en su letra y "Quitar". */
.est-gf { display: grid; gap: 8px; margin-top: 14px; }
.est-gf-current[hidden], .est-gf-panel[hidden], .est-gf-list[hidden], .est-gf-more[hidden], .est-gf-retry[hidden] { display: none; }
.est-gf-current { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 8px 6px 20px; border: 1px solid var(--accent-ink); border-radius: var(--radius-full); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.est-gf-current-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.est-gf-name { min-width: 0; font-size: 20px; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.est-gf-remove, .est-gf-retry, .est-gf-more { flex: none; min-height: 44px; }
.est-gf-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; width: 100%; min-height: 48px; padding: 6px 20px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.est-gf-toggle:focus-visible, .est-gf-chip:focus-visible, .est-gf-item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.est-gf-toggle.is-open { border-color: var(--accent-ink); }
.est-gf-chevron { flex: none; width: 8px; height: 8px; border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: translateY(-2px) rotate(45deg); transition: transform 160ms var(--ease); }
.est-gf-toggle.is-open .est-gf-chevron { transform: translateY(2px) rotate(225deg); }
.est-gf-panel { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.est-gf-field { display: grid; gap: 6px; }
.est-gf-input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; }
.est-gf-input:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.est-gf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.est-gf-chip { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface); color: var(--ink-muted); font: inherit; font-size: 14px; cursor: pointer; }
.est-gf-chip[aria-pressed="true"] { border-color: var(--accent-ink); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.est-gf-statusrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.est-gf-status { margin: 0; font-size: 13px; }
.est-gf-results { max-height: min(360px, 50vh); margin: 0 -6px; padding: 0 6px; overflow-y: auto; overscroll-behavior: contain; }
.est-gf-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.est-gf-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; width: 100%; min-height: 48px; padding: 6px 14px; border: 1px solid transparent; border-radius: var(--radius-m); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.est-gf-item-name { min-width: 0; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.est-gf-item[aria-current="true"] { border-color: var(--accent-ink); background: var(--accent-soft); }
.est-gf-more { width: 100%; margin-top: 8px; }
@media (hover: hover) {
  .est-gf-item:hover, .est-gf-chip:hover { background: var(--surface-sunken); }
  .est-gf-toggle:hover { background: var(--surface-sunken); }
}

/* El color de la letra de un lugar: un control segmentado y, bajo "Otro", la misma fila de color y código. */
.est-fcolor { display: grid; gap: 8px; margin-top: 14px; }
.est-fcolor-label { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.est-fcolor-seg .seg-opt span { min-height: 44px; font-size: 14px; line-height: 1.2; }
.est-fcolor .est-custom { margin-top: 2px; }

/* El formato de la letra de un lugar (Textos): ARRIBA de la lista de fuentes, para que la primera fuente se vea sin bajar. Una muestra viva (el texto del lugar con lo que está elegido ahora, sobre el fondo de la página)
   y, debajo, una barra de herramientas que se acomoda en una o dos líneas: Tamaño (− Normal +) · Grosor ▾ · Espaciado ▾ · Aa AA aa · Color ▾. Todos son píldoras del mismo tono (sin cajas dentro de cajas); grosor, espaciado y
   color abren un panelcito (colgado debajo en la compu; una hoja abajo en el celular). Ningún control mide menos de 40 px de alto. */
.est-format { display: grid; gap: 12px; margin: 0 0 18px; }
.est-muestra { box-sizing: border-box; display: flex; align-items: center; height: 76px; padding: 0 18px; overflow: hidden; border-radius: var(--radius-m); background: var(--sw-pv, var(--surface)); box-shadow: inset 0 0 0 1px var(--line); color: var(--sw-ink, var(--ink)); }
.est-muestra-t { display: block; min-width: 0; max-width: 100%; max-height: 100%; line-height: 1.2; overflow-wrap: anywhere; transition: font-size 160ms var(--ease), letter-spacing 160ms var(--ease), color 160ms var(--ease); }
.est-muestra-boton { justify-content: center; }
.est-muestra-pill { display: inline-flex; max-width: 100%; padding: 12px 24px; border-radius: var(--radius-full); background: var(--sw-accent, var(--accent)); color: var(--sw-on, var(--on-accent)); }
.est-muestra-boton .est-muestra-t { color: inherit !important; }
.est-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 8px; }
.est-ctl { display: grid; gap: 4px; min-width: 0; margin: 0; }
.est-cap { font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.est-cap .est-badge { margin-left: 4px; vertical-align: 1px; }
.est-tb, .est-step, .est-case { box-sizing: border-box; height: 40px; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink); }
.est-tb { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 0; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color 160ms var(--ease), transform 120ms var(--ease); }
.est-tb.is-disabled, .est-step-btn[aria-disabled="true"] { color: var(--ink-muted); }
.est-tb.is-disabled { cursor: default; }
.est-step-btn[aria-disabled="true"] { cursor: default; opacity: 0.4; }
.est-tb:focus-visible, .est-step-btn:focus-visible, .est-pop-done:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.est-tb:active, .est-step-btn:active:not([aria-disabled="true"]) { transform: scale(0.97); }
.est-tb-val { white-space: nowrap; }
.est-caret { flex: none; width: 6px; height: 6px; margin: -3px 0 0 2px; border: solid currentColor; border-width: 0 2px 2px 0; opacity: 0.55; transform: rotate(45deg); transition: transform 160ms var(--ease); }
.est-tb[aria-expanded="true"] .est-caret { margin-top: 3px; transform: rotate(-135deg); }
@media (hover: hover) {
  .est-tb:not(.is-disabled):hover, .est-step-btn:not([aria-disabled="true"]):hover { background: color-mix(in srgb, var(--ink) 9%, var(--surface-sunken)); }
}
/* tamaño: − Normal + */
.est-step { display: inline-flex; align-items: center; }
.est-step-btn { display: grid; place-items: center; box-sizing: border-box; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color 160ms var(--ease), transform 120ms var(--ease); }
.est-step-val { min-width: 58px; padding: 0 2px; font-size: 14px; font-weight: 600; text-align: center; white-space: nowrap; }
/* mayúsculas: Aa AA aa, un solo control (la píldora de la elegida se ve igual que en los otros controles segmentados) */
.est-case { display: inline-flex; align-items: stretch; }
.est-case-opt { position: relative; display: block; cursor: pointer; }
.est-case-opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.est-case-g { display: grid; place-items: center; box-sizing: border-box; width: 40px; height: 100%; padding: 2px 0; font-size: 15px; font-weight: 700; line-height: 1; color: var(--ink-muted); }
.est-case-g::before { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: var(--radius-full); transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.est-case-opt { isolation: isolate; }
.est-case-opt input:checked + .est-case-g { color: var(--ink); }
.est-case-opt input:checked + .est-case-g::before { background: var(--surface); box-shadow: var(--shadow-1); }
.est-case-opt input:focus-visible + .est-case-g::before { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
@media (hover: hover) {
  .est-case-opt input:not(:checked):hover + .est-case-g::before { background: color-mix(in srgb, var(--ink) 9%, transparent); }
}
/* el panelcito */
.est-pop { position: relative; }
.est-pop-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; box-sizing: border-box; display: grid; gap: 10px; width: 352px; max-width: calc(100vw - 32px); padding: 12px; border-radius: var(--radius-m); background: var(--surface); box-shadow: var(--shadow-2), 0 0 0 1px var(--line); transition: opacity 140ms var(--ease), transform 140ms var(--ease); transform-origin: top left; }
.est-pop-panel.is-end { left: auto; right: 0; transform-origin: top right; }
.est-pop-panel[hidden] { display: none; }
.est-pop-panel:focus { outline: none; }
@starting-style { .est-pop-panel { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.est-pop-head { display: none; align-items: center; justify-content: space-between; gap: 12px; }
.est-pop-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.est-pop-done { min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--accent-ink); font-size: 15px; font-weight: 600; cursor: pointer; }
.est-pop-note { margin: 0; font-size: 12px; }
.est-pop-note[hidden], .est-fmt-hint[hidden], .seg-opt[hidden], .est-fmt[hidden], .est-cells[hidden], .est-cell[hidden] { display: none; }
.est-fmt-hint { margin: 0; font-size: 13px; }
.est-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.est-cell .est-cell-face { display: grid; justify-items: center; align-content: center; gap: 4px; box-sizing: border-box; min-height: 64px; padding: 8px 4px; border-radius: var(--radius-m); }
.est-cell-aa { font-size: 24px; line-height: 1.1; }
.est-cell-aa-300 { font-weight: 300; }
.est-cell-aa-400 { font-weight: 400; }
.est-cell-aa-500 { font-weight: 500; }
.est-cell-aa-600 { font-weight: 600; }
.est-cell-aa-700 { font-weight: 700; }
.est-cell-aa-800 { font-weight: 800; }
.est-cell-name { font-size: 12px; line-height: 1.15; text-align: center; color: var(--ink-muted); }
.est-cells[aria-disabled="true"] { opacity: 0.55; }
/* un dibujito de las separaciones entre letras: cuatro barritas con más o menos aire */
.est-gapi { display: inline-flex; align-items: center; gap: var(--g, 3px); }
.est-gapi i { display: block; width: 3px; height: 13px; border-radius: 2px; background: currentColor; }
.est-gapi-ajustado { --g: 1px; }
.est-gapi-normal { --g: 3px; }
.est-gapi-abierto { --g: 5px; }
.est-gapi-amplio { --g: 7px; }
.est-gapi-muyamplio { --g: 10px; }
.est-cells-esp .est-gapi { color: var(--ink); }
/* el color: Automático · Color de acento, unos colores a mano y Otro */
.est-colors, .est-colors-pills, .est-colors-sw { display: flex; flex-wrap: wrap; gap: 8px; }
.est-colors { display: grid; gap: 10px; }
.est-pill-opt .est-face { display: flex; align-items: center; box-sizing: border-box; min-height: 40px; padding: 0 14px; border-radius: var(--radius-full); font-size: 14px; font-weight: 600; white-space: nowrap; }
.est-swc-opt .est-face { display: grid; place-items: center; box-sizing: border-box; width: 40px; height: 40px; padding: 0; border-radius: var(--radius-full); }
.est-swc { display: block; flex: none; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--sw-fill, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent); }
.est-swc.is-auto { background: linear-gradient(135deg, var(--ink) 50%, var(--surface) 50%); }
.est-tb .est-swc { width: 20px; height: 20px; }
.est-ctl-color .est-tb-val { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* en el botón del color solo se ve el color (el nombre es para el lector de pantalla y está en el panelcito) */
.est-swc-opt .est-dot { width: 24px; height: 24px; }
.est-swc-opt .est-sw-name { display: none; }
.est-pop-panel .est-custom { margin-top: 0; }
.est-pop-panel .est-custom-fields { align-items: flex-end; }
@media (prefers-reduced-motion: reduce) {
  .est-muestra-t, .est-tb, .est-step-btn, .est-caret, .est-pop-panel, .est-case-g::before { transition: none; }
  .est-tb:active, .est-step-btn:active { transform: none; }
  @starting-style { .est-pop-panel { transform: none; } }
}
/* En el celular los panelcitos son una hoja abajo, con su título y «Listo», por encima de la barra de secciones (z-index 30) */
@media (max-width: 640px) {
  .est-pop-panel, .est-pop-panel.is-end { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 45; width: auto; max-width: none; max-height: 72vh; overflow-y: auto; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: var(--radius-l) var(--radius-l) 0 0; transform-origin: bottom center; }
  .est-pop-head { display: flex; }
  .est-cells { grid-template-columns: repeat(3, 1fr); }
  @starting-style { .est-pop-panel { opacity: 0; transform: translateY(16px); } }
}

/* La lista de fuentes por estilo: un rótulo de texto plano (no es una opción) sobre cada grupo; mismo tono que las etiquetas de los controles. */
.est-grp { display: grid; gap: 8px; }
.est-grp-label { margin: 10px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-muted); }
.est-list > .est-grp:first-child .est-grp-label { margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .est-face, .est-gf-chevron, .est-por-face { transition: none; }
  .est-tex::before, .est-tex::after { animation: none; will-change: auto; }
  .est-tex-destellos::before, .est-tex-destellos::after { opacity: 0.8; } /* quietos: los destellos se ven todos, sin parpadear */
}

/* ---------- app instalada: franja "Sin conexión" y aviso de instalación (pwa-ui.js) ---------- */

.offline { margin: 0 16px 8px; padding: 10px 14px; border-radius: var(--radius-m); background: var(--warning-soft); color: var(--warning); font-size: 14px; font-weight: 600; }
.install {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 16px 8px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); font-size: 15px;
}
.install p { flex: 1 1 220px; }
.install-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Configuración (settings.js) ---------- */

.set-card { display: grid; gap: 12px; margin: 0 0 12px; padding: 18px 16px; }
.set-card .group-title { margin: 0; }
.set-card .field { margin: 0; }
.set-card .hint, .set-card .err { margin-top: 0; }
.set-sub { margin: 4px 0 0; font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.set-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; overflow-wrap: anywhere; }
.set-label { color: var(--ink-muted); }
.set-block { display: grid; gap: 10px; }
.set-actions, .set-item-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.set-list { display: grid; gap: 8px; }
.set-item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface);
}
.set-item-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
#set-passkeys-list .set-item-main { display: grid; gap: 2px; }
.set-card form { display: grid; gap: 12px; }
.set-card > .btn, .set-card form > .btn, .set-block > .btn { justify-self: start; }

/* ---------- barra inferior de navegación (celular) ----------
   La misma barra de secciones (#tabs) se pasa abajo en pantallas angostas, con la zona segura del iPhone. La barra de acciones del editor
   (Agregar bloque, Publicar) queda justo encima, y solo se ve en "Tu página". */
:root { --nav-h: 64px; }
@media (max-width: 719px) {
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; gap: 4px;
    height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    border-radius: 0; border-top: 1px solid var(--line); background: var(--bar-glass);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .tabs [role="tab"] { min-height: 48px; padding: 0 4px; font-size: 14px; line-height: 1.2; }
  /* Como la de una app: arriba el ícono (Phosphor, en index.html; "regular" en las que no están elegidas y "fill" en la elegida), abajo el nombre. */
  .navrow .tabs { gap: 2px; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .navrow .tabs [role="tab"] {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 0 2px; font-size: 12px; line-height: 1.15; letter-spacing: -0.01em; white-space: nowrap; background: transparent; box-shadow: none;
  }
  .navrow .tabs [role="tab"][aria-selected="true"] { background: transparent; box-shadow: none; color: var(--ink); }
  .navrow .tab-ico-off { display: block; }
  .navrow [aria-selected="true"] .tab-ico-off { display: none; }
  .navrow [aria-selected="true"] .tab-ico-on { display: block; }
  .bottombar { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: 12px; }
  main { padding-bottom: calc(112px + var(--nav-h) + env(safe-area-inset-bottom)); }
  #app[data-tab="stats"] main, #app[data-tab="settings"] main { padding-bottom: calc(24px + var(--nav-h) + env(safe-area-inset-bottom)); }
  #toasts { bottom: calc(92px + var(--nav-h) + env(safe-area-inset-bottom)); }
  #app.has-nav .gate { padding-bottom: calc(32px + var(--nav-h) + env(safe-area-inset-bottom)); }
}

/* Con el alta de página abierta (#app.is-gated esconde las secciones), la barra se ve igual y Configuración se puede abrir. */
#app.is-gated.has-nav .tabs { display: flex; }
#app.is-gated.has-nav[data-tab="settings"] main { display: block; }
#app.is-gated.has-nav[data-tab="settings"] .gate { display: none; }

/* ---------- "Mails recibidos" (forms-ui.js): los envíos de los formularios de la página; oculta si la página no los recibe ---------- */
.forms-section { margin-top: 24px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.forms-title { margin: 0 0 4px; font-size: 18px; }
.forms-lead, .forms-count, .forms-empty, .forms-note { margin: 4px 0; font-size: 14px; }
.forms-actions { margin: 8px 0; }
.forms-list { list-style: none; margin: 8px 0; padding: 0; }
.forms-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.forms-who { display: flex; flex-direction: column; min-width: 0; }
.forms-email, .forms-name { overflow-wrap: anywhere; }
.forms-when { font-size: 12px; grid-column: 1; }
.forms-row > .btn, .forms-confirm { grid-column: 2; grid-row: 1 / span 2; justify-self: end; font-size: 13px; }
.forms-error { color: var(--danger); }

/* ---------- pestaña Estilo (main.js: renderStyle) ----------
   El cuerpo de style-sheet.js (buildStyleBody con `inline`) va dentro de la página, no en una capa: la página es la que se desplaza, así que las pestañas de
   adentro se pegan debajo de la barra de arriba y "Deshacer" queda pegado abajo (en el celular, justo arriba de la barra de secciones). La vista previa en vivo
   de la derecha (escritorio) es la misma de "Tu página". */
.style-host { display: flex; flex-direction: column; }
.style-host .sheet-body { flex: none; overflow: visible; padding: 4px 0 24px; }
.style-host .est-tabbar { top: var(--topbar-h, 76px); margin: 0 0 8px; padding-inline: 0; }
.est-foot-inline { position: sticky; bottom: 0; z-index: 4; margin: 0; padding: 12px 0 12px; }
/* La primera línea del contenido cae en el mismo lugar en las cuatro vistas: las pestañas de adentro no llevan aire arriba (lo da main). */
.style-host .sheet-body { padding-top: 0; }
.style-host .est-tabbar { padding-top: 0; }
/* Íconos de la barra de secciones: solo en el celular (las dos versiones están en index.html; acá se muestra una). */
.tab-ico { display: none; width: 24px; height: 24px; }
/* Con la barra de secciones pegada arriba (>= 720 px) las pestañas de adentro se pegan justo debajo de su franja (76 px: 12 + 52 + 12), no de la cabecera. */
@media (min-width: 720px) {
  .style-host .est-tabbar { top: 76px; }
}
@media (max-width: 719px) {
  .est-foot-inline { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  .est-foot-inline .est-undo { flex: 1; }
  #app[data-tab="style"] main { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  /* Las pestañas de adentro (Estilos · Textos...) llevan la clase .tabs, que en el celular es la barra fija de abajo: acá vuelven a ser una barra común. */
  .style-host .est-tabs {
    position: static; z-index: auto; height: auto; margin: 0; padding: 4px; border-top: 0; border-radius: var(--radius-full);
    background: var(--surface-sunken); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* ---------- asistente de alta (alta.js): rubro, fondo, letras y datos ---------- */
.alta-card { gap: 14px; }
.alta-card .alta-step { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.alta-card h2 { margin: 0; }
.alta-card .alta-later { margin: -6px 0 0; }
.alta-form { display: block; }
.alta-fs { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.alta-fs:disabled { opacity: 0.7; }
.alta-body { display: grid; gap: 14px; min-width: 0; }
.alta-body .group-title { margin: 0; }
.alta-err { margin: 0; }
.alta-err:empty { display: none; }
.alta-secondary { display: flex; gap: 8px; }
.alta-secondary .btn { flex: 1 1 0; }
.alta-skip-hint { margin: 0; }

/* Cada opción es un radio de verdad, invisible y encima de su cara (como .est-opt): el teclado y el lector de pantalla funcionan solos. */
.alta-rubros, .alta-fondos, .alta-combos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.alta-rubro, .alta-fondo, .alta-combo { position: relative; display: block; min-width: 0; cursor: pointer; }
.alta-rubro input, .alta-fondo input, .alta-combo input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.alta-fondo.is-locked, .alta-fondo.is-locked input, .alta-combo.is-locked, .alta-combo.is-locked input { cursor: not-allowed; }

.alta-rubro-face { display: grid; align-content: start; gap: 6px; height: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.alta-rubro input:checked + .alta-rubro-face { border-color: var(--accent-ink); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.alta-rubro input:focus-visible + .alta-rubro-face { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
@media (hover: hover) { .alta-rubro input:not(:checked):hover + .alta-rubro-face { background: var(--surface-sunken); } }
.alta-rubro-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink); }
.alta-rubro input:checked + .alta-rubro-face .alta-rubro-ico { background: var(--surface); color: var(--accent-ink); }
.alta-rubro-text { display: grid; gap: 2px; min-width: 0; }
.alta-rubro-name { font-size: 15px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.alta-rubro-desc { font-size: 13px; line-height: 1.35; color: var(--ink-muted); overflow-wrap: anywhere; }
.alta-rubro-ex { display: none; font-size: 12px; color: var(--ink-muted); }
.rubro-ico { display: block; }

/* La cara de un fondo (y de una combinación de letras): el fondo o el degradé, la superficie de las tarjetas y la tinta, como propiedades --sw-* que pone alta.js. */
.alta-fondo-face, .alta-combo-face { --sw-line: color-mix(in srgb, var(--sw-ink, var(--ink)) 18%, transparent); position: relative; display: grid; align-content: start; gap: 8px; box-sizing: border-box; min-height: 84px; padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--sw-bg, var(--sw-fill, var(--surface))); color: var(--sw-ink, var(--ink)); }
.alta-fondo-face.is-light, .alta-combo-face.is-light { border-color: var(--line); }
.alta-fondo-mini { display: flex; align-items: center; box-sizing: border-box; height: 24px; padding: 0 10px; border: 1px solid var(--sw-line); border-radius: var(--radius-full); background: var(--sw-surface, var(--surface)); }
.alta-fondo-line { flex: 1; height: 4px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--sw-ink, var(--ink)) 45%, transparent); }
.alta-fondo-name, .alta-combo-name { font-size: 13px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.alta-fondo input:checked + .alta-fondo-face, .alta-combo input:checked + .alta-combo-face { box-shadow: 0 0 0 3px var(--accent-ink); border-color: transparent; }
.alta-fondo input:focus-visible + .alta-fondo-face, .alta-combo input:focus-visible + .alta-combo-face { outline: 2px solid var(--ink); outline-offset: 4px; }
.alta-fondo.is-locked .alta-fondo-face, .alta-combo.is-locked .alta-combo-face { opacity: 0.62; }
.alta-fondo-face .est-badge, .alta-combo-face .est-badge { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.alta-fondo-wrap { display: grid; gap: 6px; min-width: 0; }
.alta-accents { display: flex; justify-content: center; gap: 6px; }
.alta-dot { width: 32px; height: 32px; padding: 0; border: 3px solid var(--surface); border-radius: var(--radius-full); background: var(--dot, var(--accent)); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; }
.alta-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.alta-dot:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.alta-dot:disabled { cursor: not-allowed; opacity: 0.5; }

.alta-portada { display: grid; gap: 8px; }
.alta-portada .hint { margin: 0; }
.alta-portada-img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-m); box-shadow: inset 0 0 0 1px var(--line); background: var(--surface-sunken); }
.alta-portada-img[hidden] { display: none; }

.alta-combo-face { gap: 4px; min-height: 120px; height: 100%; }
.alta-combo-frase { font-size: 15px; line-height: 1.2; }
.alta-combo-titulo { font-size: 17px; line-height: 1.15; }
.alta-combo-texto { font-size: 13px; line-height: 1.3; opacity: 0.85; }
.alta-combo-name { margin-top: auto; padding-top: 4px; }

.alta-card .field { display: grid; gap: 6px; }
.alta-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.alta-pick:focus-within > .btn:first-child { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.alta-pick > [hidden] { display: none; }
.alta-thumb-slot { flex: none; display: flex; }
.alta-thumb { flex: none; width: 56px; height: 56px; border-radius: var(--radius-m); object-fit: cover; background: var(--surface-sunken); }
.alta-file-name { flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.alta-file-name.is-empty { color: var(--ink-muted); }
.alta-card .field.is-locked label { color: var(--ink-muted); }

@media (min-width: 640px) {
  .alta-fondos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .alta-combos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .alta-rubro-ex { display: block; }
}

/* El aviso de la página recién creada con el asistente. */
.welcome { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; background: var(--accent-soft); color: var(--ink); }
.welcome p { flex: 1 1 220px; margin: 0; }
.welcome-actions { display: flex; align-items: center; gap: 4px; }


/* ---------- demo pública (/demo) ----------
   El aviso de arriba es fijo y mide lo que mida su texto (demo-ui.js lo copia a --demo-h): el cuerpo baja ese alto y lo que se pega arriba (barra de arriba, franja de secciones, vista previa en vivo,
   pestañas de Estilo) se pega justo debajo de él en vez de quedar tapado. Las hojas y los diálogos (z-index 50) se abren por encima, como siempre. */
.demo-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px; background: var(--ink); color: var(--on-ink);
}
.demo-banner-text { margin: 0; flex: 0 1 auto; font-size: 14px; font-weight: 600; line-height: 1.35; text-align: center; text-wrap: balance; }
.demo-banner-cta { min-height: 36px; padding: 0 16px; font-size: 14px; background: var(--accent); color: var(--on-accent); border-color: transparent; }
@media (max-width: 479px) {
  .demo-banner { gap: 4px 12px; padding: calc(6px + env(safe-area-inset-top)) 12px 6px; }
  .demo-banner-text { font-size: 13px; line-height: 1.3; }
  .demo-banner-cta { min-height: 32px; padding: 0 14px; font-size: 13px; }
  body.is-demo .account-actions { gap: 6px; }
  body.is-demo .account-actions .btn { min-height: 40px; padding: 0 12px; font-size: 14px; }
}
@media (hover: hover) { .demo-banner-cta:hover { background: var(--accent); opacity: 0.9; } }
body.is-demo { padding-top: var(--demo-h, 0px); }
body.is-demo .topbar { top: var(--demo-h, 0px); }
body.is-demo .navrow { top: var(--demo-h, 0px); }
body.is-demo .style-host .est-tabbar { top: calc(var(--topbar-h, 76px) + var(--demo-h, 0px)); }
@media (min-width: 1080px) {
  body.is-demo .live:not([hidden]) { top: calc(96px + var(--demo-h, 0px)); }
}

/* El selector de rubro: las tarjetas del asistente de alta, pero cada una es un botón que abre el ejemplo. */
.demo-picker { max-width: 720px; margin-inline: auto; }
.alta-rubro-pick { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.alta-rubro-pick:disabled { cursor: progress; opacity: 0.6; }
.alta-rubro-pick[aria-busy="true"] { opacity: 1; }
.alta-rubro-pick[aria-busy="true"] .alta-rubro-face { border-color: var(--accent-ink); background: var(--accent-soft); }
.alta-rubro-pick:focus-visible { outline: none; }
.alta-rubro-pick:focus-visible .alta-rubro-face { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
@media (hover: hover) { .alta-rubro-pick:not(:disabled):hover .alta-rubro-face { background: var(--surface-sunken); } }
@media (min-width: 720px) { .demo-rubros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.demo-picker-status { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--ink-muted); text-align: center; }
.share-note { margin: 0 0 4px; padding: 10px 12px; border-radius: var(--radius-m); background: var(--accent-soft); color: var(--ink); }

/* ---------- arrastrar bloques ---------- */

/* El asa reemplaza a las flechas de subir y bajar (ocultar y borrar quedan). */
/* Subir y bajar quedan para lector de pantalla, switch y voz (WCAG 2.5.7): fuera de la vista hasta que el teclado llega a ellos. */
.block-actions .act[data-act="up"]:not(:focus-visible), .block-actions .act[data-act="down"]:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* El asa va al inicio de la fila, antes del ícono del tipo. Solo cuando existe (drag.js la pone al dibujar la lista). */
.block:has(> .drag-handle) { grid-template-columns: 40px minmax(0, 1fr); }
.block:has(> .drag-handle) > .drag-handle { grid-column: 1; grid-row: 1; }
.block:has(> .drag-handle) > .block-main { grid-column: 2; grid-row: 1; }
.block:has(> .drag-handle) > .block-actions { grid-column: 2; grid-row: 2; }
@media (min-width: 480px) {
  .block:has(> .drag-handle) { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .block:has(> .drag-handle) > .block-actions { grid-column: 3; grid-row: 1; }
}

/* touch-action: none solo acá: el resto de la página se desplaza con el dedo como siempre. */
.drag-handle {
  display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 0;
  border-radius: var(--radius-full); background: transparent; color: var(--ink-muted);
  cursor: grab; touch-action: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
.drag-handle svg { display: block; pointer-events: none; }
.drag-handle:active { cursor: grabbing; }
@media (hover: hover) {
  .drag-handle:hover { background: var(--surface-sunken); color: var(--ink); }
}

/* Mientras se arrastra: sin selección de texto y con la mano cerrada en toda la página. */
.is-sorting, .is-sorting * { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.is-sorting .blocks { position: relative; }

/* Las demás tarjetas se corren con un transform; la levantada sigue al puntero sin demora. */
.is-sorting .block:not(.is-dragging) { transition: transform 160ms var(--ease), border-color 160ms var(--ease); }
.is-sorting .block.is-dragging {
  position: relative; z-index: 3; background: var(--surface); box-shadow: var(--shadow-2);
  outline: 2px solid var(--accent-ink); outline-offset: 0; will-change: transform; transition: box-shadow 160ms var(--ease);
}
.is-sorting .block.is-dragging.is-settling { transition: transform 160ms var(--ease), box-shadow 160ms var(--ease); }

/* El lugar donde va a caer: del mismo alto que la tarjeta, con borde punteado. */
.drag-placeholder {
  position: absolute; top: 0; left: 0; right: 0; z-index: 0; box-sizing: border-box; pointer-events: none;
  border: 2px dashed var(--line-strong); border-radius: var(--radius-l); transition: transform 160ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .is-sorting .block:not(.is-dragging), .is-sorting .block.is-dragging, .is-sorting .block.is-dragging.is-settling, .drag-placeholder { transition: none; }
}