/*
 * SOLO SANDBOX LOCAL. Estilos de las páginas de Loyenta (inscripción, tarjeta y panel), con la guía de
 * marca (docs/marca/README.md). Las páginas del cliente usan el color del negocio en --marca; el panel
 * usa los colores de Loyenta. Las definitivas se construyen en Next.js (Fase 5a).
 */

@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("/static/fuentes/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url("/static/fuentes/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: swap; src: url("/static/fuentes/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/static/fuentes/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/static/fuentes/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/static/fuentes/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  --azul: #0B1F44;
  --violeta: #6366F1;
  --violeta-oscuro: #4F46E5;
  --menta: #10B981;
  --menta-suave: #D1FAE5;
  --lavanda: #EDE9FE;
  --gris: #94A3B8;
  --texto: #0B1F44;
  --texto-2: #475569;
  --borde: #E2E8F0;
  --fondo: #F6F7FB;
  --blanco: #FFFFFF;
  --error: #DC2626;
  --error-suave: #FEE2E2;
  --aviso-suave: #FEF3C7;
  --radio: 16px;
  --radio-sm: 12px;
  --sombra: 0 1px 2px rgb(11 31 68 / 6%), 0 8px 24px rgb(11 31 68 / 8%);
  --titulos: "Plus Jakarta Sans", system-ui, sans-serif;
  --textos: "Inter", system-ui, sans-serif;
  /* Color del negocio en las páginas del cliente; en el panel, el violeta de Loyenta. */
  --marca: var(--violeta);
  /* Texto que se lee sobre --marca y color de los íconos sobre ese texto. En las páginas del negocio
     los calcula la API según el contraste (vistas/base.ts → estiloMarca). */
  --marca-texto: #FFFFFF;
  --marca-sobre: var(--violeta-oscuro);
  color-scheme: light;
}

/* Los tonos se derivan donde se define --marca (body y la vista previa del panel): si se declararan en
   :root quedarían calculados con el violeta y no seguirían el color del negocio. */
body, .tarjeta {
  --marca-oscuro: color-mix(in srgb, var(--marca) 72%, #000);
  --marca-suave: color-mix(in srgb, var(--marca) 12%, #fff);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--textos); font-size: 16px; line-height: 1.5; color: var(--texto); background: var(--fondo); }
h1, h2, h3 { font-family: var(--titulos); line-height: 1.2; margin: 0 0 8px; letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; font-weight: 800; }
h2 { font-size: 1.15rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 12px; }
a { color: var(--marca-oscuro); }
img { max-width: 100%; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.secundario { color: var(--texto-2); }
.pequeno { font-size: .875rem; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--marca) 45%, transparent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* --- Bloques ------------------------------------------------------------------------------- */
.contenedor { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 16px; }
.caja { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px; margin-bottom: 16px; }
.icono { width: 20px; height: 20px; flex: none; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px; border: 0; border-radius: 999px;
  background: var(--marca); color: var(--marca-texto); font: 600 1rem var(--titulos); text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease;
}
.boton:hover { background: var(--marca-oscuro); }
.boton:active { transform: scale(.98); }
.boton.bloque { width: 100%; }
.boton.claro { background: var(--marca-suave); color: var(--marca-oscuro); }
.boton.claro:hover { background: color-mix(in srgb, var(--marca) 20%, #fff); }
.boton.borde { background: transparent; color: var(--texto); border: 1px solid var(--borde); }
.boton.borde:hover { background: var(--fondo); }
.boton.negro { background: #111; color: #fff; }
.boton.negro:hover { background: #000; }
.boton.chico { min-height: 40px; padding: 8px 14px; font-size: .9rem; }

.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radio-sm); background: var(--marca-suave); font-size: .95rem; margin-bottom: 16px; }
.aviso.error { background: var(--error-suave); color: #991B1B; }
.aviso.pausa { background: var(--aviso-suave); color: #92400E; }
.aviso.exito { background: var(--menta-suave); color: #065F46; }

/* --- Formularios --------------------------------------------------------------------------- */
.campo { margin-bottom: 16px; }
.campo label, .etiqueta { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.campo .ayuda { font-size: .825rem; color: var(--texto-2); margin: 6px 0 0; }
.campo .mensaje-error { font-size: .825rem; color: var(--error); margin: 6px 0 0; }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=url], textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio-sm);
  font: 400 1rem var(--textos); color: var(--texto); background: #fff; transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 18%, transparent); }
input[aria-invalid=true] { border-color: var(--error); }
input[readonly] { background: var(--fondo); color: var(--texto-2); }
.con-prefijo { display: flex; align-items: stretch; }
.con-prefijo .prefijo { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--borde); border-right: 0; border-radius: var(--radio-sm) 0 0 var(--radio-sm); background: var(--fondo); font-weight: 600; color: var(--texto-2); }
.con-prefijo input { border-radius: 0 var(--radio-sm) var(--radio-sm) 0; }
.casilla { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--radio-sm); cursor: pointer; margin-bottom: 8px; }
.casilla:hover { background: var(--fondo); }
.casilla input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--marca); flex: none; }
details.desplegable { border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 0 14px; margin: 0 0 12px; font-size: .9rem; }
details.desplegable summary { cursor: pointer; padding: 12px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
details.desplegable summary::after { content: "+"; font-weight: 700; color: var(--marca); }
details.desplegable[open] summary::after { content: "–"; }
details.desplegable > div { padding-bottom: 12px; color: var(--texto-2); }

/* --- Encabezado del negocio (páginas del cliente) ---------------------------------------- */
.hero {
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--marca) 85%, #fff) 0%, var(--marca) 45%, var(--marca-oscuro) 100%);
  color: var(--marca-texto); padding: 28px 0 72px; text-align: center;
}
.hero .logo-negocio { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #fff; border: 3px solid rgb(255 255 255 / 70%); box-shadow: 0 6px 20px rgb(0 0 0 / 18%); }
.hero h1 { margin: 12px 0 4px; }
.hero p { margin: 0; opacity: .9; }
.sube { margin-top: -52px; }

.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; text-align: center; font-size: .8rem; color: var(--texto-2); }
.pasos .num { width: 32px; height: 32px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; background: var(--marca); color: var(--marca-texto); font: 700 .9rem var(--titulos); }

/* --- Tarjeta de sellos ------------------------------------------------------------------- */
.tarjeta {
  position: relative; overflow: hidden; border-radius: 22px; padding: 20px; color: var(--marca-texto);
  background: linear-gradient(140deg, color-mix(in srgb, var(--marca) 88%, #fff) 0%, var(--marca) 40%, var(--marca-oscuro) 100%);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--marca) 35%, transparent);
}
.tarjeta::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: color-mix(in srgb, var(--marca-texto) 10%, transparent); }
.tarjeta .cabecera { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.tarjeta .cabecera img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #fff; }
.tarjeta .cabecera b { display: block; font: 700 1.05rem var(--titulos); }
.tarjeta .cabecera small { opacity: .85; }
.sellos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 20px 0 16px; position: relative; z-index: 1; }
.sello { aspect-ratio: 1; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--marca-texto) 55%, transparent); display: grid; place-items: center; }
.sello svg { width: 55%; height: 55%; opacity: 0; }
.sello.lleno { background: var(--marca-texto); border: 0; color: var(--marca-sobre); }
.sello.lleno svg { opacity: 1; }
.sello.premio { border-style: solid; }
.progreso { position: relative; z-index: 1; }
.progreso .barra { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--marca-texto) 25%, transparent); overflow: hidden; margin: 6px 0 10px; }
.progreso .barra i { display: block; height: 100%; border-radius: 99px; background: var(--marca-texto); }
.progreso .cifra { font: 800 1.6rem var(--titulos); }
.tarjeta .listo { background: var(--marca-texto); color: var(--marca-sobre); border-radius: 14px; padding: 12px 14px; margin-top: 8px; font-weight: 600; position: relative; z-index: 1; }

.codigo-tarjeta { display: flex; gap: 16px; align-items: center; }
.codigo-tarjeta img { width: 120px; height: 120px; border-radius: 12px; border: 1px solid var(--borde); }
.codigo-tarjeta .codigo { font: 700 1.4rem ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .12em; }

.pie { text-align: center; padding: 8px 0 32px; font-size: .8rem; color: var(--texto-2); }
.pie a { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); text-decoration: none; }
.pie img { height: 16px; }

/* --- Panel (marca Loyenta) --------------------------------------------------------------- */
.panel { --marca: var(--violeta); }
.barra-panel { background: var(--azul); color: #fff; position: sticky; top: 0; z-index: 10; }
.barra-panel .fila { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.barra-panel img.logo { height: 26px; }
.barra-panel .negocio { margin-left: auto; font-size: .9rem; opacity: .85; text-align: right; }
.barra-panel form { margin: 0; }
.etiqueta-prueba { display: inline-block; padding: 1px 8px; margin-right: 4px; background: #F59E0B; color: #1F1300; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px; }
.barra-panel .boton { background: rgb(255 255 255 / 12%); color: #fff; min-height: 38px; padding: 6px 14px; font-size: .875rem; }
.barra-panel .boton:hover { background: rgb(255 255 255 / 20%); }
.pestanas { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.pestanas a { color: #fff; opacity: .75; text-decoration: none; padding: 8px 12px; border-radius: 99px; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.pestanas a:hover { opacity: 1; background: rgb(255 255 255 / 10%); }
.panel .contenedor { max-width: 1040px; }
.panel main { padding-top: 20px; }
.panel section { scroll-margin-top: 120px; }
.titulo-seccion { display: flex; align-items: center; gap: 10px; margin: 28px 0 12px; }
.titulo-seccion h2 { margin: 0; }
.titulo-seccion .icono { color: var(--violeta); }

.estadisticas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.estadistica { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; }
.estadistica .valor { font: 800 1.8rem var(--titulos); }
.estadistica .nombre { font-size: .85rem; color: var(--texto-2); }

.inscripcion-qr { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.inscripcion-qr img { width: 140px; height: 140px; border: 1px solid var(--borde); border-radius: 12px; }
.inscripcion-qr .enlace { word-break: break-all; font-size: .9rem; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.dos-columnas { display: grid; grid-template-columns: 1fr; gap: 20px; }
/* En celular la vista previa va antes de los campos: así se ve el cambio mientras se escribe. */
.vista-previa { order: -1; }
@media (min-width: 900px) {
  .dos-columnas { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .vista-previa { order: 0; position: sticky; top: 140px; }
}
.colores { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.colores button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--borde); cursor: pointer; }
.colores input[type=color] { width: 44px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer; }
.colores input[type=text] { width: 120px; min-height: 44px; }
.rango { display: flex; gap: 12px; align-items: center; }
.rango input[type=range] { flex: 1; accent-color: var(--violeta); }
.rango output { font: 800 1.3rem var(--titulos); min-width: 2ch; text-align: right; }
.ejemplo { background: var(--lavanda); color: var(--azul); border-radius: var(--radio-sm); padding: 12px 14px; font-size: .95rem; }
/* Por encima de la vista previa: el contenido de .tarjeta tiene z-index 1 y lo tapaba al hacer scroll. */
.guardar { position: sticky; bottom: 0; z-index: 20; background: linear-gradient(transparent, var(--fondo) 30%); padding: 20px 0 16px; }

/* Logo: vista del actual y botón para subir */
.logo-subir { display: flex; gap: 14px; align-items: center; }
.logo-subir img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--borde); background: #fff; flex: none; }
.logo-subir label.boton { cursor: pointer; }
.logo-subir .ayuda { margin-top: 6px; }
.logo-subir input[type=file]:focus-visible + .ayuda, .logo-subir label.boton:focus-within { outline: 3px solid color-mix(in srgb, var(--violeta) 45%, transparent); outline-offset: 2px; }

/* Imagen propia dentro de los sellos llenos (en los vacíos no se ve, como los íconos). */
.sello img { width: 66%; height: 66%; object-fit: contain; }
.sello:not(.lleno) img { opacity: 0; }
.opcion-icono img, #miniatura-sello-icono .icono { width: 26px; height: 26px; object-fit: contain; }
.sello-propio { margin-top: 12px; padding: 12px; background: var(--fondo); border-left: 3px solid var(--violeta); }

/* Selector del ícono de los sellos */
fieldset.iconos-sello { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.opciones-icono { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.opcion-icono { cursor: pointer; }
.opcion-icono input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-icono span { display: grid; justify-items: center; gap: 4px; padding: 10px 4px 8px; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: #fff; color: var(--texto); transition: border-color .15s, background-color .15s; }
.opcion-icono svg { width: 26px; height: 26px; }
.opcion-icono small { font-size: .72rem; color: var(--texto-2); }
.opcion-icono:hover span { border-color: var(--gris); }
.opcion-icono input:checked + span { border: 2px solid var(--violeta); background: var(--lavanda); color: var(--violeta-oscuro); padding: 9px 3px 7px; }
.opcion-icono input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--violeta) 45%, transparent); outline-offset: 2px; }

.lista-clientes { display: grid; gap: 10px; }
.cliente { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 14px 16px; }
.cliente .nombre { font-weight: 600; }
.cliente .mini-barra { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--lavanda); overflow: hidden; }
.cliente .mini-barra i { display: block; height: 100%; background: var(--violeta); border-radius: 99px; }
.etiqueta-estado { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .78rem; font-weight: 600; }
.etiqueta-estado.ok { background: var(--menta-suave); color: #065F46; }
.etiqueta-estado.no { background: #F1F5F9; color: var(--texto-2); }
.etiqueta-estado.anulada { background: var(--aviso-suave); color: #92400E; }
table.operaciones { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.operaciones th { text-align: left; font-weight: 600; color: var(--texto-2); font-size: .8rem; padding: 8px; border-bottom: 1px solid var(--borde); }
table.operaciones td { padding: 10px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.vacio { text-align: center; color: var(--texto-2); padding: 24px; }

/* Ingreso al panel */
.ingreso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(90% 60% at 100% 0%, var(--lavanda), transparent), var(--fondo); }
.ingreso .caja { width: 100%; max-width: 420px; padding: 28px; }
.ingreso .logo { height: 32px; margin-bottom: 24px; }
input.codigo-otp { text-align: center; font: 700 1.8rem ui-monospace, Menlo, monospace; letter-spacing: .5em; padding-left: .5em; }

@media (max-width: 520px) {
  .estadisticas { grid-template-columns: 1fr 1fr; }
  .estadisticas .estadistica:last-child { grid-column: 1 / -1; }
  .ocultar-celular { display: none; }
}

/* --- Panel en el celular: una sección a la vez y bloques plegables --------------------------- */
[hidden] { display: none !important; }

/* Bloques plegables (personalizar la tarjeta y el QR del resumen). */
details.bloque { border-bottom: 1px solid var(--borde); }
details.bloque:last-child { border-bottom: 0; }
details.bloque > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 14px 0; min-height: 48px; }
details.bloque > summary::-webkit-details-marker { display: none; }
details.bloque > summary::after { content: ""; grid-column: 2; grid-row: 1 / span 2; width: 9px; height: 9px; margin: 0 4px; border-right: 2px solid var(--violeta); border-bottom: 2px solid var(--violeta); transform: rotate(45deg); transition: transform .2s ease; }
details.bloque[open] > summary::after { transform: rotate(-135deg); }
.titulo-bloque { font: 700 1rem var(--titulos); display: flex; align-items: center; gap: 8px; }
.resumen-bloque { grid-column: 1; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .85rem; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.bloque[open] .resumen-bloque { display: none; }
.contenido-bloque { padding: 0 0 16px; }
.caja.bloques { padding-top: 4px; padding-bottom: 4px; }
.caja-qr details.bloque { border: 0; }
.caja-qr details.bloque > summary { padding-top: 0; }
.muestra-color { display: inline-block; width: 14px; height: 14px; flex: none; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.cabeza-previa { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cabeza-previa .etiqueta { margin: 0 0 6px; }
.boton-previa { display: none; }
.buscar-clientes { margin-bottom: 12px; }
.ver-mas { margin-top: 12px; }

.nav-inferior { display: none; }

@media (max-width: 899px) {
  body.vista-secciones .pestanas { display: none; }
  body.vista-secciones .seccion-panel:not(.activa) { display: none; }
  body.vista-secciones main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.vista-secciones .titulo-seccion { margin-top: 16px; }

  /* Barra inferior con las cinco secciones. */
  body.vista-secciones .nav-inferior {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--azul); padding: 10px 4px calc(6px + env(safe-area-inset-bottom));
    clip-path: polygon(0 8px, 100% 0, 100% 100%, 0 100%);
  }
  .nav-inferior a { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; padding: 4px 2px; color: #fff; opacity: .7; text-decoration: none; font-size: .72rem; font-weight: 600; }
  .nav-inferior a .icono { width: 22px; height: 22px; }
  .nav-inferior a[aria-current] { opacity: 1; color: #C7CBFF; }
  .nav-inferior a[aria-current]::after { content: ""; width: 18px; height: 3px; background: #A5B4FC; margin-top: 2px; }
  .nav-inferior a:focus-visible { outline: 2px solid #A5B4FC; outline-offset: -4px; }

  /* "Guardar cambios" solo en Tarjeta y Reglas, y solo cuando hay algo sin guardar. */
  body.vista-secciones .guardar { display: none; bottom: calc(68px + env(safe-area-inset-bottom)); }
  body.vista-secciones.con-cambios[data-seccion=personalizar] .guardar,
  body.vista-secciones.con-cambios[data-seccion=reglas] .guardar { display: block; }

  /* Vista previa pequeña fija arriba mientras se edita; se toca "Ver grande" para verla completa. */
  body.vista-secciones .vista-previa { position: sticky; top: 60px; z-index: 6; background: var(--fondo); padding: 8px 0 10px; margin: 0 -16px; padding-inline: 16px; }
  body.vista-secciones .boton-previa { display: inline-flex; }
  .vista-previa.compacta .tarjeta { padding: 10px 14px; }
  .vista-previa.compacta .cabecera img { width: 30px; height: 30px; }
  .vista-previa.compacta .cabecera small, .vista-previa.compacta .progreso, .vista-previa.compacta .premio-previa, .vista-previa.compacta + .nota-previa, .vista-previa.compacta .nota-previa { display: none; }
  .vista-previa.compacta .sellos { grid-template-columns: repeat(10, 1fr); gap: 2px; margin: 8px 0 0; }

  /* Íconos en una fila que se desliza de lado. */
  .opciones-icono { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 76px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .opcion-icono { scroll-snap-align: start; }

  /* Resumen corto: las tres cifras en una fila y el buscador primero. */
  .estadisticas { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
  .estadisticas .estadistica:last-child { grid-column: auto; }
  .estadistica { padding: 10px 12px; }
  .estadistica .valor { font-size: 1.35rem; }
  .estadistica .nombre { font-size: .72rem; line-height: 1.25; }
  .resumen-cajas .caja-buscar { order: -1; }
}

/* Las columnas nunca se ensanchan por su contenido: sin esto la fila de íconos (14 × 76 px) estiraba
   la columna y en el celular toda la página quedaba más ancha que la pantalla (el navegador la alejaba). */
.dos-columnas { grid-template-columns: minmax(0, 1fr); }
.dos-columnas > *, .caja.bloques, .contenido-bloque, details.bloque { min-width: 0; }
@media (min-width: 900px) { .dos-columnas { grid-template-columns: minmax(0, 1fr) 360px; } }

/* El radio escondido de cada ícono es absoluto: sin una etiqueta posicionada quedaba fuera de la fila
   deslizable y ensanchaba la página al abrir "Apariencia" (en el celular llegaba a 1146 px). */
.opcion-icono { position: relative; }
.opcion-icono input { inset: 0; width: 100%; height: 100%; margin: 0; }
.opciones-icono { position: relative; }