/* =============================================================================
   ReviewSwap — Sistema de diseño
   Estética: "infografía premium cálida" — papel crema con grano, bloques navy,
   naranja energético, tipografía con carácter. Cálida, viva, no genérica.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens
--------------------------------------------------------------------------- */
:root {
    /* Color */
    --cream:        #f6f1e8;
    --cream-deep:   #ece2d2;
    --paper:        #fffdf8;
    --navy:         #1a1f2c;
    --navy-2:       #232a3a;
    --navy-3:       #2e3850;
    --ink:          #1c2230;
    --orange:       #ff6b35;
    --orange-deep:  #e85420;
    --orange-soft:  #ffe7da;
    --teal:         #10b981;
    --teal-deep:    #0c9d6e;
    --teal-soft:    #d6f5e8;
    --coral:        #f0584a;
    --coral-soft:   #fde0dc;
    --gold:         #fbb724;
    --gold-soft:    #fdedcf;
    --text:         #20262f;
    --muted:        #66707f;
    --line:         #e7ddcd;
    --line-strong:  #d8ccb6;

    /* Tipografía */
    --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
    --font-body:    'Hanken Grotesk', system-ui, sans-serif;
    --font-mono:    'Space Mono', 'Courier New', monospace;

    /* Forma y profundidad */
    --r-sm: 12px;
    --r-md: 18px;
    --r-lg: 26px;
    --r-xl: 36px;
    --r-pill: 999px;
    --shadow-sm: 0 2px 8px rgba(26, 31, 44, .06);
    --shadow-md: 0 14px 34px -14px rgba(26, 31, 44, .22);
    --shadow-lg: 0 30px 70px -28px rgba(26, 31, 44, .38);
    --shadow-orange: 0 16px 32px -14px rgba(255, 107, 53, .55);

    /* Layout */
    --maxw: 1180px;
    --gutter: clamp(20px, 5vw, 56px);

    --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------------------------------------------------------------------------
   2. Reset / base
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* overflow-x: clip en el ROOT contiene los position:fixed off-screen (ej. el menú móvil cerrado
   con translateX(100%)). Sin esto, en algunos móviles ese menú genera scroll horizontal y
   "ensancha" la página, lo que desplaza los modales/menús fixed. clip NO rompe el sticky ni el scroll vertical. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; overflow-x: clip; }

body {
    font-family: var(--font-body);
    background: var(--cream);
    color: var(--text);
    line-height: 1.6;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; padding: 0; }

/* ---------------------------------------------------------------------------
   3. Grano / atmósfera
--------------------------------------------------------------------------- */
.grain {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .5;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   4. Estructura / tipografía
--------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
main { position: relative; z-index: 2; }
section { position: relative; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.02em;
    color: var(--ink);
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--orange);
    display: inline-flex;
    align-items: center;
    gap: .6em;
}
.eyebrow::before {
    content: "";
    width: 26px; height: 2px;
    background: var(--orange);
    display: inline-block;
}
.eyebrow--center { justify-content: center; }

.section-head { max-width: 660px; margin-bottom: clamp(34px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); margin: 18px 0 14px; }
.section-head p { font-size: 1.1rem; color: var(--muted); }

.section-pad { padding-block: clamp(64px, 9vw, 120px); }

/* ---------------------------------------------------------------------------
   5. Botones
--------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    padding: .82em 1.5em;
    border-radius: var(--r-pill);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;
    white-space: nowrap;
    line-height: 1;
}
.btn i { font-size: .95em; }
.btn--solid {
    background: var(--orange);
    color: #fff;
    box-shadow: var(--shadow-orange);
}
.btn--solid:hover { transform: translateY(-3px); background: var(--orange-deep); }
.btn--ghost {
    background: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--line-strong);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--ink); transform: translateY(-2px); }
.btn--light {
    background: #fff; color: var(--ink); box-shadow: var(--shadow-md);
}
.btn--light:hover { transform: translateY(-3px); }
.btn--dark {
    background: var(--navy); color: #fff;
}
.btn--dark:hover { transform: translateY(-3px); background: var(--navy-2); }
.btn--wa { background: #25D366; color: #073f23; }
.btn--wa:hover { transform: translateY(-3px); background: #1ebe5a; box-shadow: 0 16px 30px -12px rgba(37,211,102,.6); }
.btn--lg { font-size: 1.08rem; padding: 1.05em 1.9em; }
.btn--block { width: 100%; }
.inline-form { display: inline; }

/* ---------------------------------------------------------------------------
   6. Navbar
--------------------------------------------------------------------------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background .3s, box-shadow .3s, padding .3s;
    padding-block: 16px;
}
.nav.is-stuck {
    background: rgba(246, 241, 232, .82);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--line), var(--shadow-sm);
    padding-block: 10px;
}
.nav__inner {
    width: 100%; max-width: var(--maxw); margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); }
.brand__mark {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    background: var(--navy); color: var(--orange);
    border-radius: 13px;
    box-shadow: var(--shadow-sm);
    transition: transform .4s var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-12deg); }
.brand__text { font-size: 1.42rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.brand__accent { color: var(--orange); }
.brand--light .brand__text { color: #fff; }
.brand--light .brand__mark { background: rgba(255,255,255,.08); }

.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links > a {
    font-weight: 600; font-size: .98rem; color: var(--text);
    position: relative; padding: 4px 0; transition: color .2s;
}
.nav__links > a::after {
    content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
    background: var(--orange); transition: width .3s var(--ease);
}
.nav__links > a:hover { color: var(--ink); }
.nav__links > a:hover::after { width: 100%; }
.nav__cta { display: flex; align-items: center; gap: 12px; margin-left: 8px; }

.nav__toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav__toggle span { width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: .3s var(--ease); }
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
/* Menú móvil: overlay oscuro detrás (clic fuera cierra; nunca se mezcla con el contenido). */
.nav__overlay { position: fixed; inset: 0; background: rgba(26, 31, 44, .5); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease); z-index: 85; }
.nav__overlay.show { opacity: 1; visibility: visible; }
/* CLAVE: con el menú abierto el nav NO debe filtrar — el backdrop-filter de .is-stuck atrapa el
   position:fixed del panel y lo colapsa a la altura del header (se desborda sobre el contenido). */
.nav--menu-open { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ---------------------------------------------------------------------------
   7. Flash
--------------------------------------------------------------------------- */
.flash-stack {
    position: fixed; top: 84px; right: clamp(14px, 4vw, 32px); z-index: 200;
    display: flex; flex-direction: column; gap: 10px; max-width: 360px;
}
.flash {
    display: flex; align-items: center; gap: 12px;
    background: var(--paper); padding: 14px 16px; border-radius: var(--r-md);
    box-shadow: var(--shadow-lg); border-left: 4px solid var(--muted);
    font-size: .95rem; font-weight: 600;
    animation: flashIn .4s var(--ease) both;
}
.flash__icon { font-size: 1.2rem; }
.flash--success { border-color: var(--teal); }
.flash--success .flash__icon { color: var(--teal); }
.flash--error { border-color: var(--coral); }
.flash--error .flash__icon { color: var(--coral); }
.flash--info { border-color: var(--orange); }
.flash--info .flash__icon { color: var(--orange); }
.flash__close { margin-left: auto; font-size: 1.3rem; color: var(--muted); line-height: 1; }
@keyframes flashIn { from { opacity: 0; transform: translateX(30px); } }

/* ---------------------------------------------------------------------------
   8. Hero
--------------------------------------------------------------------------- */
.hero { padding-top: clamp(40px, 6vw, 70px); padding-bottom: clamp(60px, 9vw, 120px); overflow: hidden; }
.hero__grid {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 70px);
    align-items: center;
}
.hero__badge {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--navy); color: #fff;
    padding: 8px 16px 8px 12px; border-radius: var(--r-pill);
    font-size: .82rem; font-weight: 600; margin-bottom: 26px;
    box-shadow: var(--shadow-md);
}
.hero__badge b { color: var(--orange); }
.hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); }

.hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.4rem);
    line-height: .98;
    margin-bottom: 22px;
}
.hero h1 .swap-word {
    color: var(--orange);
    position: relative;
    white-space: nowrap;
}
.hero h1 .swap-word::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .14em;
    background: var(--gold); opacity: .55; border-radius: 4px; z-index: -1;
}
.hero__lead { font-size: clamp(1.08rem, 2vw, 1.28rem); color: var(--muted); max-width: 30ch; margin-bottom: 18px; }
.hero__sub { font-weight: 700; color: var(--ink); font-size: 1.15rem; margin-bottom: 32px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 22px; }
.hero__trust div { display: flex; align-items: center; gap: 9px; font-size: .92rem; font-weight: 600; color: var(--text); }
.hero__trust i { color: var(--teal); font-size: 1.05rem; }

/* Hero visual: el intercambio animado */
.swapviz { position: relative; aspect-ratio: 1 / 1; max-width: 480px; margin-inline: auto; width: 100%; }
.swapviz__glow {
    position: absolute; inset: 6%; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,107,53,.28), transparent 60%),
                radial-gradient(circle at 70% 70%, rgba(16,185,129,.26), transparent 60%);
    filter: blur(20px);
    animation: pulseGlow 6s ease-in-out infinite;
}
@keyframes pulseGlow { 50% { transform: scale(1.06); opacity: .85; } }

.swapviz__ring {
    position: absolute; inset: 14%; border-radius: 50%;
    border: 2px dashed var(--line-strong);
    animation: spin 28s linear infinite;
}
.swapviz__ring::before, .swapviz__ring::after {
    content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
}
.swapviz__ring::before { background: var(--orange); top: -7px; left: calc(50% - 7px); box-shadow: 0 0 0 5px var(--orange-soft); }
.swapviz__ring::after { background: var(--teal); bottom: -7px; left: calc(50% - 7px); box-shadow: 0 0 0 5px var(--teal-soft); }
@keyframes spin { to { transform: rotate(360deg); } }

.swapviz__core {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 96px; height: 96px; border-radius: 28px;
    background: var(--navy); color: var(--orange);
    display: grid; place-items: center;
    box-shadow: var(--shadow-lg);
    z-index: 3;
}
.swapviz__core svg { width: 52px; height: 52px; animation: swapRotate 5s var(--ease) infinite; }
@keyframes swapRotate { 0%,100%{transform:rotate(0)} 45%{transform:rotate(180deg)} 50%{transform:rotate(180deg)} 95%{transform:rotate(360deg)} }

.rev-card {
    position: absolute; width: 220px;
    background: var(--paper); border-radius: var(--r-lg);
    padding: 16px; box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    z-index: 2;
}
.rev-card--a { top: 4%; right: -2%; animation: floatA 7s ease-in-out infinite; }
.rev-card--b { bottom: 4%; left: -2%; animation: floatB 7s ease-in-out infinite; }
@keyframes floatA { 50% { transform: translateY(-14px); } }
@keyframes floatB { 50% { transform: translateY(14px); } }
.rev-card__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rev-card__av { width: 38px; height: 38px; border-radius: 50%; background: var(--cream-deep); padding: 3px; }
.rev-card__who { font-weight: 700; font-size: .9rem; line-height: 1.1; }
.rev-card__tag { font-size: .72rem; color: var(--muted); font-family: var(--font-mono); }
.rev-card__stars { color: var(--gold); font-size: .9rem; letter-spacing: 2px; margin-bottom: 7px; }
.rev-card__text { font-size: .82rem; color: var(--muted); line-height: 1.45; }
.rev-card__give {
    position: absolute; top: -12px; left: -10px;
    font-family: var(--font-mono); font-weight: 700; font-size: .82rem;
    background: var(--teal); color: #fff; padding: 4px 10px; border-radius: var(--r-pill);
    box-shadow: var(--shadow-md);
}
.rev-card--b .rev-card__give { background: var(--orange); }

/* ---------------------------------------------------------------------------
   9. Banda de marcas / "tira" de plataformas
--------------------------------------------------------------------------- */
.logo-strip { border-block: 1px solid var(--line); background: rgba(255,253,248,.5); }
.logo-strip__inner { display: flex; align-items: center; gap: 14px; padding-block: 22px; flex-wrap: wrap; justify-content: center; }
.logo-strip__label { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.logo-strip__items { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center; color: var(--muted); }
.logo-strip__items span { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; opacity: .8; transition: opacity .2s, color .2s; }
.logo-strip__items span:hover { opacity: 1; color: var(--ink); }
.logo-strip__items i { font-size: 1.3rem; }

/* ---------------------------------------------------------------------------
   10. Sistema de créditos
--------------------------------------------------------------------------- */
.credits { background: var(--cream); }
.credit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.credit-card {
    background: var(--paper); border-radius: var(--r-lg); padding: 30px 28px;
    border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.credit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.credit-card__num {
    font-family: var(--font-mono); font-weight: 700; font-size: 2.4rem; line-height: 1;
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
}
.credit-card__icon {
    width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
    font-size: 1.35rem; margin-bottom: 18px;
}
.credit-card--add .credit-card__num { color: var(--teal); }
.credit-card--add .credit-card__icon { background: var(--teal-soft); color: var(--teal-deep); }
.credit-card--spend .credit-card__num { color: var(--coral); }
.credit-card--spend .credit-card__icon { background: var(--coral-soft); color: var(--coral); }
.credit-card--total .credit-card__num { color: var(--gold); }
.credit-card--total .credit-card__icon { background: var(--gold-soft); color: #c98a06; }
.credit-card h3 { font-size: 1.22rem; margin-bottom: 8px; }
.credit-card p { color: var(--muted); font-size: .96rem; }
.credit-card__hint { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); margin-top: 12px; }

/* Probador interactivo */
.playground {
    margin-top: 34px;
    background: var(--navy);
    border-radius: var(--r-xl);
    padding: clamp(26px, 4vw, 46px);
    color: #fff;
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 54px);
    align-items: center;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.playground::before {
    content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -140px;
    background: radial-gradient(circle, rgba(255,107,53,.32), transparent 65%); filter: blur(10px);
}
.playground__copy { position: relative; z-index: 2; }
.playground__copy .eyebrow { color: var(--gold); }
.playground__copy .eyebrow::before { background: var(--gold); }
.playground__copy h3 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 14px 0 12px; }
.playground__copy p { color: rgba(255,255,255,.72); margin-bottom: 22px; }
.playground__controls { display: flex; flex-wrap: wrap; gap: 12px; }
.pg-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: .8em 1.25em; border-radius: var(--r-pill); font-weight: 700; font-size: .96rem;
    transition: transform .2s var(--ease), background .2s;
}
.pg-btn--add { background: var(--teal); color: #fff; }
.pg-btn--add:hover { transform: translateY(-3px); background: var(--teal-deep); }
.pg-btn--spend { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); }
.pg-btn--spend:hover { transform: translateY(-3px); background: rgba(255,255,255,.2); }
.pg-btn--reset { background: transparent; color: rgba(255,255,255,.6); font-size: .86rem; }
.pg-btn--reset:hover { color: #fff; }

.pg-stage { position: relative; z-index: 2; }
.pg-meter {
    background: var(--navy-2); border-radius: var(--r-lg); padding: 24px;
    border: 1px solid rgba(255,255,255,.08);
}
.pg-meter__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.pg-meter__label { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.pg-credits { font-family: var(--font-mono); font-weight: 700; font-size: 3.4rem; line-height: 1; color: var(--gold); transition: transform .3s var(--ease); }
.pg-credits.bump { transform: scale(1.18); }
.pg-meter__sub { color: rgba(255,255,255,.6); font-size: .9rem; margin-bottom: 18px; }
.pg-accounts { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; }
.pg-chip {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--navy-3); padding: 3px; border: 1.5px solid rgba(255,255,255,.16);
    animation: chipPop .4s var(--ease) both;
}
@keyframes chipPop { from { transform: scale(0) rotate(-30deg); opacity: 0; } }
.pg-reviews { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.pg-review {
    display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06);
    padding: 9px 12px; border-radius: var(--r-sm); font-size: .85rem;
    animation: chipPop .4s var(--ease) both;
}
.pg-review .stars { color: var(--gold); letter-spacing: 1px; }
.pg-review .pg-review__who { color: rgba(255,255,255,.85); font-weight: 600; }
.pg-toast {
    position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%) translateY(10px);
    background: var(--coral); color: #fff; padding: 8px 16px; border-radius: var(--r-pill);
    font-size: .85rem; font-weight: 600; opacity: 0; pointer-events: none; transition: .3s var(--ease);
    white-space: nowrap;
}
.pg-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------------------------------------------------------------------
   11. Cómo funciona — pasos
--------------------------------------------------------------------------- */
.steps { background: var(--paper); border-block: 1px solid var(--line); }
.steps__list { display: grid; gap: 18px; }
.step {
    display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: start;
    background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 24px 26px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.step:hover { transform: translateX(6px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.step__num {
    width: 64px; height: 64px; border-radius: 20px; background: var(--navy); color: #fff;
    display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.7rem;
    position: relative;
}
.step__num span { position: relative; z-index: 2; }
.step__num i { position: absolute; bottom: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%;
    background: var(--orange); color: #fff; display: grid; place-items: center; font-size: .8rem; box-shadow: var(--shadow-sm); }
.step__body h3 { font-size: 1.3rem; margin-bottom: 6px; }
.step__body p { color: var(--muted); font-size: 1rem; }
.step__body .accent { color: var(--orange); font-weight: 700; }

/* ---------------------------------------------------------------------------
   12. Ciclo de una reseña
--------------------------------------------------------------------------- */
.cycle { background: var(--navy); color: #fff; overflow: hidden; }
.cycle .section-head h2 { color: #fff; }
.cycle .section-head p { color: rgba(255,255,255,.7); }
.cycle .eyebrow { color: var(--gold); }
.cycle .eyebrow::before { background: var(--gold); }
.cycle-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; counter-reset: c; }
.cycle-step {
    background: var(--navy-2); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-lg);
    padding: 22px 16px; text-align: center; position: relative;
    transition: transform .3s var(--ease), background .3s;
}
.cycle-step:hover { transform: translateY(-6px); background: var(--navy-3); }
.cycle-step__ico {
    width: 50px; height: 50px; margin: 0 auto 14px; border-radius: 15px;
    background: rgba(255,107,53,.16); color: var(--orange); display: grid; place-items: center; font-size: 1.2rem;
}
.cycle-step:last-child .cycle-step__ico { background: rgba(16,185,129,.18); color: var(--teal); }
.cycle-step__n { font-family: var(--font-mono); font-size: .74rem; color: rgba(255,255,255,.5); margin-bottom: 6px; }
.cycle-step h4 { color: #fff; font-size: 1.02rem; line-height: 1.2; }
.cycle-step::after {
    content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; right: -16px; top: 50%; transform: translateY(-50%);
    color: rgba(255,255,255,.25); font-size: .9rem; z-index: 3;
}
.cycle-step:last-child::after { display: none; }

/* ---------------------------------------------------------------------------
   13. Plataformas
--------------------------------------------------------------------------- */
.platforms { background: var(--cream); }
.platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.platform-card {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 24px 20px; display: flex; align-items: center; gap: 14px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.platform-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.platform-card__ico {
    width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
    font-size: 1.5rem; color: #fff; flex-shrink: 0;
}
.platform-card__name { font-weight: 700; font-size: 1.05rem; }
.platform-card__meta { font-size: .82rem; color: var(--muted); font-family: var(--font-mono); }
.platform-card--more { background: transparent; border-style: dashed; justify-content: center; color: var(--muted); font-weight: 700; }
.platform-card--soon { opacity: .6; filter: grayscale(.85); background: var(--cream); }
.platform-card--soon:hover { transform: none; box-shadow: none; }
.platform-card--soon .platform-card__meta { color: var(--muted); font-style: italic; }

/* ---------------------------------------------------------------------------
   14. Protecciones
--------------------------------------------------------------------------- */
.protect { background: var(--paper); border-top: 1px solid var(--line); }
.protect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.protect-card {
    border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px;
    background: var(--cream); position: relative;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.protect-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.protect-card__ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
    background: var(--navy); color: var(--orange); font-size: 1.4rem; margin-bottom: 20px; }
.protect-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.protect-card p { color: var(--muted); }

/* ---------------------------------------------------------------------------
   15. Privacidad / negociación 1 a 1
--------------------------------------------------------------------------- */
.privacy { background: var(--cream); }
.privacy__band {
    background: linear-gradient(120deg, var(--teal-soft), var(--cream) 70%);
    border: 1px solid var(--teal); border-left-width: 5px;
    border-radius: var(--r-xl); padding: clamp(30px, 4vw, 50px);
    display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
}
.privacy__ico { width: 72px; height: 72px; border-radius: 22px; background: var(--teal); color: #fff;
    display: grid; place-items: center; font-size: 1.9rem; box-shadow: var(--shadow-md); }
.privacy__band h3 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 10px; }
.privacy__band p { color: var(--text); font-size: 1.06rem; max-width: 62ch; }
.privacy__band a { color: var(--teal-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Misión / anti-fraude */
.mission { background: var(--cream); }
.mission__box {
    background: var(--navy); color: #fff; border-radius: var(--r-xl);
    padding: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
    position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
}
.mission__box::after { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; bottom: -160px;
    background: radial-gradient(circle, rgba(251,183,36,.22), transparent 65%); filter: blur(10px); }
.mission__box > * { position: relative; z-index: 2; }
.mission__ico { width: 80px; height: 80px; border-radius: 24px; background: rgba(255,107,53,.16); color: var(--orange);
    display: grid; place-items: center; font-size: 2.2rem; }
.mission__box h2 { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 12px 0 12px; }
.mission__box p { color: rgba(255,255,255,.78); font-size: 1.06rem; max-width: 64ch; }
@media (max-width: 720px) { .mission__box { grid-template-columns: 1fr; text-align: center; } .mission__ico { margin-inline: auto; } }

/* Impulso extra (servicio de seguidores/likes) */
.boost { background: var(--cream); }
.boost__box {
    position: relative; overflow: hidden; border-radius: var(--r-xl);
    background: linear-gradient(125deg, var(--orange) 0%, var(--orange-deep) 55%, #c63d12 100%);
    padding: clamp(32px, 5vw, 60px);
    display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
    box-shadow: var(--shadow-lg);
}
.boost__glow { position: absolute; width: 420px; height: 420px; right: 10%; top: -160px;
    background: radial-gradient(circle, rgba(255,255,255,.28), transparent 65%); filter: blur(6px); }
.boost__content { position: relative; z-index: 2; max-width: 640px; }
.boost__content .eyebrow::before { background: #fff; }
.boost__content h2 { color: #fff; font-size: clamp(1.7rem, 3.6vw, 2.7rem); margin: 12px 0 14px; }
.boost__content p { color: rgba(255,255,255,.92); font-size: 1.1rem; }
.boost__content strong { color: #fff; }
.boost__actions { margin: 26px 0 14px; display: flex; gap: 12px; flex-wrap: wrap; }
.boost__note { font-size: .92rem; color: rgba(255,255,255,.85); margin: 0; }
.boost__note strong { color: var(--gold); }

.boost__badge {
    position: relative; z-index: 2; display: flex; align-items: center; gap: 12px;
    font-size: clamp(2.4rem, 5vw, 3.6rem); color: rgba(255,255,255,.95);
}
.boost__badge .fa-facebook { color: #fff; }
.boost__badge .fa-heart { color: #ffd0c2; animation: boostBeat 1.6s ease-in-out infinite; }
.boost__badge .fa-users { color: #fff; }
.boost__badge .boost__plus { font-family: var(--font-display); font-weight: 700; opacity: .7; font-size: .7em; }
@keyframes boostBeat { 50% { transform: scale(1.18); } }

@media (max-width: 760px) {
    .boost__box { grid-template-columns: 1fr; gap: 18px; text-align: center; }
    .boost__content .eyebrow, .boost__actions { justify-content: center; }
    .boost__badge { justify-content: center; }
}

/* ---------------------------------------------------------------------------
   16. CTA final
--------------------------------------------------------------------------- */
.cta { background: var(--cream); }
.cta__box {
    background: var(--orange);
    border-radius: var(--r-xl); padding: clamp(40px, 6vw, 80px);
    text-align: center; position: relative; overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.cta__box::before, .cta__box::after {
    content: ""; position: absolute; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%);
}
.cta__box::before { width: 320px; height: 320px; top: -120px; left: -80px; }
.cta__box::after { width: 280px; height: 280px; bottom: -130px; right: -60px; }
.cta__box > * { position: relative; z-index: 2; }
.cta__box h2 { color: #fff; font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: 16px; }
.cta__box p { color: rgba(255,255,255,.92); font-size: 1.2rem; margin-bottom: 30px; }
.cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   17. Footer
--------------------------------------------------------------------------- */
.footer { background: var(--navy); color: rgba(255,255,255,.7); position: relative; z-index: 2; padding-top: clamp(56px, 7vw, 84px); }
.footer__inner {
    width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 50px;
}
.footer__brand p { margin-top: 16px; font-size: .95rem; max-width: 34ch; }
.footer__tag { margin-top: 18px; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .08em; }
.footer__tag span { color: var(--orange); }
.footer__col h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; font-family: var(--font-mono); margin-bottom: 16px; }
.footer__col a { display: block; padding: 6px 0; font-size: .95rem; transition: color .2s, padding .2s; }
.footer__col a:hover { color: var(--orange); padding-left: 5px; }
.footer__note p { font-size: .92rem; line-height: 1.6; }
.footer__base {
    border-top: 1px solid rgba(255,255,255,.1); padding-block: 24px;
    width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-size: .82rem; color: rgba(255,255,255,.5);
}

/* Café / donación */
.coffee-btn {
    margin-top: 18px; background: var(--gold); color: var(--navy); font-weight: 800;
    padding: 10px 18px; border-radius: var(--r-pill); font-size: .95rem; transition: transform .2s var(--ease), box-shadow .2s;
    box-shadow: 0 12px 24px -12px rgba(251,183,36,.7);
}
.coffee-btn:hover { transform: translateY(-3px) rotate(-2deg); }
.footer__dev a { color: var(--orange); font-weight: 600; }
.footer__dev a:hover { text-decoration: underline; }

.coffee-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; }
.coffee-modal[hidden] { display: none; }
.coffee-modal__backdrop { position: absolute; inset: 0; background: rgba(26,31,44,.72); backdrop-filter: blur(4px); animation: fadeIn .25s; }
.coffee-modal__box {
    position: relative; z-index: 2; background: var(--paper); border-radius: var(--r-xl);
    padding: clamp(28px, 4vw, 44px); max-width: 420px; width: 100%; text-align: center;
    box-shadow: var(--shadow-lg); animation: popIn .35s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(.9) translateY(20px); } }
.coffee-modal__x { position: absolute; top: 14px; right: 18px; font-size: 1.8rem; color: var(--muted); line-height: 1; }
.coffee-modal__emoji { font-size: 3rem; margin-bottom: 8px; }
.coffee-modal__box h3 { font-size: 1.6rem; margin-bottom: 10px; }
.coffee-modal__box > p { color: var(--muted); margin-bottom: 20px; }
.coffee-card { background: var(--navy); color: #fff; border-radius: var(--r-lg); padding: 22px; margin-bottom: 16px; }
.coffee-card__label { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 8px; }
.coffee-card__num { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; letter-spacing: 2px; color: var(--gold); margin-bottom: 4px; }
.coffee-card__holder { color: rgba(255,255,255,.8); margin-bottom: 16px; }
.coffee-modal__thanks { color: var(--orange-deep); font-weight: 700; margin: 0; }

/* ---------------------------------------------------------------------------
   18. Reveal (scroll)
--------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ---------------------------------------------------------------------------
   19. Auth (login / registro)
--------------------------------------------------------------------------- */
.auth { min-height: calc(100vh - 80px); display: grid; grid-template-columns: 1fr 1fr; }
.auth__aside {
    background: var(--navy); color: #fff; padding: clamp(48px, 6vw, 80px);
    display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden;
    /* Pegado y centrado dentro de la pantalla, aunque el formulario sea más alto
       (así el texto no queda muy por debajo de "Crea tu cuenta"). */
    position: sticky; top: 0; align-self: start; min-height: calc(100vh - 80px);
}
.auth__aside::before { content: ""; position: absolute; width: 420px; height: 420px; right: -160px; bottom: -160px;
    background: radial-gradient(circle, rgba(255,107,53,.3), transparent 65%); filter: blur(8px); }
.auth__aside > * { position: relative; z-index: 2; }
.auth__aside .eyebrow { color: var(--gold); }
.auth__aside .eyebrow::before { background: var(--gold); }
.auth__aside h2 { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin: 16px 0 18px; }
.auth__aside p { color: rgba(255,255,255,.74); margin-bottom: 28px; max-width: 38ch; }
.auth__points { display: flex; flex-direction: column; gap: 14px; }
.auth__points li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.auth__points i { width: 34px; height: 34px; border-radius: 50%; background: rgba(16,185,129,.16); color: var(--teal); display: grid; place-items: center; flex-shrink: 0; }

.auth__main { padding: clamp(34px, 5vw, 70px); display: flex; flex-direction: column; justify-content: center; }
.auth__card { width: 100%; max-width: 440px; margin-inline: auto; }
.auth__card > h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 6px; }
.auth__card > .lead { color: var(--muted); margin-bottom: 28px; }

.field { margin-bottom: 14px; }
.field > label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 7px; color: var(--ink); }
.field .hint { font-weight: 400; color: var(--muted); font-size: .82rem; }
.input {
    width: 100%; padding: .85em 1em; font-size: 1rem; font-family: inherit;
    background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
    color: var(--text); transition: border-color .2s, box-shadow .2s;
}
.input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); }
.input::placeholder { color: #aab; }
.input--error { border-color: var(--coral); }
.field__error { color: var(--coral); font-size: .84rem; margin-top: 6px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.input-group { position: relative; }
.input-group .toggle-pass { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); padding: 6px; }

/* Control segmentado (género, filtros) */
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg__opt { flex: 1; min-width: 90px; cursor: pointer; }
.seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg__opt span {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: .7em .5em; border-radius: var(--r-md); background: var(--paper);
    border: 1.5px solid var(--line-strong); font-weight: 600; font-size: .92rem;
    transition: .2s var(--ease); text-align: center;
}
.seg__opt input:checked + span { border-color: var(--orange); background: var(--orange-soft); color: var(--orange-deep); }
.seg__opt:hover span { border-color: var(--ink); }

.checkrow { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 22px; font-size: .92rem; color: var(--muted); }
.checkrow input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--orange); flex-shrink: 0; }
.checkrow a { color: var(--orange); font-weight: 600; }

.auth__alt { text-align: center; margin-top: 22px; color: var(--muted); font-size: .95rem; }
.auth__alt a { color: var(--orange); font-weight: 700; }

/* Selector de avatar */
.avatar-pick { margin-bottom: 22px; }
.avatar-pick__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.avatar-pick__name { font-family: var(--font-mono); font-size: .82rem; color: var(--orange); font-weight: 700; }
.avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.avatar-opt {
    aspect-ratio: 1; border-radius: 50%; padding: 4px; background: var(--paper);
    border: 2px solid var(--line-strong); cursor: pointer; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s;
    position: relative;
}
.avatar-opt:hover { transform: translateY(-3px) scale(1.05); }
.avatar-opt input { position: absolute; opacity: 0; pointer-events: none; }
.avatar-opt img { width: 100%; height: 100%; }
.avatar-opt.is-selected { border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); transform: scale(1.05); }
.avatar-opt.is-selected::after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute;
    bottom: -3px; right: -3px; width: 20px; height: 20px; background: var(--orange); color: #fff; border-radius: 50%;
    display: grid; place-items: center; font-size: .62rem; border: 2px solid var(--paper); }

/* ---------------------------------------------------------------------------
   20. Dashboard (placeholder de esta fase)
--------------------------------------------------------------------------- */
.dash { padding-block: clamp(40px, 6vw, 70px); min-height: calc(100vh - 80px); }
.dash__head { display: flex; align-items: center; gap: 20px; margin-bottom: 36px; flex-wrap: wrap; }
.dash__av { width: 76px; height: 76px; border-radius: 50%; background: var(--paper); padding: 6px; border: 2px solid var(--line-strong); box-shadow: var(--shadow-sm); }
.dash__hi h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.dash__hi p { color: var(--muted); }
.dash__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 30px; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.stat__n { font-family: var(--font-mono); font-weight: 700; font-size: 2.2rem; color: var(--ink); }
.stat__l { color: var(--muted); font-size: .9rem; font-weight: 600; }
.stat--credit .stat__n { color: var(--gold); }
.dash__soon {
    background: var(--paper); border: 1px dashed var(--line-strong); border-radius: var(--r-xl);
    padding: clamp(34px, 5vw, 60px); text-align: center;
}
.dash__soon i { font-size: 2.4rem; color: var(--orange); margin-bottom: 16px; }
.dash__soon h2 { font-size: 1.6rem; margin-bottom: 10px; }
.dash__soon p { color: var(--muted); max-width: 52ch; margin: 0 auto 8px; }
.dash__soon ul { display: inline-flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.dash__soon li { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 16px; font-size: .88rem; font-weight: 600; }

/* ---------------------------------------------------------------------------
   21. Páginas informativas / legales
--------------------------------------------------------------------------- */
.doc { padding-block: clamp(40px, 6vw, 80px); }
.doc__inner { max-width: 760px; margin-inline: auto; }
.doc h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 10px; }
.doc .doc__date { font-family: var(--font-mono); font-size: .82rem; color: var(--muted); margin-bottom: 30px; }
.doc h2 { font-size: 1.5rem; margin: 34px 0 12px; }
.doc p, .doc li { color: var(--text); margin-bottom: 12px; }
.doc ul { padding-left: 0; }
.doc ul li { position: relative; padding-left: 26px; }
.doc ul li::before { content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--teal); position: absolute; left: 0; top: 2px; }

/* ---------------------------------------------------------------------------
   22. Error
--------------------------------------------------------------------------- */
.errpage { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 60px 20px; }
.errpage__code { font-family: var(--font-display); font-size: clamp(5rem, 18vw, 11rem); color: var(--orange); line-height: 1; }
.errpage h1 { font-size: 1.8rem; margin: 8px 0 14px; }
.errpage p { color: var(--muted); margin-bottom: 26px; }

/* ---------------------------------------------------------------------------
   23. Responsive
--------------------------------------------------------------------------- */
@media (max-width: 980px) {
    .hero__grid { grid-template-columns: 1fr; text-align: center; }
    .hero__lead, .hero h1 { max-width: none; }
    .hero__lead { margin-inline: auto; }
    .hero__actions, .hero__trust { justify-content: center; }
    .swapviz { order: -1; max-width: 380px; }
    .playground { grid-template-columns: 1fr; }
    .cycle-track { grid-template-columns: repeat(3, 1fr); }
    .cycle-step:nth-child(3)::after { display: none; }
    .platform-grid { grid-template-columns: repeat(3, 1fr); }
    .footer__inner { grid-template-columns: 1fr 1fr; }
    .auth { grid-template-columns: 1fr; }
    .auth__aside { display: none; }
}

@media (max-width: 760px) {
    .nav__links {
        position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px);
        background: var(--paper); flex-direction: column; align-items: stretch;
        padding: 90px 28px 40px; gap: 6px; box-shadow: var(--shadow-lg);
        transform: translateX(100%); transition: transform .35s var(--ease); z-index: 90;
    }
    .nav__links.is-open { transform: none; }
    .nav__links > a { padding: 12px 0; border-bottom: 1px solid var(--line); }
    .nav__cta { flex-direction: column; align-items: stretch; margin-left: 0; margin-top: 14px; }
    .nav__cta .btn { width: 100%; }
    .nav__toggle { display: flex; z-index: 95; }

    .credit-grid, .protect-grid { grid-template-columns: 1fr; }
    .platform-grid { grid-template-columns: repeat(2, 1fr); }
    .cycle-track { grid-template-columns: 1fr 1fr; }
    .cycle-step::after { display: none; }
    .privacy__band { grid-template-columns: 1fr; text-align: center; }
    .privacy__ico { margin-inline: auto; }
    .footer__inner { grid-template-columns: 1fr; }
    .dash__grid { grid-template-columns: 1fr 1fr; }
    .avatar-grid { grid-template-columns: repeat(4, 1fr); }
    .step { grid-template-columns: 1fr; gap: 14px; }
    .step__num { width: 56px; height: 56px; font-size: 1.5rem; }
}

@media (max-width: 420px) {
    .platform-grid { grid-template-columns: 1fr; }
    .dash__grid { grid-template-columns: 1fr; }
}

/* Fix overflow del hero en móvil: que el título y el swapviz no se corten a la derecha */
@media (max-width: 560px) {
    .hero h1 { font-size: clamp(1.7rem, 6.5vw, 4.4rem); overflow-wrap: break-word; }
    .hero h1 .swap-word { white-space: normal; }
    .hero__copy { min-width: 0; }
    .swapviz { max-width: 290px; min-width: 0; }
    .rev-card { width: 146px; }
    .rev-card--a { right: 0; }
    .rev-card--b { left: 0; }
}

/* ===========================================================================
   PANEL (app autenticada) — shell, sidebar, componentes
   ======================================================================== */
.app-body { background: var(--cream); }
.app { display: grid; grid-template-columns: 268px 1fr; min-height: 100vh; position: relative; z-index: 2; }

/* Sidebar */
.side {
    background: var(--navy); color: rgba(255,255,255,.7);
    padding: 22px 18px; display: flex; flex-direction: column; gap: 8px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side__brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); margin-bottom: 18px; padding: 0 8px; }
.side__brand .brand__mark { width: 38px; height: 38px; background: rgba(255,255,255,.08); color: var(--orange); border-radius: 11px; }
.side__brand .brand__text { color: #fff; font-size: 1.25rem; font-weight: 700; }
.side__nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.side__label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.38); padding: 16px 12px 6px; }
.side__nav a {
    display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px;
    font-weight: 600; font-size: .96rem; color: rgba(255,255,255,.72); transition: background .2s, color .2s;
}
.side__nav a i { width: 20px; text-align: center; font-size: 1rem; }
.side__nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.side__nav a.is-active { background: var(--orange); color: #fff; box-shadow: var(--shadow-orange); }
.side__cta { margin-top: 14px; }

/* "Contactar soporte" (link de usuario en el sidebar) */
.side__support-link { color: var(--gold) !important; }
.side__support-link:hover { background: rgba(245,196,90,.14) !important; color: #fff !important; }

/* Interruptor ON/OFF de soporte (admin) */
.side__toggle { margin: 6px 0 2px; }
.side__toggle-btn {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 14px; border-radius: 12px; cursor: pointer;
    background: rgba(255,255,255,.05); color: rgba(255,255,255,.75);
    font-weight: 600; font-size: .9rem; transition: background .2s;
}
.side__toggle-btn:hover { background: rgba(255,255,255,.1); }
.side__toggle-text { display: inline-flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.side__toggle-text i { width: 20px; text-align: center; }
.side__switch { position: relative; width: 36px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.22); transition: background .2s; flex: none; }
.side__switch-dot { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.side__toggle-btn.is-on .side__switch { background: var(--teal); }
.side__toggle-btn.is-on .side__switch-dot { transform: translateX(16px); }
.side__toggle-state { font-family: var(--font-mono); font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.5); min-width: 26px; text-align: right; }
.side__toggle-btn.is-on .side__toggle-state { color: var(--teal); }

/* Footer de cuenta del sidebar (campana, perfil, salir) — visible en celular */
.side__foot { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); flex-direction: column; gap: 4px; }
.side__user { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 12px; transition: background .2s; }
.side__user:hover { background: rgba(255,255,255,.06); }
.side__user img { width: 40px; height: 40px; border-radius: 50%; background: var(--paper); padding: 2px; flex: none; }
.side__user-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.side__user-info strong { color: #fff; font-size: .94rem; line-height: 1.2; }
.side__user-info small { color: rgba(255,255,255,.45); font-size: .76rem; }
.side__user > i { color: rgba(255,255,255,.4); }
.side__foot-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; color: rgba(255,255,255,.72); font-weight: 600; font-size: .92rem; transition: background .2s, color .2s; }
.side__foot-link i { width: 20px; text-align: center; }
.side__foot-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.side__foot-link .side__badge { margin-left: auto; }
.side__logout { margin: 0; }
.side__logout button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border-radius: 12px; color: #ff9b8a; font-weight: 600; font-size: .92rem; cursor: pointer; transition: background .2s; }
.side__logout button i { width: 20px; text-align: center; }
.side__logout button:hover { background: rgba(255,107,80,.14); }

@media (max-width: 900px) {
    /* En celular la barra superior va apretada: campana + menú de usuario pasan al sidebar. */
    .topbar .bell, .topbar .usermenu { display: none; }
    .side__foot { display: flex; }
}

/* Main */
.app__main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
    display: flex; align-items: center; gap: 14px; padding: 10px clamp(16px, 2.4vw, 26px);
    background: rgba(246,241,232,.85); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40;
}
.topbar__toggle { display: none; font-size: 1.25rem; color: var(--ink); padding: 6px; }
.topbar__title { font-size: 1.08rem; font-family: var(--font-display); flex: 1; }
.topbar__right { display: flex; align-items: center; gap: 14px; }
.credit-pill {
    display: inline-flex; align-items: center; gap: 8px; background: var(--navy); color: #fff;
    padding: 8px 16px; border-radius: var(--r-pill); font-weight: 600; font-size: .9rem; transition: transform .2s;
}
.credit-pill:hover { transform: translateY(-2px); }
.credit-pill i { color: var(--gold); }
.credit-pill span { font-family: var(--font-mono); font-weight: 700; color: var(--gold); }

.usermenu { position: relative; }
.usermenu__btn { display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px; border-radius: var(--r-pill); transition: background .2s; }
.usermenu__btn:hover { background: var(--cream-deep); }
.usermenu__btn img { width: 36px; height: 36px; border-radius: 50%; background: var(--paper); padding: 2px; border: 1.5px solid var(--line-strong); }
.usermenu__btn > span { font-weight: 700; font-size: .92rem; }
.usermenu__btn i { font-size: .7rem; color: var(--muted); }
.usermenu__drop {
    position: absolute; right: 0; top: calc(100% + 8px); width: 210px; background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
    padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .2s var(--ease); z-index: 50;
}
.usermenu.is-open .usermenu__drop { opacity: 1; visibility: visible; transform: none; }
.usermenu__drop a, .usermenu__drop button {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px;
    font-size: .92rem; font-weight: 600; color: var(--text); text-align: left; transition: background .2s;
}
.usermenu__drop a:hover, .usermenu__drop button:hover { background: var(--cream); }
.usermenu__drop i { width: 18px; color: var(--muted); }
.usermenu__drop form { margin: 0; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.usermenu__drop form button { color: var(--coral); }

/* Campanita de notificaciones (centro in-app con historial) */
.bell { position: relative; }
.bell__btn { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: background .2s; }
.bell__btn:hover { background: var(--cream-deep); }
.bell__btn i { font-size: 1.05rem; }
.bell__badge { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--coral); color: #fff; font-family: var(--font-mono); font-size: .62rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--paper); }
.bell__badge[hidden] { display: none; }
.bell__drop {
    position: absolute; right: 0; top: calc(100% + 8px); width: 340px; max-width: calc(100vw - 28px); background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .2s var(--ease); z-index: 50; overflow: hidden;
}
.bell.is-open .bell__drop { opacity: 1; visibility: visible; transform: none; }
.bell__head { padding: 12px 16px; font-family: var(--font-display); font-weight: 700; font-size: .98rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; background: var(--cream); }
.bell__head i { color: var(--orange); }
.bell__list { max-height: 50vh; overflow-y: auto; }
.bell__empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: .88rem; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bell__empty i { font-size: 1.4rem; opacity: .6; }
.bell__item { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); transition: background .15s; align-items: flex-start; }
.bell__item:last-child { border-bottom: 0; }
.bell__item:hover { background: var(--cream); }
.bell__dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; flex: none; margin-top: 6px; }
.bell__item.is-unread { background: var(--orange-soft); }
.bell__item.is-unread:hover { background: #ffe0cf; }
.bell__item.is-unread .bell__dot { background: var(--orange); }
.bell__item-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bell__item-t { font-weight: 700; font-size: .9rem; color: var(--ink); line-height: 1.25; }
.bell__item-b { font-size: .82rem; color: var(--text); line-height: 1.35; }
.bell__item-d { font-family: var(--font-mono); font-size: .68rem; color: var(--muted); margin-top: 2px; }

/* Mientras haya NO leídas: la campana se balancea y el badge late (no para hasta que se lee). */
@keyframes bellRing {
    0%, 80%, 100% { transform: rotate(0); }
    82% { transform: rotate(14deg); }
    84% { transform: rotate(-12deg); }
    86% { transform: rotate(10deg); }
    88% { transform: rotate(-7deg); }
    90% { transform: rotate(4deg); }
    92% { transform: rotate(-2deg); }
}
.bell.has-unread .bell__btn { color: var(--orange-deep); }
.bell.has-unread .bell__btn i { animation: bellRing 2.4s ease-in-out infinite; transform-origin: 50% 12%; }
@keyframes badgePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(240, 88, 74, .55); }
    50% { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(240, 88, 74, 0); }
}
.bell.has-unread .bell__badge { animation: badgePulse 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .bell.has-unread .bell__btn i, .bell.has-unread .bell__badge { animation: none; }
}

.app__content { padding: clamp(15px, 2.1vw, 24px); flex: 1; }
.flash-stack--app { position: fixed; top: 80px; }

/* Banner de notificaciones */
.push-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    background: linear-gradient(120deg, var(--orange-soft), var(--cream) 80%);
    border: 1px solid var(--orange); border-radius: var(--r-lg); padding: 16px 20px; margin-bottom: 22px;
}
.push-cta__msg { font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: 10px; }
.push-cta__msg i { color: var(--orange); font-size: 1.1rem; }

/* Encabezado de página */
.phead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.phead__h { font-size: clamp(1.28rem, 2.3vw, 1.65rem); }
.phead__sub { color: var(--muted); margin-top: 4px; }

/* Tarjetas del panel */
.pcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-sm); }
.pgrid { display: grid; gap: 14px; }
.pgrid--3 { grid-template-columns: repeat(3, 1fr); }
.pgrid--2 { grid-template-columns: repeat(2, 1fr); }
.pgrid--4 { grid-template-columns: repeat(4, 1fr); }

/* Tile / stat reutilizable en panel */
/* Dos PARES de tiles: [Reseñas dadas | En espera] y [Negocios | Cuentas]. Cada par mantiene
   sus 2 tiles lado a lado en TODOS los viewports; los pares se apilan entre sí en pantallas chicas. */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.tile-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; display: flex; gap: 12px; align-items: center; min-width: 0; transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
.tile__ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 1rem; flex-shrink: 0; }
.tile__ico--gold { background: var(--gold-soft); color: #c98a06; }
.tile__ico--teal { background: var(--teal-soft); color: var(--teal-deep); }
.tile__ico--orange { background: var(--orange-soft); color: var(--orange-deep); }
.tile__ico--navy { background: var(--cream-deep); color: var(--navy); }
.tile__n { font-family: var(--font-mono); font-weight: 700; font-size: 1.4rem; line-height: 1; }
.tile__l { color: var(--muted); font-size: .78rem; font-weight: 600; }

/* Item / fila de lista (negocio, cuenta, solicitud, intercambio) */
.item {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 13px 15px; display: flex; align-items: center; gap: 13px; transition: box-shadow .2s, transform .2s;
}
.item:hover { box-shadow: var(--shadow-md); }
.item + .item { margin-top: 8px; }
.item__ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 1.1rem; flex-shrink: 0; }
.item__body { flex: 1; min-width: 0; }
.item__title { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.item__meta { color: var(--muted); font-size: .88rem; margin-top: 3px; display: flex; gap: 14px; flex-wrap: wrap; }
.item__meta a { color: var(--orange); font-weight: 600; }
.item__actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* Botones pequeños */
.btn--sm { padding: .55em 1em; font-size: .88rem; }
.btn--icon { width: 38px; height: 38px; padding: 0; border-radius: 11px; }
.btn__label { display: none; }
.btn--danger { background: var(--coral-soft); color: var(--coral); }
.btn--danger:hover { background: var(--coral); color: #fff; }
.btn--soft { background: var(--cream-deep); color: var(--ink); }
.btn--soft:hover { background: var(--line-strong); }
.btn--teal { background: var(--teal); color: #fff; box-shadow: 0 12px 24px -12px rgba(16,185,129,.6); }
.btn--teal:hover { background: var(--teal-deep); transform: translateY(-2px); }

/* Badges de estado */
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
    padding: 4px 10px; border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: .04em; }
.badge--open    { background: var(--orange-soft); color: var(--orange-deep); }
.badge--assigned{ background: var(--gold-soft); color: #b07d06; }
.badge--submitted{ background: #e0ecfd; color: #2563c9; }
.badge--confirmed{ background: var(--teal-soft); color: var(--teal-deep); }
.badge--completed{ background: var(--teal-soft); color: var(--teal-deep); }
.badge--rejected{ background: var(--coral-soft); color: var(--coral); }
.badge--expired { background: var(--cream-deep); color: var(--muted); }
.badge--cancelled,.badge--paused,.badge--disabled { background: var(--cream-deep); color: var(--muted); }
.badge--active  { background: var(--teal-soft); color: var(--teal-deep); }

/* Estrellas */
.stars-show { color: var(--gold); letter-spacing: 2px; }
.stars-show .off { color: var(--line-strong); }

/* Selector de estrellas (input) */
.stars-pick { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.stars-pick input { position: absolute; opacity: 0; pointer-events: none; }
.stars-pick label { font-size: 2rem; color: var(--line-strong); cursor: pointer; transition: color .15s, transform .15s; line-height: 1; }
.stars-pick label:hover, .stars-pick label:hover ~ label,
.stars-pick input:checked ~ label { color: var(--gold); }
.stars-pick label:hover { transform: scale(1.15); }

/* Estado vacío */
.empty { text-align: center; padding: clamp(40px, 6vw, 70px) 24px; border: 1px dashed var(--line-strong); border-radius: var(--r-xl); background: var(--paper); }
.empty__ico { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 20px; background: var(--cream-deep); color: var(--navy); display: grid; place-items: center; font-size: 1.8rem; }
.empty h3 { font-size: 1.4rem; margin-bottom: 8px; }
.empty p { color: var(--muted); max-width: 44ch; margin: 0 auto 22px; }

/* Formularios del panel */
.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 38px); max-width: 640px; box-shadow: var(--shadow-sm); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Negocio en 2 columnas: datos | reseñas — aprovecha el ancho en desktop, colapsa en tablet/móvil */
.form-card--split { max-width: 1040px; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 2.6vw, 32px); align-items: start; }
.form-col { min-width: 0; }
.form-col--main > .field:last-child { margin-bottom: 0; }
@media (min-width: 1001px) {
    .form-col--reviews { border-left: 1px dashed var(--line); padding-left: clamp(22px, 2.8vw, 36px); }
}
@media (max-width: 1000px) {
    .form-grid { grid-template-columns: 1fr; gap: 0; }
    .form-col--reviews { border-left: 0; padding-left: 0; }
}

/* Tipo de negocio (dropdown con emoji grande al lado) */
.biz-type { display: flex; align-items: center; gap: 12px; }
.biz-type__emoji { font-size: 2rem; width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; background: var(--cream-deep); }
.biz-type select { flex: 1 1 auto; min-width: 0; }

/* Reseñas configuradas (alta/edición de negocio) */
.rev-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#reviewList { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.rev-row { border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: var(--r-md); padding: 12px 14px; background: var(--paper); }
.rev-row.is-locked { border-left-color: var(--line-strong); background: var(--cream); }
.rev-row__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.rev-row__del { border: 0; background: none; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.rev-row__del:hover { color: var(--coral); }
.rev-row__fields { display: flex; gap: 10px; margin-bottom: 8px; }
.rev-mini { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rev-mini > span { font-size: .7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.input--sm { padding: 8px 10px; font-size: .9rem; }
.rev-row textarea { width: 100%; }
.rev-row__note { margin: 8px 0 0; font-size: .76rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }

.rev-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 800; padding: 4px 10px; border-radius: var(--r-pill); }
.rev-badge.st-wait  { background: var(--cream-deep); color: var(--muted); }
.rev-badge.st-sched { background: #e7eefc; color: #3b5bdb; }
.rev-badge.st-pool  { background: var(--orange-soft); color: var(--orange-deep); }
.rev-badge.st-asg   { background: var(--orange-soft); color: var(--orange-deep); }
.rev-badge.st-val   { background: var(--gold-soft); color: #9a6a00; }
.rev-badge.st-ok    { background: var(--teal-soft); color: var(--teal-deep); }

/* Badge de género (para "por dar", "ver", give) */
.gbadge { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); background: var(--cream-deep); color: var(--muted); }
.gbadge.gb-f { background: #fce7f3; color: #be1d6a; }
.gbadge.gb-m { background: #e0f2fe; color: #0369a1; }
.gbadge.gb-state { background: #fef3c7; color: #92600a; }

/* Modal genérico (reglas de reseña, etc.) */
.modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(26,31,44,.55); }
.modal__box { position: relative; background: var(--paper); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); max-width: 560px; width: 100%; max-height: 86vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: modalPop .2s var(--ease); }
@keyframes modalPop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.modal__x { position: absolute; top: 12px; right: 14px; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; }
.modal__x:hover { color: var(--ink); }
.modal__emoji { font-size: 2.4rem; text-align: center; }
.rules-list { display: flex; flex-direction: column; gap: 11px; }
.rules-list li { display: flex; gap: 11px; font-size: .9rem; color: var(--text); line-height: 1.4; }
.rules-list li > span { font-size: 1.2rem; flex: 0 0 auto; }

@media (max-width: 560px) {
    .rev-row__fields { flex-direction: column; gap: 8px; }
}
textarea.input { resize: vertical; min-height: 110px; font-family: inherit; }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%2366707f' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.form-actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.field__help { font-size: .84rem; color: var(--muted); margin-top: 6px; }

/* Selector de avatar para negocios (reusa avatar-grid pero cuadrado) */
.biz-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.biz-emoji { aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; cursor: pointer;
    border: 2px solid var(--line-strong); background: var(--cream); transition: .15s var(--ease); }
.biz-emoji:hover { transform: translateY(-2px); }
.biz-emoji input { position: absolute; opacity: 0; }
.biz-emoji.is-selected { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }

/* Resumen del icono elegido (visible al editar; abre la rejilla con "Cambiar") */
.biz-emoji-summary { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.biz-emoji-summary__icon {
    width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center;
    font-size: 1.7rem; border-radius: 14px; background: var(--cream); border: 2px solid var(--orange);
    box-shadow: 0 0 0 3px var(--orange-soft);
}
.biz-emoji-summary__name { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--text); }
.biz-emoji-picker[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Reseñas sugeridas con estatus (acordeón) — alta/edición de negocio
--------------------------------------------------------------------------- */
.rev-slots { display: grid; gap: 10px; }
.rev-slot {
    border: 2px solid var(--line); border-left-width: 5px; border-radius: var(--r-sm);
    background: var(--paper); overflow: hidden; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.rev-slot__head {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 13px;
    background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--text);
}
.rev-slot__head:hover { background: rgba(26, 31, 44, .025); }
.rev-slot__num { font-family: var(--font-mono); font-size: .76rem; font-weight: 700; color: var(--muted); flex: 0 0 auto; }
.rev-slot__badge {
    display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
    font-size: .7rem; font-weight: 800; letter-spacing: .01em; padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap;
}
.rev-slot__badge i { font-size: .72rem; }
.rev-slot__preview {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--muted); font-size: .86rem;
}
.rev-slot__preview em { color: var(--line-strong); font-style: normal; }
.rev-slot__caret { flex: 0 0 auto; color: var(--muted); font-size: .8rem; transition: transform .2s var(--ease); }
.rev-slot.is-open .rev-slot__caret { transform: rotate(180deg); }
.rev-slot__body { padding: 2px 13px 14px; }
.rev-slot__body[hidden] { display: none; }
.rev-slot__body textarea { width: 100%; }
.rev-slot__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 9px; }
.rev-slot__hint { font-size: .8rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.rev-slot__who { font-size: .8rem; color: var(--muted); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.rev-slot__who--ok { color: var(--teal-deep); }
.rev-slot__locked { margin: 9px 0 0; font-size: .76rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }

/* Colores por estatus */
.rev-slot--en_espera { border-left-color: var(--line-strong); }
.rev-slot--en_espera .rev-slot__badge { background: var(--cream-deep); color: var(--muted); }
.rev-slot--asignada { border-left-color: var(--orange); }
.rev-slot--asignada .rev-slot__badge { background: var(--orange-soft); color: var(--orange-deep); }
.rev-slot--para_validacion { border-left-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }
.rev-slot--para_validacion .rev-slot__badge { background: var(--gold-soft); color: #9a6a00; }
.rev-slot--confirmada { border-left-color: var(--teal); }
.rev-slot--confirmada .rev-slot__badge { background: var(--teal-soft); color: var(--teal-deep); }
.rev-slot--confirmada .rev-slot__preview { color: var(--text); }

/* Leyenda de estatus */
.rev-legend { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--line); }
.rev-legend__item { font-size: .72rem; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.rev-legend__item i { font-size: .7rem; }
.rev-legend__item--en_espera i { color: var(--line-strong); }
.rev-legend__item--asignada i { color: var(--orange); }
.rev-legend__item--para_validacion i { color: var(--gold); }
.rev-legend__item--confirmada i { color: var(--teal); }

/* ---------------------------------------------------------------------------
   Vista (solo lectura) del negocio: cabecero + reseñas como tarjetas
--------------------------------------------------------------------------- */
.biz-head {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 20px 24px; box-shadow: var(--shadow-sm); margin-bottom: 24px;
}
.biz-head__ico {
    width: 64px; height: 64px; flex: 0 0 auto; display: grid; place-items: center;
    font-size: 2rem; border-radius: 18px; background: var(--cream-deep);
}
.biz-head__info { flex: 1 1 220px; min-width: 0; }
.biz-head__name { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 9px; line-height: 1.15; }
.biz-head__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.biz-head__link { color: var(--orange); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; }
.biz-head__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.biz-reviews__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.biz-reviews__head h3 { font-family: var(--font-display); font-size: 1.22rem; margin: 0; }
.biz-reviews__count { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.biz-reviews__count i { color: var(--teal); }

.biz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.biz-card {
    display: flex; flex-direction: column; gap: 9px;
    background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--line-strong);
    border-radius: var(--r-md); padding: 13px 14px; box-shadow: var(--shadow-sm);
    transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.biz-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.biz-card__head { display: flex; align-items: center; gap: 9px; }
.biz-card__num {
    flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
    font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: #fff; letter-spacing: -.02em;
}
.biz-card__status {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    font-size: .72rem; font-weight: 800; padding: 4px 10px; border-radius: var(--r-pill);
}
.biz-card__status i { font-size: .72rem; }
.biz-card__text {
    margin: 0; font-size: .85rem; color: var(--text); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.biz-card__text--empty { color: var(--muted); font-style: italic; }
.biz-card__foot { margin-top: auto; }
.biz-card__who { font-size: .76rem; color: var(--muted); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.biz-card--confirmada .biz-card__who { color: var(--teal-deep); }
.biz-card__addlink { color: var(--orange); font-weight: 700; font-size: .8rem; display: inline-flex; align-items: center; gap: 5px; }

/* Color por estado: número + badge + borde izquierdo */
.biz-card--en_espera { border-left-color: var(--line-strong); }
.biz-card--en_espera .biz-card__num { background: var(--line-strong); }
.biz-card--en_espera .biz-card__status { background: var(--cream-deep); color: var(--muted); }
.biz-card--asignada { border-left-color: var(--orange); }
.biz-card--asignada .biz-card__num { background: var(--orange); }
.biz-card--asignada .biz-card__status { background: var(--orange-soft); color: var(--orange-deep); }
.biz-card--para_validacion { border-left-color: var(--gold); }
.biz-card--para_validacion .biz-card__num { background: var(--gold); }
.biz-card--para_validacion .biz-card__status { background: var(--gold-soft); color: #9a6a00; }
.biz-card--confirmada { border-left-color: var(--teal); }
.biz-card--confirmada .biz-card__num { background: var(--teal); }
.biz-card--confirmada .biz-card__status { background: var(--teal-soft); color: var(--teal-deep); }

@media (max-width: 540px) {
    .biz-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .biz-head__actions { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Admin: negocios + estado de reseñas (vista global)
--------------------------------------------------------------------------- */
.adm-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.adm-sum { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--r-pill); font-weight: 700; font-size: .88rem; border: 1px solid var(--line); background: var(--paper); }
.adm-sum b { font-family: var(--font-mono); font-size: .95rem; }
.adm-sum--confirmada { background: var(--teal-soft); color: var(--teal-deep); border-color: var(--teal); }
.adm-sum--para_validacion { background: var(--gold-soft); color: #9a6a00; border-color: var(--gold); }
.adm-sum--asignada { background: var(--orange-soft); color: var(--orange-deep); border-color: var(--orange); }
.adm-sum--en_espera { background: var(--cream-deep); color: var(--muted); }

.adm-biz { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.adm-biz__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.adm-biz__ico { width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; font-size: 1.6rem; border-radius: 14px; background: var(--cream-deep); }
.adm-biz__info { flex: 1 1 240px; min-width: 0; }
.adm-biz__name { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; line-height: 1.2; }
.adm-biz__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.adm-biz__meta a { color: var(--orange); font-weight: 600; }
.adm-biz__ok { color: var(--teal-deep); font-weight: 700; }

/* Subida de captura */
.upload {
    border: 2px dashed var(--line-strong); border-radius: var(--r-md); padding: 26px; text-align: center;
    cursor: pointer; transition: border-color .2s, background .2s; background: var(--cream);
}
.upload:hover, .upload.drag { border-color: var(--orange); background: var(--orange-soft); }
.upload i { font-size: 1.8rem; color: var(--orange); margin-bottom: 10px; }
.upload__name { font-weight: 700; margin-top: 8px; color: var(--teal-deep); }
.upload input { display: none; }
.upload__preview { max-height: 180px; border-radius: 12px; margin: 12px auto 0; box-shadow: var(--shadow-md); }

/* Tabla simple (admin) */
.ptable { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.ptable th, .ptable td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: .92rem; }
.ptable th { background: var(--cream); font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ptable tr:last-child td { border-bottom: none; }
.ptable tr:hover td { background: var(--cream); }

/* Guía / callout */
.callout { display: flex; gap: 14px; background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 22px; }
.callout i { color: #c98a06; font-size: 1.2rem; margin-top: 2px; }
.callout p { font-size: .94rem; color: var(--text); }
.callout--teal { background: var(--teal-soft); border-color: var(--teal); }
.callout--teal i { color: var(--teal-deep); }

/* Consejos para buena reseña */
.tips { margin-top: 20px; background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--r-md); padding: 16px 18px; }
.tips__head { font-weight: 800; color: #a06b04; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tips__list { display: flex; flex-direction: column; gap: 8px; }
.tips__list li { display: flex; gap: 10px; font-size: .9rem; color: var(--text); }
.tips__list li i { color: var(--gold-deep, #c98a06); margin-top: 3px; }

/* Caja de rechazo (details/summary) */
.reject-box { display: inline-block; }
.reject-box summary { list-style: none; cursor: pointer; }
.reject-box summary::-webkit-details-marker { display: none; }
.reject-box[open] summary { margin-bottom: 0; }

.side-overlay { display: none; position: fixed; inset: 0; background: rgba(26,31,44,.5); z-index: 45; opacity: 0; transition: opacity .3s; }
.side-overlay.show { display: block; opacity: 1; }

/* Responsive panel */
@media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
    .side {
        position: fixed; left: 0; top: 0; width: 280px; z-index: 60;
        transform: translateX(-100%); transition: transform .3s var(--ease);
    }
    .side.is-open { transform: none; box-shadow: var(--shadow-lg); }
    .topbar__toggle { display: block; }
    .tiles { grid-template-columns: 1fr; }
    .pgrid--3, .pgrid--4, .pgrid--2 { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .usermenu__btn > span { display: none; }
    .topbar__title { font-size: 1.1rem; }
    .tile-pair { gap: 8px; }
    .tile { padding: 12px; gap: 9px; }
    .tile__n { font-size: 1.25rem; }
    .item { flex-wrap: wrap; }
    /* Tarjeta de negocio: ico+nombre arriba, acciones a ancho completo abajo con etiqueta */
    .item--biz { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ico body" "act act"; align-items: center; gap: 12px 14px; padding: 16px; }
    .item--biz .item__ico { grid-area: ico; }
    .item--biz .item__body { grid-area: body; }
    .item--biz .item__actions { grid-area: act; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .item--biz .item__actions form { width: 100%; }
    .item--biz .item__actions .btn { width: 100%; height: auto; padding: 9px 10px; gap: 7px; }
    .item--biz .item__actions .btn__label { display: inline; }
    .biz-emoji-grid { grid-template-columns: repeat(6, 1fr); }
    .biz-emoji-summary { flex-wrap: wrap; }
    .credit-pill span ~ * { }
}

/* ====== Barra de progreso fija (onboarding 3 pasos) ====== */
.progress-rail { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.progress-rail--done { background: var(--teal-soft); border-color: var(--teal); }
.progress-rail__ok { color: var(--teal-deep); font-weight: 700; flex: 1; min-width: 0; }
.progress-rail__ok i { margin-right: 6px; }
.progress-rail__cta { margin-left: auto; white-space: nowrap; flex: none; }
.progress-rail__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 7px; border-radius: var(--r-pill); background: rgba(255,255,255,.3); font-weight: 800; font-size: .78rem; }
.prog-steps { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; flex: 1; min-width: 0; background: none; border: 0; }
.prog-step { display: flex; align-items: center; gap: 8px; padding: 0; margin: 0; color: var(--muted); font-weight: 600; font-size: .9rem; background: none; box-shadow: none; transform: none; border: 0; }
.prog-step:not(:last-child)::after { content: ""; width: 20px; height: 2px; background: var(--line-strong); border-radius: 2px; margin: 0 6px; }
.prog-step__dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cream-deep); color: var(--muted); font-weight: 800; font-size: .82rem; flex: none; }
.prog-step.is-current { color: var(--navy); }
.prog-step.is-current .prog-step__dot { background: var(--orange); color: #fff; }
.prog-step.is-done { color: var(--teal-deep); }
.prog-step.is-done .prog-step__dot { background: var(--teal); color: #fff; }

/* ====== Seguimiento "Mis solicitudes" ====== */
.invite { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: linear-gradient(120deg, var(--teal-soft), var(--paper)); border: 1px solid var(--teal); border-radius: var(--r-md); padding: 18px 20px; margin-bottom: 22px; }
.invite__body { flex: 1; min-width: 240px; }
.invite__title { font-weight: 800; font-size: 1.15rem; margin-bottom: 5px; }
.invite__txt { color: var(--text); margin: 0; line-height: 1.5; }
.invite__cta { flex: none; }
.invite__note { font-size: .9rem; color: var(--muted); max-width: 320px; line-height: 1.45; }
.invite__note a { color: var(--orange); font-weight: 700; }
.track { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.track__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.track__id { min-width: 0; }
.track__name { font-weight: 800; }
.track__plat { color: var(--muted); font-size: .85rem; }
.track__head .btn { margin-left: auto; flex: none; }
.track__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.track__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--line); }
.track__stars { font-size: 1rem; }
.track__state { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.track__link { color: var(--teal-deep); font-weight: 700; font-size: .85rem; white-space: nowrap; }

@media (max-width: 760px) {
    .progress-rail { gap: 10px; padding: 10px 12px; }
    .prog-step__label { display: none; }
    .prog-step.is-current .prog-step__label { display: inline; }
    .prog-step:not(:last-child)::after { width: 14px; margin: 0 3px; }
    .invite__body { min-width: 0; }
    .track__state { margin-left: 0; }
}
@media (max-width: 560px) {
    .progress-rail { flex-wrap: wrap; gap: 8px 10px; }
    .prog-steps { flex-wrap: nowrap; flex: 1 1 auto; gap: 2px; }
    .prog-step.is-current .prog-step__label { display: none; }
    .progress-rail__cta { margin-left: 0; width: 100%; justify-content: center; }
    .progress-rail__ok { flex-basis: 100%; }
}

/* ====== Form de negocio en 2 pasos ====== */
.biz-form { max-width: 720px; padding: clamp(18px, 2.4vw, 28px); }
.form-step[hidden] { display: none; }
.form-step--reviews { border-top: 1px dashed var(--line-strong); margin-top: 18px; padding-top: 18px; }
.step-tag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 800; font-size: 1.02rem; color: var(--ink); margin-bottom: 14px; }
.step-tag__n { width: 25px; height: 25px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font-size: .82rem; font-weight: 800; flex: none; }
.step-rules { margin-left: auto; background: var(--cream-deep); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; font-size: .82rem; font-weight: 700; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .2s, color .2s; }
.step-rules:hover { background: var(--orange-soft); color: var(--orange-deep); }
.step-next { margin-top: 18px; }

/* ====== Modal de reglas (rediseño aireado, 2 columnas, fondo tenue) ====== */
.modal__box--rules { max-width: 760px; background: linear-gradient(165deg, #eaf6f0 0%, var(--paper) 58%); }
.modal__head { text-align: center; margin-bottom: 16px; }
.modal__head .modal__emoji { margin-bottom: 2px; }
.modal__box--rules h3 { font-size: 1.32rem; margin-bottom: 4px; }
.modal__head p { color: var(--muted); font-size: .88rem; margin: 0; }
.modal__box--rules .rules-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.modal__box--rules .rules-list li { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: .8rem; line-height: 1.35; align-items: flex-start; box-shadow: var(--shadow-sm); }
.modal__box--rules .rules-list li > span { font-size: 1.05rem; }
.modal__foot { margin-top: 16px; text-align: center; }

@media (max-width: 620px) {
    .modal__box--rules .rules-list { grid-template-columns: 1fr; }
}

/* ====== Resumen compacto del negocio (paso 1 ya capturado) ====== */
#bizFields[hidden] { display: none; }
.step-tag__n.is-done { background: var(--teal); }
.biz-summary { display: flex; align-items: flex-start; gap: 14px; background: var(--cream); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 14px 16px; position: relative; }
.biz-summary[hidden] { display: none; }
.biz-summary__emoji { font-size: 1.8rem; width: 46px; height: 46px; flex: none; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.biz-summary__body { min-width: 0; flex: 1; }
.biz-summary__name { font-weight: 800; font-size: 1.05rem; line-height: 1.2; padding-right: 78px; }
.biz-summary__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; color: var(--muted); font-size: .82rem; }
.biz-summary__meta i { color: var(--orange); margin-right: 4px; }
.biz-summary__link { display: inline-block; margin-top: 6px; color: var(--teal-deep); font-weight: 600; font-size: .8rem; word-break: break-all; }
.biz-summary__desc { margin: 8px 0 0; font-size: .85rem; color: var(--text); line-height: 1.45; }
.biz-summary__edit { position: absolute; top: 12px; right: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 11px; font-size: .77rem; font-weight: 700; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background .2s, color .2s; }
.biz-summary__edit:hover { background: var(--orange-soft); color: var(--orange-deep); }

/* ====== Acciones del negocio en la tarjeta unificada (negocios + reseñas) ====== */
.biz-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.biz-actions .btn { margin-left: 0; }
.biz-actions form { margin: 0; }
.track__empty { color: var(--muted); font-size: .88rem; padding: 8px 2px 0; }
.track__empty a { color: var(--orange); font-weight: 700; }

/* ====== Barra info de cuentas reseñadoras ====== */
.acc-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 16px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.acc-bar__count { font-weight: 700; font-size: .92rem; }
.acc-bar__hint { color: var(--muted); font-size: .82rem; }

/* ====== Tabla del admin (negocios y reseñas) ====== */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-sm); }
.adm-table { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 820px; }
.adm-table thead th { text-align: left; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--cream); }
.adm-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.adm-table tbody tr:hover { background: var(--cream); }
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-td-date { white-space: nowrap; font-family: var(--font-mono); font-size: .74rem; color: var(--muted); }
.adm-td-user { font-weight: 600; white-space: nowrap; }
.adm-biz-cell { display: flex; align-items: center; gap: 9px; }
.adm-biz-emoji { font-size: 1.1rem; width: 32px; height: 32px; display: grid; place-items: center; background: var(--cream-deep); border-radius: 9px; flex: none; }
.adm-biz-name { font-weight: 700; line-height: 1.1; }
.adm-biz-plat { color: var(--muted); font-size: .76rem; display: inline-flex; align-items: center; gap: 4px; }
.adm-rev-cell { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.adm-rev-stars { font-size: .9rem; }
.adm-rev-txt { color: var(--muted); font-size: .76rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-td-detail { white-space: nowrap; font-size: .8rem; }

/* --- Admin: tabla de negocios (fila → detalle de reseñas en MODAL) --- */
.adm-biz-table { min-width: 760px; }
.adm-th-chev { width: 32px; padding-left: 8px !important; padding-right: 8px !important; }
.adm-biz-row { cursor: pointer; transition: background .15s; }
.adm-biz-row:hover, .adm-biz-row:focus-visible { background: var(--cream); outline: none; }
.adm-biz-row:focus-visible { box-shadow: inset 0 0 0 2px var(--orange); }
.adm-chevron { width: 32px; text-align: center; color: var(--line-strong); padding-left: 8px !important; padding-right: 8px !important; }
.adm-chevron i { transition: color .15s, transform .15s ease; font-size: .82rem; }
.adm-biz-row:hover .adm-chevron i, .adm-biz-row:focus-visible .adm-chevron i { color: var(--orange); transform: scale(1.12); }
.adm-biz-table .adm-td-date { line-height: 1.25; }
.adm-td-time { font-family: var(--font-mono); font-size: .66rem; opacity: .7; }
.adm-user-susp { color: var(--coral); margin-left: 4px; }

/* Celda de avance (solicitadas / confirmadas + barra %) */
.adm-td-prog { min-width: 168px; }
.adm-prog { display: flex; flex-direction: column; gap: 5px; }
.adm-prog__top { display: flex; align-items: baseline; gap: 7px; font-size: .8rem; }
.adm-prog__nums { font-family: var(--font-mono); color: var(--text); white-space: nowrap; }
.adm-prog__nums b { color: var(--teal-deep); font-size: .98rem; }
.adm-prog__lbl { color: var(--muted); font-size: .72rem; }
.adm-prog__pct { margin-left: auto; font-weight: 800; font-size: .82rem; color: var(--ink); font-family: var(--font-mono); }
.adm-prog__bar { height: 7px; border-radius: var(--r-pill); background: var(--cream-deep); overflow: hidden; }
.adm-prog__bar > span { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--teal), var(--teal-deep)); transition: width .35s ease; }
.adm-td-bizstate { white-space: nowrap; }

.adm-hint-inline { color: var(--muted); font-size: .82rem; }
.adm-hint-inline i { color: var(--orange); }

/* Modal flotante con el detalle de reseñas de un negocio */
.modal__box--detail { max-width: 1120px; padding: clamp(18px, 2.2vw, 26px); }
.modal__box--detail .table-wrap { border-color: var(--line); }
/* La tabla se ajusta al ancho del modal (todas las columnas a la vista); sin el min-width fijo del panel. */
.modal__box--detail .rev-table--wide { min-width: 0; }
.modal__box--detail .rev-table--wide td, .modal__box--detail .rev-table--wide th { padding-left: 9px; padding-right: 9px; }
.admx-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; padding-right: 30px; }
.admx-emoji { font-size: 1.7rem; width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; background: var(--cream-deep); border-radius: 14px; }
.admx-id { min-width: 0; flex: 1 1 auto; }
.admx-name { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 7px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; line-height: 1.2; }
.admx-meta { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
.admx-meta a { color: var(--orange); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.admx-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.admx-prog { margin-bottom: 14px; }
.admx-prog .adm-prog__bar { height: 9px; margin-bottom: 7px; }
.admx-prog__txt { font-size: .85rem; color: var(--text); font-family: var(--font-mono); }
.admx-prog__txt b { color: var(--teal-deep); }
.adm-detail__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.adm-detail__empty { margin: 0; padding: 6px 2px; color: var(--muted); display: flex; align-items: center; gap: 8px; }

/* ====== Editar negocio: datos fijos (solo lectura) + lista de reseñas ====== */
.locked-info { background: var(--cream); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 18px; }
.locked-info__head { font-weight: 800; font-size: .92rem; color: var(--ink); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.locked-info__head i { color: var(--muted); }
.locked-info__grid { display: grid; gap: 10px; }
.locked-info__row { display: flex; flex-direction: column; gap: 2px; }
.locked-info__k { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.locked-info__v { font-weight: 600; font-size: .92rem; word-break: break-all; }
.locked-info__link { color: var(--teal-deep); }
.locked-info__note { margin: 10px 0 0; font-size: .8rem; color: var(--muted); }

.rev-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; }
.rev-list__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.rev-list__row:first-child { border-top: 0; }
.rev-list__row--new { background: var(--orange-soft); border: 1px dashed var(--orange); border-radius: 10px; padding: 9px 12px; margin-top: 6px; }
.rev-list__stars { font-size: 1rem; }
.rev-list__txt { color: var(--muted); font-size: .82rem; }
.rev-list__state { margin-left: auto; }
.rev-list__del { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.rev-list__del:hover { color: var(--coral); }
.rev-list__note { color: var(--muted); font-size: .88rem; padding: 6px 0; }

/* ====== Editar negocio: bloque de info (display) ====== */
.biz-display { display: flex; align-items: flex-start; gap: 16px; background: var(--cream); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 18px 20px; margin-bottom: 20px; position: relative; }
.biz-display__emoji { font-size: 2rem; width: 54px; height: 54px; flex: none; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.biz-display__body { flex: 1; min-width: 0; }
.biz-display__name { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1.1; padding-right: 110px; }
.biz-display__rows { display: flex; flex-wrap: wrap; gap: 7px 20px; margin-top: 10px; }
.biz-display__row { font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.biz-display__k { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.biz-display__row--link { max-width: 100%; }
.biz-display__row--link a { color: var(--teal-deep); word-break: break-all; }
.biz-display__desc { margin: 10px 0 0; font-size: .9rem; color: var(--text); line-height: 1.5; }
.biz-display__lock { margin: 10px 0 0; font-size: .78rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.biz-display__edit { position: absolute; top: 16px; right: 16px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 7px 14px; font-size: .82rem; font-weight: 700; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .2s, color .2s; }
.biz-display__edit:hover { background: var(--orange-soft); color: var(--orange-deep); }

/* ====== Tabla de reseñas del negocio (mis negocios) ====== */
.track__desc { color: var(--muted); font-size: .85rem; margin-top: 6px; max-width: 66ch; }
.rev-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 480px; }
.rev-table thead th { text-align: left; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--cream); }
.rev-table td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rev-table tbody tr:last-child td { border-bottom: 0; }
.rev-table__stars { font-size: 1rem; }
.rev-table__detail { white-space: nowrap; font-size: .82rem; }

@media (max-width: 560px) {
    .biz-display__name { padding-right: 0; }
    .biz-display__edit { position: static; margin-top: 12px; }
}

/* ====== Aviso: hasta 10 reseñas (mis negocios) ====== */
.rule-note { display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(120deg, var(--cream-deep), var(--paper)); border: 1px solid var(--line-strong); border-left: 4px solid var(--orange); border-radius: var(--r-md); padding: 13px 16px; margin-bottom: 18px; }
.rule-note__ico { font-size: 1.3rem; line-height: 1.25; flex: none; }
.rule-note p { margin: 0; font-size: .9rem; color: var(--text); line-height: 1.5; }

/* ====== Tabla de reseñas ampliada (texto + fechas + cuenta) ====== */
.rev-table--wide { min-width: 920px; }
.rev-table--wide thead th { white-space: nowrap; }
.rev-table--wide td { padding: 9px 12px; }
.rev-cell-text { max-width: 260px; }
.rev-text { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; color: var(--text); }
.rev-cell--none { color: var(--muted); font-size: .82rem; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.rev-date { font-family: var(--font-mono); font-size: .76rem; color: var(--ink); white-space: nowrap; }
.rev-cell-quien, .rev-cell-cuenta { white-space: nowrap; }
.rev-acct { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: .82rem; color: var(--teal-deep); background: var(--teal-soft); border-radius: var(--r-pill); padding: 3px 10px 3px 8px; }
.rev-acct i { font-size: .72rem; opacity: .85; }
.rev-table__hint { display: flex; flex-wrap: wrap; font-size: .76rem; color: var(--muted); margin: 8px 2px 0; align-items: center; gap: 6px; }
.rev-table__hint i { color: var(--orange); }

/* Filas de reseña: clic para editar (solo las "en espera") */
.rev-row-click { cursor: pointer; transition: background .15s; }
.rev-row-click:hover, .rev-row-click:focus-visible { background: var(--cream); outline: none; }
.rev-row-click:focus-visible { box-shadow: inset 0 0 0 2px var(--orange); }
.rev-cell-estado { white-space: nowrap; }
.rev-edit-hint { margin-left: 8px; font-size: .72rem; color: var(--line-strong); transition: color .15s; }
.rev-row-click:hover .rev-edit-hint, .rev-row-click:focus-visible .rev-edit-hint { color: var(--orange); }

/* Modal corto de una reseña (agregar / editar) */
.modal__box--rev { max-width: 480px; }
.form-actions--split { margin-bottom: 6px; }
.del-review { margin: 0; text-align: center; border-top: 1px solid var(--line); padding-top: 14px; }
.btn--danger-ghost { background: none; border: 1px solid var(--line-strong); color: var(--coral); }
.btn--danger-ghost:hover { background: #fdecea; border-color: var(--coral); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; filter: grayscale(.15); }

/* Columna ID numérico de la tabla de reseñas */
.rev-cell-id { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); white-space: nowrap; text-align: center; }
.rev-th-id { text-align: center; white-space: nowrap; }

/* Columna "Soltar": botón para regresar una reseña tomada al pool */
.rev-cell-soltar { text-align: center; white-space: nowrap; }
.rev-soltar-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
    background: #fdecea; color: var(--coral); border: 1px solid #f4cfca;
    font-size: .82rem; line-height: 1; transition: background .15s, color .15s, border-color .15s;
}
.rev-soltar-btn:hover { background: var(--coral); color: #fff; border-color: var(--coral); }

/* Fila "Por validar" (lleva a confirmar/rechazar): acento dorado + icono teal */
.rev-row-pending { box-shadow: inset 3px 0 0 var(--gold); }
.rev-edit-hint--go { color: var(--teal-deep); }
.rev-row-click:hover .rev-edit-hint--go { color: var(--teal-deep); }

/* Modal: confirmar / rechazar reseña recibida */
.cr-acct { background: var(--navy); color: #fff; border-radius: var(--r-md); padding: 14px 16px; text-align: center; margin-bottom: 14px; }
.cr-acct__k { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 6px; }
.cr-acct__name { font-weight: 800; font-size: 1.2rem; word-break: break-word; }
.cr-acct__link { display: inline-block; margin-top: 10px; color: var(--orange); font-weight: 700; font-size: .85rem; }
.cr-info { font-size: .9rem; color: var(--text); margin-bottom: 14px; }
.cr-info__stars span { color: var(--gold); letter-spacing: 1px; }
.cr-info__text { color: var(--muted); margin: 6px 0; line-height: 1.45; }
.cr-info__deadline { font-size: .82rem; color: var(--coral); margin: 8px 0 0; }
.cr-reject { margin: 10px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }

/* Countdown "en X" de una reseña programada (columna Publicación) */
.rev-until { display: inline-block; margin-left: 4px; font-size: .68rem; font-weight: 700; color: var(--orange-deep); white-space: nowrap; }

/* Leyenda del contador y los estados */
.rev-legend { margin: 10px 2px 0; font-size: .85rem; }
.rev-legend > summary { cursor: pointer; color: var(--teal-deep); font-weight: 700; display: inline-flex; align-items: center; gap: 7px; list-style: none; }
.rev-legend > summary::-webkit-details-marker { display: none; }
.rev-legend > summary:hover { text-decoration: underline; }
.rev-legend__body { margin-top: 10px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; }
.rev-legend__lead { margin: 0 0 10px; color: var(--text); line-height: 1.5; }
.rev-legend__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rev-legend__list li { display: flex; align-items: flex-start; gap: 9px; flex-wrap: wrap; color: var(--text); line-height: 1.45; }
.rev-legend__list .rev-badge { flex: none; }

/* Control de género por cuenta reseñadora (/panel/cuentas) */
.acc-gender { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.acc-gender__lbl { font-size: .8rem; color: var(--muted); font-weight: 600; }
.acc-gender__sel { width: auto; min-width: 130px; }

/* Tabla de usuarios (admin), compacta con correo + IP en columnas propias */
.adm-users { min-width: 920px; }
.adm-users td { padding: 8px 11px; }
.adm-user { display: inline-flex; align-items: center; gap: 8px; }
.adm-user__av { width: 28px; height: 28px; border-radius: 50%; background: var(--cream-deep); padding: 2px; flex: none; }
.adm-user__name { font-weight: 700; white-space: nowrap; }
.adm-user__mail { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.adm-td-ip { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); white-space: nowrap; }
.adm-td-ip--dup { color: var(--coral); font-weight: 700; }
.adm-td-ip--dup i { font-size: .7rem; }

/* Badge "Corregir" (reseña rechazada, perspectiva reseñador) */
.rev-badge.st-rej { background: #fdecea; color: var(--coral); }

/* Celda de negocio en "Reseñas que debo escribir": icono de plataforma + nombre */
.rev-cell-neg { min-width: 0; }
.rev-neg { display: inline-flex; align-items: center; gap: 9px; }
.rev-neg__ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: .8rem; flex: none; }
.rev-neg__txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.rev-neg__name { font-weight: 700; white-space: nowrap; }
.rev-neg__plat { font-size: .72rem; color: var(--muted); }

/* Fecha límite: resaltado por urgencia */
.rev-date--soon .rev-date { color: var(--orange-deep); font-weight: 700; }
.rev-date--over .rev-date { color: var(--coral); font-weight: 700; }
.rev-over { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--coral); background: #fdecea; padding: 1px 6px; border-radius: var(--r-pill); white-space: nowrap; }

/* Móvil: el header del negocio apila las acciones a su propia fila (evita overflow) */
@media (max-width: 560px) {
    .track__head { flex-wrap: wrap; row-gap: 12px; }
    .biz-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
    .biz-actions > .btn { flex: 1 1 auto; justify-content: center; }
    .biz-actions > form { flex: 0 0 auto; }
}

.linklike { background: none; border: 0; padding: 0; color: var(--orange); font-weight: 700; cursor: pointer; font: inherit; }
.linklike:hover { text-decoration: underline; }

/* ====== Modal: editar negocio ====== */
.modal__box--edit { max-width: 600px; }
.modal__head--left { text-align: left; margin-bottom: 14px; padding-right: 30px; }
.modal__head--left h3 { font-size: 1.25rem; display: flex; align-items: center; gap: 8px; }
.modal__head--left h3 i { color: var(--orange); }
.modal__head--left p { color: var(--muted); font-size: .86rem; margin: 4px 0 0; }
.step-tag--mt { margin-top: 18px; }
.rule-hint { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; color: var(--text); background: var(--orange-soft); border-radius: 10px; padding: 9px 12px; margin: 0 0 14px; line-height: 1.4; }
.rule-hint i { color: var(--orange-deep); margin-top: 2px; flex: none; }

/* Plataforma + link fijos (negocio ya en juego) */
.biz-fixed { background: var(--cream); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 16px; }
.biz-fixed__row { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; font-size: .9rem; }
.biz-fixed__k { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); flex: 0 0 78px; }
.biz-fixed__link { color: var(--teal-deep); word-break: break-all; }
.biz-fixed__note { margin: 8px 0 0; font-size: .78rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.biz-fixed__note i { color: var(--muted); }

/* Filas editables + bloque "en proceso" dentro del modal */
.rev-rows { display: flex; flex-direction: column; gap: 12px; }
.rev-rows:not(:empty) { margin-bottom: 12px; }
.rev-inprog { background: var(--cream); border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: 11px 14px; margin-bottom: 12px; }
.rev-inprog__label { font-size: .8rem; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.rev-inprog__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rev-inprog__chip { display: inline-flex; align-items: center; gap: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 10px; font-size: .82rem; }

/* ============================================================
   LANDING · "Cómo funciona" — flujo iluminado de 2 partes
   ============================================================ */
.flow { position: relative; overflow: hidden; }
.flow__aura {
    position: absolute; left: 50%; top: 46%; width: min(820px, 92vw); height: 560px;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(closest-side, rgba(255,107,53,.10), transparent 70%) left center / 55% 100% no-repeat,
        radial-gradient(closest-side, rgba(16,185,129,.10), transparent 70%) right center / 55% 100% no-repeat;
    filter: blur(8px); pointer-events: none; z-index: 0;
}
.flow .wrap { position: relative; z-index: 1; }

/* Actores (las 2 partes) */
.flow-actors {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    flex-wrap: wrap; margin: 4px auto 48px; max-width: 780px; text-align: center;
}
.flow-actor {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-mono); font-size: .82rem; font-weight: 700;
    padding: 9px 16px; border-radius: 100px; background: #fff; border: 1.5px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.flow-actor__dot { width: 11px; height: 11px; border-radius: 50%; }
.flow-actor--you { border-color: #f6c3ad; color: var(--orange-deep); }
.flow-actor--you .flow-actor__dot { background: var(--orange); box-shadow: 0 0 0 4px rgba(255,107,53,.18); }
.flow-actor--them { border-color: #9fe3c8; color: var(--teal-deep); }
.flow-actor--them .flow-actor__dot { background: var(--teal); box-shadow: 0 0 0 4px rgba(16,185,129,.18); }
.flow-actor__vs { color: var(--muted); font-family: var(--font-body); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: 7px; }
.flow-actor__vs i { color: var(--gold); }

/* Riel / columna vertebral */
.flow-rail { position: relative; max-width: 940px; margin: 0 auto; }
.flow-rail__line {
    position: absolute; top: 6px; bottom: 30px; left: 28px; width: 4px; margin-left: -2px;
    background: var(--line); border-radius: 4px; z-index: 0;
}
.flow-rail__fill {
    position: absolute; inset: 0; border-radius: 4px; transform: scaleY(0); transform-origin: top;
    background: linear-gradient(180deg, var(--orange), #e98a4e 32%, var(--teal) 72%, var(--teal-deep));
    box-shadow: 0 0 16px rgba(16,185,129,.34);
    transition: transform 2.6s cubic-bezier(.45,0,.12,1);
}
.flow.is-lit .flow-rail__fill { transform: scaleY(1); }
.flow-rail__comet {
    position: absolute; top: 0; left: 28px; width: 15px; height: 15px; margin-left: -7.5px;
    border-radius: 50%; background: #fff; z-index: 3; opacity: 0;
    box-shadow: 0 0 0 4px rgba(255,107,53,.45), 0 0 22px 7px rgba(255,107,53,.6);
}
.flow.is-lit .flow-rail__comet { animation: flowComet 2.6s cubic-bezier(.45,0,.12,1) forwards; }
@keyframes flowComet {
    0% { top: 0; opacity: 0; box-shadow: 0 0 0 4px rgba(255,107,53,.45), 0 0 22px 7px rgba(255,107,53,.6); }
    8% { opacity: 1; }
    50% { box-shadow: 0 0 0 4px rgba(168,150,90,.45), 0 0 22px 7px rgba(120,180,150,.55); }
    92% { opacity: 1; box-shadow: 0 0 0 4px rgba(16,185,129,.45), 0 0 22px 7px rgba(16,185,129,.6); }
    100% { top: 100%; opacity: 0; }
}

/* Nodo / paso */
.flow-node {
    position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 16px;
    padding-bottom: 26px; align-items: start;
    opacity: 0; transform: translateY(16px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
    transition-delay: calc(var(--i) * .32s);
}
.flow.is-lit .flow-node { opacity: 1; transform: none; }
.flow-node:last-child { padding-bottom: 0; }
.flow-node__rail { display: flex; justify-content: center; z-index: 1; }
.flow-node__dot {
    width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
    background: #fff; color: var(--muted); font-size: 1.18rem;
    border: 2px solid var(--line); box-shadow: var(--shadow-sm);
    transition: background .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease, transform .5s ease;
    transition-delay: calc(var(--i) * .32s);
}
.flow.is-lit .flow-node--you .flow-node__dot   { background: var(--orange); color: #fff; border-color: var(--orange); box-shadow: 0 10px 24px -6px rgba(255,107,53,.6); transform: scale(1.04); }
.flow.is-lit .flow-node--them .flow-node__dot  { background: var(--teal);   color: #fff; border-color: var(--teal);   box-shadow: 0 10px 24px -6px rgba(16,185,129,.6); transform: scale(1.04); }
.flow.is-lit .flow-node--both .flow-node__dot  { background: linear-gradient(135deg, var(--orange), var(--teal)); color: #fff; border-color: transparent; box-shadow: 0 12px 28px -6px rgba(26,31,44,.3); transform: scale(1.08); }

.flow-node__card {
    background: #fff; border: 1.5px solid var(--line); border-radius: 18px;
    padding: 16px 19px; box-shadow: 0 4px 16px rgba(26,31,44,.05);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.flow-node__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.flow-node--you .flow-node__card  { border-left: 3px solid var(--orange); }
.flow-node--them .flow-node__card { border-left: 3px solid var(--teal); }
.flow-node--both .flow-node__card { border: 0; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, var(--orange), var(--teal)) border-box; border: 1.6px solid transparent; }
.flow-node__head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.flow-node__step { font-family: var(--font-mono); font-size: .68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; }
.flow-node__tag { font-family: var(--font-mono); font-size: .66rem; font-weight: 700; padding: 3px 9px; border-radius: 100px; white-space: nowrap; }
.flow-node__tag--you  { background: var(--orange-soft); color: var(--orange-deep); }
.flow-node__tag--them { background: var(--teal-soft);   color: var(--teal-deep); }
.flow-node__tag--both { background: var(--navy); color: #fff; }
.flow-node__card h3 { font-size: 1.06rem; margin: 0 0 4px; line-height: 1.25; }
.flow-node__card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.flow-node__card p .accent { color: var(--ink); font-weight: 700; }

/* Píldora reciprocidad */
.flow-recip { display: flex; justify-content: center; margin-top: 38px; }
.flow-recip__pill {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-mono); font-weight: 700; font-size: .95rem; color: #fff;
    padding: 13px 24px; border-radius: 100px;
    background: linear-gradient(120deg, var(--orange), var(--teal));
    box-shadow: 0 12px 30px -10px rgba(26,31,44,.4);
}
.flow-recip__pill b { opacity: .55; }

/* Desktop: 2 carriles (Tú izquierda / Otro derecha) */
@media (min-width: 760px) {
    .flow-rail__line, .flow-rail__comet { left: 50%; }
    .flow-node { grid-template-columns: 1fr 56px 1fr; gap: 0; padding-bottom: 30px; }
    .flow-node__rail { grid-column: 2; }
    .flow-node__card { max-width: 400px; }
    .flow-node--posr .flow-node__card { grid-column: 3; justify-self: start; margin-left: 28px; }
    .flow-node--posl .flow-node__card { grid-column: 1; justify-self: end; margin-right: 28px; text-align: right; }
    .flow-node--posl .flow-node__head { justify-content: flex-end; }
    .flow-node--posl .flow-node__card { border-left: 0; border-right: 3px solid var(--orange); }
    .flow-node--both .flow-node__card { grid-column: 1 / -1; justify-self: center; text-align: center; max-width: 480px; margin: 16px 0 0; }
    .flow-node--both .flow-node__head { justify-content: center; }
}

/* Respeta usuarios con movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .flow-node, .flow-rail__fill, .flow-node__dot { transition: none !important; }
    .flow-node { opacity: 1; transform: none; }
    .flow-rail__fill { transform: scaleY(1); }
    .flow-rail__comet { display: none; }
}

/* ============================================================
   PANEL · /panel/cuentas — grid de cuentas reseñadoras
   ============================================================ */
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-top: 4px; }
.acc-card { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 15px 16px; box-shadow: var(--shadow-sm); transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); }
.acc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.acc-card--off { opacity: .62; }
.acc-card--off:hover { opacity: .85; }
.acc-card__top { display: flex; align-items: center; gap: 12px; }
.acc-card__ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 1.12rem; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.acc-card__id { min-width: 0; flex: 1; }
.acc-card__name { font-weight: 700; font-size: 1.02rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-card__plat { font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.acc-card__tools { display: flex; gap: 5px; flex-shrink: 0; }
.acc-iconbtn { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--cream); color: var(--muted); border: 1px solid var(--line); cursor: pointer; font-size: .92rem; transition: all .15s var(--ease); }
.acc-iconbtn:hover { color: var(--ink); border-color: var(--line-strong); }
.acc-iconbtn--danger:hover { background: var(--coral); color: #fff; border-color: var(--coral); }
.acc-card__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.gtoggle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.gtoggle__lbl { font-size: .76rem; color: var(--muted); font-weight: 600; }
.gtoggle__opt { font-family: var(--font-body); font-size: .78rem; font-weight: 700; padding: 6px 10px; border-radius: 100px; border: 1.5px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all .15s var(--ease); }
.gtoggle__opt:hover { border-color: var(--line-strong); color: var(--ink); }
.gtoggle__opt--m.is-on { background: #e7f0ff; border-color: #a8c8f5; color: #2c6bd6; }
.gtoggle__opt--f.is-on { background: #ffe7f2; border-color: #f5aad0; color: #c93a87; }

/* Estado + uso diario por cuenta (tope de 3 reseñas/día) */
.acc-card__state { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acc-daily { display: inline-flex; align-items: center; gap: 5px; font-size: .73rem; font-weight: 800; padding: 4px 9px; border-radius: 100px; background: #eef7f1; color: var(--teal-deep, #1f7a54); border: 1.5px solid #bfe6d2; letter-spacing: .2px; white-space: nowrap; }
.acc-daily i { font-size: .7rem; }
.acc-daily--full { background: #fdecea; color: #c0392b; border-color: #f3b6ad; }
/* Cuenta que ya hizo su tope diario: nombre inhabilitado */
.acc-card--capped { border-color: #f1c9c2; background: #fffaf9; }
.acc-card--capped .acc-card__name { color: var(--muted); text-decoration: line-through; text-decoration-color: #d98a7e; text-decoration-thickness: 2px; }
.acc-card--capped .acc-card__ico { filter: grayscale(.55) opacity(.72); }
.acc-card__capnote { font-size: .77rem; color: #c0392b; font-weight: 700; display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.acc-card__capnote i { font-size: .72rem; }

/* ============================================================
   PANEL · /panel/disponibles — grid del pool de reseñas
   ============================================================ */
.pool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pool-card { display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-sm); transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.pool-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pool-card__top { display: flex; align-items: center; gap: 12px; }
.pool-card__ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 1.08rem; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.pool-card__id { min-width: 0; flex: 1; }
.pool-card__name { font-weight: 700; font-size: 1.02rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pool-card__plat { font-size: .8rem; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pool-card__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
.pool-card__stars { font-size: 1.02rem; letter-spacing: 1px; }
.pool-card__tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pool-card__cta { margin-top: 14px; }
.pool-card__cta .btn { width: 100%; }
.pool-card__wait { font-size: .76rem; color: var(--muted); text-align: center; margin-top: 7px; }
.pool-card__wait strong { color: var(--coral); font-weight: 800; }
.btn-link-muted { background: none; border: none; color: var(--muted); font-family: var(--font-body); font-size: .85rem; font-weight: 600; cursor: pointer; padding: 6px; text-decoration: underline; text-underline-offset: 3px; transition: color .15s var(--ease); }
.btn-link-muted:hover { color: var(--coral); }

/* ============================================================
   ADMIN · Gráficos del resumen (Chart.js)
   ============================================================ */
.chart-card { background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 18px 20px 20px; box-shadow: var(--shadow-sm); margin-top: 16px; }
.chart-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.chart-card__ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 1rem; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.chart-card__t { min-width: 0; }
.chart-card__t h3 { font-size: 1.02rem; font-weight: 800; line-height: 1.2; }
.chart-card__t p { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.chart-card__total { margin-left: auto; font-family: var(--font-mono); font-weight: 800; font-size: 1.7rem; color: var(--ink); line-height: 1; padding-left: 10px; }
.chart-box { position: relative; height: 260px; }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .chart-grid { grid-template-columns: 1fr; } .chart-box { height: 230px; } }

/* ============================================================
   ADMIN · Usuarios — tarjetas de salud
   ============================================================ */
.uhealth-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(345px, 1fr)); gap: 16px; }
.uhealth { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-sm); transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.uhealth:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.uhealth--susp { background: #fff8f7; border-color: #f1c9c2; }
.uhealth--susp:hover { transform: none; }
.uhealth__top { display: flex; align-items: center; gap: 11px; }
.uhealth__av { width: 44px; height: 44px; border-radius: 50%; background: var(--cream-deep); padding: 2px; flex-shrink: 0; }
.uhealth__id { min-width: 0; flex: 1; }
.uhealth__name { font-weight: 800; font-size: 1.02rem; line-height: 1.15; display: flex; align-items: center; gap: 7px; }
.uhealth__role { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: var(--navy); color: #fff; padding: 2px 7px; border-radius: 100px; }
.uhealth__mail { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.uhealth__meta { display: flex; flex-wrap: wrap; gap: 5px 14px; margin: 12px 0 13px; font-size: .77rem; color: var(--muted); }
.uhealth__meta i { margin-right: 4px; opacity: .85; }
.uhealth__meta .is-warn { color: var(--coral); font-weight: 700; }
.uhealth__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--line); padding-top: 13px; }
.uhealth__col { min-width: 0; }
.uhealth__col-h { font-size: .69rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); margin-bottom: 9px; display: flex; align-items: center; gap: 6px; }
.uhealth__col-h--rev i { color: var(--orange); }
.uhealth__col-h--own i { color: var(--teal); }
.uhealth__stat { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 3px 0; }
.uhealth__k { font-size: .8rem; color: var(--muted); }
.uhealth__k small { font-size: .82em; opacity: .8; }
.uhealth__v { font-family: var(--font-mono); font-weight: 800; font-size: .98rem; color: var(--ink); white-space: nowrap; }
.uhealth__v--good { color: var(--teal-deep); }
.uhealth__v--amber { color: #c47d11; }
.uhealth__v--bad { color: var(--coral); }
.uhealth__v--zero { color: var(--line-strong); }
.uhealth__foot { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.uhealth { cursor: pointer; }
.uhealth:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.uhealth__see { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--teal-deep); }
.uhealth__see i:last-child { font-size: .72rem; transition: transform .15s var(--ease); }
.uhealth:hover .uhealth__see i:last-child { transform: translateX(3px); }
@media (max-width: 460px) { .uhealth__cols { grid-template-columns: 1fr; gap: 6px; } }

/* Modal: negocios del usuario */
.ubiz-list { display: flex; flex-direction: column; gap: 10px; max-height: 58vh; overflow-y: auto; margin-top: 2px; }
.ubiz-empty { text-align: center; color: var(--muted); padding: 26px 12px; font-size: .9rem; }
.ubiz-item { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--paper); }
.ubiz-item__head { display: flex; align-items: center; gap: 11px; }
.ubiz-item__ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: .95rem; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.ubiz-item__txt { min-width: 0; flex: 1; }
.ubiz-item__name { font-weight: 800; font-size: .96rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ubiz-item__plat { font-size: .78rem; color: var(--muted); margin-top: 1px; }
.ubiz-item__link { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--cream); color: var(--muted); border: 1px solid var(--line); flex-shrink: 0; transition: all .15s var(--ease); }
.ubiz-item__link:hover { color: var(--teal-deep); border-color: var(--teal); }
.ubiz-item__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.ubiz-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--cream); border: 1px solid var(--line); border-radius: 100px; padding: 4px 11px; font-size: .77rem; }
.ubiz-chip__k { color: var(--muted); font-weight: 600; }
.ubiz-chip__v { font-family: var(--font-mono); font-weight: 800; color: var(--ink); }
.ubiz-chip.is-good .ubiz-chip__v { color: var(--teal-deep); }
.ubiz-chip.is-amber .ubiz-chip__v { color: #c47d11; }

/* ============================================================
   LANDING · "Por qué funciona" — comparación vs comprar reseñas
   ============================================================ */
.compare-signals {
    background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg, 20px);
    padding: 24px 26px; box-shadow: var(--shadow-sm); margin-bottom: 22px;
}
.compare-signals__title { font-size: 1.12rem; display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.compare-signals__title i { color: var(--coral); }
.compare-signals__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 26px; }
.compare-signals__list li { display: flex; align-items: flex-start; gap: 11px; color: var(--muted); font-size: .95rem; line-height: 1.45; }
.compare-signals__list li i { color: var(--coral); margin-top: 4px; flex-shrink: 0; width: 18px; text-align: center; }
.compare-signals__list li strong { color: var(--ink); }

.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.compare-col {
    background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg, 20px);
    padding: 24px 26px; box-shadow: var(--shadow-sm);
}
.compare-col--bad { border-top: 4px solid var(--coral); }
.compare-col--good { border-top: 4px solid var(--teal); }
.compare-col__head { font-weight: 800; font-size: 1.18rem; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.compare-col--bad .compare-col__head { color: var(--coral); }
.compare-col--good .compare-col__head { color: var(--teal-deep); }
.compare-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.compare-col li { position: relative; padding-left: 28px; color: var(--ink); line-height: 1.45; }
.compare-col li::before { position: absolute; left: 0; top: -1px; font-weight: 800; font-size: 1.05rem; }
.compare-col--bad li::before { content: "\2715"; color: var(--coral); }
.compare-col--good li::before { content: "\2713"; color: var(--teal); }

@media (max-width: 720px) {
    .compare-signals__list, .compare-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LANDING · Reglas (rulebook anti-detección)
   ============================================================ */
.rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 10px; }
.rule-card { position: relative; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 26px 22px 22px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.rule-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--rc, var(--navy)); }
.rule-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.rule-card__num { position: absolute; top: 16px; right: 18px; font-family: var(--font-mono); font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: -.02em; color: var(--rc, var(--navy)); opacity: .3; }
.rule-card__ico { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; font-size: 1.22rem; color: #fff; background: var(--rc, var(--navy)); box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.rule-card h3 { font-size: 1.06rem; font-weight: 800; line-height: 1.25; margin-bottom: 7px; }
.rule-card p { font-size: .91rem; color: var(--muted); line-height: 1.55; }
@media (max-width: 900px) { .rules-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rules-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SOPORTE · burbuja de chat (panel) + buzón (admin)
   ============================================================ */
.side__badge { display: inline-block; min-width: 18px; padding: 0 5px; height: 18px; line-height: 18px; text-align: center; font-size: .7rem; font-weight: 800; color: #fff; background: var(--coral); border-radius: 999px; vertical-align: middle; }

/* --- Burbuja flotante (usuario) --- */
.support-bubble { position: fixed; right: 20px; bottom: 20px; z-index: 80; }
.support-bubble__fab { position: relative; width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer; background: var(--orange); color: #fff; font-size: 1.4rem; box-shadow: var(--shadow-orange); transition: transform .2s var(--ease), background .2s; display: grid; place-items: center; }
.support-bubble__fab:hover { transform: translateY(-2px) scale(1.04); background: var(--orange-deep); }
.support-bubble__badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--coral); color: #fff; font-size: .72rem; font-weight: 800; line-height: 20px; text-align: center; border: 2px solid var(--paper); }
.support-bubble__panel { position: absolute; right: 0; bottom: calc(100% + 12px); width: 344px; max-width: calc(100vw - 32px); height: 462px; max-height: calc(100vh - 120px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; animation: modalPop .2s var(--ease); }
.support-bubble__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 16px; background: var(--navy); color: #fff; }
.support-bubble__head strong { display: block; font-size: .98rem; }
.support-bubble__head span { display: block; font-size: .78rem; opacity: .8; }
.support-bubble__x { background: none; border: none; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; opacity: .85; }
.support-bubble__x:hover { opacity: 1; }
.support-bubble__msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--cream); }
.support-bubble__welcome { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.support-bubble__loading { color: var(--muted); font-size: .88rem; text-align: center; margin-top: 12px; }
.support-bubble__form { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: var(--paper); }
.support-bubble__form textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; font: inherit; font-size: .92rem; max-height: 92px; }
.support-bubble__form textarea:focus { outline: none; border-color: var(--orange); }
.support-bubble__send { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--orange); color: #fff; cursor: pointer; }
.support-bubble__send:hover { background: var(--orange-deep); }

/* --- Burbujas de mensaje (compartidas: burbuja + buzón admin) --- */
.sup-msg { display: flex; flex-direction: column; max-width: 82%; }
.sup-msg--user { align-self: flex-start; align-items: flex-start; }
.sup-msg--admin { align-self: flex-end; align-items: flex-end; }
.sup-msg__bubble { padding: 9px 13px; border-radius: 14px; font-size: .92rem; line-height: 1.45; word-break: break-word; }
.sup-msg--user .sup-msg__bubble { background: var(--paper); border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--ink); }
.sup-msg--admin .sup-msg__bubble { background: var(--orange); color: #fff; border-bottom-right-radius: 4px; }
.sup-msg__time { font-size: .68rem; color: var(--muted); margin-top: 3px; }

/* Soporte como MODAL centrado (se abre desde "Contactar soporte" del sidebar) */
.support-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; }
.support-modal[hidden] { display: none; }
.support-modal__backdrop { position: absolute; inset: 0; background: rgba(26,31,44,.55); }
.support-modal__box { position: relative; z-index: 1; width: min(420px, 100%); height: min(560px, 86vh); background: var(--paper); border-radius: var(--r-md); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; animation: modalPop .2s var(--ease); }
body.no-scroll { overflow: hidden; }

/* Página de notificaciones (sidebar → /panel/notificaciones) */
.notif-page { max-width: 720px; }
.notif-empty { text-align: center; padding: 50px 20px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.notif-empty i { font-size: 2.2rem; opacity: .5; }
.notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.notif-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.notif-card.is-unread { border-color: var(--orange); background: var(--orange-soft); }
.notif-card a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.notif-card__dot { width: 9px; height: 9px; border-radius: 50%; background: transparent; flex: none; }
.notif-card.is-unread .notif-card__dot { background: var(--orange); }
.notif-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.notif-card__title { font-weight: 700; color: var(--ink); line-height: 1.3; }
.notif-card__text { font-size: .9rem; color: var(--text); line-height: 1.4; }
.notif-card__date { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); margin-top: 2px; }
.notif-card__go { color: var(--muted); flex: none; }

/* --- Buzón admin (2 paneles) --- */
.sup-admin { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.sup-admin__list { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; max-height: 72vh; overflow-y: auto; }
.sup-admin__empty { padding: 26px 16px; text-align: center; color: var(--muted); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.sup-thread { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink); }
.sup-thread:hover { background: var(--cream); }
.sup-thread.is-active { background: var(--orange-soft); }
.sup-thread.is-unread .sup-thread__name { font-weight: 800; }
.sup-thread__av { width: 38px; height: 38px; border-radius: 50%; background: var(--cream-deep); padding: 3px; flex-shrink: 0; }
.sup-thread__body { min-width: 0; flex: 1; }
.sup-thread__top { display: flex; justify-content: space-between; gap: 8px; }
.sup-thread__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-thread__time { font-size: .72rem; color: var(--muted); flex-shrink: 0; }
.sup-thread__snip { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-thread__badge { flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--coral); color: #fff; font-size: .72rem; font-weight: 800; line-height: 20px; text-align: center; }
.sup-admin__conv { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); display: flex; flex-direction: column; min-height: 380px; max-height: 72vh; }
.sup-conv__empty { margin: auto; text-align: center; color: var(--muted); padding: 30px; }
.sup-conv__empty-ico { font-size: 2.4rem; color: var(--line-strong); margin-bottom: 10px; }
.sup-conv__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.sup-conv__av { width: 40px; height: 40px; border-radius: 50%; background: var(--cream-deep); padding: 3px; }
.sup-conv__name { font-weight: 700; }
.sup-conv__mail { font-size: .82rem; color: var(--muted); }
.sup-conv__msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--cream); }
.sup-conv__note { color: var(--muted); font-size: .9rem; text-align: center; margin: auto; max-width: 320px; }
.sup-conv__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.sup-conv__form textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: .92rem; }
.sup-conv__form textarea:focus { outline: none; border-color: var(--orange); }

/* --- Buzón admin (vista enfocada: lista O conversación privada) --- */
.sup-inbox { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; max-width: 640px; }
.sup-inbox .sup-thread:last-child { border-bottom: none; }
.sup-solo { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); display: flex; flex-direction: column; max-width: 720px; height: 62vh; min-height: 380px; overflow: hidden; }
.sup-solo .sup-conv__msgs { flex: 1; }

@media (max-width: 760px) {
    .sup-admin { grid-template-columns: 1fr; }
    .sup-admin__list { max-height: 240px; }
    .sup-solo { height: 66vh; }
}

/* ============================================================
   REGLAS POR PLATAFORMA (Facebook: sin estrellas + comentario)
   ============================================================ */
.rec-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: #e7f0ff; color: #1877F2; font-weight: 700; font-size: .82rem; }
.rec-pill  { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: var(--r-sm); background: #e7f0ff; color: #1877F2; font-weight: 700; font-size: .9rem; }
/* Visibilidad según el modo (clase en el form/scope de reseñas) */
.rev-rec { display: none; }
.rev-req { display: none; }
.fb-note { display: none; }
.is-nostars .rev-stars { display: none !important; }
.is-nostars .rev-rec { display: flex; flex-direction: column; gap: 5px; }
.is-needcomment .rev-opt { display: none; }
.is-needcomment .rev-req { display: inline; }
.is-needcomment .fb-note { display: flex; }