/* =====================================================================
   Invitaciones Digitales — sistema de diseño de la aplicación
   Vanilla CSS, sin frameworks. Tema claro y oscuro por prefers-color-scheme.
   ===================================================================== */

/* ------------------------------------------------------------- Tokens ---- */
:root {
  --c-bg: #f4f5f7;
  --c-superficie: #ffffff;
  --c-superficie-alt: #fafbfc;
  --c-borde: #e3e6ea;
  --c-borde-fuerte: #cdd3da;

  --c-texto: #1b2027;
  --c-texto-suave: #5f6b7a;
  --c-texto-tenue: #8a95a3;

  --c-marca: #4f46e5;
  --c-marca-hover: #4338ca;
  --c-marca-suave: #eef0fe;

  --c-exito: #0f8a5f;
  --c-exito-suave: #e6f6ef;
  --c-peligro: #d1344b;
  --c-peligro-suave: #fdecef;
  --c-aviso: #a66b00;
  --c-aviso-suave: #fdf3e2;
  --c-info: #1b6fa8;
  --c-info-suave: #e8f3fb;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 999px;

  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  --sombra-sm: 0 1px 2px rgba(17, 24, 39, .06);
  --sombra-md: 0 4px 12px rgba(17, 24, 39, .08);
  --sombra-lg: 0 12px 32px rgba(17, 24, 39, .12);

  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  --ancho-max: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #0f1218;
    --c-superficie: #171b22;
    --c-superficie-alt: #1d222b;
    --c-borde: #2a3038;
    --c-borde-fuerte: #3a424d;

    --c-texto: #e9edf3;
    --c-texto-suave: #a3adbb;
    --c-texto-tenue: #78828f;

    --c-marca: #8b85f5;
    --c-marca-hover: #a09af8;
    --c-marca-suave: #1e2140;

    --c-exito: #4ade9b;
    --c-exito-suave: #122a21;
    --c-peligro: #ff8095;
    --c-peligro-suave: #2d1620;
    --c-aviso: #f0b457;
    --c-aviso-suave: #2b2113;
    --c-info: #6fb5e6;
    --c-info-suave: #12222e;

    --sombra-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra-md: 0 4px 12px rgba(0, 0, 0, .45);
    --sombra-lg: 0 12px 32px rgba(0, 0, 0, .55);
  }
}

/* ------------------------------------------------------------- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-texto);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

a { color: var(--c-marca); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--c-marca);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------ Layout ---- */
.layout { min-height: 100vh; display: flex; flex-direction: column; }

.contenido {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--s-6) var(--s-4) var(--s-7);
  flex: 1;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--s-5);
}

.page-head__titulo { font-size: 1.6rem; font-weight: 650; letter-spacing: -.01em; }
.page-head__sub { color: var(--c-texto-suave); margin-top: var(--s-1); }

.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--editor { grid-template-columns: minmax(300px, 400px) 1fr; align-items: start; }

/* Las dos columnas tienen que poder encogerse. Un hijo de grid trae
   `min-width: auto`, así que no baja de su contenido más ancho, y la vista
   previa contiene una invitación completa: su bloque de fecha
   (DOMINGO | 15 | NOVIEMBRE) es una fila que no se parte, y con la escala al
   118 % medía 384 px. En una pantalla de 375 eso le daba scroll horizontal al
   editor entero, que es justo lo contrario de lo que se busca en un celular. */
.grid--editor > * { min-width: 0; }

@media (max-width: 880px) {
  .grid--editor { grid-template-columns: 1fr; }
}

.fila { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.fila--fin { justify-content: flex-end; }
.fila--entre { justify-content: space-between; }
.crece { flex: 1 1 auto; }

/* --------------------------------------------------------------- Nav ---- */
.nav {
  background: var(--c-superficie);
  border-bottom: 1px solid var(--c-borde);
  position: sticky;
  top: 0;
  z-index: 20;
}

.nav__interior {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--s-3) var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.nav__marca {
  font-weight: 680;
  font-size: 1.05rem;
  color: var(--c-texto);
  letter-spacing: -.01em;
}
.nav__marca:hover { text-decoration: none; color: var(--c-marca); }

.nav__links { display: flex; gap: var(--s-4); flex: 1; flex-wrap: wrap; }
.nav__links a {
  color: var(--c-texto-suave);
  font-weight: 500;
  padding: var(--s-1) 0;
  border-bottom: 2px solid transparent;
}
.nav__links a:hover { color: var(--c-texto); text-decoration: none; }
.nav__links a.is-activo { color: var(--c-marca); border-bottom-color: var(--c-marca); }

.nav__usuario { display: flex; align-items: center; gap: var(--s-3); }
.nav__email { color: var(--c-texto-tenue); font-size: .85rem; }

@media (max-width: 620px) {
  .nav__email { display: none; }
  .nav__interior { gap: var(--s-3); }
}

/* ------------------------------------------------------------ Tarjetas -- */
.card {
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--sombra-sm);
}

.card--compacta { padding: var(--s-4); }
.card--plana { box-shadow: none; }

.card__titulo {
  font-size: 1.05rem;
  font-weight: 620;
  margin-bottom: var(--s-1);
}

.card__sub { color: var(--c-texto-suave); font-size: .9rem; }

.card__sep {
  border: 0;
  border-top: 1px solid var(--c-borde);
  margin: var(--s-4) 0;
}

/* Tarjeta de invitación en el dashboard */
.evento { display: flex; flex-direction: column; gap: var(--s-3); }
.evento__cabecera { display: flex; justify-content: space-between; gap: var(--s-3); align-items: flex-start; }
.evento__titulo { font-size: 1.1rem; font-weight: 620; line-height: 1.3; }
.evento__fecha { color: var(--c-texto-suave); font-size: .9rem; margin-top: var(--s-1); }

.evento__metricas {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--c-borde);
  border-bottom: 1px solid var(--c-borde);
}

.metrica__valor { font-size: 1.25rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.metrica__etiqueta { font-size: .75rem; color: var(--c-texto-tenue); text-transform: uppercase; letter-spacing: .06em; }

.evento__enlace {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--c-superficie-alt);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-family: var(--fuente-mono);
  font-size: .78rem;
  color: var(--c-texto-suave);
  overflow: hidden;
}
.evento__enlace span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.evento__acciones { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Tarjeta de plantilla (selector) */
.plantilla {
  background: var(--c-superficie);
  border: 2px solid var(--c-borde);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.plantilla:hover { border-color: var(--c-borde-fuerte); transform: translateY(-2px); box-shadow: var(--sombra-md); }
.plantilla[aria-pressed="true"] { border-color: var(--c-marca); box-shadow: 0 0 0 3px var(--c-marca-suave); }

/* Miniatura: la plantilla renderizada de verdad, encogida con transform.
   El marco recorta y fija la proporción; el lienzo interior mide 520 px —el
   ancho real de las plantillas— y se escala desde su esquina superior
   izquierda, así que la miniatura es una foto fiel y no una maqueta aparte. */
.plantilla__previa {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  /* Tope de altura: la tarjeta se estira a una columna completa en pantallas
     angostas y, con la proporción de una invitación, la miniatura llegaba a
     577 px. Seis así convierten el selector en un scroll interminable. */
  max-height: 300px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-borde);
  background: var(--c-superficie-alt);
  /* El contenido no es interactivo: los clics son para elegir la plantilla. */
  pointer-events: none;
}

.plantilla__previa-lienzo {
  position: absolute;
  top: 0;
  left: 0;
  width: 520px;
  transform-origin: top left;
}

.plantilla__previa-cargando {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .78rem;
  color: var(--c-texto-tenue);
}

/* La miniatura es decorativa dentro de un botón: nada de ella debe recibir
   foco ni lectura por separado. */
.plantilla__previa * { pointer-events: none; }

.plantilla__muestra {
  height: 120px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid var(--c-borde);
}

.plantilla__nombre { font-weight: 620; }

/* ------------------------------------------------------------ Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: .6rem 1.05rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font: inherit;
  font-weight: 560;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn--primario { background: var(--c-marca); color: #fff; }
.btn--primario:hover:not(:disabled) { background: var(--c-marca-hover); }
@media (prefers-color-scheme: dark) { .btn--primario { color: #15172b; } }

.btn--secundario {
  background: var(--c-superficie);
  border-color: var(--c-borde-fuerte);
  color: var(--c-texto);
}
.btn--secundario:hover:not(:disabled) { background: var(--c-superficie-alt); border-color: var(--c-texto-tenue); }

.btn--ghost { background: transparent; color: var(--c-texto-suave); }
.btn--ghost:hover:not(:disabled) { background: var(--c-superficie-alt); color: var(--c-texto); }

.btn--peligro { background: transparent; border-color: var(--c-peligro); color: var(--c-peligro); }
.btn--peligro:hover:not(:disabled) { background: var(--c-peligro-suave); }

.btn--exito { background: var(--c-exito); color: #fff; }
@media (prefers-color-scheme: dark) { .btn--exito { color: #0a2018; } }

.btn--sm { padding: .35rem .7rem; font-size: .85rem; }
.btn--bloque { width: 100%; }

/* ------------------------------------------------------- Formularios ---- */
.field { margin-bottom: var(--s-4); }

.field > label,
.field__etiqueta {
  display: block;
  font-size: .85rem;
  font-weight: 580;
  margin-bottom: var(--s-2);
  color: var(--c-texto);
}

.field__ayuda { font-size: .8rem; color: var(--c-texto-tenue); margin-top: var(--s-1); }
.field__error { font-size: .8rem; color: var(--c-peligro); margin-top: var(--s-1); }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="url"], input[type="date"], input[type="datetime-local"],
input[type="file"], select, textarea {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--c-borde-fuerte);
  border-radius: var(--r-md);
  background: var(--c-superficie);
  color: var(--c-texto);
  font: inherit;
  transition: border-color .15s, box-shadow .15s;
}

textarea { resize: vertical; min-height: 80px; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--c-marca);
  box-shadow: 0 0 0 3px var(--c-marca-suave);
}

input::placeholder, textarea::placeholder { color: var(--c-texto-tenue); }

input[type="color"] {
  width: 100%;
  height: 40px;
  padding: 2px;
  border: 1px solid var(--c-borde-fuerte);
  border-radius: var(--r-md);
  background: var(--c-superficie);
  cursor: pointer;
}

.field--inline { display: flex; align-items: center; gap: var(--s-2); }
.field--inline input[type="checkbox"] { width: auto; }

.checkbox, .radio {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  font-size: .92rem;
  padding: var(--s-1) 0;
}
.checkbox input, .radio input { width: auto; margin: 0; }

fieldset { border: 0; padding: 0; margin: 0 0 var(--s-4); }
legend {
  padding: 0;
  font-size: .85rem;
  font-weight: 580;
  margin-bottom: var(--s-2);
}

.campo-con-boton { display: flex; gap: var(--s-2); }
.campo-con-boton input { flex: 1; }

/* Separador "o ingresa con" */
.divisor {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-5) 0;
  color: var(--c-texto-tenue);
  font-size: .82rem;
}
.divisor::before, .divisor::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--c-borde);
}

/* --------------------------------------------------- Avisos y estados --- */
.alert {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: .9rem;
  margin-bottom: var(--s-4);
}
.alert--danger { background: var(--c-peligro-suave); color: var(--c-peligro); border-color: currentColor; }
.alert--success { background: var(--c-exito-suave); color: var(--c-exito); border-color: currentColor; }
.alert--warning { background: var(--c-aviso-suave); color: var(--c-aviso); border-color: currentColor; }
.alert--info { background: var(--c-info-suave); color: var(--c-info); border-color: currentColor; }

.banner {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
  font-size: .92rem;
  border-left: 4px solid currentColor;
}
.banner--danger { background: var(--c-peligro-suave); color: var(--c-peligro); }
.banner--warning { background: var(--c-aviso-suave); color: var(--c-aviso); }
.banner a { color: inherit; font-weight: 620; text-decoration: underline; }

.chip {
  display: inline-flex;
  align-items: center;
  padding: .15rem .6rem;
  border-radius: var(--r-full);
  font-size: .72rem;
  font-weight: 620;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.chip--exito { background: var(--c-exito-suave); color: var(--c-exito); }
.chip--peligro { background: var(--c-peligro-suave); color: var(--c-peligro); }
.chip--aviso { background: var(--c-aviso-suave); color: var(--c-aviso); }
.chip--info { background: var(--c-info-suave); color: var(--c-info); }
.chip--neutro { background: var(--c-superficie-alt); color: var(--c-texto-suave); border-color: var(--c-borde); }
.chip--admin { background: var(--c-marca-suave); color: var(--c-marca); }

.empty {
  text-align: center;
  padding: var(--s-7) var(--s-4);
  border: 1px dashed var(--c-borde-fuerte);
  border-radius: var(--r-lg);
  background: var(--c-superficie);
}
.empty__titulo { font-weight: 600; margin-bottom: var(--s-2); }
.empty__detalle { color: var(--c-texto-suave); font-size: .9rem; }

.cargador {
  display: grid;
  place-items: center;
  padding: var(--s-7);
  color: var(--c-texto-tenue);
  font-size: .9rem;
}

.skeleton {
  background: linear-gradient(90deg, var(--c-superficie-alt) 25%, var(--c-borde) 50%, var(--c-superficie-alt) 75%);
  background-size: 200% 100%;
  animation: brillo 1.4s ease-in-out infinite;
  border-radius: var(--r-md);
  height: 140px;
}
@keyframes brillo {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ------------------------------------------------------------- Toasts --- */
.toast-stack {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  z-index: 100;
  max-width: 340px;
}

.toast {
  background: var(--c-texto);
  color: var(--c-bg);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-lg);
  font-size: .88rem;
  animation: entra .2s ease-out;
}
.toast--success { background: var(--c-exito); color: #fff; }
.toast--danger { background: var(--c-peligro); color: #fff; }
.toast--out { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }

@keyframes entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------- Tablas -- */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  min-width: 620px;
}

th, td {
  text-align: left;
  padding: var(--s-3);
  border-bottom: 1px solid var(--c-borde);
  vertical-align: middle;
}

th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-texto-tenue);
  font-weight: 620;
  white-space: nowrap;
}

tbody tr:hover { background: var(--c-superficie-alt); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------- Pantalla de acceso - */
.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s-5) var(--s-4);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--sombra-lg);
}

.auth-card__marca {
  text-align: center;
  font-weight: 680;
  letter-spacing: -.01em;
  margin-bottom: var(--s-5);
  font-size: 1.1rem;
}

.auth-card__titulo { font-size: 1.45rem; font-weight: 650; text-align: center; }
.auth-card__sub { color: var(--c-texto-suave); text-align: center; font-size: .9rem; margin: var(--s-2) 0 var(--s-5); }

.auth-toggle { text-align: center; margin-top: var(--s-5); font-size: .9rem; color: var(--c-texto-suave); }
.auth-toggle button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 620;
  color: var(--c-marca);
  cursor: pointer;
  text-decoration: underline;
}

.plan-opcion {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  border: 2px solid var(--c-borde);
  border-radius: var(--r-md);
  padding: var(--s-3);
  margin-bottom: var(--s-2);
  cursor: pointer;
}
.plan-opcion:has(input:checked) { border-color: var(--c-marca); background: var(--c-marca-suave); }
.plan-opcion input { width: auto; margin-top: .25rem; }
.plan-opcion__nombre { font-weight: 600; }
.plan-opcion__detalle { font-size: .83rem; color: var(--c-texto-suave); }
.plan-opcion__precio { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

#contenedorGoogle { display: flex; justify-content: center; min-height: 44px; }

/* ----------------------------------------------------- Editor de evento - */
.editor__panel {
  position: sticky;
  top: 76px;
  /* Un hijo de grid trae `min-width: auto`, así que no puede encogerse por
     debajo del contenido más ancho que lleve dentro. Las muestras de
     tipografía van en `nowrap` —es lo que permite recortarlas con puntos
     suspensivos— y eso empujaba la columna a 384 px dentro de una pantalla de
     375, dejando el editor con scroll horizontal en el celular. */
  min-width: 0;
}

.editor__preview {
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra-md);
}

.editor__preview-barra {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--c-superficie-alt);
  border-bottom: 1px solid var(--c-borde);
  font-size: .78rem;
  color: var(--c-texto-tenue);
}

/* `overflow-x: auto` además del vertical: si la invitación a escala grande no
   cabe en la columna, se desplaza DENTRO del marco de la vista previa en vez
   de estirar la página. */
.editor__preview-lienzo { max-height: 70vh; overflow: auto; }

.segmented {
  display: inline-flex;
  border: 1px solid var(--c-borde-fuerte);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-left: auto;
}
.segmented button {
  background: var(--c-superficie);
  border: 0;
  padding: .25rem .6rem;
  font: inherit;
  font-size: .78rem;
  color: var(--c-texto-suave);
  cursor: pointer;
}
.segmented button[aria-pressed="true"] { background: var(--c-marca); color: #fff; }
@media (prefers-color-scheme: dark) { .segmented button[aria-pressed="true"] { color: #15172b; } }

.lienzo--movil { max-width: 390px; margin: 0 auto; border-left: 1px solid var(--c-borde); border-right: 1px solid var(--c-borde); }

/* ------------------------------------------------- Carga de imágenes ---- */
.campo-imagen__previa {
  display: grid;
  place-items: center;
  min-height: 120px;
  margin-bottom: var(--s-2);
  border: 1px dashed var(--c-borde-fuerte);
  border-radius: var(--r-md);
  background: var(--c-superficie-alt);
  overflow: hidden;
}

.campo-imagen__previa img { max-height: 200px; width: auto; border-radius: var(--r-sm); }
.campo-imagen__vacio { color: var(--c-texto-tenue); font-size: .85rem; }

.dialogo-derechos {
  max-width: 480px;
  width: 92vw;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--c-superficie);
  color: var(--c-texto);
  box-shadow: var(--sombra-lg);
  padding: var(--s-5);
}

.dialogo-derechos::backdrop { background: rgba(10, 14, 20, .55); }

.dialogo-pase {
  max-width: 420px;
  width: 92vw;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--c-superficie);
  color: var(--c-texto);
  box-shadow: var(--sombra-lg);
  padding: var(--s-5);
}
.dialogo-pase::backdrop { background: rgba(10, 14, 20, .55); }

.dialogo-derechos__previa {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  margin: var(--s-4) 0;
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--c-superficie-alt);
}

.dialogo-derechos__previa img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--r-sm);
  flex: none;
}

.dialogo-derechos__texto {
  font-size: .9rem;
  line-height: 1.6;
  padding: var(--s-3);
  border-left: 3px solid var(--c-marca);
  background: var(--c-marca-suave);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: var(--s-4);
}

/* ------------------------------------------- Listas en el editor -------- */
.campo-lista__items { display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-2) 0 var(--s-3); }

.campo-lista__item {
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  padding: var(--s-3);
  background: var(--c-superficie-alt);
}
.campo-lista__item .field { margin-bottom: var(--s-2); }
.campo-lista__item .field:last-child { margin-bottom: 0; }

.campo-lista__barra { margin-bottom: var(--s-3); }
.campo-lista__barra .btn { padding: .15rem .45rem; line-height: 1; }

/* ------------------------------------------ Biblioteca de audio -------- */
.biblioteca-audio {
  margin-top: var(--s-3);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  padding: var(--s-3);
  background: var(--c-superficie-alt);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-height: 340px;
  overflow-y: auto;
}

.biblioteca-audio__item {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
}
.biblioteca-audio__item.esta-en-uso { border-color: var(--c-marca); }

.biblioteca-audio__info { flex: 1 1 200px; min-width: 0; }
.biblioteca-audio__nombre {
  font-weight: 560;
  font-size: .9rem;
  margin-bottom: var(--s-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.biblioteca-audio__info audio { width: 100%; max-width: 280px; margin-top: var(--s-2); height: 32px; }

.dialogo-derechos__previa--audio { flex-direction: column; align-items: stretch; }
.dialogo-derechos__previa--audio audio { width: 100%; }

/* ------------------------------------------- Galería en el editor ------- */
.campo-galeria__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--s-2);
  margin: var(--s-2) 0 var(--s-3);
}

.campo-galeria__item {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-borde);
  background: var(--c-superficie-alt);
}
.campo-galeria__item img { width: 100%; height: 100%; object-fit: cover; }

.campo-galeria__acciones {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 2px;
  background: rgba(10, 14, 20, .72);
}
.campo-galeria__acciones .btn { padding: .1rem .3rem; line-height: 1; color: #fff; font-size: .75rem; }
.campo-galeria__acciones .btn:hover:not(:disabled) { background: rgba(255, 255, 255, .18); color: #fff; }

/* ------------------------- Componentes dentro de la invitación ---------- */
.inv__galeria--apiladas { display: flex; flex-direction: column; gap: var(--s-4); }
.inv__galeria--mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

.inv__galeria-item { margin: 0; }
.inv__galeria-item img { width: 100%; display: block; border-radius: 2px; }
.inv__galeria--mosaico .inv__galeria-item img { aspect-ratio: 3 / 4; object-fit: cover; }

/* Usan las variables --inv-* de cada plantilla, no los tokens de la app. */

.inv__icono {
  width: 1.5em;
  height: 1.5em;
  fill: none;
  stroke: var(--inv-accent, currentColor);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* Itinerario */
.inv__hito {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  text-align: left;
  position: relative;
}
.inv__hito + .inv__hito::before {
  content: "";
  position: absolute;
  left: calc(0.75em + 1px);
  top: calc(-50% + .5em);
  height: 100%;
  border-left: 1px dashed var(--inv-line, currentColor);
  opacity: .6;
}
.inv__hito-marca { display: grid; place-items: center; width: 1.5em; z-index: 1; }
.inv__hito-texto { display: flex; flex-direction: column; gap: .1rem; }
.inv__hito-texto strong { font-size: .95rem; letter-spacing: .04em; }
.inv__hito-texto span { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }

/* Ubicaciones */
.inv__lugar-card { padding: var(--s-4) 0; }
.inv__lugar-tipo { font-size: 1.35rem; font-weight: 400; margin: 0 0 .35rem; color: var(--inv-accent, inherit); }
.inv__lugar-hora { font-weight: 700; letter-spacing: .06em; margin: 0 0 .35rem; }
.inv__lugar-nombre { font-weight: 600; letter-spacing: .08em; margin: 0 0 .2rem; }
.inv__lugar-dir { font-size: .82rem; letter-spacing: .06em; opacity: .75; margin: 0 0 var(--s-3); }

.inv__boton {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1.1rem;
  border-radius: 3px;
  background: var(--inv-accent, #999);
  color: #fff;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
.inv__boton:hover { text-decoration: none; opacity: .9; }
.inv__boton .inv__icono { width: 1em; height: 1em; stroke: currentColor; }

/* Parejas (padres, padrinos) */
.inv__pareja { margin-bottom: var(--s-4); }
.inv__pareja-rol { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; opacity: .7; margin: 0 0 .3rem; }
.inv__pareja-nombres { font-size: 1.15rem; margin: 0; }

/* Calendario del mes */
.cal__rejilla {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .35rem;
  max-width: 340px;
  margin: 0 auto;
  font-size: .78rem;
}
.cal__dia-nombre { font-size: .62rem; letter-spacing: .1em; opacity: .6; padding-bottom: .35rem; }
.cal__dia { padding: .3rem 0; font-variant-numeric: tabular-nums; }
.cal__hueco { visibility: hidden; }

.cal__dia.es-evento {
  position: relative;
  font-weight: 700;
  color: var(--inv-accent, inherit);
}
.cal__dia.es-evento::after {
  content: "";
  position: absolute;
  inset: -.15rem -.1rem;
  border: 1px solid var(--inv-accent, currentColor);
  border-radius: 50%;
}

/* Reproductor */
.inv__musica { margin: var(--s-5) 0; }
.inv__play-etiqueta { font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; opacity: .7; margin: 0 0 var(--s-3); }

.inv__play {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--inv-accent, currentColor);
  background: transparent;
  color: var(--inv-accent, currentColor);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background-color .15s, color .15s;
}
.inv__play:hover:not(:disabled) { background: var(--inv-accent, currentColor); color: var(--inv-bg, #fff); }
.inv__play:disabled { opacity: .4; cursor: not-allowed; }

/* El navegador bloqueó el arranque automático y la música espera el primer
   gesto: el latido invita a tocarlo sin decir nada. */
.inv__play.esta-esperando { animation: latido 2.2s ease-in-out infinite; }
@keyframes latido {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .inv__play.esta-esperando { animation: none; }
}
.inv__play svg { width: 20px; height: 20px; fill: currentColor; }

.inv__yt-marco {
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
}
.inv__yt-marco iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --------------------------------------------------------- Stickers ----- */
.sticker-paleta__titulo {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-texto-tenue);
  margin: var(--s-4) 0 var(--s-2);
}

.sticker-paleta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: var(--s-2);
}

.sticker-paleta__item {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: var(--s-2);
  background: var(--c-superficie-alt);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.sticker-paleta__item:hover { border-color: var(--c-marca); transform: translateY(-2px); }
.sticker-paleta__item img { max-width: 100%; max-height: 100%; object-fit: contain; }

.sticker-seleccion { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }

.sticker-seleccion__item {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 4px;
  background: var(--c-superficie-alt);
  border: 2px solid var(--c-borde);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.sticker-seleccion__item[aria-pressed="true"] { border-color: var(--c-marca); }
.sticker-seleccion__item img { max-width: 100%; max-height: 100%; object-fit: contain; }

.sticker-deslizador { margin-bottom: var(--s-3); }
.sticker-deslizador input[type="range"] { width: 100%; accent-color: var(--c-marca); padding: 0; }

/* La capa va dentro de la invitación, así que no usa los tokens de la app. */
.inv.tiene-stickers { position: relative; }

.inv__stickers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.inv__sticker {
  position: absolute;
  display: block;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* Solo en el editor los stickers se pueden tomar con el puntero. En la
   invitación publicada son decoración: no deben estorbar al tocar un enlace. */
.editor__preview-lienzo .inv__stickers { pointer-events: none; }
.editor__preview-lienzo .inv__sticker { pointer-events: auto; cursor: grab; touch-action: none; }
.editor__preview-lienzo .inv__sticker.esta-seleccionado { outline: 2px dashed var(--c-marca); outline-offset: 3px; }
.editor__preview-lienzo .inv__sticker.esta-arrastrando { cursor: grabbing; opacity: .85; }

/* ----------------------------------------------- Vista pública embebida - */
/* Cuenta regresiva: la pinta template-engine.js dentro de la plantilla. */
.cd__unidad { display: flex; flex-direction: column; min-width: 56px; }
.cd__valor { font-size: clamp(1.5rem, 5vw, 2.25rem); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.cd__etiqueta { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; opacity: .7; margin-top: .35rem; }
.cd__listo { font-size: 1.25rem; font-weight: 600; }

.inv__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
  margin: var(--s-5) 0;
}

.inv__rsvp { margin-top: var(--s-5); }

.rsvp {
  background: var(--inv-card, #fff);
  color: var(--inv-ink, #1b2027);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
  box-shadow: var(--sombra-md);
}
.rsvp__titulo { font-size: 1.1rem; font-weight: 620; margin-bottom: var(--s-4); text-align: center; }
.rsvp--gracias,
.rsvp--resuelto,
.rsvp--roto { text-align: center; }
.rsvp .field { margin-bottom: var(--s-3); }

/* El nombre de quien recibió el pase. Es lo primero que confirma al invitado
   que el enlace es suyo y no uno genérico reenviado por el grupo. */
.rsvp__nombre {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--inv-accent, var(--c-marca));
  margin-bottom: var(--s-2);
}
.rsvp__dato {
  text-align: center;
  font-size: .9rem;
  opacity: .85;
  margin-bottom: var(--s-4);
}
.rsvp--resuelto .inv__boton,
.rsvp--roto .inv__boton { margin-top: var(--s-2); }

/* Paleta de colores del dress code */
.inv__lista--paleta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
}
.inv__paleta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}
.inv__swatch {
  width: 42px;
  height: 42px;
  border-radius: var(--r-full);
  display: block;
}
.inv__paleta-nombre {
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* -------------------------------------------------- Páginas de bloqueo -- */
.bloqueo {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s-5) var(--s-4);
  text-align: center;
}
.bloqueo__card { max-width: 480px; }
.bloqueo__icono {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: var(--s-4);
}
.bloqueo__titulo { font-size: 1.5rem; font-weight: 650; margin-bottom: var(--s-3); }
.bloqueo__texto { color: var(--c-texto-suave); margin-bottom: var(--s-5); }

/* ===================================================================== */
/* Gestión del evento: tabuladores, cupo, tablas y planeación             */
/* ===================================================================== */

.page-head__migaja { font-size: .85rem; margin-bottom: var(--s-2); }
.page-head__migaja a { color: var(--c-texto-suave); text-decoration: none; }
.page-head__migaja a:hover { color: var(--c-marca); }

/* ------------------------------------------------------------ Tabuladores */
.tabs {
  display: flex;
  gap: var(--s-1);
  border-bottom: 1px solid var(--c-borde);
  margin-bottom: var(--s-5);
  /* En celular las pestañas se desplazan en lugar de apilarse: apiladas
     empujan el contenido fuera de la pantalla antes de empezar a leerlo. */
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs__tab {
  flex: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--s-3) var(--s-4);
  font: inherit;
  font-weight: 540;
  color: var(--c-texto-suave);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.tabs__tab:hover { color: var(--c-texto); }
.tabs__tab.is-activo {
  color: var(--c-marca);
  border-bottom-color: var(--c-marca);
}
.tabs__tab:focus-visible {
  outline: 2px solid var(--c-marca);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}

.tabs__badge {
  background: var(--c-marca-suave);
  color: var(--c-marca);
  border-radius: var(--r-full);
  padding: 0 .45rem;
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.5;
  min-width: 1.5em;
  text-align: center;
}

.panel { display: grid; gap: var(--s-5); }
.panel[hidden] { display: none; }

.fila--acciones { gap: var(--s-2); }
.fila--compacta { gap: var(--s-1); flex-wrap: nowrap; }

.metricas-lista {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2) var(--s-4);
  margin: 0;
}
.metricas-lista dt { color: var(--c-texto-suave); font-size: .9rem; }
.metricas-lista dd { margin: 0; font-weight: 620; text-align: right; }

.evento__alerta {
  margin-top: var(--s-3);
  font-size: .85rem;
  color: var(--c-aviso);
  font-weight: 540;
}

/* ------------------------------------------------------------------- Cupo */
.cupo__barra {
  height: 8px;
  background: var(--c-superficie-alt);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-top: var(--s-3);
}
.cupo__relleno {
  height: 100%;
  background: var(--c-marca);
  border-radius: var(--r-full);
  transition: width .25s ease;
}
.cupo__relleno.esta-lleno { background: var(--c-peligro); }

/* -------------------------------------------------------- Tabla invitados */
.tabla-invitados { min-width: 760px; }
.tabla-invitados td { vertical-align: top; }
.tabla-invitados .num { white-space: nowrap; }

/* ------------------------------------------------------------ Importación */
.separador-o {
  text-align: center;
  color: var(--c-texto-tenue);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: var(--s-4) 0;
}

.importa-previa { margin-top: var(--s-4); }
.importa-previa__titulo {
  font-size: .95rem;
  font-weight: 620;
  margin-bottom: var(--s-3);
}
.importa-mapeo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-3);
  margin: var(--s-3) 0 var(--s-4);
}
.campo-color {
  width: 100%;
  height: 40px;
  padding: 2px;
  cursor: pointer;
}

.field--inline { margin: 0; }
.field--inline label { font-size: .8rem; }
.importa-muestra table { font-size: .82rem; }

.dialogo-ancho {
  max-width: 640px;
  width: 94vw;
  border: 0;
  border-radius: var(--r-lg);
  max-height: 88vh;
  overflow-y: auto;
}
.dialogo-ancho::backdrop { background: rgba(10, 14, 20, .55); }

/* ------------------------------------------------------- Línea de tiempo */
.linea-tiempo { list-style: none; margin: 0; padding: 0; }

.linea-tiempo__item {
  display: grid;
  grid-template-columns: auto 4.5rem 1fr auto;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--c-borde);
}
.linea-tiempo__item:first-child { border-top: 0; }
.linea-tiempo__item.esta-listo .linea-tiempo__texto strong {
  text-decoration: line-through;
  color: var(--c-texto-tenue);
}
.linea-tiempo__marca,
.checklist__marca { padding-top: 2px; }
.linea-tiempo__hora {
  font-family: var(--fuente-mono);
  font-size: .85rem;
  color: var(--c-marca);
  font-weight: 600;
  padding-top: 1px;
}
.linea-tiempo__texto { min-width: 0; }

/* ----------------------------------------------------------- Check list */
.checklist { list-style: none; margin: 0; padding: 0; }

.checklist__item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--c-borde);
}
.checklist__item:first-child { border-top: 0; }
.checklist__item.esta-listo .checklist__texto strong {
  text-decoration: line-through;
  color: var(--c-texto-tenue);
}
.checklist__item.esta-vencido .checklist__texto strong { color: var(--c-aviso); }
.checklist__texto { min-width: 0; }
.checklist__fecha {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-1);
  font-size: .82rem;
  color: var(--c-texto-suave);
  white-space: nowrap;
}

/* En celular las filas se apilan: cuatro columnas en 360px dejan cada celda
   de 50px y el texto se parte letra por letra. */
@media (max-width: 640px) {
  .linea-tiempo__item,
  .checklist__item {
    grid-template-columns: auto 1fr;
  }
  .linea-tiempo__hora { grid-column: 2; }
  .linea-tiempo__texto,
  .checklist__texto { grid-column: 2; }
  .checklist__fecha {
    grid-column: 2;
    align-items: flex-start;
    flex-direction: row;
    gap: var(--s-2);
  }
  .linea-tiempo__item .fila--compacta,
  .checklist__item .fila--compacta { grid-column: 2; }
}

/* ===================================================================== */
/* Panel de diseño: paletas, tipografías y tamaño                        */
/* ===================================================================== */

.diseno-bloque { padding: var(--s-4) 0; border-top: 1px solid var(--c-borde); }
.diseno-bloque:first-child { border-top: 0; padding-top: 0; }

.diseno-bloque__titulo { font-size: 1rem; font-weight: 620; margin: 0; }
.diseno-bloque__ayuda {
  color: var(--c-texto-suave);
  font-size: .85rem;
  margin: var(--s-2) 0 var(--s-3);
}
.diseno-bloque__nota {
  color: var(--c-texto-tenue);
  font-size: .8rem;
  line-height: 1.6;
  margin-top: var(--s-3);
}
.diseno-grupo {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-texto-tenue);
  margin: var(--s-4) 0 var(--s-2);
}
.diseno-grupo:first-of-type { margin-top: 0; }

/* -------------------------------------------------------------- Paletas */
.paletas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: var(--s-2);
}

.paleta {
  appearance: none;
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-2);
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  text-align: center;
}
.paleta:hover { border-color: var(--c-borde-fuerte); }

/* El anillo marca la activa con un borde grueso en vez de solo cambiar el
   color del borde: sobre una rejilla de colores, un borde teñido se pierde
   entre las propias muestras. */
.paleta.esta-activa {
  border-color: var(--c-marca);
  box-shadow: 0 0 0 2px var(--c-marca-suave), inset 0 0 0 1px var(--c-marca);
}
.paleta:focus-visible { outline: 2px solid var(--c-marca); outline-offset: 2px; }

.paleta__muestras { display: flex; gap: 3px; }
.paleta__punto {
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  /* Borde interior: una muestra casi blanca sobre tarjeta blanca sería
     invisible sin él. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}
.paleta__nombre { font-size: .76rem; line-height: 1.3; color: var(--c-texto-suave); }
.paleta.esta-activa .paleta__nombre { color: var(--c-texto); font-weight: 560; }

/* ---------------------------------------------------------- Tipografías */
.diseno-fuente { margin-bottom: var(--s-4); }
.diseno-fuente__etiqueta {
  font-size: .85rem;
  font-weight: 560;
  margin: 0 0 var(--s-2);
}

.fuentes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s-2);
}

.fuente {
  position: relative;
  appearance: none;
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  padding: var(--s-3);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  min-width: 0;
}
.fuente:hover { border-color: var(--c-borde-fuerte); }
.fuente.esta-activa {
  border-color: var(--c-marca);
  box-shadow: inset 0 0 0 1px var(--c-marca);
}
.fuente:focus-visible { outline: 2px solid var(--c-marca); outline-offset: 2px; }

/* La muestra es el control: el nombre escrito con su propia letra. Por eso
   va grande y recortado con ellipsis en vez de partirse en dos líneas. */
.fuente__muestra {
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--c-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fuente__meta {
  font-size: .7rem;
  color: var(--c-texto-tenue);
  text-transform: lowercase;
}

.fuente__quitar {
  position: absolute;
  top: 2px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  color: var(--c-texto-tenue);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.fuente__quitar:hover { background: var(--c-peligro-suave); color: var(--c-peligro); }

/* Muestra de la fuente en el diálogo de derechos, antes de subirla. */
.dialogo-derechos__previa--fuente { flex-direction: column; align-items: stretch; }
.muestra-fuente {
  background: var(--c-superficie-alt);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  padding: var(--s-4);
  overflow-wrap: anywhere;
}
.muestra-fuente__grande { font-size: 2rem; line-height: 1.2; margin: 0 0 var(--s-2); }
.muestra-fuente__texto { font-size: 1rem; line-height: 1.5; margin: 0; }

/* ---------------------------------------------------------- Ajuste fino */
.diseno-fino > summary {
  cursor: pointer;
  font-size: .85rem;
  color: var(--c-texto-suave);
  padding: var(--s-2) 0;
}
.diseno-fino > summary:hover { color: var(--c-marca); }

.segmented--ancho { width: 100%; }
.segmented--ancho button { flex: 1; }

/* ---------------------------------------------- Catálogo de la plataforma */
.catalogo-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.catalogo-rejilla--ancha { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.catalogo-item {
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--c-superficie);
  min-width: 0;
}

/* Un retirado no se oculta: hay que poder encontrarlo para reactivarlo. */
.catalogo-item.esta-retirado { opacity: .5; border-style: dashed; }

.catalogo-item__arte {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--c-superficie-alt);
  border-radius: var(--r-sm);
  padding: var(--s-2);
  overflow: hidden;
}
.catalogo-item__arte img { max-width: 100%; max-height: 100%; object-fit: contain; }

.catalogo-item__nombre {
  font-size: .85rem;
  font-weight: 560;
  margin: 0;
  overflow-wrap: anywhere;
}

.catalogo-item__muestra {
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------ Gestión de usuarios */
.usuarios-tabla { min-width: 820px; }
.usuarios-tabla td { vertical-align: top; }
.usuarios-tabla select { min-width: 130px; }

/* Una fila sin acceso se atenúa pero no se esconde: hay que poder encontrarla
   para reactivarla. */
.usuarios-tabla tr.esta-inactivo td { opacity: .55; }
.usuarios-tabla tr.esta-inactivo .chip--peligro { opacity: 1; }

.usuarios-tabla .chip { margin-left: var(--s-2); }

/* ----------------------------------------------------------- Facturación */
.renovacion { margin-top: var(--s-3); }

/* ------------------------------------------------------------ Utilidades */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mono { font-family: var(--fuente-mono); font-size: .85em; }
.texto-suave { color: var(--c-texto-suave); }
.texto-tenue { color: var(--c-texto-tenue); font-size: .85rem; }
.centrado { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-3 { margin-bottom: var(--s-3); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--s-4); }

/* ---------------------------------------------------------------- Legal
   Páginas de texto largo: términos, privacidad y reembolsos.

   Ancho limitado a 70ch porque es texto para leer, no para escanear: una
   línea más larga hace que el ojo pierda el renglón al volver. Usa los mismos
   tokens que el resto, así que el modo oscuro sale gratis.
*/
.legal {
  max-width: 70ch;
  margin: 0 auto;
  padding: 32px 20px 64px;
  color: var(--c-texto);
}

.legal__volver {
  display: inline-block;
  margin-bottom: 24px;
  color: var(--c-marca);
  text-decoration: none;
  font-size: 14px;
}

.legal__volver:hover { text-decoration: underline; }

.legal h1 {
  font-size: 28px;
  margin: 0 0 8px;
  line-height: 1.25;
}

.legal__fecha {
  color: var(--c-texto-tenue);
  font-size: 14px;
  margin: 0 0 32px;
}

.legal h2 {
  font-size: 19px;
  margin: 36px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--c-borde);
}

.legal h2:first-of-type { border-top: none; padding-top: 0; }

.legal h3 {
  font-size: 16px;
  margin: 24px 0 8px;
}

.legal p,
.legal li {
  color: var(--c-texto-suave);
  line-height: 1.7;
  font-size: 15px;
}

.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin-bottom: 8px; }

.legal strong { color: var(--c-texto); }

/* Para lo que el usuario debe leer sí o sí antes de pagar. */
.legal__clave {
  background: var(--c-marca-suave);
  border-left: 3px solid var(--c-marca);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 16px 18px;
  margin: 20px 0;
}

.legal__clave p { margin: 0; color: var(--c-texto); }

/* Marca los datos que faltan por llenar antes de publicar. */
.legal__pendiente {
  background: var(--c-aviso-suave);
  color: var(--c-aviso);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  font-size: 0.92em;
  font-weight: 600;
}

.legal__pie {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--c-borde);
  font-size: 13px;
  color: var(--c-texto-tenue);
}

.legal__pie a { color: var(--c-marca); }

.texto-derecha { text-align: right; }

/* ------------------------------------------------------- Panel de admin
   Submenú lateral agrupado. Antes eran pestañas en una fila que se
   desplazaba horizontalmente: con siete opciones el usuario tenía que
   adivinar qué había fuera de la pantalla.
*/
.admin-shell {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}

.submenu__toggle { display: none; }

.submenu__grupo + .submenu__grupo { margin-top: var(--s-4); }

.submenu__titulo {
  margin: 0 0 var(--s-2);
  padding: 0 var(--s-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-texto-tenue);
}

.submenu__item {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font: inherit;
  font-weight: 520;
  color: var(--c-texto-suave);
  cursor: pointer;
}

.submenu__item:hover { background: var(--c-superficie-alt); color: var(--c-texto); }

.submenu__item.is-activo {
  background: var(--c-marca-suave);
  color: var(--c-marca);
  font-weight: 650;
}

.submenu__item:focus-visible {
  outline: 2px solid var(--c-marca);
  outline-offset: 1px;
}

/* En celular el submenú se vuelve un desplegable: una columna lateral de
   210px no cabe, y apilar siete botones empuja el contenido fuera de la
   primera pantalla. */
@media (max-width: 880px) {
  .admin-shell { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }

  .submenu__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    appearance: none;
    background: var(--c-superficie);
    border: 1px solid var(--c-borde);
    border-radius: var(--r-md);
    padding: var(--s-3) var(--s-4);
    font: inherit;
    font-weight: 600;
    color: var(--c-texto);
    cursor: pointer;
  }

  .submenu__chevron { transition: transform .15s ease; color: var(--c-texto-tenue); }
  .submenu__toggle[aria-expanded="true"] .submenu__chevron { transform: rotate(180deg); }

  .submenu__grupos {
    display: none;
    margin-top: var(--s-2);
    padding: var(--s-3);
    background: var(--c-superficie);
    border: 1px solid var(--c-borde);
    border-radius: var(--r-md);
  }

  .submenu__grupos.is-abierto { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .submenu__chevron { transition: none; }
}