:root{
  /* Sistema cromático "Vitrina" (v0.8.3): header y footer oscuros (Slate),
     cuerpo gris muy claro, botones neutros y un ÚNICO color de
     interacción/link (Teal, el mismo tono que identifica a las Tiendas, a
     propósito). Los NOMBRES de variables antiguas se mantienen (--ink,
     --line, --section-bg...), con valores nuevos. --pine queda solo para
     el detalle del logo; --rust (el azul de antes) ya no se usa. */
  --pine: #5B3E96;
  --pine-dark: #402D69;
  --parchment: #F8FAFC;   /* fondo del sitio (Slate 50) */
  --card: #FFFFFF;
  --gold: #F2C230;        /* logo, avisos "🔔" y foco de teclado */
  --ink: #334155;         /* texto principal (Slate 700) */
  --ink-soft: #64748B;    /* texto secundario (Slate 500) */
  --heading: #1E293B;     /* títulos (Slate 800, mismo tono del header) */
  --sage: #CFCFD2;
  --line: #E2E8F0;        /* bordes (Slate 200) */
  --green-ok: #34A65B;
  --red-warn: #E5504A;
  --section-bg: #F1F5F9;  /* fondo de cada sección del Home (Slate 100) */

  /* Header → Body → Cards → Footer, botones y links */
  --header-bg: #1E293B;
  --header-nav-text: #F8FAFC;
  --header-nav-hover: #CBD5E1;
  --footer-bg: #0F172A;
  --footer-text: #94A3B8;
  --btn-bg: #475569;
  --btn-hover-bg: #334155;
  --btn-secondary-border: #CBD5E1;
  --btn-secondary-hover-bg: #F1F5F9;
  --link: #0F766E;        /* = --teal-500: acción / navegación / comercio */
  --link-hover: #134E4A;  /* = --teal-700 */

  /* Jerarquía de tarjetas: Normal (Slate) / Destacado (Amber) / Tienda
     (Teal). Se distinguen por la barra superior gruesa, la franja de
     firma de 5 tonos al pie y la etiqueta (id-pill) — nunca coloreando
     el título, el precio ni el fondo de la tarjeta. */
  --slate-50: #F8FAFC;
  --slate-200: #E2E8F0;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-700: #334155;
  --amber-50: #FFFBEB;
  --amber-200: #FDE68A;
  --amber-400: #FBBF24;
  --amber-500: #D97706;
  --amber-700: #92400E;
  --teal-50: #F0FDFA;
  --teal-200: #99F6E4;
  --teal-400: #2DD4BF;
  --teal-500: #0F766E;
  --teal-700: #134E4A;
  /* (v0.9.0) Campañas de donación en "Se Buscan". */
  --rose-50: #FFF1F2;
  --rose-200: #FECDD3;
  --rose-400: #FB7185;
  --rose-500: #E11D48;
  --rose-700: #9F1239;
  /* (v0.9.3) Violeta: reservada para las Subastas (Fase G); por ahora
     solo se usa para colorear textos editables. */
  --violet-50: #F5F3FF;
  --violet-200: #DDD6FE;
  --violet-400: #A78BFA;
  --violet-500: #7C3AED;
  --violet-700: #5B21B6;
  --tag-bg: #F1F5F9;
  --tag-text: #475569;
  --top-bar-height: 8px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--parchment);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:15px;
  line-height:1.5;
}
h1,h2,h3,h4{
  font-family:'Poppins', sans-serif;
  font-weight:600;
  margin:0 0 0.4em 0;
  color:var(--heading);
  text-wrap:balance;
}
h1{font-size:1.9rem; letter-spacing:-0.01em;}
h2{font-size:1.4rem;}
h3{font-size:1.1rem;}
p{margin:0 0 0.8em 0;}
/* Teal: el único color de link/interacción de todo el sitio (v0.8.3).
   Los links con estilo de botón (.btn) conservan el suyo. */
a{color:var(--link);}
a:not(.btn):hover{color:var(--link-hover);}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:0.95rem;}

/* El sitio antes quedaba encerrado en un ancho fijo de 960px centrado.
   Ahora ocupa todo el ancho de la pantalla — #app ya no tiene padding
   horizontal propio (con porcentajes eso se presta a descalces entre
   elementos con fondos de ancho completo, como .topbar/.ad-bar, y los
   que no lo son). En vez de eso, CADA franja de ancho completo
   (.topbar, .ad-bar) y .content ponen su propio "padding:... 5%" — así
   el margen del 5% siempre es relativo al ancho completo de la
   pantalla, sea cual sea el fondo de ese elemento. */
#app{width:100%; margin:0 auto; padding-bottom:0; min-height:100vh; display:flex; flex-direction:column;}

/* HEADER */
/* (v0.9.6) Dos líneas: logo + usuario arriba; menú + cuenta abajo. Cada
   línea reparte sus dos bloques a la izquierda y a la derecha. */
.topbar{
  background:var(--header-bg);
  color:var(--header-nav-text);
  padding:14px 5%;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.topbar-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
.nav-account{margin-left:auto;}
.topbar .nav-logout{color:#F2EEE1; border-color:rgba(242,238,225,0.5); background:transparent; margin-left:4px;}
.topbar .nav-logout:hover{background:rgba(255,255,255,0.12); color:#fff;}
.brand{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:1.3rem;
  color:#fff;
  display:flex;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}
.brand-mark{
  width:26px; height:26px;
  border-radius:6px;
  background:var(--gold);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--pine-dark);
  font-weight:700;
  font-size:0.9rem;
  transform:rotate(-6deg);
}
.nav{display:flex; gap:4px; align-items:center; flex-wrap:wrap;}
.nav-btn{
  position:relative;
  background:transparent;
  border:1px solid transparent;
  color:var(--header-nav-text);
  padding:7px 12px;
  border-radius:7px;
  font-size:0.92rem;
  font-weight:500;
}
.nav-btn:hover{background:rgba(255,255,255,0.08); color:var(--header-nav-hover);}
.nav-btn.active{background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.2); color:#fff;}
/* Subrayado animado, debajo del texto: crece desde la izquierda al
   pasar el mouse o cuando el botón es el de la vista activa. */
.nav-btn::after{
  content:'';
  position:absolute; left:10px; right:10px; bottom:1px; height:2px;
  background:var(--teal-400);
  transform:scaleX(0); transform-origin:left;
  transition:transform 0.18s ease;
}
.nav-btn:hover::after, .nav-btn.active::after{transform:scaleX(1);}
.nav-user{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:0.88rem;
  color:#EDE9DA;
  margin-left:auto;
}
/* ratingWidgetHtml() usa .muted para el texto junto a las estrellas —
   ese gris oscuro (pensado para fondos claros) es casi invisible sobre
   el morado del topbar, así que acá se empareja con el mismo color
   claro que el nombre de usuario. */
.nav-user .muted{color:#EDE9DA;}
.nav-user .btn-ghost{color:#F2EEE1; border-color:rgba(242,238,225,0.5);}
.nav-user .btn-ghost:hover{background:rgba(255,255,255,0.12); color:#fff;}
.stars{color:var(--gold); letter-spacing:1px; white-space:nowrap;}
.stars.small{font-size:0.85rem;}

/* Barra de anuncios: franja de ancho completo, negro grafito (no negro
   puro), arriba de todo el sitio. Texto centrado, con link opcional. */
.ad-bar{
  background:var(--ink);
  color:#F5F5F4;
  text-align:center;
  padding:9px 5%;
  font-size:0.85rem;
}
.ad-bar a, .ad-bar a:hover{color:#fff; font-weight:600; text-decoration:underline;}

.content{padding:26px 5%;}

/* Fondo gris que encierra una sección general del Home de punta a
   punta, para que se note claramente dónde empieza y dónde termina. */
.section-well{
  background:var(--section-bg);
  border-radius:14px;
  padding:22px;
  margin-bottom:24px;
}
.section-well-split{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
@media (max-width:720px){ .section-well-split{grid-template-columns:1fr;} }

/* BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px;
  padding:10px 18px;
  border-radius:7px;
  border:1px solid transparent;
  font-weight:600;
  font-size:0.92rem;
}
.btn-primary{background:var(--btn-bg); color:#fff;}
.btn-primary:hover{background:var(--btn-hover-bg); color:#fff;}
.btn-secondary{background:var(--card); color:var(--ink); border-color:var(--btn-secondary-border);}
.btn-secondary:hover{background:var(--btn-secondary-hover-bg); color:var(--ink);}
.btn-ghost{background:transparent; color:var(--ink-soft); border-color:var(--line);}
.btn-ghost:hover{background:#fff;}
.btn-danger{background:transparent; color:var(--red-warn); border-color:var(--red-warn);}
.btn-danger:hover{background:rgba(229,80,74,0.08);}
.btn-block{width:100%;}
.btn:disabled{opacity:0.5; cursor:not-allowed;}
.btn-sm{padding:6px 12px; font-size:0.82rem; border-radius:6px;}

/* FORMS */
label{display:block; font-size:0.85rem; font-weight:600; color:var(--ink-soft); margin-bottom:5px;}
.field{margin-bottom:16px;}
input[type=text],input[type=password],input[type=number],input[type=email],input[type=tel],input[type=url],select,textarea{
  width:100%;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold); outline-offset:1px;}
textarea{resize:vertical; min-height:80px;}
.hint{font-size:0.78rem; color:var(--ink-soft); margin-top:4px;}
.hint code{background:var(--parchment); border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-size:0.9em;}
fieldset{border:1px solid var(--line); border-radius:8px; padding:16px; margin:0 0 18px 0;}
legend{font-family:'Poppins', sans-serif; font-weight:600; padding:0 6px; color:var(--heading);}
.radio-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;}
.radio-chip{
  border:1px solid var(--line);
  border-radius:20px;
  padding:6px 14px;
  font-size:0.85rem;
  background:#fff;
  cursor:pointer;
}
.radio-chip.selected{background:var(--btn-bg); border-color:var(--btn-bg); color:#fff;}

/* CARD */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  padding:18px;
}
.auth-wrap{max-width:420px; margin:20px auto;}
.auth-toggle{display:flex; gap:0; margin-bottom:18px; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.auth-toggle button{flex:1; padding:10px; background:#fff; border:none; font-weight:600; color:var(--ink-soft);}
.auth-toggle button.active{background:var(--btn-bg); color:#fff;}

/* EXPLORE */
.toolbar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px;}
.toolbar input[type=text]{flex:2; min-width:180px;}
.toolbar select{flex:1; min-width:140px;}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px,1fr));
  gap:16px;
}
/* Tarjetas de anuncio (v0.8.3): el tipo (Normal / Destacado / Tienda)
   se marca con la barra superior gruesa, la franja de firma de 5 tonos
   al pie (.card-signature) y la etiqueta .id-pill — el fondo, el título
   y el precio son siempre neutros. */
.listing-card{
  background:var(--card);
  border-left:1px solid var(--slate-200);
  border-right:1px solid var(--slate-200);
  border-top:var(--top-bar-height) solid var(--slate-500);
  border-bottom:none;
  border-radius:6px;
  overflow:hidden;
  display:flex; flex-direction:column;
  text-align:left;
  padding:0;
  position:relative;
}
.listing-card.tipo-destacado{border-top-color:var(--amber-500);}
.listing-card.tipo-tienda{border-top-color:var(--teal-500);}
/* (v0.8.4) Fondo = el tono más claro de la paleta de cada tipo. */
.listing-card{background:var(--slate-50);}
.listing-card.tipo-destacado{background:var(--amber-50);}
.listing-card.tipo-tienda{background:var(--teal-50);}
/* Hover: sombra neutra + la tarjeta se eleva un poco (respeta "reduced motion"). */
.listing-card:hover{
  box-shadow:0 14px 26px -10px rgba(15,23,42,0.35), 0 3px 8px rgba(0,0,0,0.08);
}
@media (prefers-reduced-motion:no-preference){
  .listing-card{transition:transform 0.15s ease, box-shadow 0.15s ease;}
  .listing-card:hover{transform:translateY(-3px);}
}
.card-signature{display:flex; height:var(--top-bar-height); margin-top:auto;}
.card-signature span{flex:1;}
.listing-card .card-signature span:nth-child(1){background:var(--slate-50);}
.listing-card .card-signature span:nth-child(2){background:var(--slate-200);}
.listing-card .card-signature span:nth-child(3){background:var(--slate-400);}
.listing-card .card-signature span:nth-child(4){background:var(--slate-500);}
.listing-card .card-signature span:nth-child(5){background:var(--slate-700);}
.listing-card.tipo-destacado .card-signature span:nth-child(1){background:var(--amber-50);}
.listing-card.tipo-destacado .card-signature span:nth-child(2){background:var(--amber-200);}
.listing-card.tipo-destacado .card-signature span:nth-child(3){background:var(--amber-400);}
.listing-card.tipo-destacado .card-signature span:nth-child(4){background:var(--amber-500);}
.listing-card.tipo-destacado .card-signature span:nth-child(5){background:var(--amber-700);}
.listing-card.tipo-tienda .card-signature span:nth-child(1){background:var(--teal-50);}
.listing-card.tipo-tienda .card-signature span:nth-child(2){background:var(--teal-200);}
.listing-card.tipo-tienda .card-signature span:nth-child(3){background:var(--teal-400);}
.listing-card.tipo-tienda .card-signature span:nth-child(4){background:var(--teal-500);}
.listing-card.tipo-tienda .card-signature span:nth-child(5){background:var(--teal-700);}
/* Etiqueta de tipo, en línea (antes era un "featured-tag" encima de la foto). */
.id-pill{
  display:inline-block; font-size:0.7rem; font-weight:700; padding:2px 8px; border-radius:999px;
  background:var(--tag-bg); color:var(--tag-text); margin-bottom:6px;
}
.listing-card.tipo-destacado .id-pill, .id-pill.is-destacado{background:var(--amber-50); color:var(--amber-700);}
.listing-card.tipo-tienda .id-pill, .id-pill.is-tienda{background:var(--teal-50); color:var(--teal-700);}
/* (v0.8.4) En las tarjetas, la etiqueta Destacado/Tienda va sobre la foto. */
.id-pill.on-photo{position:absolute; top:8px; left:8px; z-index:1; margin:0; box-shadow:0 1px 3px rgba(15,23,42,0.25);}
/* Estado + comuna en una sola fila de etiquetas. */
.card-tags{display:flex; flex-wrap:wrap; gap:6px;}
.listing-thumb{
  width:100%; aspect-ratio:1/1;
  background:var(--sage) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:0.8rem;
}
.listing-body{padding:12px 14px 14px;}
/* Título del anuncio: negro grafito explícito (--ink) en los anuncios
   normales — antes se veía blanco sobre blanco en algunos casos. */
.listing-title{font-family:'Poppins', sans-serif; font-weight:600; font-size:1.02rem; margin:0 0 4px 0; color:var(--slate-700);}
.listing-price{font-weight:700; color:var(--slate-700); font-size:1rem; margin-bottom:6px; font-variant-numeric:tabular-nums;}
.badge{
  display:inline-block;
  font-size:0.72rem;
  font-weight:600;
  padding:3px 9px;
  border-radius:20px;
  margin-bottom:8px;
  /* (v0.8.3) Un solo estilo neutro para todas las etiquetas de estado
     y condición (antes, un color distinto por condición). */
  background:var(--tag-bg); color:var(--tag-text);
}
.seller-line{font-size:0.8rem; color:var(--ink-soft); display:flex; align-items:center; gap:6px;}

.empty-state{
  text-align:center; padding:50px 20px; color:var(--ink-soft);
  border:1px dashed var(--line); border-radius:8px;
}

/* LISTING DETAIL */
.detail-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:26px;}
@media (max-width:720px){ .detail-grid{grid-template-columns:1fr;} }
.gallery-main{
  width:100%; aspect-ratio:1/1;
  background:var(--sage) center/cover no-repeat;
  border-radius:8px;
  margin-bottom:8px;
  border:1px solid var(--line);
}
.gallery-thumbs{display:flex; gap:8px; flex-wrap:wrap;}
.gallery-thumbs img{
  width:60px; height:60px; object-fit:cover; border-radius:6px;
  border:2px solid transparent; cursor:pointer;
}
.gallery-thumbs img.active{border-color:var(--link);}
.qa-list{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0;}
.qa-item{background:#fff; border:1px solid var(--line); border-radius:8px; padding:9px 12px;}
.qa-item .qa-label{font-size:0.72rem; color:var(--ink-soft); text-transform:none; margin-bottom:2px;}
.qa-item .qa-value{font-weight:600; font-size:0.9rem;}
.seller-card{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px; margin-top:14px;}
.info-row{display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); font-size:0.88rem;}
.info-row:last-child{border-bottom:none;}
.info-row span:first-child{color:var(--ink-soft);}

/* RATINGS */
.rating-item{border-bottom:1px solid var(--line); padding:12px 0;}
.rating-item:last-child{border-bottom:none;}
.rating-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;}
.rating-from{font-weight:600;}
.rating-date{font-size:0.76rem; color:var(--ink-soft);}

/* PHOTO UPLOAD */
.photo-grid{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px;}
.photo-slot{
  width:84px; height:84px; border-radius:8px; overflow:hidden; position:relative;
  border:1px solid var(--line);
}
.photo-slot img{width:100%; height:100%; object-fit:cover;}
.photo-remove{
  position:absolute; top:2px; right:2px;
  background:rgba(0,0,0,0.65); color:#fff; border:none;
  width:20px; height:20px; border-radius:50%; font-size:0.7rem; line-height:1;
}
.photo-add{
  width:84px; height:84px; border-radius:8px;
  border:1px dashed var(--sage);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); font-size:1.6rem; background:#fff;
}

/* PROFILE TABS */
.subtabs{display:flex; gap:6px; margin-bottom:18px; border-bottom:1px solid var(--line);}
.subtab{padding:9px 4px; margin-right:16px; background:none; border:none; color:var(--ink-soft); font-weight:600; border-bottom:2px solid transparent;}
.subtab.active{color:var(--heading); border-bottom-color:var(--link);}

/* MODAL */
.overlay{
  position:fixed; inset:0; background:rgba(20,20,15,0.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:50;
}
.modal{
  background:var(--card); border-radius:10px; padding:22px;
  max-width:420px; width:100%;
  border:1px solid var(--line);
}
.star-picker{display:flex; gap:6px; font-size:1.7rem; margin:10px 0 16px;}
.star-picker span{cursor:pointer; color:var(--line);}
.star-picker span.on{color:var(--gold);}

/* MICROBADGES */
.badges-row{display:inline-flex; align-items:center; gap:4px; vertical-align:middle;}
.badge-icon{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background-color:var(--sage);
  background-size:cover; background-position:center;
  border:1px solid var(--line);
  cursor:pointer;
  flex:none;
  line-height:1;
}
.badge-icon:hover{border-color:var(--gold);}
/* Fila genérica de "ítem administrable" (insignias, banners, correos):
   ícono/miniatura + info + acciones. Reutilizada por varias pestañas del
   panel de administración. */
.admin-item-card{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; margin-bottom:10px; background:var(--card);
}
.admin-item-card .badge-icon{width:36px; height:36px; font-size:20px;}
.admin-item-card .admin-item-thumb{
  width:56px; height:56px; border-radius:8px; object-fit:cover; flex:none;
  border:1px solid var(--line); background:var(--sage);
}
.admin-item-card .admin-item-info{flex:1; min-width:0;}
.admin-item-card .admin-item-name{font-weight:700; color:var(--heading);}
.admin-item-card .admin-item-desc{font-size:0.82rem; color:var(--ink-soft); word-break:break-all;}
.admin-item-flags{font-size:0.72rem; color:var(--ink-soft); margin-top:2px;}
.admin-item-flags span{background:var(--parchment); border:1px solid var(--line); border-radius:4px; padding:1px 6px; margin-right:4px;}
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--header-bg); color:#fff;
  padding:11px 20px; border-radius:8px; font-size:0.88rem;
  z-index:60;
  max-width:min(90vw, 420px);
  text-align:center;
}
.msg-error{background:#FBDFDD; color:var(--red-warn); border:1px solid #F0BAB6; border-radius:8px; padding:9px 12px; font-size:0.85rem; margin-bottom:12px;}
.link-btn{background:none; border:none; padding:0; color:var(--link); font-weight:600; font-size:0.85rem; text-decoration:underline; cursor:pointer;}
.required-mark{color:var(--red-warn);}
.recent-strip{margin-bottom:24px;}
.recent-strip .grid{grid-template-columns:repeat(auto-fill, minmax(180px,1fr));}
/* Footer (v0.8.3): franja oscura de ancho completo al final de la página. */
.app-version{background:var(--footer-bg); color:var(--footer-text); padding:18px 5%; margin-top:auto;}
.site-footer{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:6px 14px;
  font-size:0.72rem;
}
/* (v0.15.0) Link a la Política de Privacidad, centrado entre la versión y el crédito. */
.site-footer .footer-privacy{color:inherit; text-align:center; text-decoration:underline; text-underline-offset:2px;}
.site-footer .footer-credit{text-align:right;}
@media (max-width:640px){
  .site-footer{grid-template-columns:1fr; text-align:center;}
  .site-footer .footer-credit{text-align:center;}
}
/* (v0.15.0) Aviso para aceptar la Política de Privacidad. */
.privacy-banner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px;
  background:var(--section-bg); border:1px solid var(--line); border-left:4px solid var(--pine);
  border-radius:10px; padding:12px 16px; font-size:0.9rem;
}
.privacy-banner-actions{display:flex; gap:8px; flex-wrap:wrap;}
.privacy-doc h2{font-size:1.05rem; margin:22px 0 8px;}
.privacy-doc ul{padding-left:20px;}
.privacy-doc li{margin-bottom:6px;}
.btn-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}

.stats-banner{margin-bottom:26px; padding-bottom:20px; border-bottom:1px solid var(--line);}
/* (v0.10.0) 6 cifras en una línea, en 3 grupos (cantidades · indicadores ·
   tiempos) separados por una línea vertical. En pantallas angostas los
   grupos bajan a otra fila. */
.stats-row{display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:18px 0; text-align:center;}
.stats-group{display:flex; gap:18px; padding:0 18px;}
.stats-group + .stats-group{border-left:1px solid var(--line);}
.stats-row .stat-tile{min-width:0; width:112px;}
.stats-row .stat-number{font-size:2rem;}
.stats-row .stat-label{font-size:0.74rem;}
@media (max-width: 760px){
  .stats-group{padding:0 12px; gap:18px;}
  .stats-group + .stats-group{border-left:none;}
}
.stat-tile{min-width:110px;}
.stat-number{font-family:'Poppins', sans-serif; font-weight:700; font-size:2.4rem; color:var(--link); line-height:1;}
.stat-outof{font-size:0.5em; color:var(--ink-soft); font-weight:600;}
.stat-label{font-size:0.82rem; color:var(--ink-soft); margin-top:4px; text-transform:uppercase; letter-spacing:0.03em;}
.row-between{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px;}

/* BANNERS (Home y Puntos de Encuentro) */
.home-banners-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:26px;}
.home-banner{display:block; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:transparent;} /* (v0.14.1) sin fondo blanco: deja ver un PNG transparente */
/* Animación de entrada de los 3 banners del Home: el 1° entra desde la
   izquierda, el 2° desde abajo, el 3° desde la derecha. */
@keyframes slideInLeft{ from{opacity:0; transform:translateX(-36px);} to{opacity:1; transform:translateX(0);} }
@keyframes slideInUp{ from{opacity:0; transform:translateY(36px);} to{opacity:1; transform:translateY(0);} }
@keyframes slideInRight{ from{opacity:0; transform:translateX(36px);} to{opacity:1; transform:translateX(0);} }
@media (prefers-reduced-motion:no-preference){
  /* (v0.9.11) fill-mode "backwards" (antes "both"): al terminar la
     entrada, la animación suelta el transform y el hover puede actuar. */
  .home-banners-row .home-banner{animation-duration:0.6s; animation-timing-function:ease-out; animation-fill-mode:backwards;}
  .home-banners-row .home-banner:nth-child(1){animation-name:slideInLeft;}
  .home-banners-row .home-banner:nth-child(2){animation-name:slideInUp; animation-delay:0.08s;}
  .home-banners-row .home-banner:nth-child(3){animation-name:slideInRight; animation-delay:0.16s;}
}
/* (v0.9.11) Sin recorte: la imagen se ve completa, con su proporción. */
.home-banners-row{align-items:start;}
.home-banner img{display:block; width:100%; height:auto;}
/* (v0.10.0) Banners "Ad" del Inicio: uno por posición, horizontal y
   centrado, con su imagen completa. */
/* (v0.10.3) Ads horizontales (Inicio y Explorar): 10% de margen interno a
   cada lado. Los verticales (.side-ad) llevan 5%. */
.home-ad{text-align:center; margin-bottom:26px; padding:0 10%;}
.home-ad img{display:inline-block; max-width:100%; height:auto; border-radius:8px; vertical-align:top;}
.home-ad-link{display:inline-block; border-radius:8px;}
.home-ad-link:hover{box-shadow:0 14px 26px -10px rgba(15,23,42,0.35), 0 3px 8px rgba(0,0,0,0.08);}
@media (prefers-reduced-motion:no-preference){
  .home-ad-link{transition:transform 0.15s ease, box-shadow 0.15s ease;}
  .home-ad-link:hover{transform:translateY(-3px);}
}
/* (v0.10.2) Ads E1/E2 de Explorar: dentro de la grilla, a todo el ancho. */
.grid .grid-ad{grid-column:1 / -1; margin:4px 0;}
/* (v0.10.2) Ads SB/PE: columna vertical de 200 px a la derecha de todo el
   contenido de Se Buscan y Puntos de Encuentro. En pantallas angostas el
   Ad baja al final, centrado. */
.with-side-ad{display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:24px; align-items:start;}
.with-side-ad-main{min-width:0;}
.side-ad{margin:0; width:200px; padding:0 5%;}
.side-ad img{width:100%;}
@media (max-width: 760px){
  .with-side-ad{grid-template-columns:1fr;}
  .side-ad{margin:0 auto;}
}
/* (v0.9.11) Banners con link: el mismo hover que las tarjetas de anuncio. */
a.home-banner:hover{box-shadow:0 14px 26px -10px rgba(15,23,42,0.35), 0 3px 8px rgba(0,0,0,0.08);}
@media (prefers-reduced-motion:no-preference){
  a.home-banner{transition:transform 0.15s ease, box-shadow 0.15s ease;}
  a.home-banner:hover{transform:translateY(-3px);}
}
.meeting-points-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;}
.meeting-point-card{display:block; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:transparent;} /* (v0.14.1) sin fondo blanco: deja ver un PNG transparente */
.meeting-point-card img{display:block; width:100%; aspect-ratio:1/1; object-fit:cover;}
/* Imagen única de las 2 sub-secciones nuevas del Home (Noticias de
   Periscopio / Lugares de Encuentro). */
.home-tile{display:block; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:transparent;} /* (v0.14.1) sin fondo blanco: deja ver un PNG transparente */
/* (v0.10.1) Sin recorte: la imagen se ve completa, con su proporción. */
.home-tile img{display:block; width:100%; height:auto;}
/* (v0.10.1) Textos de la sección Segunda Partida / Noticias / Últimas
   Mejoras: 5% de margen a cada lado (solo el texto, no los títulos). */
.home-text{padding:0 5%;}
.home-subtitle{margin-top:22px;}
@media (max-width: 720px){
  .home-banners-row{grid-template-columns:repeat(2, 1fr);}
  .meeting-points-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width: 460px){
  .home-banners-row{grid-template-columns:1fr;}
  .meeting-points-grid{grid-template-columns:1fr;}
}
.muted{color:var(--ink-soft);}
.listing-actions{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}

/* Formulario de valoración al que se llegó por el link directo
   (/valorar/ID o el aviso tras marcar "Entregado") — v0.3.2. */
.pending-rate-form.rate-focus{
  outline:2px solid var(--gold); outline-offset:4px; border-radius:6px;
}

/* Centro de notificaciones del Home (v0.4.0): una tarjeta amarilla por
   aviso, con botón de acción y ✕ para descartarla. */
.notif-list{display:flex; flex-direction:column; gap:10px; margin-bottom:24px;}
.notif-card{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:#F5E6BE; border:1px solid #E5D19B; color:var(--ink);
  border-radius:8px; padding:12px 14px;
}
.notif-text{flex:1; min-width:200px; font-size:0.92rem;}
.notif-date{font-size:0.75rem; color:var(--ink-soft); margin-top:2px;}
.notif-actions{display:flex; align-items:center; gap:8px;}
.notif-dismiss{
  background:none; border:none; cursor:pointer; font-size:1rem; line-height:1;
  color:var(--ink-soft); padding:6px;
}
.notif-dismiss:hover{color:var(--ink);}
/* (v0.15.5) Campana sólida (antes emoji 🔔 con el número al lado), con el
   número en el circulito amarillo de la esquina. */
.nav-btn.nav-notif{display:inline-flex; align-items:center; padding-left:10px; padding-right:10px;}
.nav-notif .bell-icon{display:block; color:var(--gold);}

/* Ofertas recibidas en "Mi wishlist" (v0.4.0). */
.wishlist-offer{
  margin-top:8px; padding:8px 10px; border-left:3px solid var(--gold);
  background:var(--parchment); border-radius:4px; font-size:0.9rem;
}

/* Textos editables coloreados con [paleta]texto[/paleta] (v0.9.3): el
   5º tono (700) de cada paleta, salvo teal, que usa el 4º (500) porque
   el 700 casi no se distingue del texto normal (decisión de Rox). */
.tx-slate{color:var(--slate-700);}
.tx-amber{color:var(--amber-700);}
.tx-teal{color:var(--teal-500);}
.tx-rose{color:var(--rose-700);}
.tx-violet{color:var(--violet-700);}

/* Links dentro de los textos editables del sitio (v0.5.0). */
.rich-link{color:var(--link); font-weight:600; text-decoration:underline;}
.app-version .rich-link, .app-version .rich-link:hover{color:inherit; font-weight:inherit;}
.profile-link{color:inherit; font-weight:600; text-decoration:underline; text-decoration-color:var(--line);}
.profile-link:hover{color:var(--link);}

/* Perfil público (v0.5.0). */
.public-profile-head{display:flex; gap:16px; align-items:center; flex-wrap:wrap;}

/* ---------- Tabs verticales a la izquierda (v0.6.0, Fase C.2) ----------
   Mi Perfil y el panel de admin. En celular, la columna de tabs se
   reemplaza por un menú desplegable arriba del contenido. */
.side-tabs-layout{display:grid; grid-template-columns:250px minmax(0,1fr); gap:24px; align-items:start;}
.side-tabs{display:flex; flex-direction:column; gap:2px; position:sticky; top:12px;}
.side-tab{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px; border:none; border-radius:8px; background:none;
  color:var(--ink-soft); font-weight:600; font-size:0.92rem; cursor:pointer;
}
.side-tab:hover{background:var(--section-bg); color:var(--ink);}
.side-tab.active{background:var(--btn-bg); color:#fff;}
/* (v0.14.2) Barra divisoria entre grupos de tabs (panel: admin | superadmin). */
.side-tabs-sep{border:none; border-top:2px solid var(--line); margin:10px 12px; width:auto;}
/* (v0.9.9) Íconos SVG (Lucide) en el 5º tono de la paleta Slate; en la
   tab activa, blancos como el texto; en "Dar de Baja", rojos. */
.side-tab-icon{width:1.4em; flex:none; display:inline-flex; align-items:center; justify-content:center; color:var(--slate-700);}
.side-tab.active .side-tab-icon{color:#fff;}
/* (v0.11.0) "Dar de Baja": el texto y la tab activa van como las demás;
   solo el ícono queda en rojo, como detalle (pedido de Rox). */
.side-tab-danger .side-tab-icon, .side-tab-danger.active .side-tab-icon{color:var(--red-warn);}
.side-tabs-select{display:none; width:100%; margin-bottom:16px;}
.side-tabs-body{min-width:0;}
@media (max-width: 760px){
  .side-tabs-layout{grid-template-columns:1fr; gap:0;}
  .side-tabs{display:none;}
  .side-tabs-select{display:block;}
}

/* Mi Cuenta: cada sección en su tarjeta. */
.profile-section{margin-bottom:16px;}
.checkbox-list{display:flex; flex-direction:column; gap:6px;}
.checkbox-list label{display:flex; align-items:center; gap:8px; font-weight:500; margin:0;}
.danger-card{border-color:#F0BAB6;}

/* Mis Compras y Reservas: una fila por compra/reserva. */
.purchase-row{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:10px 0; border:none; border-bottom:1px solid var(--line); background:none; cursor:pointer;
}
.purchase-row:last-child{border-bottom:none;}
.purchase-thumb{width:52px; height:52px; flex:none; border-radius:6px; background:var(--section-bg) center/cover no-repeat;}
.purchase-info{flex:1; min-width:0;}
.purchase-right{text-align:right; flex:none;}

/* Nombre de cada Punto de Encuentro bajo su imagen (v0.6.0). */
.meeting-point-title{display:block; padding:8px 4px 0; font-weight:600; color:var(--ink); text-align:center;}
.meeting-point-count{display:block; padding:2px 4px 8px; font-size:0.8rem; color:var(--ink-soft); text-align:center;}

/* Explorar (v0.7.0): fila de botones de categoría. */
.category-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; justify-content:space-between;}
/* (v0.10.5) Dos grupos en la misma línea: categorías a la izquierda y
   tipos especiales (Subastas, Campañas, Tiendas) a la derecha. */
.category-tabs-group{display:flex; gap:8px; flex-wrap:wrap;}
/* Botones de filtro con ícono, cada uno en la paleta de su tipo:
   fondo en el tono 50, borde 200 y texto 700; el activo, relleno en 500. */
.filter-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:7px; border:1px solid; cursor:pointer;
  font-weight:600; font-size:0.9rem;
}
.filter-btn .lucide-icon{flex:none;}
.filter-normal{background:var(--slate-50); border-color:var(--slate-200); color:var(--slate-700);}
.filter-normal:hover{background:var(--slate-200);}
.filter-normal.active{background:var(--slate-500); border-color:var(--slate-500); color:#fff;}
.filter-subasta{background:var(--violet-50); border-color:var(--violet-200); color:var(--violet-700);}
.filter-subasta:hover{background:var(--violet-200);}
.filter-subasta.active{background:var(--violet-500); border-color:var(--violet-500); color:#fff;}
.filter-campana{background:var(--rose-50); border-color:var(--rose-200); color:var(--rose-700);}
.filter-campana:hover{background:var(--rose-200);}
.filter-campana.active{background:var(--rose-500); border-color:var(--rose-500); color:#fff;}
.filter-tienda{background:var(--teal-50); border-color:var(--teal-200); color:var(--teal-700);}
.filter-tienda:hover{background:var(--teal-200);}
.filter-tienda.active{background:var(--teal-500); border-color:var(--teal-500); color:#fff;}
/* Ícono "store" dentro de la etiqueta "Tienda" (v0.10.5). */
.id-pill .lucide-icon{vertical-align:-2px;}

/* Home (v0.7.0): "Últimas Mejoras". */
.release-note{margin-top:12px;}
.release-note-head{font-weight:700; font-size:0.9rem; color:var(--heading);}
.release-note ul{margin:4px 0 0 18px; padding:0;}
.release-note li{margin-bottom:2px;}

/* Karma (v0.8.0): ícono chico con el % de cumplimiento. */
.karma-badge{display:inline-block; font-size:0.75rem; font-weight:700; padding:1px 6px; border-radius:10px; white-space:nowrap; vertical-align:middle;}
.karma-ok{background:#E3F4E8; color:#1b1b1b;}
.karma-warn{background:#F5E6BE; color:#1b1b1b;}
.karma-low{background:#FBDFDD; color:#1b1b1b;}

/* Aviso de compromiso al reservar / publicar (v0.8.0). */
.commitment-note{background:#F5E6BE; border:1px solid #E5D19B; border-radius:8px; padding:10px 12px; font-size:0.88rem; margin:10px 0;}

/* Denuncias y cola de moderación (v0.8.0). */
.report-link{color:var(--ink-soft); font-weight:500;}
.moderation-message{white-space:pre-wrap; background:var(--parchment); border-left:3px solid var(--line); padding:8px 10px; margin:8px 0; font-size:0.9rem;}

/* "Se Buscan" (v0.8.1): título en mayúsculas y botón abajo a la izquierda. */
.wishlist-card{text-align:left; display:flex; flex-direction:column;}
.wishlist-card .listing-body{display:flex; flex-direction:column; flex:1;}
.wishlist-title{text-transform:uppercase;}
.wishlist-card-btn{margin-top:auto; align-self:flex-end;}
/* La frase "Buscado en ... por usuario con X🌀 karma" va como texto
   corrido (v0.8.2): .seller-line es flex y la partía en dos bloques. */
.wishlist-card .seller-line{display:block; line-height:1.6;}

/* ---------- Campañas de donación (v0.9.0) ----------
   Misma jerarquía cromática que las tarjetas de Explorar, en Rose. */
.listing-card.tipo-campana{border-top-color:var(--rose-500); background:var(--rose-50);}
.listing-card.tipo-campana .card-signature span:nth-child(1){background:var(--rose-50);}
.listing-card.tipo-campana .card-signature span:nth-child(2){background:var(--rose-200);}
.listing-card.tipo-campana .card-signature span:nth-child(3){background:var(--rose-400);}
.listing-card.tipo-campana .card-signature span:nth-child(4){background:var(--rose-500);}
.listing-card.tipo-campana .card-signature span:nth-child(5){background:var(--rose-700);}
.id-pill.is-campana{background:#fff; color:var(--rose-700); border:1px solid var(--rose-200); align-self:flex-start;}
.pill-icon{vertical-align:-1px;}
.card-title-link{color:inherit; text-decoration:none;}
.card-title-link:hover{text-decoration:underline;}
/* Página de la campaña y entrega de una donación: barra superior Rose. */
.tipo-campana-card{border-top:var(--top-bar-height) solid var(--rose-500);}
.campaign-description{white-space:pre-wrap;}
.campaign-progress{height:8px; background:var(--rose-200); border-radius:999px; overflow:hidden;}
.campaign-progress-bar{height:100%; background:var(--rose-500);}
.campaign-progress-label{font-size:0.8rem; color:var(--ink-soft); margin-top:3px;}
/* (v0.9.2) Bajo la barra: plazo a la izquierda y, a la derecha, corazón
   sólido (Rose 500) + números de la meta (Rose 700). */
.campaign-progress-row{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:4px; font-size:0.8rem;}
.campaign-deadline{color:var(--ink-soft); white-space:nowrap;}
.campaign-goal-nums{color:var(--rose-700); font-weight:700; white-space:nowrap; margin-left:auto;}
.campaign-goal-nums .heart-solid{color:var(--rose-500);}
/* Toda la tarjeta de campaña es clickeable. */
.campaign-card{cursor:pointer;}
.campaign-card:focus-visible{outline:2px solid var(--rose-500); outline-offset:2px;}
/* Encabezado de la página de la campaña: banner 1080x400 a todo el ancho de la tarjeta. */
.tipo-campana-card.has-banner{padding-top:0; overflow:hidden;}
.campaign-banner{display:block; width:calc(100% + 36px); margin:0 -18px 14px; aspect-ratio:1080/400; object-fit:cover;}
.campaign-photo-preview{display:block; width:96px; height:96px; object-fit:cover; border-radius:6px; margin-bottom:6px;}
.campaign-banner-preview{display:block; width:100%; max-width:324px; aspect-ratio:1080/400; object-fit:cover; border-radius:6px; margin-bottom:6px;}
.donation-list{margin:6px 0; padding-left:18px;}
.donation-list li{margin-bottom:3px;}
/* Secciones de un formulario: el título va montado sobre el borde del
   recuadro (fieldset/legend). El bloque de reglas usa el mismo patrón. */
.form-section{background:#fff;}
.form-section legend{font-size:0.95rem;}
.rules-block{background:var(--slate-50);}
.rules-block ul{margin:0; padding-left:18px; font-size:0.9rem;}
.rules-block li{margin-bottom:4px;}
/* (v0.9.5) Etiquetas de estado en semáforo: aceptada / pendiente /
   rechazada. Mismos tonos que el karma. */
.badge.badge-ok{background:#E3F4E8; color:#1B5E20;}
.badge.badge-warn{background:#F5E6BE; color:#7A5A00;}
.badge.badge-bad{background:#FBDFDD; color:#9B1C1C;}
/* Cierre de una donación en la campaña y en Mis Campañas. */
.donation-close-actions{align-items:center;}
.donation-close-msg{font-size:0.88rem; margin:6px 0 0;}
.donation-row{padding:8px 0; border-bottom:1px solid var(--line);}
.donation-row:last-of-type{border-bottom:none;}
.donation-row-head{display:flex; justify-content:space-between; align-items:center; gap:8px;}
/* (v0.9.8) Botones de quien publicó, en una sola fila ordenada. */
.seller-actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px;}
/* Destacar: 4º tono de la paleta Destacado (Amber 500), hover en el 5º. */
.btn-destacado{background:var(--amber-500); color:#fff; border:none;}
.btn-destacado:hover{background:var(--amber-700); color:#fff;}
/* (v0.9.4) Fila de botones alineada a la derecha. */
.actions-right{display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap;}
.donation-notes{white-space:pre-wrap; margin:4px 0; font-size:0.9rem;}
/* (v0.9.1) Botón de las campañas: 4º tono de la paleta Rose. */
.btn-campana{background:var(--rose-500); color:#fff; border:none;}
.btn-campana:hover{background:var(--rose-700); color:#fff;}
.campaign-card-objective{font-size:0.88rem; color:var(--ink); margin:0 0 8px;}
.campaign-objective{font-weight:600; margin:0 0 8px;}
.inline-check{display:inline-flex; align-items:center; gap:6px; font-weight:500; margin-top:6px;}

/* Ofertas recibidas en Mis Búsquedas (v0.8.1). */
.offer-actions{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:6px;}
.btn-whatsapp{background:#25D366; color:#fff; border:none; text-decoration:none;}
.btn-whatsapp:hover{background:#1EBE5A; color:#fff; text-decoration:none;}
.wa-icon{flex:none;}

/* ---------- v0.11.0: header, Mi Perfil y tablas ---------- */
/* Amarillo del dado del logo (--gold) para "Iniciar sesión" y "Mi Perfil". */
.btn-gold{background:var(--gold); color:#1E293B; border:none;}
.btn-gold:hover{background:#E0AE14; color:#1E293B;}
.topbar .nav-btn-gold{background:var(--gold); color:#1E293B; font-weight:600;}
.topbar .nav-btn-gold:hover, .topbar .nav-btn-gold.active{background:#E0AE14; color:#1E293B; border-color:transparent;}
.topbar .nav-btn-gold::after{display:none;}
/* Nombre de usuario que lleva al perfil público. */
.nav-username{color:inherit; text-decoration:none;}
/* (v0.11.1) En el header oscuro, al pasar el mouse va en el turquesa del
   subrayado del menú (antes tomaba el color oscuro de los links). */
.topbar .nav-username:hover{color:var(--teal-400); text-decoration:underline;}
.profile-username-link{font-weight:600; color:var(--link); text-decoration:none;}
.profile-username-link:hover{text-decoration:underline;}

/* Formularios: campos cortos de a dos (o tres) por línea. */
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
.field-row-3{grid-template-columns:1fr 1fr 1fr;}
.field-row-hint{margin:-8px 0 16px;}
@media (max-width: 640px){
  .field-row, .field-row-3{grid-template-columns:1fr;}
}
/* Mi Cuenta: Método de Pago / Entrega / Recepción se despliegan al hacer clic. */
.profile-collapsible > summary{
  cursor:pointer; list-style:none; font-family:'Poppins', sans-serif; font-weight:600;
  font-size:1.1rem; color:var(--heading); display:flex; align-items:center; justify-content:space-between;
}
.profile-collapsible > summary::-webkit-details-marker{display:none;}
.profile-collapsible > summary::after{content:'▾'; font-size:0.9rem; color:var(--ink-soft); transition:transform 0.15s ease;}
.profile-collapsible[open] > summary::after{transform:rotate(180deg);}
.profile-collapsible[open] > summary{margin-bottom:4px;}

/* Botones con el efecto de las tarjetas al pasar el mouse. */
.btn-lift{transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;}
.btn-lift:hover{box-shadow:0 14px 26px -10px rgba(15,23,42,0.35), 0 3px 8px rgba(0,0,0,0.08);}
@media (prefers-reduced-motion:no-preference){ .btn-lift:hover{transform:translateY(-3px);} }
/* "+ Publicar un anuncio": paleta de las publicaciones normales (Slate). */
.btn-publish{background:var(--slate-500); color:#fff; border:none;}
.btn-publish:hover{background:var(--slate-700); color:#fff;}

/* Tablas de Mi Perfil (Mis Publicaciones, Mis Búsquedas, Valoraciones). */
.table-wrap{overflow-x:auto;}
.data-table{width:100%; border-collapse:separate; border-spacing:0; font-size:0.88rem;} /* (v0.18.7) separate: para las esquinas redondeadas del encabezado oscuro */
.data-table th{text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-soft); font-weight:600; padding:6px 10px; border-bottom:1px solid var(--line);}
.data-table td{padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
.data-table tbody tr:last-child > td{border-bottom:none;}
.data-table .nowrap{white-space:nowrap;}
.data-table .col-center{text-align:center;}
.data-table .col-actions{text-align:right; width:1%; white-space:nowrap;}
.data-table .col-thumb{width:52px; padding-right:0;}
.table-thumb{display:block; width:44px; height:44px; border-radius:6px; background:var(--section-bg) center/cover no-repeat;}
.row-link{cursor:pointer;}
/* Mis Búsquedas: cada búsqueda con sus ofertas en una sub-tabla debajo. */
.search-row > td{background:var(--slate-50); border-bottom:none;}
.offers-row > td{padding:0 10px 12px 28px;}
.sub-table{background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden;}
.sub-table td{vertical-align:top;}
.offer-user-meta{margin-top:2px; display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.offer-message{margin-top:4px; white-space:pre-wrap;}
.stacked-actions{display:flex; flex-direction:column; align-items:stretch; gap:6px; min-width:140px;}
.stacked-actions .badge{text-align:center;}

/* ---------- v0.11.1 ---------- */
/* Insignias de Mi Perfil: 1,5 veces más grandes (30 px) y crecen un poco
   al pasar el mouse, desde abajo, para no perder la alineación. */
.profile-badges{align-items:flex-end; vertical-align:baseline;}
.profile-badges .badge-icon{transform-origin:center bottom;}
@media (prefers-reduced-motion:no-preference){
  .profile-badges .badge-icon{transition:transform 0.15s ease;}
  .profile-badges .badge-icon:hover{transform:scale(1.2);}
}
.username{font-weight:inherit;}

/* ---------- v0.11.2: filas de las tablas de Mi Perfil ---------- */
/* Filas intercaladas (blanco / #F1F5F9, Slate 100) para distinguir las
   líneas, también cuando la tabla va directo sobre el fondo gris de la
   página. En Mis Búsquedas cada búsqueda va en gris y su sub-tabla de
   ofertas debajo, en blanco. */
.data-table > tbody > tr > td{background:#fff; transition:background 0.12s ease, box-shadow 0.12s ease;}
.data-table > tbody > tr:nth-child(even) > td{background:#F1F5F9;}
.data-table > tbody > tr.search-row > td{background:#F1F5F9;}
.data-table > tbody > tr.offers-row > td{background:#fff;}
.data-table > thead > tr > th{background:#fff;}
/* Hover: la fila se tiñe de turquesa claro (Teal 100, #CCFBF1), el color
   de interacción del sitio. */
.data-table > tbody > tr:not(.offers-row):hover > td{background:#CCFBF1;}
/* Las filas que abren algo al hacer clic suman una barrita Teal a la izquierda. */
.data-table > tbody > tr.row-link:hover > td:first-child{box-shadow:inset 3px 0 0 var(--teal-500);}

/* ---------- v0.11.3: perfil público ---------- */
/* Cabecera: foto + una columna de datos (usuario e insignias, valoración,
   vendidos/comprados, karma, comuna). El fondo suave con su "Color para
   jugar" se pone en línea desde app.js. */
.public-profile-head{align-items:flex-start;}
.public-profile-rows{flex:1; min-width:200px; display:flex; flex-direction:column; gap:4px; font-size:0.92rem; color:var(--ink);}
.public-profile-rows h1{margin:0 0 2px;}
/* Tabla de dos columnas con los datos del perfil. */
.details-table{width:100%; border-collapse:collapse; font-size:0.92rem;}
.details-table th, .details-table td{padding:9px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top;}
.details-table tr:last-child th, .details-table tr:last-child td{border-bottom:none;}
.details-table th{width:42%; color:var(--ink-soft); font-weight:600;}
@media (max-width: 640px){ .details-table th{width:50%;} }

/* ================= v0.12.0: Publicar por pasos ================= */
/* 2/3 formulario + 1/3 tarjeta de vista previa (solo en computador). */
.publish-layout{display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:28px; align-items:start;}
.publish-preview{position:sticky; top:16px;}
@media (max-width: 900px){
  .publish-layout{grid-template-columns:minmax(0, 1fr);}
  .publish-preview{display:none;}
}
.publish-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
.publish-head h1{margin:0;}
.publish-progress{display:flex; align-items:center; gap:10px; font-weight:600; color:var(--ink-soft); font-size:0.9rem;}
.pub-restored{background:var(--teal-50); border:1px solid var(--teal-200); color:var(--teal-700); border-radius:8px; padding:10px 14px; margin-bottom:14px; font-size:0.9rem;}

/* Cada tanda de preguntas. */
.pub-step{background:#fff; border:1px solid var(--line); border-radius:10px; margin-bottom:12px;}
.pub-step-open{padding:20px 22px; border-color:var(--slate-400); box-shadow:0 8px 24px -16px rgba(15,23,42,0.35);}
.pub-step-num{display:flex; align-items:center; gap:8px; font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); margin-bottom:6px;}
.pub-q{font-size:1.35rem; margin:0 0 16px;}
.pub-lead{margin:-8px 0 14px; color:var(--ink-soft);}
@media (prefers-reduced-motion:no-preference){
  .pub-step-open{animation:pub-in 0.35s ease-out;}
  @keyframes pub-in{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
}
/* Tanda ya respondida: una línea con "Editar". */
.pub-step-done{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 16px; font-size:0.9rem;}
.pub-summary-text{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0;}
.pub-summary-text .lucide-icon{vertical-align:-3px;}
.pub-summary-check{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--teal-500); color:#fff; font-size:0.72rem; font-weight:700; flex:none;}
.pub-summary-label{font-weight:700; color:var(--heading);}

/* Paso 1: tres botones grandes y cuadrados. */
.pub-choices{display:grid; grid-template-columns:repeat(3, minmax(0, 170px)); gap:14px;}
.pub-choice{
  aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:var(--slate-50); border:2px solid var(--slate-200); border-radius:14px; cursor:pointer;
  font-weight:700; font-size:1rem; color:var(--slate-700);
}
.pub-choice:hover{border-color:var(--slate-400); box-shadow:0 14px 26px -10px rgba(15,23,42,0.35);}
.pub-choice.active{border-color:var(--btn-bg); background:#fff;}
.pub-choice-icon{color:var(--slate-500);}
@media (prefers-reduced-motion:no-preference){
  .pub-choice{transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;}
  .pub-choice:hover{transform:translateY(-3px);}
}
@media (max-width: 520px){
  .pub-choices{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px;}
  .pub-choice{font-size:0.78rem; gap:8px; padding:6px; text-align:center;}
  .pub-step-open{padding:16px 14px;}
}
.pub-big-input{font-size:1.15rem; padding:12px 14px;}
.pub-players{display:flex; gap:8px; align-items:center;}
.pub-players input{max-width:90px;}

/* Paso 4: botoneras como "Iniciar sesión | Crear cuenta". */
.pub-segmented{display:flex; flex-wrap:wrap; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.pub-segmented button{flex:1 1 auto; padding:9px 12px; background:#fff; border:none; border-right:1px solid var(--line); font-weight:600; color:var(--ink-soft); cursor:pointer; font-size:0.88rem;}
.pub-segmented button:last-child{border-right:none;}
.pub-segmented button:hover{background:var(--slate-50);}
.pub-segmented button.active{background:var(--btn-bg); color:#fff;}

/* Paso 5: fotos y precio. */
.pub-tips{margin:10px 0 4px; padding:0; list-style:none; display:flex; gap:14px; flex-wrap:wrap; font-size:0.85rem; color:var(--ink-soft);}
.pub-price-input{display:flex; align-items:center; border:1px solid var(--line); border-radius:8px; background:#fff; max-width:240px; overflow:hidden;}
.pub-price-input span{padding:0 4px 0 14px; font-weight:700; color:var(--ink-soft); font-size:1.15rem;}
.pub-price-input input{border:none; font-size:1.15rem; padding:12px 14px 12px 4px; outline-offset:-2px;}
.photo-slot{position:relative;}
.photo-cover{position:absolute; top:4px; left:4px; width:24px; height:24px; border-radius:50%; border:none; background:rgba(15,23,42,0.55); color:#fff; font-size:0.8rem; cursor:pointer; line-height:24px; padding:0;}
.photo-cover.is-cover{background:var(--gold); color:#1E293B;}

/* Paso 6: destacar y publicar. */
.pub-feature{display:flex; gap:10px; align-items:flex-start; background:var(--amber-50); border:2px solid var(--amber-200); border-radius:10px; padding:12px 14px; margin:12px 0; cursor:pointer; font-size:0.9rem;}
.pub-feature.active{border-color:var(--amber-500);}
.pub-feature input{margin-top:3px;}
.pub-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; margin-top:14px;}
.pub-publish{padding:13px 22px; font-size:0.98rem;}

/* Tarjeta de vista previa. */
.pub-preview-label{font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); margin:4px 0 8px;}
.pub-preview-card{cursor:default; width:100%;}
.pub-preview-card:hover{transform:none;}
.pub-preview-nophoto{color:#fff; font-weight:600; font-size:0.9rem;}
.pub-preview-cat{display:flex; align-items:center; gap:5px; font-size:0.75rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:4px;}
.pub-preview-rows{margin:8px 0 4px; font-size:0.82rem;}
.pub-preview-row{display:flex; justify-content:space-between; gap:8px; padding:2px 0;}
.pub-preview-row span:first-child{color:var(--ink-soft);}
.pub-preview-desc{font-size:0.82rem; color:var(--ink-soft); margin:6px 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

/* Dado de "Prueba tu suerte" y celebración. */
.pub-overlay{position:fixed; inset:0; z-index:9000; background:rgba(15,23,42,0.55); display:flex; align-items:center; justify-content:center; overflow:hidden; padding:16px;}
.pub-luck{text-align:center; color:#fff;}
.pub-luck-stage{position:relative; width:84px; height:150px; margin:0 auto;}
.pub-luck-die{position:absolute; left:0; bottom:26px; width:84px; height:84px; animation:boot-hop 0.35s infinite;}
.pub-luck-face{position:absolute; inset:0; opacity:0; animation:boot-face 2.1s steps(1, end) infinite;}
.pub-luck-face-1{animation-delay:0s;} .pub-luck-face-2{animation-delay:-1.75s;} .pub-luck-face-3{animation-delay:-1.4s;}
.pub-luck-face-4{animation-delay:-1.05s;} .pub-luck-face-5{animation-delay:-0.7s;} .pub-luck-face-6{animation-delay:-0.35s;}
.pub-luck-shadow{position:absolute; left:8px; bottom:6px; width:68px; height:12px; border-radius:50%; background:#000; opacity:0.3; animation:boot-shadow 0.35s infinite;}
.pub-luck-text{font-weight:700; margin-top:6px;}
.pub-celebration{position:relative; z-index:1; background:#fff; border-radius:16px; padding:28px 26px 22px; max-width:440px; width:100%; text-align:center; box-shadow:0 24px 60px -20px rgba(0,0,0,0.5);}
.pub-celebration h2{margin:8px 0 6px;}
.pub-celebration .pub-actions{justify-content:center;}
.pub-celebration-emoji{font-size:2.6rem;}
.pub-celebration-die{display:flex; justify-content:center;}
.pub-luck-phrase{font-weight:600; color:var(--heading); margin:12px 0 4px;}
.pub-confetti{position:absolute; top:-40px; font-size:26px; animation-name:pub-fall; animation-timing-function:linear; animation-fill-mode:forwards; pointer-events:none;}
@keyframes pub-fall{to{transform:translateY(115vh) rotate(540deg);}}
@media (prefers-reduced-motion: reduce){
  .pub-luck-die, .pub-luck-face, .pub-luck-shadow{animation:none;}
  .pub-luck-face-6{opacity:1;}
  .pub-confetti{display:none;}
}

/* ---------- v0.13.0: Mis Insignias, códigos y panel (Funciones, Pagado manual) ---------- */
.my-badges{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px;}
.my-badge{display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff;}
.my-badge .badge-icon{flex:none;}
.my-badge-name{font-weight:700;}
.redeem-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px;}
.redeem-input{max-width:220px; text-transform:uppercase; letter-spacing:4px; font-weight:700; font-size:1.1rem;}
.admin-tier-row{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:6px;}
.admin-tier-row input[type=date]{width:auto; padding:4px 6px;}
.feature-row{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:12px 0; border-top:1px solid var(--line);}
.feature-label{font-weight:600; flex:1 1 240px;}
.feature-row .pub-segmented{flex:0 1 auto;}

/* ---------- v0.14.0: dueños de insignias ---------- */
.owned-badge-head{display:flex; gap:12px; align-items:center; margin-bottom:12px;}
.owned-badge h4{margin:18px 0 8px;}
.admin-owners{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:6px;}
.admin-owners input{width:130px; padding:4px 8px; font-size:0.85rem;}

/* (v0.14.1) Insignia con ícono subido: se muestra tal cual (PNG
   transparente o GIF animado de 30x30), sin recorte redondo, fondo ni
   borde. El círculo verde queda solo para las que no tienen ícono (🏅).
   Dentro de cajas más grandes (Mis Insignias, panel) el ícono no se
   agranda: se muestra a 30px, centrado. */
.badge-icon.has-img{
  border-radius:0; border:none; background-color:transparent;
  background-size:contain; background-repeat:no-repeat;
}
.my-badge .badge-icon.has-img,
.owned-badge .badge-icon.has-img,
.admin-item-card .badge-icon.has-img{background-size:30px 30px;}

/* ---------- v0.14.3: panel de administración ordenado ---------- */
/* Sub-tabs de Panel > Editor: en pantallas angostas pasan a varias líneas. */
.editor-subtabs{flex-wrap:wrap; row-gap:0;}
.editor-subtabs .subtab{margin-right:8px;}
/* Título de una sección dentro de una tab (ej. "Códigos de invitación" en Insignias). */
.admin-section-title{font-size:1.15rem; margin:28px 0 12px;}

/* ---------- v0.14.4: tablas del panel (Usuarios, Anuncios, Registro) ---------- */
/* Etiqueta de cuenta: Gratuito / Pagado / Concilio / Comercial. */
.plan-tag, .kind-tag{display:inline-block; font-size:0.74rem; font-weight:700; padding:2px 8px; border-radius:10px; white-space:nowrap; border:1px solid;}
.plan-gratuito{background:var(--slate-50); border-color:var(--slate-200); color:var(--slate-700);}
.plan-pagado{background:var(--amber-50); border-color:var(--amber-200); color:var(--amber-700);}
.plan-concilio{background:var(--violet-50); border-color:var(--violet-200); color:var(--violet-700);}
.plan-comercial{background:var(--teal-50); border-color:var(--teal-200); color:var(--teal-700);}
/* Tipo de publicación (Venta / Subasta / Búsqueda) y quién (Persona / Tienda). */
.kind-venta{background:var(--slate-50); border-color:var(--slate-200); color:var(--slate-700);}
.kind-subasta{background:var(--violet-50); border-color:var(--violet-200); color:var(--violet-700);}
.kind-busqueda{background:var(--amber-50); border-color:var(--amber-200); color:var(--amber-700);}
.kind-persona{background:#fff; border-color:var(--line); color:var(--ink-soft);}
.kind-tienda{background:var(--teal-50); border-color:var(--teal-200); color:var(--teal-700);}
.plan-paid{display:inline-flex; gap:6px; align-items:center; margin-left:6px;}
.plan-paid[hidden]{display:none;}
.data-table th{white-space:nowrap;}
.plan-paid input[type=date]{width:auto; padding:4px 6px;}
.data-table select{padding:4px 8px; width:auto;}
/* Karma con su historial desplegable. */
.karma-details summary{cursor:pointer; list-style:none;}
.karma-details summary::-webkit-details-marker{display:none;}
.karma-details ul{margin:6px 0 0 16px; padding:0; font-size:0.78rem; white-space:normal; min-width:200px;}
.plan-change{margin-top:4px; display:flex; flex-wrap:wrap; gap:4px; align-items:center;}
.plan-change .plan-paid{margin-left:0;}
.badge-holders{margin-top:6px; font-size:0.82rem;}
.badge-holders summary{cursor:pointer; color:var(--ink-soft);}
.badge-holders .badge{margin:4px 4px 0 0;}

/* ---------- v0.14.5: moderación (denuncias, comentarios) ---------- */
.moderation-message-cell{max-width:320px; white-space:pre-line;}
.peace-tag{display:inline-block; font-size:0.75rem; font-weight:700; padding:1px 8px; border-radius:10px; background:var(--teal-50); border:1px solid var(--teal-200); color:var(--teal-700); white-space:nowrap;}
.censored-tag{display:inline-block; font-size:0.78rem; font-style:italic; color:var(--rose-700); background:var(--rose-50); border:1px solid var(--rose-200); border-radius:6px; padding:1px 8px;}
.btn-censor{display:inline-flex; align-items:center; gap:4px;}
/* Cara feliz: "revisado, está bien". Al pasar el mouse se balancea; al
   hacer clic da un saltito verde y la fila se va. */
.btn-review{
  display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
  width:32px; height:32px; margin-right:4px; border-radius:50%; cursor:pointer;
  border:1px solid var(--teal-200); background:var(--teal-50); color:var(--teal-700);
}
.btn-review:hover{background:var(--teal-500); border-color:var(--teal-500); color:#fff;}
.btn-review.is-happy{background:var(--teal-500); border-color:var(--teal-500); color:#fff;}
@media (prefers-reduced-motion:no-preference){
  .btn-review:hover .lucide-icon{animation:review-wiggle 0.6s ease-in-out infinite;}
  .btn-review.is-happy .lucide-icon{animation:review-pop 0.5s ease-out forwards;}
  .data-table tr.row-leaving > td{transition:opacity 0.45s ease 0.2s; opacity:0;}
}
@keyframes review-wiggle{0%,100%{transform:rotate(0);} 25%{transform:rotate(-14deg);} 75%{transform:rotate(14deg);}}
@keyframes review-pop{0%{transform:scale(1);} 40%{transform:scale(1.5) rotate(-10deg);} 70%{transform:scale(0.9) rotate(6deg);} 100%{transform:scale(1.15);}}
.mod-actions{display:flex; flex-direction:column; gap:4px; align-items:stretch;}
.mod-actions .btn{justify-content:center;}

/* ---------- v0.14.6: Moderación, más amable para quien modera ---------- */
/* Saludo arriba: lo que hay pendiente y lo que llevas hoy. */
.mod-hello{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 18px; margin-bottom:22px; border-radius:12px;
  background:linear-gradient(135deg, var(--teal-50), #fff); border:1px solid var(--teal-200);}
.mod-hello-main{display:flex; flex-direction:column; gap:2px;}
.mod-hello-main strong:first-child{font-size:1.05rem; color:var(--heading);}
.mod-hello-main span{color:var(--ink-soft); font-size:0.9rem;}
.mod-hello-chips{display:flex; gap:6px; flex-wrap:wrap;}
.mod-hello-chips span{font-size:0.8rem; padding:3px 10px; border-radius:20px; background:#fff; border:1px solid var(--teal-200); color:var(--ink-soft);}
.mod-hello-chips strong{color:var(--teal-700);}
.mod-hello-done{background:linear-gradient(135deg, var(--amber-50), #fff); border-color:var(--amber-200);}
/* Contador junto al título de cada sección. */
.mod-count{display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 7px;
  margin-left:6px; border-radius:12px; font-size:0.8rem; background:var(--rose-50); color:var(--rose-700); border:1px solid var(--rose-200); vertical-align:middle;}
/* Sección sin pendientes. */
.mod-empty{display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:10px; background:#fff; border:1px dashed var(--line); color:var(--ink-soft); font-size:0.9rem;}
.mod-empty-icon{font-size:1.3rem;}
/* ☮ Paz: el botón "amable" de cada caso. */
.btn-peace{background:var(--teal-50); border:1px solid var(--teal-200); color:var(--teal-700); font-weight:700;}
.btn-peace:hover{background:var(--teal-500); border-color:var(--teal-500); color:#fff;}
.kind-origin{background:#fff; border-color:var(--line); color:var(--ink-soft);}
.kind-donacion{background:var(--rose-50); border-color:var(--rose-200); color:var(--rose-700);}
.mod-parties div{font-size:0.84rem; line-height:1.6;}
.mod-answer{display:inline-block; min-width:26px; text-align:center; font-size:0.72rem; font-weight:700; border-radius:8px; padding:0 5px; margin-left:4px;}
.mod-answer-yes{background:var(--teal-50); color:var(--teal-700); border:1px solid var(--teal-200);}
.mod-answer-no{background:var(--rose-50); color:var(--rose-700); border:1px solid var(--rose-200);}
.mod-answer-none{background:var(--slate-50); color:var(--slate-500); border:1px solid var(--slate-200);}
/* Celebración: emojis que suben desde el botón y se desvanecen. */
.mod-float{position:fixed; z-index:9999; pointer-events:none; transform:translate(-50%, -50%); opacity:0;
  animation:mod-float-up 1.1s ease-out forwards;}
@keyframes mod-float-up{
  0%{opacity:0; transform:translate(-50%, -50%) scale(0.6);}
  15%{opacity:1;}
  100%{opacity:0; transform:translate(-50%, -150px) scale(1.15) rotate(12deg);}
}
@media (prefers-reduced-motion:reduce){ .mod-float{display:none;} }
.mod-tags{display:flex; gap:4px; flex-wrap:wrap; margin-top:3px;}
.moderation-message-cell{max-width:240px; font-size:0.84rem;}

/* ---------- v0.14.7: recordatorio de tareas y historial de moderación ---------- */
/* Círculo rojo con lo que hay por revisar: en la tab Moderación y, montado
   sobre el borde, en el botón "Panel" del header. */
.todo-badge{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
  border-radius:10px; background:#E11D48; color:#fff; font-size:0.72rem; font-weight:800; line-height:1;
  box-shadow:0 0 0 2px #fff;}
.todo-badge-inline{margin-left:auto;}
.side-tab.active .todo-badge-inline{box-shadow:0 0 0 2px var(--btn-bg);}
.nav-btn{position:relative;}
.todo-badge-corner{position:absolute; top:-8px; right:-8px; box-shadow:0 0 0 2px var(--heading, #1E293B);}
@media (prefers-reduced-motion:no-preference){
  .todo-badge-corner{animation:todo-pulse 2.4s ease-in-out infinite;}
}
@keyframes todo-pulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.12);}}
/* Tu historial: tres números grandes. */
.mod-history{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;}
.mod-history-item{display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 10px; border-radius:12px;
  background:#fff; border:1px solid var(--line); color:var(--ink-soft); font-size:0.85rem; transition:transform 0.15s ease, box-shadow 0.15s ease;}
.mod-history-item:hover{transform:translateY(-2px); box-shadow:0 10px 20px -12px rgba(15,23,42,0.35);}
.mod-history-num{font-size:1.9rem; font-weight:800; color:var(--teal-700); line-height:1.1;}

/* ---------- v0.14.8 / v0.14.9: Dashboard del superadmin (compacto) ---------- */
.kpi-strip{display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:0; margin-bottom:16px;
  background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.kpi{display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-right:1px solid var(--line);}
.kpi:last-child{border-right:none;}
.kpi-value{font-weight:700; font-size:1.1rem; color:var(--heading); font-variant-numeric:tabular-nums;}
.kpi-label{font-size:0.7rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-soft);}
.dash-block{padding:12px 14px; margin-bottom:16px;}
.dash-block-title{font-weight:700; font-size:0.9rem; color:var(--heading); margin-bottom:6px;}
.dash-table td, .dash-table th{padding:5px 8px;}
.dash-table .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
.dash-table .dash-subrow td:first-child{padding-left:22px; color:var(--ink-soft); font-size:0.82rem;}
.dash-table .dash-subrow td{font-size:0.82rem;}
.dash-two{display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); gap:16px;}
@media (max-width: 520px){ .dash-two{grid-template-columns:1fr;} }
.dash-two .dash-block{margin-bottom:0;}
.dash-note{font-size:0.74rem; color:var(--ink-soft); margin:8px 0 0;}
.spark{display:block;}
.spark rect{fill:var(--teal-400);}
.spark rect.spark-zero{fill:var(--slate-200);}
.spark rect.spark-today{fill:var(--teal-700);}
.dash-table td:has(.dash-meter){white-space:nowrap;}
.dash-meter{display:inline-block; width:60px; height:7px; border-radius:4px; background:var(--slate-50); border:1px solid var(--line); overflow:hidden; vertical-align:middle; margin-right:6px;}
.dash-meter span{display:block; height:100%; background:var(--teal-500);}
.dash-regions{display:flex; flex-direction:column; gap:5px;}
.dash-region{display:grid; grid-template-columns:minmax(110px, 190px) 1fr 44px; gap:8px; align-items:center; font-size:0.82rem;}
.dash-region .num{text-align:right; font-variant-numeric:tabular-nums;}
.dash-region-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dash-region-bar{height:8px; border-radius:4px; background:var(--slate-50); overflow:hidden;}
.dash-region-bar span{display:block; height:100%; background:var(--teal-400); border-radius:4px;}

/* ---------- v0.14.12: títulos de página y Puntos de Encuentro ---------- */
/* Títulos de página siempre en mayúsculas (pedido de Rox). El texto se
   guarda/edita normal; solo se muestra en mayúsculas. No aplica a títulos
   que son nombres propios (un juego, un usuario, una campaña). */
.page-title{text-transform:uppercase; letter-spacing:0.01em;}
.page-head{align-items:center; margin-bottom:10px;}
.meeting-point-checks label{display:flex; align-items:center; gap:6px;}
.meeting-point-checks input:disabled + *, .meeting-point-checks label:has(input:disabled){color:var(--ink-soft); opacity:0.6;}

/* ---------- v0.14.13: Comprar, dos opciones comparables ---------- */
.buy-box{background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px;}
.buy-title{margin:0 0 10px;}
.buy-delivery{margin-bottom:12px;}
.buy-options{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px;}
@media (max-width: 560px){ .buy-options{grid-template-columns:1fr;} }
.buy-option{display:flex; flex-direction:column; gap:8px; padding:14px; border:1.5px solid var(--line); border-radius:12px; background:#fff; margin:0;
  transition:border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;}
.buy-option:hover, .buy-option:focus-within{border-color:var(--teal-400); box-shadow:0 10px 22px -14px rgba(15,23,42,0.35);}
@media (prefers-reduced-motion:no-preference){ .buy-option:hover{transform:translateY(-2px);} }
.buy-option-main{border-color:var(--teal-200); background:linear-gradient(180deg, var(--teal-50), #fff 60%);}
.buy-option-head{display:flex; align-items:center; gap:8px;}
.buy-option-head h4{margin:0; font-size:1rem;}
.buy-option-num{flex:none; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%;
  background:var(--teal-500); color:#fff; font-weight:800; font-size:0.8rem;}
.buy-option p{margin:0; font-size:0.86rem; color:var(--ink-soft);}
.buy-option-price{font-family:'Poppins', sans-serif; font-weight:700; font-size:1.5rem; color:var(--heading);}
.buy-option-foot{margin-top:auto; padding-top:4px;}
.buy-option-foot .btn{width:100%; justify-content:center;}
.buy-offer-field{margin:0;}
.buy-offer-field .pub-price-input input{font-size:1.1rem;}
.buy-option-pending{background:var(--amber-50); border-color:var(--amber-200);}

/* ---------- v0.14.16: compartir ---------- */
.share-row{display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:flex-end;}
.btn-whatsapp{display:inline-flex; align-items:center; gap:6px;}
.btn-whatsapp .wa-icon{flex:none;}
/* Búsqueda abierta desde un link compartido (/busqueda/ID). */
.wishlist-card.is-highlighted{outline:3px solid #25D366; outline-offset:2px;}
@media (prefers-reduced-motion:no-preference){
  .wishlist-card.is-highlighted{animation:search-glow 1.6s ease-in-out 2;}
}
@keyframes search-glow{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} 50%{box-shadow:0 0 0 10px rgba(37,211,102,0.25);}}
/* (v0.14.17) Pie de una tarjeta de búsqueda: compartir + ofrecer. */
.wishlist-card-actions{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
.wishlist-card-actions .btn-whatsapp .wa-icon{width:16px; height:16px;}

/* ---------- v0.14.19: cierre independiente (sí + valorar / no) ---------- */
.close-step-title{font-weight:700; color:var(--heading); margin:0 0 6px;}
.close-step-actions{display:flex; gap:8px; flex-wrap:wrap;}
.close-rate-form, .close-no-form{margin-top:6px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fff;}
.close-rate-form{border-color:var(--teal-200); background:linear-gradient(180deg, var(--teal-50), #fff 70%);}
.close-no-form{border-color:var(--rose-200);}
.close-inline{margin-top:8px;}

/* ---------- v0.14.20: estrellas para valorar ---------- */
/* Parten vacías (hay que elegir). Más visibles, y al pasar el mouse se
   iluminan hasta la estrella apuntada. */
.star-picker span{color:var(--slate-200); transition:color 0.1s ease, transform 0.1s ease;}
.star-picker span.on{color:var(--gold);}
@media (hover:hover){
  .star-picker:hover span{color:var(--gold);}
  .star-picker span:hover ~ span{color:var(--slate-200);}
  .star-picker span:hover{transform:scale(1.15);}
}

/* ---------- v0.14.21: pendientes al darse de baja ---------- */
.baja-pending{margin-bottom:16px; border-color:var(--amber-200); background:linear-gradient(180deg, var(--amber-50), #fff 50%);}
.baja-pending-item{padding:12px 0; border-top:1px solid var(--line);}
.baja-pending-head{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; margin-bottom:6px;}

/* ---------- v0.14.22: ojito de contraseñas y tabla de usuarios ---------- */
.pw-wrap{position:relative; display:block;}
.pw-wrap input{padding-right:42px; width:100%;}
.pw-toggle{position:absolute; right:6px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border:none; background:none; color:var(--ink-soft); cursor:pointer; border-radius:6px;}
.pw-toggle:hover{color:var(--heading); background:var(--slate-50);}
.data-table th.num, .data-table td.num{text-align:right; font-variant-numeric:tabular-nums;}
.data-table th .lucide-icon{vertical-align:middle;}
.user-dates{font-size:0.8rem; line-height:1.35;}
.activity-cell{font-variant-numeric:tabular-nums;}

/* ---------- v0.14.24: fotos (cámara y vista previa) ---------- */
/* En el celular: "Tomar foto" (cámara) y "Galería". */
.photo-add span{display:block; font-size:0.72rem; font-weight:600; margin-top:2px;}
.photo-add-camera{border-color:var(--teal-400); color:var(--teal-700); background:var(--teal-50);}
/* Vista previa en el computador: la foto completa sobre la misma foto
   difuminada, igual a como la guarda el servidor. */
.listing-thumb.thumb-fill{position:relative; overflow:hidden; background:none;}
.thumb-fill-bg{position:absolute; inset:-12%; background:center/cover no-repeat; filter:blur(18px) brightness(0.9);}
.thumb-fill-img{position:absolute; inset:0; background:center/contain no-repeat;}
.photo-add{flex-direction:column;}

/* (v0.15.1) Panel > Insignias: barras "Otorgar insignia" (morado) y "Dar
   propiedad" (dorado), de distinto color para no confundirlas. */
.grant-bar{margin-bottom:10px; border-left:4px solid var(--pine);}
.grant-bar-badge{background:color-mix(in srgb, var(--pine) 7%, #fff);}
.grant-bar-owner{border-left-color:var(--gold); background:color-mix(in srgb, var(--gold) 12%, #fff); margin-bottom:14px;}
.btn-owner{background:var(--gold); color:var(--ink); border:1px solid var(--gold); font-weight:600;}
.btn-owner:hover{filter:brightness(0.95);}
.badge-owner-chip{background:color-mix(in srgb, var(--gold) 18%, #fff); border-color:color-mix(in srgb, var(--gold) 45%, #fff);}
.data-table .col-check{text-align:center;}
.data-table .col-check input{width:18px; height:18px; cursor:pointer; accent-color:var(--pine);}
.badge-icon-preview{display:flex; align-items:center; gap:12px; margin-top:8px;}
.badge-icon-preview[hidden]{display:none;}

/* (v0.15.2) Mi Cuenta: barra de progreso, "Te falta", estado de cada
   sección, "Guardado ✓", campo resaltado, RUT inválido y avisos. */
.profile-progress{margin-bottom:16px;}
.profile-progress-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px;}
.profile-progress-head strong{font-family:'Poppins', sans-serif; font-size:1.05rem; color:var(--heading);}
.progress-track{height:12px; border-radius:999px; background:var(--line); overflow:hidden;}
.progress-fill{height:100%; border-radius:999px; background:linear-gradient(90deg, var(--pine), color-mix(in srgb, var(--pine) 60%, var(--gold))); transition:width 0.9s cubic-bezier(.2,.8,.2,1);}
.profile-progress.is-complete .progress-fill{background:linear-gradient(90deg, var(--pine), var(--gold));}
.profile-progress-note{margin:10px 0 0; font-size:0.9rem; color:var(--ink);}
.profile-missing{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; font-size:0.85rem;}
.missing-chip{border:1px dashed color-mix(in srgb, var(--pine) 55%, #fff); background:color-mix(in srgb, var(--pine) 6%, #fff); color:var(--pine); border-radius:999px; padding:3px 10px; font-size:0.82rem; cursor:pointer;}
.missing-chip:hover{background:color-mix(in srgb, var(--pine) 14%, #fff);}
.profile-collapsible > summary .section-title{flex:1;}
.section-status{font-family:inherit; font-size:0.78rem; font-weight:600; color:var(--ink-soft); background:var(--section-bg); border-radius:999px; padding:2px 10px; margin-right:10px; white-space:nowrap;}
.section-status.is-done{color:#2E7D4F; background:#E3F4EA;}
.saved-flash{font-size:0.78rem; font-weight:600; color:#2E7D4F; margin-right:10px; animation:savedFlash 3.5s ease forwards;}
@keyframes savedFlash{0%{opacity:0; transform:translateY(3px);} 10%{opacity:1; transform:none;} 80%{opacity:1;} 100%{opacity:0;}}
.field-highlight{animation:fieldHighlight 2.2s ease;}
@keyframes fieldHighlight{0%,40%{box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 70%, #fff); border-radius:8px; background:color-mix(in srgb, var(--gold) 12%, #fff);} 100%{box-shadow:0 0 0 0 transparent;}}
.input-invalid{border-color:#C0392B !important;}
.field-error{color:#C0392B; font-size:0.8rem; margin:4px 0 0;}
.privacy-note{background:var(--section-bg); border-radius:8px; padding:8px 12px;}
.use-mine-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:12px;}
.profile-nudge{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; background:color-mix(in srgb, var(--gold) 14%, #fff); border:1px solid color-mix(in srgb, var(--gold) 45%, #fff); border-radius:10px; padding:10px 14px; margin-bottom:14px; font-size:0.9rem;}
.profile-nudge-sm{display:block; font-size:0.82rem; padding:8px 12px; margin:8px 0 0;}
@media (prefers-reduced-motion: reduce){ .progress-fill{transition:none;} .saved-flash,.field-highlight{animation:none;} }
@media (max-width:640px){ .profile-collapsible > summary{font-size:1rem;} }

/* (v0.15.4) Editor de la foto de perfil: recorte redondo, acercar y centrar. */
.avatar-editor{background:var(--card); border-radius:16px; padding:22px; width:min(360px, calc(100vw - 32px)); box-shadow:0 20px 60px rgba(15,23,42,0.35); position:relative; z-index:2; text-align:center;}
.avatar-editor h3{margin:0 0 4px;}
.avatar-stage{position:relative; width:min(280px, calc(100vw - 80px)); aspect-ratio:1; margin:12px auto; overflow:hidden; border-radius:12px; background:#0F172A; cursor:grab; touch-action:none; user-select:none;}
.avatar-stage.dragging{cursor:grabbing;}
.avatar-stage img{position:absolute; left:0; top:0; max-width:none; transform-origin:0 0; pointer-events:none;}
.avatar-mask{position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 999px rgba(15,23,42,0.55); outline:2px solid rgba(255,255,255,0.85); outline-offset:-2px; pointer-events:none;}
.avatar-zoom-row{display:flex; align-items:center; gap:10px; margin:4px 0 12px; color:var(--ink-soft);}
.avatar-zoom-row input{flex:1; accent-color:var(--pine);}
.avatar-preview-row{display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:14px; text-align:left;}
.avatar-preview-row canvas{border-radius:50%; border:1px solid var(--line);}

/* (v0.15.5) Circulito amarillo con un número: conteos del header (montado
   en la esquina, igual que el rojo de "Panel") y de los filtros de Explorar. */
.count-badge{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--gold); color:#1E293B; font-size:0.68rem; font-weight:800; line-height:1;}
.count-badge-corner{position:absolute; top:-7px; right:-8px; box-shadow:0 0 0 2px var(--heading, #1E293B);}
.count-badge-inline{margin-left:2px;}
.filter-btn.active .count-badge-inline{box-shadow:0 0 0 1.5px rgba(255,255,255,0.85);}
/* (v0.15.5) "Ver más" bajo tablas largas. */
.see-more-row{display:flex; justify-content:center; margin-top:10px;}
/* (v0.15.5) Reglas del juego: aire a izquierda y derecha en cada subsección. */
.rules-doc fieldset > :not(legend){padding-left:14px; padding-right:14px;}

/* (v0.15.6) Etiqueta "Beta" junto al logo, hasta la v1.0 (ver docs/ROADMAP.md). */
.beta-tag{display:inline-block; margin-left:8px; padding:2px 7px; border-radius:6px; background:var(--gold); color:#1E293B;
  font-family:inherit; font-size:0.62rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; vertical-align:middle; line-height:1.4;}

/* (v0.16.1) Mis Insignias: fecha y "Administrada por" abajo a la derecha;
   próximas insignias en tono pálido, con su barra de progreso. */
.my-badge{align-items:stretch;}
.my-badge-body{flex:1; min-width:0; display:flex; flex-direction:column;}
.my-badge-foot{margin-top:auto; padding-top:6px; text-align:right; font-size:0.78rem; color:var(--ink-soft); display:flex; flex-direction:column; align-items:flex-end; gap:2px;}
.my-badge-next{background:var(--section-bg); border-style:dashed;}
.my-badge-next .badge-icon, .my-badge-next .my-badge-name, .my-badge-next .my-badge-body > .muted{opacity:0.55;}
.my-badge-next .badge-icon{filter:grayscale(1);}
.badge-progress{display:flex; align-items:center; gap:8px; width:100%; max-width:220px;}
.badge-progress .progress-track{flex:1; height:8px;}
.badge-progress span{white-space:nowrap; font-weight:600;}

/* (v0.17.0) Marcas del equipo montadas sobre la barra superior de la
   tarjeta: 💎 a la izquierda y 🦄 a la derecha, un poco hacia adentro.
   Para que se vean por encima de la barra, la tarjeta ya no recorta lo
   que sobresale (overflow visible); la franja de firma del pie mantiene
   sus esquinas redondeadas por su cuenta. */
.listing-card{overflow:visible;}
.listing-card .card-signature{border-radius:0 0 5px 5px; overflow:hidden;}
.team-mark{position:absolute; top:calc(-1 * var(--top-bar-height) / 2 - 14px); z-index:3; width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-size:15px; line-height:1;
  background:#fff; border:1.5px solid var(--slate-400); box-shadow:0 2px 6px rgba(15,23,42,0.25);}
.team-mark-gem{left:16px;}
.team-mark-unicorn{right:16px;}
.team-mark[role=button]{cursor:pointer; transition:transform 0.12s ease, opacity 0.12s ease, filter 0.12s ease;}
.team-mark[role=button]:hover{transform:scale(1.12);}
.team-mark.is-off{opacity:0.45; filter:grayscale(1);}
.listing-card:hover .team-mark.is-off{opacity:0.75;}
/* Las grillas dejan aire arriba para las marcas. */
.grid{padding-top:8px; row-gap:34px;} /* (v0.18.2) +10px: que 🔥 de una fila no toque 💎/🦄 de la siguiente */
/* Filtro "Recomendadas" de Explorar. */
.filter-recomendada{background:#F3EEFB; border-color:#D9CCF0; color:var(--pine);}
.filter-recomendada:hover{background:#E6DCF6;}
.filter-recomendada.active{background:var(--pine); border-color:var(--pine); color:#fff;}

/* (v0.18.0) Reacción 🔥 en la tarjeta. (v0.18.1) Montada sobre el borde
   inferior (la franja de firma), a la izquierda, como 💎/🦄 arriba. */
.listing-card > .fire-react{position:absolute; left:16px; bottom:calc(var(--top-bar-height) / 2 - 13px); z-index:3;
  box-shadow:0 2px 6px rgba(15,23,42,0.18);}
.listing-card > .fire-react.is-empty{background:#fff; border:1.5px solid var(--slate-400);}
/* (v0.18.2) Pedido de Rox: mientras no sea mía, en blanco y negro (con o
   sin número); la mía, fondo claro y borde naranja (sin el naranjo fuerte). */
.listing-card > .fire-react:not(.is-mine){background:#fff; border:1.5px solid var(--slate-400); color:var(--ink-soft);}
.listing-card > .fire-react:not(.is-mine) .fire-emoji{filter:grayscale(1); opacity:0.6;}
.listing-card > .fire-react:not(.is-mine):hover{background:#FFF7ED;}
.listing-card > .fire-react:not(.is-mine):hover .fire-emoji{filter:grayscale(0.2); opacity:0.95;}
.listing-card > .fire-react.is-mine{background:#FFF7ED; border:1.5px solid #FB923C; color:#C2410C;}
.listing-card > .fire-react:hover{transform:translateY(-2px);}
/* Aire bajo "Vende:" para que la reacción no lo tape. */
.listing-card .listing-body{padding-bottom:22px;}
.fire-react{display:inline-flex; align-items:center; gap:3px; padding:3px 9px; border-radius:999px; cursor:pointer;
  font-size:0.85rem; font-weight:700; color:#C2410C; background:#FFF7ED; border:1px solid #FED7AA; line-height:1.2;
  transition:transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;}
.fire-react .fire-emoji{display:inline-block; transition:transform 0.15s ease, filter 0.15s ease;}
.fire-react:hover{transform:translateY(-1px); background:#FFEDD5; box-shadow:0 2px 8px rgba(234,88,12,0.25);}
.fire-react:hover .fire-emoji{transform:scale(1.25) rotate(-8deg);}
.fire-react.is-empty{background:transparent; border-color:var(--line); color:var(--ink-soft);}
.fire-react.is-empty .fire-emoji{filter:grayscale(1); opacity:0.55;}
.fire-react.is-empty:hover .fire-emoji{filter:grayscale(0.3); opacity:0.9;}
.fire-react.is-mine{background:linear-gradient(135deg, #FDBA74, #F97316); border-color:#EA580C; color:#fff;}
.fire-react.fire-pop .fire-emoji{animation:firePop 0.6s cubic-bezier(.2,1.6,.4,1);}
.fire-react.fire-pop{animation:fireGlow 0.9s ease-out;}
@keyframes firePop{0%{transform:scale(1);} 35%{transform:scale(1.9) rotate(-12deg);} 60%{transform:scale(0.9) rotate(6deg);} 100%{transform:scale(1);}}
@keyframes fireGlow{0%{box-shadow:0 0 0 0 rgba(249,115,22,0.7);} 100%{box-shadow:0 0 0 14px rgba(249,115,22,0);}}
.fire-particle{position:fixed; z-index:9500; pointer-events:none; font-size:15px; transform:translate(-50%,-50%);
  animation:fireFly 0.95s ease-out forwards;}
@keyframes fireFly{0%{opacity:0; transform:translate(-50%,-50%) scale(0.4);} 15%{opacity:1;}
  100%{opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2) rotate(18deg);}}
@media (prefers-reduced-motion: reduce){ .fire-react.fire-pop, .fire-react.fire-pop .fire-emoji{animation:none;} }

/* (v0.18.3) Mientras se achican las fotos recién elegidas. */
#photoGrid.is-preparing{opacity:0.6; pointer-events:none; cursor:progress;}

/* (v0.18.5) Tarjetas: "Vende:" en una línea y, debajo, el usuario a la
   izquierda y el karma a la derecha (antes iban en una sola línea que no
   cabía y se cortaba). Un usuario muy largo se acorta con "…". */
.seller-block{font-size:0.8rem; color:var(--ink-soft);}
.seller-row{display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:2px; min-width:0;}
.seller-row .username{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.seller-row > :last-child:not(.username){flex:none;}

/* (v0.18.6) Panel > Gestionar usuarios: % de perfil completo y la columna
   "★ · 🌀" (valoraciones y karma juntos). */
.pct-pill{display:inline-block; min-width:42px; text-align:center; padding:2px 7px; border-radius:999px; font-size:0.75rem; font-weight:700;}
.pct-pill.is-full{background:#E3F4EA; color:#2E7D4F;}
.pct-pill.is-mid{background:#FEF3C7; color:#92400E;}
.pct-pill.is-low{background:#FEE2E2; color:#B91C1C;}
.rating-karma-cell .karma-details{display:inline-block; vertical-align:middle;}

/* (v0.18.7) Se Buscan: altura mínima de las tarjetas, para que las que no
   tienen descripción no queden tan chicas y se lea mejor en grilla. */
.wishlist-card{min-height:200px;}

/* (v0.18.7) Todas las tablas compactas: la primera fila de encabezado en
   el color oscuro del header, con los textos centrados. */
.data-table thead tr:first-child th{background:var(--header-bg); color:#fff; text-align:center; border-bottom:none; padding-top:8px; padding-bottom:8px;}
.data-table thead tr:first-child th:first-child{border-top-left-radius:6px;}
.data-table thead tr:first-child th:last-child{border-top-right-radius:6px;}
.data-table thead tr:first-child th .lucide-icon{color:#fff;}

/* (v0.18.7) Mis Publicaciones: ícono de categoría y botones apilados. */
.cat-icon{display:inline-flex; color:var(--ink-soft);}
.stacked-actions{display:flex; flex-direction:column; gap:6px; align-items:stretch;}
.stacked-actions .btn{width:100%; justify-content:center;}

/* (v0.18.7) Vista previa de la firma de los correos. */
.email-signature-preview{background:#fff; border:1px dashed var(--line); border-radius:8px; padding:12px; margin-bottom:12px;}
.email-signature-preview img{display:block; max-width:100%; height:auto;}

/* (v0.18.8) Mis Publicaciones: "Reservada · falta tu cierre" llama la atención. */
.badge-todo{font-weight:700; white-space:nowrap;}
.badge-todo::before{content:'⚠️ ';}
.stacked-actions .btn-whatsapp{display:inline-flex; align-items:center; gap:5px;}
.stacked-actions .btn-whatsapp svg{width:14px; height:14px;}

/* (v0.18.9) Descripción de cada insignia en cursiva (Mis Insignias). */
.my-badge-desc{font-size:0.86rem; font-style:italic;}
/* Botón verde "Compartir (WhatsApp)". */
.btn-share-wa{display:inline-flex; align-items:center; gap:5px;}
.btn-share-wa svg{width:14px; height:14px;}

/* ---------- (v0.19.0) Publicaciones "por reclamar" ---------- */
/* Paleta en grises (sin etiqueta "por reclamar", decisión de Rox). */
.listing-card.tipo-reclamo{border-top-color:#737373; background:#FAFAFA;}
.listing-card.tipo-reclamo .card-signature span:nth-child(1){background:#FAFAFA;}
.listing-card.tipo-reclamo .card-signature span:nth-child(2){background:#E5E5E5;}
.listing-card.tipo-reclamo .card-signature span:nth-child(3){background:#A3A3A3;}
.listing-card.tipo-reclamo .card-signature span:nth-child(4){background:#737373;}
.listing-card.tipo-reclamo .card-signature span:nth-child(5){background:#404040;}
.listing-card.tipo-reclamo .listing-thumb{filter:grayscale(0.35);}
.thumb-placeholder{font-size:3rem; opacity:0.5; filter:grayscale(1);}
.price-pending{font-size:0.85em; font-weight:600; color:var(--ink-soft);}

/* Aviso "aún no tiene dueño" (ficha y popup de Se Buscan). */
.claim-wait-box{border:1px solid var(--line); border-radius:12px; padding:18px; background:var(--section-bg); text-align:center;}
.claim-wait-icon{font-size:2rem; line-height:1;}
.claim-wait-box h3{margin:8px 0 6px;}
.claim-wait-box p{margin:0 0 12px; font-size:0.92rem;}
.claim-wait-actions{display:flex; flex-direction:column; align-items:center; gap:6px;}
.claim-waiting-ok{font-weight:700; color:#2E7D4F;}
.claim-wait-count{margin-top:10px !important; font-size:0.82rem;}
.claim-popup{position:relative; max-width:440px; text-align:left;}
.claim-popup .claim-wait-box{border:none; background:transparent; padding:6px 0 0;}
.claim-popup-close{position:absolute; top:8px; right:10px; border:none; background:none; font-size:1.1rem; cursor:pointer; color:var(--ink-soft);}

/* Página /reclamar y recorrido. */
.claim-page{max-width:960px; margin:0 auto;}
.claim-steps{list-style:none; display:flex; gap:8px; padding:0; margin:0 0 20px; flex-wrap:wrap;}
.claim-steps li{display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:999px; background:var(--section-bg); color:var(--ink-soft); font-size:0.85rem; font-weight:600;}
.claim-step-num{width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line); font-size:0.78rem;}
.claim-steps li.is-current{background:color-mix(in srgb, var(--gold) 22%, #fff); color:var(--heading);}
.claim-steps li.is-current .claim-step-num{background:var(--gold); border-color:var(--gold); color:#1E293B;}
.claim-steps li.is-done{color:#2E7D4F;}
.claim-steps li.is-done .claim-step-num{background:#E3F4EA; border-color:#BFE3CC;}
.claim-hero{display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:start;}
.claim-title{font-size:1.7rem; margin:0 0 10px;}
.claim-waiters-note{background:#FFF7ED; border:1px solid #FED7AA; border-radius:10px; padding:8px 12px; display:inline-block;}
.claim-benefits{list-style:none; padding:0; margin:14px 0 18px; display:grid; gap:6px;}
.claim-cta-box{display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.claim-cta{font-size:1.05rem; padding:14px 22px;}
.claim-card-caption{font-size:0.8rem; color:var(--ink-soft); text-align:center; margin:0 0 8px; text-transform:uppercase; letter-spacing:0.05em;}
.claim-preview-card{max-width:300px; margin:0 auto; pointer-events:none; box-shadow:0 18px 40px rgba(15,23,42,0.18); transform:rotate(-1.5deg);}
.claim-auth-context{background:color-mix(in srgb, var(--gold) 16%, #fff); border:1px solid color-mix(in srgb, var(--gold) 45%, #fff); border-radius:10px; padding:10px 12px; margin-bottom:12px; font-size:0.9rem;}
.claim-onboarding{background:#fff; border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:10px; padding:12px 14px; margin-bottom:16px;}
.claim-onboarding .claim-steps{margin-bottom:10px;}
.claim-onboarding-text{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; font-size:0.92rem;}
@media (max-width:760px){
  .claim-hero{grid-template-columns:1fr;}
  .claim-hero-card{order:-1;}
  .claim-cta-box{align-items:stretch;}
  .claim-cta{width:100%;}
}

/* Panel > Por reclamar. */
.claim-message-preview{background:#ECFDF5; border:1px solid #A7F3D0; border-radius:10px; padding:10px 12px; font-size:0.9rem; margin-bottom:12px; white-space:pre-wrap;}
.claim-photo-note{background:#FFFBEB; border-radius:8px; padding:6px 10px;}
.claim-waiters{color:#C2410C;}
.claim-form .pub-segmented{max-width:280px;}
.gallery-placeholder{display:flex; align-items:center; justify-content:center; height:100%; font-size:5rem;}

/* (v0.20.0) "Guardar borrador": sutil, a la izquierda de Continuar. */
.pub-draft-btn{color:var(--ink-soft); border-color:transparent; background:transparent;}
.pub-draft-btn:hover{color:var(--heading); background:var(--section-bg);}

/* (v0.21.0) Mis Publicaciones: 💎 🦄 🔥 junto al nombre, con tooltip. */
.my-listing-mark{font-size:0.85em; margin-left:2px; cursor:help;}

/* (v0.21.2) Mis Campañas en tabla: el cierre de una donación (contacto,
   "Juego Entregado"/"Recibido", avisos) va en la última celda. */
.data-table .donation-close-cell{text-align:right; min-width:250px;}
.data-table .donation-close-cell .offer-actions{justify-content:flex-end; flex-wrap:wrap; gap:6px; margin:0;}
.data-table .donation-close-cell .actions-right{margin-left:0 !important; flex-wrap:nowrap; gap:6px;}
.data-table .donation-close-cell .donation-close-msg{margin:4px 0 0; font-size:0.8rem; text-align:right;}