/* ============ MURO · Design System — Componentes UI ============
   Componentes compartidos por paneles (admin/panel) y auth.
   La web pública del tenant usa un subconjunto (.btn, .field). */

/* ---- Layout ---- */
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--content-pad); }

/* ---- Botones ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--hit-target); padding: 0 22px; border-radius: var(--radius-pill);
  font: 600 var(--text-sm)/1 var(--font-body); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.55; pointer-events: none; }
.btn-primary { background: var(--accent); color: var(--on-accent) !important; }
.btn-primary:hover { background: var(--accent-strong); }
.btn-outline { border-color: var(--border-strong); color: var(--text-heading) !important; background: var(--surface-card); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent) !important; }
.btn-ghost { color: var(--text-body) !important; background: transparent; }
.btn-ghost:hover { background: var(--surface-raised); color: var(--text-heading) !important; }
.btn-danger { background: var(--danger); color: #FFF6F5 !important; }
.btn-danger:hover { filter: brightness(0.92); }
.btn-sm { min-height: 36px; padding: 0 16px; font-size: var(--text-xs); }
.btn-lg { min-height: 54px; padding: 0 30px; font-size: var(--text-base); }

.icon-btn {
  display: inline-grid; place-items: center; width: var(--hit-target); height: var(--hit-target);
  border-radius: 50%; cursor: pointer; background: var(--surface-raised);
  color: var(--text-heading); border: 1.5px solid var(--border-subtle);
  transition: background var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--accent-soft); }

/* ---- Tarjetas ---- */
.card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6);
}
.card-hover { transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ---- Formularios ---- */
.field { display: grid; gap: 7px; }
.field > label { font: 600 var(--text-sm) var(--font-body); color: var(--text-heading); }
.field .help { font-size: var(--text-xs); color: var(--text-muted); margin: 0; }
.field .error-message { font-size: var(--text-xs); color: var(--danger); font-weight: 600; }
.field.has-error .input { border-color: var(--danger); }

.input, select.input, textarea.input {
  width: 100%; min-height: 48px; padding: 10px 16px; font: 400 var(--text-base) var(--font-body);
  color: var(--text-heading); background: var(--surface-card);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.input { min-height: 110px; resize: vertical; line-height: var(--leading-body); }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 21px) 55%, calc(100% - 16px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 44px; }
.input-color { padding: 4px; height: 48px; width: 64px; min-height: 0; cursor: pointer; }

/* ---- Switch ---- */
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 48px; height: 28px; border-radius: 999px; background: var(--border-strong);
  transition: background var(--dur-fast) var(--ease-out); flex: none;
}
.switch .track::after {
  content: ""; display: block; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; margin: 3px; transition: transform var(--dur-fast) var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.switch input:checked + .track { background: var(--success); }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:focus-visible + .track { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
  border-radius: var(--radius-pill); font: 600 var(--text-xs) var(--font-body);
  background: var(--surface-raised); color: var(--text-body);
}
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger); }
.badge-accent  { background: var(--accent-soft);  color: var(--accent); }

/* ---- Tabla ---- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th {
  text-align: left; font: 600 var(--text-xs) var(--font-body); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted); padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.table td { padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.table tbody tr:hover { background: var(--surface-raised); }

/* ---- Toasts ---- */
#toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: grid; gap: 10px; width: min(92vw, 420px); }
.toast {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  background: var(--surface-inverse); color: var(--text-inverse);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  font: 600 var(--text-sm) var(--font-body);
  animation: toast-in var(--dur-base) var(--ease-out);
}
.toast.is-error { background: var(--danger); color: #FFF6F5; }
.toast.is-leaving { opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

/* ---- Modal ---- */
.modal[open] { display: grid; }
.modal {
  border: 0; padding: 0; background: transparent; place-items: center;
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; z-index: 150;
}
.modal::backdrop { background: rgba(23,20,18,0.55); backdrop-filter: blur(3px); }
.modal-box { background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-6); width: min(92vw, 460px); display: grid; gap: var(--space-4); }

/* ---- Shell de paneles (sidebar + contenido) ---- */
/* `minmax(0, 1fr)`: sin el 0 la columna crece hasta el contenido más ancho
   (una tabla larga) y toda la aplicación gana scroll horizontal. */
.shell { display: grid; min-height: 100dvh; grid-template-columns: minmax(0, 1fr); }
.sidebar {
  display: none; flex-direction: column; gap: var(--space-2); padding: var(--space-5);
  background: var(--surface-card); border-right: 1px solid var(--border-subtle);
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
}
.sidebar .brand { font: 700 var(--text-lg) var(--font-body); color: var(--text-heading); text-decoration: none; letter-spacing: -0.02em; padding: 6px 12px 18px; }
.sidebar .brand small { display: block; font: 600 11px var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--detail); }
.snav { display: grid; gap: 2px; }
.snav a {
  display: flex; align-items: center; gap: 12px; min-height: var(--hit-target);
  padding: 0 14px; border-radius: var(--radius-md); text-decoration: none;
  font: 600 var(--text-sm) var(--font-body); color: var(--text-body);
  transition: background var(--dur-fast) var(--ease-out);
}
.snav a:hover { background: var(--surface-raised); color: var(--text-heading); }
.snav a.active { background: var(--accent-soft); color: var(--accent); }
.snav a svg, .snav a i { width: 20px; height: 20px; flex: none; }
.snav .sep { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-3) 0; }
.main { padding: var(--space-6) var(--content-pad) var(--space-9); max-width: 1100px; width: 100%; margin: 0 auto; }
.topbar {
  display: flex; align-items: center; gap: var(--space-3); min-height: 68px;
  padding: 0 var(--content-pad); border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--surface-page) 82%, transparent);
  backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 100;
}
.topbar .page-title { font: 650 var(--text-lg) var(--font-body); color: var(--text-heading); margin-right: auto; }
@media (min-width: 960px) {
  .shell { grid-template-columns: 260px minmax(0, 1fr); }
  .sidebar { display: flex; }
  .topbar .only-mobile { display: none; }
}
/* Menú «Más»: flota sobre el contenido justo encima de la barra inferior,
   sin importar por dónde vaya el usuario en la página. */
.mobile-nav { display: none; }
.mobile-nav.open {
  display: grid; gap: 2px; position: fixed; z-index: 130;
  left: var(--content-pad); right: var(--content-pad);
  bottom: calc(80px + env(safe-area-inset-bottom));
  max-height: 62dvh; overflow-y: auto;
  padding: var(--space-3); border-radius: var(--radius-lg);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  animation: sheet-in var(--dur-base) var(--ease-out);
}
@media (min-width: 960px) { .mobile-nav.open { display: none; } }

/* ---- Cabecera de página ---- */
.page-head { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4); margin-bottom: var(--space-6); }
.page-head h1 { font-size: var(--text-2xl); letter-spacing: -0.02em; }
.page-head p { margin: 4px 0 0; color: var(--text-muted); font-size: var(--text-sm); max-width: 60ch; }
/* Sin `wrap` los botones fijan un ancho mínimo mayor que el móvil y toda
   la vista acaba con scroll horizontal. */
.page-head .actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---- Stats ---- */
.stats-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stat-card { display: grid; gap: 2px; }
.stat-card .label { font: 600 var(--text-xs) var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.stat-card .value { font: 700 var(--text-2xl) var(--font-body); color: var(--text-heading); letter-spacing: -0.02em; }
.stat-card .hint { font-size: var(--text-xs); color: var(--text-muted); }
/* Cabecera de la tarjeta: la etiqueta manda y a la derecha va el dato
   pequeño (lo consumido, el «3 de 5») o el botón de compartir. */
.stat-card .stat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; }
/* Las tarjetas sin cabecera reservan el mismo alto: en una fila, los
   números quedan a la misma altura tenga o no botón la de al lado. */
.stat-card > .label { min-height: 32px; display: flex; align-items: center; }
.stat-card .stat-side { font: 600 var(--text-xs) var(--font-body); color: var(--text-muted); white-space: nowrap; }
.stat-card .meter { margin: 8px 0 6px; }
.icon-btn-sm { width: 32px; height: 32px; }

/* ---- Barra de uso (espacio de fotos, cupos del plan) ----
   El color avisa antes de que sea un problema: ámbar al 70%, rojo al 90%. */
.meter { height: 8px; border-radius: var(--radius-pill); background: var(--surface-raised); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: inherit; background: var(--success); transition: width var(--dur-base) var(--ease-out); }
.meter.is-warn > i { background: var(--warning); }
.meter.is-full > i { background: var(--danger); }

/* Un enlace que en realidad es un botón (compartir desde un texto). */
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--accent); text-decoration: underline;
}

/* ---- Reordenar arrastrando el asa ---- */
[data-sortable] .sort-item { transition: box-shadow var(--dur-fast) var(--ease-out); }
.sort-item.dragging {
  box-shadow: 0 0 0 2px var(--accent), var(--shadow-lg);
  opacity: 0.92; position: relative; z-index: 5;
}
.sort-item.dragging .drag-handle { cursor: grabbing; }
/* `touch-action: none`: sin esto el dedo desplaza la página en vez de mover. */
.sort-item .drag-handle { cursor: grab; color: var(--text-muted); touch-action: none; user-select: none; }

.dropzone.dz-slim { min-height: 92px; }
.dropzone {
  display: grid; place-items: center; gap: var(--space-2); text-align: center;
  min-height: 150px; padding: var(--space-5); cursor: pointer;
  border: 2px dashed var(--border-strong); border-radius: var(--radius-md);
  color: var(--text-muted); font: 600 var(--text-sm) var(--font-body);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.dropzone img { max-height: 120px; border-radius: var(--radius-sm); }
.dropzone.has-image { border-style: solid; min-height: 0; }
.img-ops { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Estados vacíos ---- */
.empty { display: grid; place-items: center; gap: var(--space-3); text-align: center; padding: var(--space-8) var(--space-5); color: var(--text-muted); }
.empty h3 { font: 650 var(--text-lg) var(--font-body); color: var(--text-heading); }
.empty p { margin: 0; font-size: var(--text-sm); max-width: 44ch; }

/* ---- Dirección del tenant (registro): se muestra, no se escribe ---- */
.slug-box {
  display: flex; align-items: center; min-height: 48px; padding: 10px 16px; gap: 1px;
  background: var(--surface-raised); border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--text-muted);
}
.slug-box .slug-input {
  flex: 1 1 auto; min-width: 0; padding: 0; border: 0; background: transparent; cursor: default;
  font: 650 var(--text-base) var(--font-body); color: var(--text-heading); text-overflow: ellipsis;
}
.slug-box .slug-input:focus { outline: none; }
.slug-box .slug-fixed { flex: none; }
.field.has-error .slug-box { border-color: var(--danger); }
.slug-ok { color: var(--success) !important; font-weight: 600; }
.slug-busy { color: var(--danger) !important; font-weight: 600; }

/* ---- Campana de avisos (Panel Global) ---- */
.bell { position: relative; display: flex; }
.bell-badge {
  position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 999px; background: var(--danger);
  color: #fff; font: 650 11px/1 var(--font-body);
}
.bell-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 200; width: min(92vw, 330px);
  display: grid; gap: 2px; padding: var(--space-4) 0; background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.bell-panel[hidden] { display: none; }
.bell-item {
  display: grid; gap: 2px; padding: var(--space-3) var(--space-4); color: inherit; text-decoration: none;
  border-left: 3px solid transparent; font-size: var(--text-sm);
}
.bell-item:hover { background: var(--accent-soft); }
.bell-item.is-unread { border-left-color: var(--accent); }
.notif { color: inherit; text-decoration: none; }
.notif:hover b { text-decoration: underline; }
.notif.is-unread b { color: var(--text-heading); }
/* El número de WhatsApp solo aparece cuando el botón es de WhatsApp. */
.cta-card:not(:has(#cta_mode option[value="whatsapp"]:checked)) [data-cta-whatsapp] { display: none; }

/* Lista de avisos del panel del cliente: icono, texto y estado. */
.notif { display: flex; align-items: flex-start; gap: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.notif:first-child { border-top: 0; padding-top: 0; }
.notif-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text-muted); }
.notif.is-unread .notif-icon { background: var(--accent-soft); color: var(--accent); }
.notif-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }

/* ---- Auth ---- */
.auth-page { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-5); }
/* `100%` y no `94vw`: el ancho de la pantalla no sabe del hueco que deja el
   padding de `.auth-page`, así que en un móvil la tarjeta salía más ancha
   que ese hueco, se pasaba por la derecha y la pantalla entera quedaba
   descentrada. `100%` es justo el hueco. */
.auth-card { width: min(100%, 440px); display: grid; gap: var(--space-5); }
.auth-card .logo { text-align: center; font: 700 26px var(--font-body); letter-spacing: -0.02em; color: var(--text-heading); text-decoration: none; }
.auth-card .logo small { display: block; font: 600 11px var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--detail); margin-top: 2px; }

/* ================== Componentes de app (v2) ================== */

/* ---- Barra inferior móvil ---- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface-card) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-subtle);
}
.tabbar a, .tabbar button {
  display: grid; justify-items: center; gap: 3px; padding: 7px 4px; border: 0; cursor: pointer;
  background: transparent; text-decoration: none; border-radius: var(--radius-md);
  font: 600 11px var(--font-body); color: var(--text-muted); min-height: var(--hit-target);
}
.tabbar a.active { color: var(--accent); }
.tabbar a svg, .tabbar button svg, .tabbar a i, .tabbar button i { width: 22px; height: 22px; }
@media (min-width: 960px) { .tabbar { display: none; } }
@media (max-width: 959px) { .main { padding-bottom: 104px; } }

/* ---- Hoja inferior (móvil) / modal (escritorio) ---- */
.sheet { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; }
.sheet::backdrop { background: rgba(23,20,18,0.5); backdrop-filter: blur(3px); }
.sheet[open] { display: grid; align-items: end; justify-items: center; position: fixed; inset: 0; }
.sheet-box {
  width: 100%; max-height: 92dvh; overflow-y: auto; background: var(--surface-page);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg);
  padding: 0 var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
  animation: sheet-in var(--dur-base) var(--ease-out);
}
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0.6; } }
/* La cabecera se queda pegada arriba y trae el hueco superior: si el hueco
   fuera de la hoja, el contenido se vería pasar por encima al hacer scroll. */
.sheet-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); position: sticky; top: 0; background: var(--surface-page); padding: var(--space-5) 0 var(--space-3); z-index: 3; }
.sheet-head h2 { font-size: var(--text-lg); margin-right: auto; }
@media (min-width: 760px) {
  .sheet[open] { align-items: center; }
  .sheet-box { width: min(96vw, 1040px); border-radius: var(--radius-xl); max-height: 88dvh; padding: 0 var(--space-6) var(--space-6); }
  .sheet-head { padding-top: var(--space-6); }
}
/* Editar una sección es la tarea larga del panel: escribir, elegir fotos y
   mirar la vista previa a la vez. Esa hoja ocupa casi toda la pantalla. */
.sheet-box:has(.sec-form) { height: 96dvh; max-height: 96dvh; }
@media (min-width: 760px) {
  .sheet-box:has(.sec-form) { width: min(98vw, 1440px); height: 94dvh; max-height: 94dvh; }
}

/* ---- Control segmentado ---- */
.seg { display: inline-flex; padding: 4px; gap: 2px; background: var(--surface-raised); border-radius: var(--radius-pill); }
.seg button {
  min-height: 36px; padding: 0 16px; border: 0; cursor: pointer; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-muted); font: 600 var(--text-xs) var(--font-body);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.seg button[aria-pressed="true"] { background: var(--surface-card); color: var(--text-heading); box-shadow: var(--shadow-sm); }

/* ---- Filtros tipo chip ---- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips button {
  min-height: 38px; padding: 0 16px; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--surface-card); color: var(--text-body); border: 1.5px solid var(--border-subtle);
  font: 600 var(--text-xs) var(--font-body); transition: all var(--dur-fast) var(--ease-out);
}
.chips button:hover { border-color: var(--border-strong); }
.chips button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.chips[hidden] { display: none; }

/* ---- Fondos incluidos: se eligen viendo la miniatura ---- */
.bg-picker { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.bg-picker button {
  display: grid; gap: 6px; padding: 6px; cursor: pointer; text-align: center;
  background: var(--surface-card); border: 2px solid var(--border-subtle); border-radius: var(--radius-md);
  font: 600 var(--text-xs) var(--font-body); color: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.bg-picker button:hover { border-color: var(--border-strong); }
.bg-picker button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.bg-picker img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); }

/* ---- Texturas: se eligen viendo el motivo, no su nombre ----
   Cada muestra toma su SVG de la clase .tex--{código} que declara
   element('panel/texture_css'). El doble guion las aísla de las
   clases de este componente: un código como `grid` daría si no
   `.tex-grid`, que es la rejilla del propio selector.          */
.tex-filter { margin-bottom: var(--space-2); }
.tex-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.tex-grid > button {
  display: grid; gap: 6px; padding: 6px; cursor: pointer; text-align: center;
  background: var(--surface-card); border: 2px solid var(--border-subtle); border-radius: var(--radius-md);
  font: 600 var(--text-xs) var(--font-body); color: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.tex-grid > button:hover { border-color: var(--border-strong); }
.tex-grid > button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.tex-swatch {
  position: relative; height: 64px; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-sm); background: var(--surface-raised);
}
.tex-swatch::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--sec-texture);
  background-size: var(--sec-texture-size, auto);
  opacity: var(--sec-texture-opacity, 0.3);
  mix-blend-mode: var(--sec-texture-blend, normal);
}
/* «Sin textura»: una diagonal deja claro que se quita, no que falta. */
.tex-swatch.is-none::after {
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--border-strong) 50%, transparent calc(50% + 1px));
  opacity: 1;
}

/* ---- Guía plegable (tutoriales del panel) ---- */
.guide { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); }
.guide > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 14px 16px; font: 600 var(--text-sm) var(--font-body); color: var(--text-heading);
}
.guide > summary::-webkit-details-marker { display: none; }
.guide > summary::after { content: '⌄'; margin-left: auto; line-height: 1; transition: transform var(--dur-fast) var(--ease-out); }
.guide[open] > summary::after { transform: rotate(180deg); }
.guide-body { display: grid; gap: var(--space-3); padding: 0 16px 16px; font-size: var(--text-sm); color: var(--text-body); }
.guide-body p { margin: 0; }
.guide-body ol, .guide-body ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }

/* ---- Vista previa escalada (iframe del render real) ----
   El iframe se pinta al tamaño real de un navegador y se reduce con
   transform; App.paintPreviews() calcula la escala según el ancho
   disponible (ver webroot/js/app.js).                              */
.preview-frame {
  --pv-width: 1280px; --pv-height: 820px; --pv-scale: 0.25;
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-md); background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  height: calc(var(--pv-height) * var(--pv-scale));
}
.preview-frame iframe {
  position: absolute; top: 0; left: var(--pv-offset, 0px); border: 0;
  width: var(--pv-width); height: var(--pv-height);
  transform: scale(var(--pv-scale)); transform-origin: 0 0; pointer-events: none;
}
/* En modo móvil el lienzo es más estrecho que la caja: se centra con
   --pv-offset (lo calcula App.paintPreviews) en vez de quedar pegado. */
.preview-frame.is-mobile { --pv-width: 430px; --pv-height: 860px; }
.preview-frame.is-tall { --pv-height: 1100px; }
/* `is-live` deja usar la página de dentro: sin esto no se puede ni hacer scroll. */
.preview-frame.is-live iframe { pointer-events: auto; }

/* ---- Tarjeta elegible (catálogo de diseños) ---- */
.pick-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pick-card {
  display: grid; gap: 0; cursor: pointer; overflow: hidden; position: relative;
  background: var(--surface-card); border: 2px solid var(--border-subtle);
  border-radius: var(--radius-lg); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.pick-card { text-decoration: none; }
.pick-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pick-card:focus-within, .pick-card.is-selected { border-color: var(--accent); }
.pick-card input { position: absolute; opacity: 0; pointer-events: none; }
.pick-card .preview-frame { border: 0; border-radius: 0; border-bottom: 1px solid var(--border-subtle); }
.pick-card .pick-meta { padding: var(--space-4); display: grid; gap: 4px; }
.pick-card .pick-meta b { font: 650 var(--text-sm) var(--font-body); color: var(--text-heading); }
.pick-card .pick-meta span { font-size: var(--text-xs); color: var(--text-muted); }
.pick-card .pick-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.pick-card.is-selected::after {
  content: "✓"; position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 15px;
}

/* ---- Editor con vista previa lateral ---- */
.split { display: grid; gap: var(--space-5); align-items: start; }
/* Una columna de rejilla nunca baja de su contenido mínimo: sin esto una
   tarjeta ancha empuja toda la página y aparece el scroll horizontal. */
.split > * { min-width: 0; }
@media (min-width: 1100px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); } .split .sticky { position: sticky; top: 88px; } }

/* ---- Pestañas ---- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-5); overflow-x: auto; }
.tabs button {
  border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  padding: 12px 16px; font: 600 var(--text-sm) var(--font-body); color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- Editor de código ---- */
.code-editor {
  width: 100%; min-height: 420px; padding: var(--space-4); tab-size: 2; white-space: pre;
  font: 400 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-heading); background: var(--surface-raised);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); resize: vertical;
}
.code-editor:focus { border-color: var(--accent); outline: none; }
.code-hint { font: 400 var(--text-xs) var(--font-body); color: var(--text-muted); }
.code-hint code { background: var(--surface-raised); padding: 1px 6px; border-radius: 6px; font-size: 12px; }

/* ---- Esqueletos de carga ---- */
.skeleton { background: linear-gradient(90deg, var(--surface-raised) 25%, var(--surface-card) 50%, var(--surface-raised) 75%); background-size: 200% 100%; animation: sk 1.4s linear infinite; border-radius: var(--radius-sm); }
@keyframes sk { to { background-position: -200% 0; } }

/* ---- Mosaico de fotos (biblioteca) ---- */
.media-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.media-cell { position: relative; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-raised); border: 2px solid transparent; cursor: pointer; }
.media-cell img { width: 100%; height: 100%; object-fit: cover; }
.media-cell.is-selected { border-color: var(--accent); }
.media-cell .ops { position: absolute; inset: auto 8px 8px 8px; display: flex; gap: 6px; justify-content: flex-end; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.media-cell:hover .ops, .media-cell:focus-within .ops { opacity: 1; }

/* ---- Encuadre de una foto ---- */
/* La caja se ajusta a la foto (`fit-content`): así el punto que se toca
   cae exactamente donde el visitante verá el centro del recorte. */
.focus-pick {
  position: relative; cursor: crosshair; touch-action: none; overflow: hidden;
  width: fit-content; max-width: 100%; margin-inline: auto; border-radius: var(--radius-md);
}
.focus-pick img {
  display: block; max-width: 100%; max-height: 58dvh; width: auto; height: auto;
  user-select: none; -webkit-user-drag: none;
}
.focus-dot {
  position: absolute; left: var(--fx, 50%); top: var(--fy, 50%); transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; pointer-events: none;
  border: 3px solid #FFFFFF; box-shadow: 0 0 0 2px rgba(12, 10, 9, 0.45), 0 4px 14px rgba(12, 10, 9, 0.5);
}

/* ---- Lista de campos repetibles ---- */
.rep-item { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface-raised); border-radius: var(--radius-md); }
.rep-item .rep-head { display: flex; align-items: center; gap: 10px; }
.rep-item .rep-head b { font: 650 var(--text-sm) var(--font-body); color: var(--text-heading); margin-right: auto; }
.rep-item .rep-head .drag-handle { display: inline-flex; }
/* Con foto, la fila se compacta: miniatura a un lado y sus textos al otro.
   Así una galería de veinte fotos se ordena sin recorrer la pantalla. */
@media (min-width: 560px) {
  /* La miniatura a un lado y sus botones al otro: la fila baja de 400px
     a ~180px y una galería larga se ordena sin recorrer la pantalla. */
  .rep-item.is-photo .field:has(.dropzone) {
    display: grid; grid-template-columns: 148px minmax(0, 1fr);
    gap: var(--space-3); align-items: start;
  }
  .rep-item.is-photo .field:has(.dropzone) > label { grid-column: 1 / -1; }
}
.rep-item.is-photo .dropzone { min-height: 104px; padding: var(--space-3); }
.rep-item.is-photo .dropzone img { max-height: 104px; }
.rep-item.is-photo .dz-hint { font-size: var(--text-xs); }

/* ---- Utilidades ---- */
.muted { color: var(--text-muted); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.overline { font: 600 13px var(--font-body); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--detail); }
.grid-gap { display: grid; gap: var(--space-4); }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--surface-raised); }
.thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-raised); }

/* Diseño que el cliente ya tiene en su página: se ve, no se vuelve a añadir. */
.pick-card.is-used { opacity: 0.72; }
.pick-card.is-used:hover { transform: none; box-shadow: none; }

/* La vista previa dentro de una hoja no debe comerse el formulario. */
.sheet [data-style-preview] { max-width: 520px; margin-inline: auto; width: 100%; }

/* ---- Editor de paletas ---- */
.pal-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: end; }
.pal-preview {
  display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-md);
  background: var(--p-surface-page, var(--surface-page)); color: var(--p-text-body, var(--text-body));
  border: 1px solid var(--p-border-subtle, var(--border-subtle));
}
.pal-preview h3 { color: var(--p-text-heading, var(--text-heading)); font-size: var(--text-xl); margin: 0; }
.pal-preview p { margin: 0; font-size: var(--text-sm); }
.pal-overline { font: 600 12px var(--font-body); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--p-detail, var(--detail)); }
.pal-card {
  display: grid; gap: 4px; padding: var(--space-4); border-radius: var(--radius-sm);
  background: var(--p-surface-card, var(--surface-card));
  border: 1px solid var(--p-border-subtle, var(--border-subtle));
}
.pal-card b { color: var(--p-text-heading, var(--text-heading)); font-size: var(--text-sm); }
.pal-card span { color: var(--p-text-muted, var(--text-muted)); font-size: var(--text-xs); }
.pal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pal-btn {
  padding: 9px 18px; border-radius: var(--radius-pill); font: 600 var(--text-xs) var(--font-body);
  background: var(--p-accent, var(--accent)); color: var(--p-on-accent, var(--on-accent));
}
.pal-btn.ghost { background: var(--p-accent-soft, var(--accent-soft)); color: var(--p-accent, var(--accent)); }

/* ---- Formulario de sección dentro de la hoja ----
   Una sola vista: la sección se ve arriba mientras se escribe debajo. */
.sec-form { display: grid; gap: var(--space-4); }
.sec-form-title {
  font: 600 var(--text-xs) var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin: var(--space-2) 0 0;
}
.sheet-preview {
  /* Justo debajo de la cabecera pegada de la hoja (24 + 44 + 12). */
  position: sticky; top: 80px; z-index: 2; background: var(--surface-page);
  padding: var(--space-2) 0 var(--space-3); margin: 0 calc(var(--space-2) * -1);
}
/* En el teléfono se previsualiza el lienzo del teléfono: es lo que verán
   sus visitantes. La altura se acota para no comerse el formulario. */
.sheet-preview .preview-frame { --pv-width: 430px; --pv-height: 560px; max-height: 28dvh; }
.sheet-preview.is-collapsed .preview-frame { display: none; }
.sheet-actions {
  position: sticky; bottom: calc(env(safe-area-inset-bottom) * -1); z-index: 2;
  padding: var(--space-3) 0 var(--space-2);
  background: linear-gradient(to top, var(--surface-page) 72%, transparent);
}
@media (min-width: 760px) {
  .sheet-preview { top: 88px; }
  .sheet-preview .preview-frame { --pv-width: 1280px; --pv-height: 620px; max-height: 46dvh; }
}
/* Con sitio de sobra, el formulario va a la izquierda y la vista previa
   ocupa la columna derecha, pegada mientras se escribe. */
@media (min-width: 1000px) {
  .sec-form { grid-template-columns: minmax(0, 1fr) minmax(340px, 46%); column-gap: var(--space-6); align-items: start; }
  .sec-form > .sec-form-body { grid-column: 1; grid-row: 1; }
  .sec-form > .sheet-actions { grid-column: 1; grid-row: 2; }
  .sec-form > .sheet-preview { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .sheet-preview .preview-frame { --pv-height: 900px; max-height: 68dvh; }
}
.preview-frame.is-loading { opacity: 0.65; transition: opacity var(--dur-fast) var(--ease-out); }
/* Miniatura de la sección en la lista: se encoge con la pantalla. */
.sec-thumb { flex: none; width: clamp(96px, 30vw, 180px); }