/* =========================================================
   USADITO — estilos v2
   Base clara e inspirada en la claridad de MercadoLibre
   (amarillo en la barra, tarjetas blancas, azul en links)
   con un pulso gamer propio concentrado en el hero, los CTA
   principales y los acentos: violeta/cian neón sobre negro,
   tipografía técnica (Rajdhani) en títulos y precios.
   ========================================================= */

:root {
    --bg: #ebebeb;
    --surface: #ffffff;
    --surface-alt: #f5f5f6;
    --border: #e2e2e4;
    --border-strong: #d5d5d8;
    --text: #1c1c1e;
    --text-dim: #6c6c72;

    --ml-yellow: #ffe600;
    --ml-yellow-dark: #ebd300;
    --blue: #3483fa;
    --blue-dark: #2968c8;
    --green: #00a650;
    --amber: #ffb400;
    --danger: #e63946;

    --violet: #7c3aed;
    --violet-dark: #6222d1;
    --cyan: #00e0c6;

    --radius: 10px;
    --radius-sm: 6px;
    --maxw: 1200px;
    --shadow: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
    --shadow-hover: 0 10px 24px rgba(0,0,0,.14);
    --glow: 0 0 0 3px rgba(124,58,237,.15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
}

h1, h2, h3, h4, .logo, .price, .precio, .precio-grande, .stat-num {
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-weight: 700;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Barra de navegación (estilo ML: amarilla) ---------- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ml-yellow);
    box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.navbar .wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 64px;
}
.logo {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
    color: #141414;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.logo span {
    background: linear-gradient(90deg, var(--violet), var(--cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.logo-tag {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 1.4px;
    color: #141414;
    background: #fff;
    padding: 3px 7px;
    border-radius: 20px;
    display: none;
}
@media (min-width: 640px) { .logo-tag { display: inline-block; } }

.nav-search-wrap {
    position: relative;
    flex: 1;
    max-width: 520px;
}
.nav-search {
    display: flex;
    max-width: none;
    background: #fff;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.12) inset;
}
.nav-search input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
}
.nav-search input:focus { outline: none; }
.nav-search button {
    background: transparent;
    color: #141414;
    border: none;
    padding: 0 16px;
    font-weight: 700;
    cursor: pointer;
    font-size: 15px;
}
.nav-search button:hover { color: var(--violet); }

.nav-search-sugerencias {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-hover);
    z-index: 60;
    overflow: hidden;
}
.nav-search-sugerencias.mostrando { display: block; }
.nav-search-sugerencia {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
}
.nav-search-sugerencia:last-child { border-bottom: none; }
.nav-search-sugerencia:hover,
.nav-search-sugerencia.activa { background: var(--surface-alt); }
.nav-search-sugerencia b { color: var(--violet); }

.nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    white-space: nowrap;
}
.nav-links .user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #141414;
    font-size: 14px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
}
.nav-links .user-chip:hover { background: rgba(0,0,0,.06); }
.nav-links .user-chip b { color: #141414; }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    background: var(--surface-alt);
    color: var(--text);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }

.btn-accent {
    background: linear-gradient(90deg, var(--violet), #9256f0);
    color: #fff;
    box-shadow: 0 0 0 0 rgba(124,58,237,0);
}
.btn-accent:hover { background: linear-gradient(90deg, var(--violet-dark), var(--violet)); box-shadow: 0 4px 18px rgba(124,58,237,.35); }

.btn-ghost { background: #fff; border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--text-dim); }

.btn-sm { padding: 7px 13px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-danger { border-color: var(--danger); color: var(--danger); background: #fff; }
.btn-danger:hover { background: rgba(230,57,70,0.08); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Hero (acá se concentra el toque gamer) ---------- */
.hero {
    position: relative;
    overflow: hidden;
    padding: 54px 0 44px;
    background:
        radial-gradient(900px 420px at 88% -20%, rgba(0,224,198,0.20), transparent 60%),
        radial-gradient(700px 400px at -10% 30%, rgba(124,58,237,0.30), transparent 55%),
        linear-gradient(180deg, #16121f, #0d0b13);
    color: #fff;
}
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(180deg, black, transparent 85%);
    pointer-events: none;
}
.hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 30px; max-width: 720px; margin: 0 auto; }
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700;
    letter-spacing: 1px; color: var(--cyan);
    background: rgba(0,224,198,0.12); border: 1px solid rgba(0,224,198,0.35);
    padding: 5px 12px; border-radius: 20px; margin-bottom: 14px;
}
.hero h1 {
    font-size: 44px;
    line-height: 1.08;
    margin: 0 0 14px;
    letter-spacing: 0.3px;
}
.hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, var(--cyan), var(--violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero p { color: #c7c2d6; font-size: 16px; max-width: 480px; margin: 0 0 22px; font-weight: 400; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-actions .btn-ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.hero-actions .btn-ghost:hover { background: rgba(255,255,255,.14); }

/* Vendedores del mes: solo en pantallas anchas (ver media query más
   abajo), al lado del texto principal del hero. En celular directamente
   no se manda este bloque al layout de una columna, para no sumarle
   más cosas a una pantalla ya cargada. */
.hero-vendedores-mes {
    display: none;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius);
    padding: 16px 18px;
    width: 100%;
}
.hero-vendedores-mes .titulo {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    margin-bottom: 12px;
}
.hero-vendedores-mes .fila {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0;
    border-top: 1px solid rgba(255,255,255,.08);
    color: #fff;
}
.hero-vendedores-mes .fila:first-of-type { border-top: none; }
.hero-vendedores-mes .puesto {
    font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px;
    color: var(--cyan); width: 18px; flex-shrink: 0;
}
.hero-vendedores-mes .nombre { flex: 1; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-vendedores-mes .ventas { font-family: 'Inter', sans-serif; font-size: 11.5px; color: #c7c2d6; flex-shrink: 0; }

/* Solo en celular: la franja de arriba (título + botones) ocupa menos
   alto, y los botones son más finos, para que la web no arranque tan
   "pesada" antes de llegar al catálogo. */
@media (max-width: 640px) {
    .hero { padding: 26px 0 22px; }
    .hero-actions .btn { padding: 6px 14px; font-size: 13px; }
}

/* A partir de acá ya hay ancho de sobra: el hero pasa a dos columnas
   (texto a la izquierda, vendedores del mes a la derecha, si hay). */
@media (min-width: 861px) {
    .hero-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: left;
        justify-content: center;
        max-width: 980px;
        gap: 70px;
    }
    .hero-actions { justify-content: flex-start; }
    .hero-vendedores-mes { display: block; max-width: 280px; flex-shrink: 0; }
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius);
    overflow: hidden;
}
.hero-stats div {
    background: rgba(255,255,255,.04);
    padding: 18px 14px;
    text-align: center;
}
.stat-num { font-size: 26px; color: var(--cyan); display: block; }
.stat-label { font-size: 12px; color: #a9a3bd; font-family: 'Inter', sans-serif; font-weight: 500; }

/* ---------- Categorías ---------- */
.cat-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 18px 0 4px;
    scrollbar-width: thin;
}
.tag-cat {
    flex: 0 0 auto;
    padding: 8px 15px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border-strong);
    color: var(--text-dim);
    background: var(--surface);
    border-radius: 20px;
    transition: all .12s ease;
}
.tag-cat.active, .tag-cat:hover {
    color: #fff;
    background: linear-gradient(90deg, var(--violet), var(--violet-dark));
    border-color: var(--violet);
}
.cat-strip-sub { padding-top: 6px; }
.tag-cat-sub { font-size: 12px; padding: 6px 12px; opacity: .92; }
.tag-cat-mas { display: none; }

/* En celular: de la fila de categorías, solo se ven las primeras (más
   "Todas"/"Todo X") y un botón "+" para desplegar el resto — así la
   web arranca más limpia, y se puede ir agregando categorías nuevas
   sin que la fila se vuelva interminable. En PC se ven todas siempre. */
@media (max-width: 640px) {
    .cat-oculta-movil { display: none; }
    .cat-strip.expandida .cat-oculta-movil { display: inline-flex; }
    .tag-cat-mas { display: inline-flex; align-items: center; justify-content: center; }
}

/* ---------- Grilla de productos ---------- */
.section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 30px 0 16px;
    flex-wrap: wrap;
    gap: 10px;
}
.section-title h2 { font-size: 20px; margin: 0; color: var(--text); }
.section-title .count { color: var(--text-dim); font-size: 13px; font-family: 'Inter', sans-serif; }

/* Solo en celular: sacamos el título de la sección ("Últimas
   publicaciones", el nombre de la categoría, etc.) para que la web
   arranque más directo al catálogo; el contador de resultados y el
   orden se mantienen. */
@media (max-width: 640px) {
    .section-title h2 { display: none; }
}

.grid-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

/* En el celular, en vez de una grilla vertical (que obliga a bajar y
   bajar con el dedo), las publicaciones se ven como una fila que se
   desliza de costado, con cada tarjeta superpuesta un poco sobre la
   siguiente para que se note que hay más para el lado derecho. En PC
   (pantallas anchas) se sigue viendo la grilla normal de siempre. */
@media (max-width: 640px) {
    .grid-productos {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        gap: 0;
        padding: 4px 30px 16px 4px;
        margin-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }
    .grid-productos .card-producto {
        flex: 0 0 72vw;
        max-width: 72vw;
        scroll-snap-align: start;
        margin-right: -50px;
        box-shadow: -6px 0 14px rgba(0,0,0,.12);
    }
    .grid-productos .card-producto:last-child { margin-right: 0; }
}

.card-producto {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
    position: relative;
    box-shadow: var(--shadow);
}
.card-producto:hover { border-color: var(--violet); transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.card-producto .thumb {
    aspect-ratio: 4/3;
    background: var(--surface-alt);
    overflow: hidden;
}
.card-producto .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-producto .body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.card-producto .cat { font-family: 'Inter', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--violet); font-weight: 600; }
.card-producto h3 { font-family: 'Inter', sans-serif; font-size: 14.5px; margin: 0; font-weight: 500; line-height: 1.35; color: var(--text); }
.card-producto .precio { font-size: 21px; color: var(--text); font-weight: 700; margin-top: auto; }
.card-producto .meta { display: flex; justify-content: space-between; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-dim); }

.badge-estado {
    position: absolute; top: 10px; left: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 700; padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase; letter-spacing: .4px;
}
.badge-estado.usado { color: #58575c; background: #eeeeee; }
.badge-estado.nuevo { color: #fff; background: var(--green); }
.badge-vendido {
    position: absolute; inset: 0;
    background: rgba(20,20,22,0.68);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px; font-weight: 700; letter-spacing: 1.5px;
    color: #fff;
}

.btn-favorito { cursor: pointer; transition: transform .1s ease, color .15s ease; }
.btn-favorito:hover { transform: scale(1.05); }
.btn-favorito.activo { color: var(--danger); }
.card-producto .btn-favorito, .detalle-img .btn-favorito {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.85); border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--text-dim);
}
.card-producto .btn-favorito.activo, .detalle-img .btn-favorito.activo { color: var(--danger); }
.detalle-img .btn-compartir {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.85); border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: var(--text-dim); text-decoration: none;
}
.detalle-img .btn-compartir:hover { transform: scale(1.05); }

/* ---------- Características (estilo tabla, como Mercado Libre) ---------- */
.caracteristicas { margin: 14px 0; max-width: 640px; }
.preguntas-seccion { margin: 14px 0; max-width: 640px; }
.pregunta-card {
    background: var(--surface-alt);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.pregunta-fila, .respuesta-fila { display: flex; gap: 10px; align-items: flex-start; }
.pregunta-fila { cursor: pointer; }
.pregunta-card .respuesta-fila { display: none; }
.pregunta-card.abierta .respuesta-fila { display: flex; }
.pregunta-chevron { margin-left: auto; flex-shrink: 0; color: var(--text-dim); transition: transform .15s ease; padding-top: 2px; }
.pregunta-card.abierta .pregunta-chevron { transform: rotate(180deg); }
.respuesta-fila { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.pregunta-icono, .respuesta-icono {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; line-height: 1;
    background: var(--violet); color: #fff;
}
.respuesta-icono { background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); }
.pregunta-texto { font-weight: 600; color: var(--text); padding-top: 2px; flex: 1; }
.respuesta-texto { color: var(--text-dim); padding-top: 2px; }

/* ---------- Panel de comisión (solo admin, oculto hasta tocar el botón) ---------- */
.comision-panel {
    display: none; gap: 10px; margin: 0 0 4px; max-width: 640px; flex-wrap: wrap;
}
.comision-panel.mostrado { display: flex; }
.comision-item {
    flex: 1; min-width: 140px; border-radius: 8px; padding: 10px 14px; text-align: center;
    background: var(--surface-alt);
}
.comision-item .comision-valor { display: block; font-size: 18px; font-weight: 700; color: var(--text); }
.comision-item .comision-label { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; text-transform: uppercase; letter-spacing: .3px; }
.comision-usadito { background: #fdeced; }
.comision-usadito .comision-valor { color: var(--danger); }
.comision-vendedor { background: #e7f8ef; }
.comision-vendedor .comision-valor { color: var(--green); }
.caracteristicas-titulo { font-size: 18px; font-weight: 600; margin: 0 0 10px; color: var(--text); }
.caracteristicas-tabla { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.caracteristicas-fila { display: flex; padding: 10px 14px; font-size: 14px; line-height: 1.4; }
.caracteristicas-fila:nth-child(odd) { background: var(--surface-alt); }
.caracteristicas-fila:nth-child(even) { background: var(--surface); }
.caracteristicas-label { flex: 0 0 45%; color: var(--text-dim); }
.caracteristicas-valor { flex: 1; color: var(--text); font-weight: 600; }

/* ---------- Formularios ---------- */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 30px;
    max-width: 560px;
    margin: 36px auto;
}
.panel.ancho { max-width: 760px; }

/* Modal de acceso al modo administrador */
.modal-fondo {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-fondo.abierto { display: flex; }
.modal-caja {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    padding: 30px;
    width: 100%;
    max-width: 380px;
}
.modal-cerrar {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--text-dim);
    cursor: pointer;
}
.modal-cerrar:hover { color: var(--text); }
.modal-cerrar-grande {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    border: 3px solid #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.modal-cerrar-grande:hover { background: #b91c1c; }
.panel h1, .panel h2 { margin-top: 0; color: var(--text); }
.campo { margin-bottom: 16px; }
.campo label { display: block; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
    width: 100%;
    background: var(--surface-alt);
    border: 1px solid var(--border-strong);
    color: var(--text);
    padding: 10px 12px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    border-radius: var(--radius-sm);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none; border-color: var(--violet); background: #fff; box-shadow: var(--glow);
}
.campo textarea { resize: vertical; min-height: 100px; }
.campo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------- Selector de categoría (ventana propia, en vez del <select> nativo) ---------- */
.selector-categoria {
    width: 100%;
    background: var(--surface-alt);
    border: 1px solid var(--border-strong);
    color: var(--text);
    padding: 10px 12px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; text-align: left;
}
.selector-categoria:hover { border-color: var(--violet); }
.selector-categoria-flecha { color: var(--text-dim); margin-left: 10px; }
.lista-categorias-grupo {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    color: var(--text-dim); margin: 16px 0 4px; padding: 0 4px;
}
.lista-categorias-grupo:first-child { margin-top: 4px; }

/* Categoría "padre" plegable: sus subcategorías arrancan escondidas y
   se abren al tocarla, para que la lista no aparezca toda desplegada. */
.cat-grupo {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; text-align: left; background: none; border: none;
    border-bottom: 1px solid var(--border); cursor: pointer;
    padding: 12px 4px; font-family: 'Inter', sans-serif; font-size: 15px;
    font-weight: 600; color: var(--text);
}
.cat-grupo:hover { background: var(--surface-alt); }
.cat-grupo-flecha { color: var(--text-dim); font-size: 12px; transition: transform .15s ease; }
.cat-grupo.abierto { color: var(--violet); }
.cat-grupo.abierto .cat-grupo-flecha { transform: rotate(180deg); color: var(--violet); }
.cat-hijos { padding-left: 14px; border-left: 2px solid var(--border); margin: 2px 0 6px 4px; }
.lista-categorias-item {
    display: block; width: 100%; text-align: left;
    background: none; border: none; border-bottom: 1px solid var(--border);
    padding: 12px 4px 12px 16px; font-size: 14.5px; color: var(--text);
    font-family: 'Inter', sans-serif; cursor: pointer;
}
.lista-categorias-item-raiz { padding-left: 4px; font-weight: 600; }
.lista-categorias-item:hover { background: var(--surface-alt); }
.lista-categorias-item.activo { color: var(--violet); font-weight: 700; }
.hint { font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--text-dim); margin-top: 4px; }

.alerta {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--blue);
    background: #eaf2ff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    margin-bottom: 18px;
    color: #1c1c1e;
}
.alerta.error { border-color: var(--danger); background: #fdeced; }
.alerta.ok { border-color: var(--green); background: #e7f8ef; }

.comision-box {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 18px;
    background: var(--surface-alt);
}
.comision-box b { color: var(--violet); }

/* ---------- Detalle de producto ---------- */
.detalle-producto {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 34px;
    margin: 30px 0 50px;
    align-items: start;
}
.detalle-img {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    aspect-ratio: 4/3;
    width: 260px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.detalle-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detalle-img-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.5);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.detalle-img-nav:hover { background: rgba(0,0,0,.7); }
.detalle-img-nav.prev { left: 8px; }
.detalle-img-nav.next { right: 8px; }
.detalle-img-contador {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}
@media (max-width: 640px) {
    .detalle-img { width: 160px; }
    .detalle-producto { grid-template-columns: 160px 1fr; gap: 18px; }
    /* En pantallas angostas, las categorías bajan de línea en vez de
       cortarse y obligar a deslizar con el dedo hacia los costados
       (útil sobre todo el día que haya muchas más categorías). */
    .cat-strip, .cat-strip-sub {
        flex-wrap: wrap;
        overflow-x: visible;
    }
    /* Las fotos apiladas son solo para PC; en celular sigue el
       carrusel de una foto por vez con flechas, como siempre. */
    .detalle-img-extra { display: none; }
}
@media (min-width: 641px) {
    /* En PC, en vez del carrusel de a una foto con flechas, se ven
       todas las fotos apiladas una debajo de la otra. Como ahora hay
       un tercer elemento directo dentro de la grilla de 2 columnas,
       hay que decirle a cada uno dónde va (si no, se corre todo). */
    /* La tercera fila (1fr) es un colchón vacío: absorbe el alto que
       sobra cuando la columna de la derecha es más larga que las fotos.
       Sin ella, ese sobrante se repartía entre las filas de las fotos y
       quedaba un hueco enorme entre una y otra. */
    .detalle-producto { grid-template-rows: auto auto 1fr; row-gap: 10px; column-gap: 34px; }
    .detalle-img { grid-column: 1; grid-row: 1; }
    .detalle-img-extra { grid-column: 1; grid-row: 2; margin-top: 0; }
    .detalle-info { grid-column: 2; grid-row: 1 / -1; }
    .detalle-img-nav, #contadorFotos { display: none; }
    .detalle-img-extra {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 260px;
    }
    .detalle-img-extra img {
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        display: block;
        border-radius: var(--radius);
        border: 1px solid var(--border);
        cursor: zoom-in;
        box-shadow: var(--shadow);
    }
}

/* ---------- Publicidad en la publicación (solo en pantallas bien anchas, donde sobra espacio) ---------- */
.detalle-publicidad { display: none; }
@media (min-width: 1180px) {
    .detalle-producto { grid-template-columns: 260px 640px 1fr; }
    .detalle-publicidad {
        display: block;
        grid-column: 3;
        grid-row: 1 / -1;
        justify-self: center;
        width: 460px;
        max-width: 90%;
        position: sticky;
        top: 90px;
        margin-top: 22px;
        text-align: center;
    }
    .detalle-publicidad-label {
        display: block;
        font-size: 11px;
        color: var(--text-dim);
        text-transform: uppercase;
        letter-spacing: .4px;
        margin-bottom: 6px;
    }
    .detalle-publicidad img {
        width: 100%;
        aspect-ratio: 1/1;
        object-fit: cover;
        display: block;
        border-radius: var(--radius);
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
    }
    .detalle-publicidad-cta {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    .detalle-publicidad-cta span {
        font-size: 11.5px;
        color: var(--text-dim);
    }
}

/* ---------- Avisos de coordinación de compra/venta ---------- */
.aviso-transaccion-banner {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 1px solid #fdba74;
    color: #9a3412;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13.5px;
    margin-bottom: 14px;
}
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.88);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.lightbox-overlay.activo { display: flex; }
.lightbox-overlay img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    cursor: zoom-out;
    border-radius: 4px;
}
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-nav:hover { background: rgba(255,255,255,.3); }
.lightbox-nav.prev { left: 18px; }
.lightbox-nav.next { right: 18px; }
.detalle-info .cat { color: var(--violet); font-family: 'Inter', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.detalle-info h1 { font-size: 27px; margin: 8px 0; color: var(--text); }
.detalle-info .precio-grande { font-size: 36px; color: var(--text); font-weight: 700; margin: 6px 0 16px; }
.detalle-info .descripcion { color: #3a3a3d; font-family: 'Inter', sans-serif; white-space: pre-line; margin-bottom: 20px; line-height: 1.65; font-size: 14.5px; }

.vendedor-box {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 18px;
    box-shadow: var(--shadow);
    transition: border-color .12s ease;
}
.vendedor-box:hover { border-color: var(--violet); }
.avatar-circle {
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, var(--violet), var(--cyan));
    display: flex; align-items: center; justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700; color: #fff; font-size: 16px; flex-shrink: 0;
    overflow: hidden;
}
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; }
.vendedor-box .nombre { font-family: 'Inter', sans-serif; font-weight: 600; color: var(--text); }

/* ---------- Perfil ---------- */
.perfil-header {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 26px 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.perfil-header .avatar-circle { width: 74px; height: 74px; font-size: 24px; }
.perfil-header h1 { margin: 0 0 6px; font-size: 24px; color: var(--text); }
.perfil-rate-row { display: flex; gap: 22px; margin-top: 8px; flex-wrap: wrap; font-family: 'Inter', sans-serif; }
.perfil-rate-row .item { font-size: 13px; color: var(--text-dim); }
.perfil-rate-row .item b { color: var(--text); }

.tabs { display: flex; gap: 4px; margin: 24px 0 16px; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabs a { padding: 10px 16px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: var(--text-dim); border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; }
.tabs a.active { color: var(--violet); border-color: var(--violet); }

/* ---------- Mensajes ---------- */
.msg-item { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow); }
.msg-item .head { display: flex; justify-content: space-between; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.msg-item.no-leido { border-left: 3px solid var(--violet); }

/* ---------- Línea de tiempo "Cómo funciona" ---------- */
.timeline-usadito {
    position: relative;
    padding-left: 46px;
}
.timeline-usadito::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--border-strong);
}
.timeline-paso {
    position: relative;
    padding-bottom: 26px;
}
.timeline-ultimo { padding-bottom: 0; }
.timeline-numero {
    position: absolute;
    left: -46px;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    box-shadow: 0 0 0 4px var(--surface);
    flex-shrink: 0;
}
.timeline-texto h3 { margin: 4px 0 4px; font-size: 15.5px; }
.timeline-texto p { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.5; }

/* ---------- Footer ---------- */
footer {
    border-top: 1px solid var(--border);
    margin-top: 60px;
    padding: 28px 0;
    color: var(--text-dim);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    background: var(--surface);
}
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* ---------- Vacío ---------- */
.vacio {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-dim);
    font-family: 'Inter', sans-serif;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
}
.vacio h3 { color: var(--text); margin-bottom: 8px; font-family: 'Rajdhani', sans-serif; font-size: 19px; }

/* ---------- Paginación ---------- */
.paginacion { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 20px 0 40px; }
.paginacion a, .paginacion span {
    padding: 8px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-dim); background: var(--surface);
}
.paginacion a:hover { border-color: var(--violet); color: var(--violet); }
.paginacion .activa { background: var(--violet); color: #fff; border-color: var(--violet); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .detalle-producto { grid-template-columns: 1fr; }
    /* En vez de esconder la búsqueda, la bajamos a una segunda fila
       propia, de ancho completo, para que siga estando disponible en
       celular (antes desaparecía del todo por debajo de este ancho). */
    .navbar .wrap { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; row-gap: 8px; }
    .nav-search-wrap { order: 3; width: 100%; max-width: none; flex: 1 1 100%; }
}
/* =========================================================
   PANEL DE ADMINISTRACIÓN
   ========================================================= */
.admin-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: calc(100vh - 64px);
    background: var(--bg);
}
.admin-sidebar,
.admin-main {
    min-width: 0;
}
.admin-sidebar {
    background: #16121f;
    color: #cfc9de;
    padding: 22px 0;
}
.admin-sidebar .admin-brand {
    padding: 0 20px 18px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 10px;
}
.admin-sidebar .admin-brand span { color: var(--cyan); }
.admin-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 20px;
    font-size: 14px;
    color: #cfc9de;
    border-left: 3px solid transparent;
}
.admin-nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.admin-nav a.active { background: rgba(124,58,237,.18); border-color: var(--violet); color: #fff; }
.badge-count {
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
    margin-left: 4px;
    vertical-align: middle;
}
.admin-nav .badge-count {
    margin-left: 0;
}
.admin-nav hr { border: none; border-top: 1px solid rgba(255,255,255,.08); margin: 12px 20px; }

.admin-main { padding: 26px 28px 50px; }
.admin-header-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; flex-wrap: wrap; gap: 10px;
}
.admin-header-row h1 { margin: 0; font-size: 24px; }

.admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}
.admin-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow);
}
.admin-card .num { font-family: 'Rajdhani', sans-serif; font-size: 30px; font-weight: 700; color: var(--violet); display: block; }
.admin-card .label { font-size: 13px; color: var(--text-dim); }

.tabla {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 13.5px;
}
.tabla th, .tabla td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tabla th { background: var(--surface-alt); font-family: 'Inter', sans-serif; font-weight: 600; color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.tabla tr:last-child td { border-bottom: none; }
.tabla tr:hover td { background: var(--surface-alt); }
.tabla-wrap { overflow-x: auto; }

.pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.pill-verde { background: #e7f8ef; color: var(--green); }
.pill-amarillo { background: #fff8e1; color: #b8860b; }
.pill-rojo { background: #fdeced; color: var(--danger); }
.pill-violeta { background: #f1e9fd; color: var(--violet); }
.pill-gris { background: var(--surface-alt); color: var(--text-dim); }

.check-permisos { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 20px; }
.check-permisos label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; background: var(--surface-alt); padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; }
.check-permisos input { margin-top: 3px; accent-color: var(--violet); }

/* ---------- Paneles de comprador y vendedor ---------- */
.panel-intro {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.panel-avisos {
    background: #f5f3ff; border: 1px solid #ddd6fe; border-left: 4px solid var(--violet);
    border-radius: 8px; padding: 12px 16px; margin-bottom: 20px;
}
.panel-avisos h3 { margin: 0 0 8px; font-size: 14px; color: var(--violet-dark); }
.panel-avisos .evento-item:last-child { border-bottom: none; padding-bottom: 0; }

.btn-wa {
    background: #25d366; color: #fff; border: 1px solid #1eb955;
}
.btn-wa:hover { background: #1eb955; color: #fff; }

.op-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 18px;
}
.op-card.destacada { border-left: 4px solid var(--violet); }
.op-head { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.op-thumb {
    width: 68px; height: 68px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
    background: var(--surface-alt); border: 1px solid var(--border);
}
.op-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-datos { flex: 1; min-width: 180px; }
.op-datos .titulo { font-weight: 700; font-size: 16px; color: var(--text); display: block; }
.op-datos .precio { font-family: 'Rajdhani', sans-serif; font-size: 20px; font-weight: 700; color: var(--text); }
.op-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

.op-estado {
    background: var(--surface-alt); border: 1px solid var(--border); border-radius: 8px;
    padding: 12px 14px; margin-top: 14px; font-size: 14px; line-height: 1.5;
}
.op-estado b { color: var(--text); }
.op-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.op-pasos { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.op-paso {
    flex: 1; min-width: 60px; font-size: 10.5px; line-height: 1.3; text-align: center;
    color: var(--text-dim); border-top: 3px solid var(--border); padding-top: 6px;
}
.op-paso.hecho { color: var(--green); border-top-color: var(--green); }
.op-paso.actual { color: var(--violet); border-top-color: var(--violet); font-weight: 700; }

.op-eventos { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 10px; }
.op-eventos > summary {
    cursor: pointer; font-size: 13px; color: var(--blue); list-style: none;
    font-family: 'Inter', sans-serif;
}
.op-eventos > summary::-webkit-details-marker { display: none; }
.op-eventos > summary::before { content: '▸ '; }
.op-eventos[open] > summary::before { content: '▾ '; }
.evento-item {
    border-bottom: 1px solid var(--border); padding: 9px 0; font-size: 13.5px;
    line-height: 1.5; color: var(--text);
}
.evento-item:last-child { border-bottom: none; }
.evento-item .fecha { display: block; font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.evento-item.nuevo { background: #fffbea; margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 4px; }

.aviso-banner {
    background: #fff8e1;
    border: 1px solid #f0d878;
    color: #7a5c00;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 18px;
}

/* ---------- Accesibilidad ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- Panel admin responsive (debe ir después de las reglas base de arriba) ---------- */
@media (max-width: 860px) {
    /* Menú arriba (solo su alto) y el contenido se queda con el resto:
       sin esto, en páginas cortas el menú se estiraba hacia abajo. */
    .admin-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; }
    .admin-sidebar { padding: 6px 0; }
    .admin-main { padding: 14px 14px 40px; }
    .admin-nav { display: flex; overflow-x: auto; min-width: 0; }
    .admin-nav a { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
    .admin-nav a.active { border-color: var(--violet); }
    .admin-nav hr { display: none; }
    .admin-sidebar .admin-brand { display: none; }
}
/* El botón de inicio del navbar solo aparece en celulares, donde se
   esconde el logo para no comerse el ancho de la barra. */
.nav-home { display: none; }

@media (max-width: 560px) {
    .campo-row { grid-template-columns: 1fr !important; }
    .hero h1 { font-size: 30px; }
    .navbar .wrap { gap: 10px; }
    .navbar .logo { display: none; }
    .nav-home { display: inline-flex; }
    .nav-links {
        overflow-x: auto;
        flex-shrink: 1;
        min-width: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 2px;
    }
    .nav-links::-webkit-scrollbar { display: none; }
    .nav-links .btn { flex-shrink: 0; }
}

/* ---------- Solicitudes: vendedor a la izquierda, compradores a la derecha ---------- */
.sol-cols { display: flex; gap: 16px; align-items: flex-start; }
.sol-col { min-width: 0; }
.sol-col-vendedor { flex: 1 1 320px; }
.sol-col-compradores { flex: 1 1 380px; display: flex; flex-direction: column; gap: 14px; }
/* En pantallas angostas vuelven a apilarse: vendedor arriba, compradores abajo */
@media (max-width: 900px) {
    .sol-cols { flex-direction: column; }
    .sol-col-vendedor, .sol-col-compradores { flex: 1 1 auto; width: 100%; }
}

/* ---------- Cartel bloqueante: horario sin elegir ----------
   Tapa toda la web hasta que la persona elige cuándo pasamos a
   buscar el producto (venta) o cuándo se lo llevamos (compra).
   No tiene botón de cerrar a propósito. */
.modal-fondo.modal-bloqueo {
    z-index: 10000;
    background: rgba(0,0,0,.75);
    overflow-y: auto;
    align-items: center;
}
.modal-bloqueo .modal-caja {
    max-width: 420px;
    padding: 24px;
    margin: auto;
}
.bloqueo-ok {
    background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
    border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13.5px; margin-bottom: 14px;
}
.bloqueo-error {
    background: #fef2f2; border: 1px solid #fecaca; color: var(--danger);
    border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13.5px; margin-bottom: 14px;
}
.bloqueo-etiqueta {
    font-size: 12.5px; font-weight: 600; color: var(--violet-dark);
    text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px;
}
.bloqueo-producto {
    display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.bloqueo-producto .op-thumb { width: 56px; height: 56px; }
.bloqueo-producto b { font-size: 15px; line-height: 1.3; word-break: break-word; }
.bloqueo-texto { font-size: 14.5px; line-height: 1.45; }
.bloqueo-sub { color: var(--text-dim); margin-top: 4px; font-size: 13.5px; }
.bloqueo-pregunta { font-weight: 700; margin: 16px 0 10px; font-size: 15px; }
.bloqueo-opciones { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.bloqueo-opciones .btn { padding-top: 12px; padding-bottom: 12px; font-size: 15px; }
.bloqueo-nota { margin: 12px 0 0; font-size: 12px; color: var(--text-dim); text-align: center; }

/* ---------- Aviso grande: "Usadito va en camino" ----------
   Cuando ya salimos a buscar el producto, el cartel de estado de la
   tarjeta se agranda para que se lea de un vistazo desde el celular. */
.op-estado.op-estado-camino {
    background: #fffbe0;
    border: 2px solid var(--ml-yellow-dark);
    text-align: center;
    padding: 20px 16px;
}
.op-estado-camino .camino-icono {
    font-size: 46px;
    line-height: 1;
    margin-bottom: 8px;
    display: inline-block;
    animation: camino-andar 1.2s ease-in-out infinite;
}
.op-estado-camino .camino-titulo {
    font-family: 'Rajdhani', sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text);
}
.op-estado-camino .camino-sub {
    font-size: 19px;
    font-weight: 600;
    color: var(--text);
    margin-top: 6px;
}
@keyframes camino-andar {
    0%, 100% { transform: translateX(-6px); }
    50%      { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
    .op-estado-camino .camino-icono { animation: none; }
}
@media (max-width: 480px) {
    .op-estado-camino .camino-titulo { font-size: 23px; }
    .op-estado-camino .camino-sub { font-size: 17px; }
}

/* Respuesta al "va en camino": botones dentro del recuadro amarillo */
.camino-respuesta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px auto 0;
    max-width: 320px;
}
.camino-respuesta .btn {
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
}
.btn-camino-si { background: var(--green); color: #fff; border: 1px solid #008a43; }
.btn-camino-si:hover { background: #008a43; color: #fff; }
.btn-camino-no { background: #fff; color: var(--text); border: 1px solid var(--border-strong); }
.btn-camino-no:hover { background: var(--surface-alt); }
.camino-ok {
    display: inline-block;
    margin-top: 14px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    font-size: 15px;
    font-weight: 600;
}

/* =========================================================
   TIERS DE USUARIO: borde / aura de las publicaciones y etiqueta
   "Usuario Oro". Cada tier tiene: borde grueso de su color, un anillo
   de luz alrededor, brillo difuso y la parte de abajo de la tarjeta
   apenas teñida. Oro y Rubí además "laten" suavemente.
   ========================================================= */
.card-producto.tier-bronce,
.detalle-img.tier-bronce,
.grid-productos .card-producto.tier-bronce {
    border: 2px solid #c07a45;
    box-shadow: 0 0 0 2px rgba(192,122,69,.18), 0 0 14px 2px rgba(192,122,69,.35);
}
.card-producto.tier-plata,
.detalle-img.tier-plata,
.grid-productos .card-producto.tier-plata {
    border: 3px solid #8795aa;
    box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 6px rgba(120,138,165,.35), 0 0 26px 8px rgba(110,130,160,.6), 0 8px 20px rgba(110,130,160,.3);
}
.card-producto.tier-oro,
.detalle-img.tier-oro,
.grid-productos .card-producto.tier-oro {
    border: 3px solid #e0a800;
    box-shadow: 0 0 0 3px rgba(240,190,20,.3), 0 0 26px 8px rgba(245,190,0,.65), 0 8px 22px rgba(224,168,0,.35);
    animation: aura-oro 2.8s ease-in-out infinite;
}
.card-producto.tier-rubi,
.detalle-img.tier-rubi,
.grid-productos .card-producto.tier-rubi {
    border: 3px solid #d3104f;
    box-shadow: 0 0 0 3px rgba(224,17,95,.3), 0 0 28px 9px rgba(224,17,95,.6), 0 8px 22px rgba(211,16,79,.35);
    animation: aura-rubi 2.2s ease-in-out infinite;
}

/* Parte de abajo de la tarjeta apenas teñida del color del tier */
.card-producto.tier-bronce .body { background: linear-gradient(180deg, #fbf1e8 0%, #fff 70%); }
.card-producto.tier-plata  .body { background: linear-gradient(180deg, #e6ecf4 0%, #fff 72%); }
.card-producto.tier-oro    .body { background: linear-gradient(180deg, #fff4c9 0%, #fff 75%); }
.card-producto.tier-rubi   .body { background: linear-gradient(180deg, #ffe3ec 0%, #fff 75%); }

.card-producto.tier-bronce:hover { border-color: #a8612f; }
.card-producto.tier-plata:hover  { border-color: #7d8a9c; }
.card-producto.tier-oro:hover    { border-color: #c99400; }
.card-producto.tier-rubi:hover   { border-color: #b00d42; }

@keyframes aura-oro {
    0%, 100% { box-shadow: 0 0 0 3px rgba(240,190,20,.25), 0 0 20px 6px rgba(245,190,0,.5),  0 8px 22px rgba(224,168,0,.3); }
    50%      { box-shadow: 0 0 0 4px rgba(240,190,20,.4),  0 0 34px 12px rgba(245,190,0,.75), 0 8px 22px rgba(224,168,0,.4); }
}
@keyframes aura-rubi {
    0%, 100% { box-shadow: 0 0 0 3px rgba(224,17,95,.25), 0 0 20px 6px rgba(224,17,95,.45), 0 8px 22px rgba(211,16,79,.3); }
    50%      { box-shadow: 0 0 0 5px rgba(224,17,95,.4),  0 0 36px 13px rgba(224,17,95,.75), 0 8px 22px rgba(211,16,79,.4); }
}
@media (prefers-reduced-motion: reduce) {
    .card-producto.tier-oro, .detalle-img.tier-oro,
    .card-producto.tier-rubi, .detalle-img.tier-rubi { animation: none; }
}

/* En el celular las tarjetas van en una fila que se desliza: le damos
   más aire arriba y abajo para que el brillo no quede cortado. */
@media (max-width: 640px) {
    .grid-productos { padding: 16px 30px 26px 16px; }
    .grid-productos .card-producto { margin-right: -40px; }
}

/* Etiqueta "Usuario X" */
.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .4px;
    vertical-align: middle;
    white-space: nowrap;
}
.tier-gema {
    width: 9px;
    height: 9px;
    transform: rotate(45deg);
    border-radius: 2px;
    display: inline-block;
    flex: 0 0 auto;
}
.tier-badge-bronce { background: #f6ebe1; color: #8a5230; }
.tier-badge-plata  { background: #eef1f5; color: #5d6b7d; }
.tier-badge-oro    { background: #fff6d6; color: #9a7400; }
.tier-badge-rubi   { background: #fde7ee; color: #b00d42; }
.tier-badge-bronce .tier-gema, .tier-boton-bronce .tier-gema { background: linear-gradient(135deg, #e0a676, #a8612f); }
.tier-badge-plata  .tier-gema, .tier-boton-plata  .tier-gema { background: linear-gradient(135deg, #f1f4f8, #8c99aa); }
.tier-badge-oro    .tier-gema, .tier-boton-oro    .tier-gema { background: linear-gradient(135deg, #ffe38a, #d19b00); }
.tier-badge-rubi   .tier-gema, .tier-boton-rubi   .tier-gema { background: linear-gradient(135deg, #ff6a9a, #b00d42); }

/* Botones del admin para elegir tier */
.tier-boton { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1.5px solid var(--border-strong); color: var(--text); }
.tier-boton.activo.tier-boton-bronce { border-color: #c8895a; background: #f6ebe1; }
.tier-boton.activo.tier-boton-plata  { border-color: #a9b4c2; background: #eef1f5; }
.tier-boton.activo.tier-boton-oro    { border-color: #e2b007; background: #fff6d6; }
.tier-boton.activo.tier-boton-rubi   { border-color: #d3104f; background: #fde7ee; }

/* Sugerencias de calles (crear cuenta / editar perfil) */
.sugerencias-calle {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 50;
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    max-height: 280px;
    overflow-y: auto;
    margin-top: 4px;
}
.sugerencia-calle {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 12px 14px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    color: var(--text);
    cursor: pointer;
}
.sugerencia-calle:last-child { border-bottom: none; }
.sugerencia-calle:hover, .sugerencia-calle:focus { background: var(--surface-alt); }
.sugerencia-calle-vacia { padding: 12px 14px; font-size: 14px; color: var(--danger); }

/* "¿Quién te recomendó Usadito?": lista con buscador */
.ref-lista {
    margin-top: 6px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
}
.ref-opcion {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    text-align: left;
    background: #fff;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 11px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--text);
    cursor: pointer;
}
.ref-opcion:last-child { border-bottom: none; }
.ref-opcion:hover, .ref-opcion:focus { background: var(--surface-alt); }
.ref-opcion-nombre { font-weight: 600; }
.ref-opcion-usuario { color: var(--text-dim); font-size: 13px; white-space: nowrap; }
.ref-cargando { padding: 10px 12px; font-size: 13px; color: var(--text-dim); }
.ref-elegido {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #e7f8ef;
    border: 1px solid #a7f3d0;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 15px;
}

/* Código de paquete (panel admin) */
.paquete-codigo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #fff8e1;
    border: 2px dashed #e0b400;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin-bottom: 10px;
}
.paquete-codigo-label { font-size: 13px; font-weight: 700; color: #8a6d00; text-transform: uppercase; letter-spacing: .4px; }
.paquete-codigo-valor { font-family: ui-monospace, 'Courier New', monospace; font-size: 24px; font-weight: 800; letter-spacing: 3px; color: var(--text); }
.paquete-codigo-cerrado { background: var(--surface-alt); border-color: var(--border-strong); }
.paquete-codigo-cerrado .paquete-codigo-valor { font-size: 16px; color: var(--text-dim); }
.entrega-paquete {
    margin: 0;
    padding: 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    flex-basis: 100%;
}
.entrega-paquete label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.entrega-paquete input[type=text] {
    width: 130px;
    text-transform: uppercase;
    font-family: ui-monospace, 'Courier New', monospace;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 2px;
    padding: 6px 10px;
}
.entrega-sin-codigo {
    background: none;
    border: none;
    padding: 0;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-dim);
    text-decoration: underline;
    cursor: pointer;
}

/* Código de paquete (Mis compras) */
.paquete-comprador {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #fff8e1;
    border: 2px dashed #e0b400;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}
.paquete-comprador .paquete-codigo-valor { font-size: 26px; }

/* =========================================================
   PANEL DE SOLICITUDES: tarjetas por etapa (pensadas para el celular)
   ========================================================= */
.sc {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 5px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px 16px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 640px;
}
.sc-retiro  { border-left-color: var(--violet); }
.sc-entrega { border-left-color: var(--blue); }
.sc-pago    { border-left-color: #e0b400; }
.sc-completa { border-left-color: var(--green); opacity: .9; }
.sc-cancelada { border-left-color: var(--border-strong); opacity: .8; }

.sc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.sc-titulo { color: var(--text); font-weight: 700; font-size: 17px; line-height: 1.25; }
.sc-precio { font-size: 13px; color: var(--text-dim); margin-top: -6px; }
.sc-precio b { color: var(--green); }

.sc-pasos { display: flex; gap: 4px; }
.sc-paso {
    flex: 1;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 0;
    border-radius: 6px;
    background: var(--surface-alt);
    color: var(--text-dim);
}
.sc-paso.actual { background: var(--violet); color: #fff; }
.sc-paso.hecho { background: #e7f8ef; color: var(--green); }

.sc-persona { display: flex; flex-direction: column; gap: 3px; }
.sc-rol { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim); }
.sc-nombre { font-size: 17px; font-weight: 700; }
.sc-usuario { font-size: 13px; font-weight: 500; color: var(--text-dim); }
.sc-lugar { font-size: 15px; color: var(--text); }
.sc-persona .pill { align-self: flex-start; margin-top: 3px; }
.sc-falta { color: var(--danger); }

.sc-prox {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: var(--radius-sm);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sc-entrega .sc-prox { background: #eff6ff; border-color: #bfdbfe; }
.sc-pago .sc-prox { background: #fff8e1; border-color: #f2d675; }
.sc-prox-titulo { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--violet-dark); }
.sc-entrega .sc-prox-titulo { color: var(--blue-dark); }
.sc-pago .sc-prox-titulo { color: #8a6d00; }
.sc-prox .btn, .sc-mas .btn { width: 100%; justify-content: center; padding: 11px 12px; font-size: 15px; }
.sc-prox .btn.btn-sm { width: auto; padding: 5px 10px; font-size: 13px; }
.sc-form { margin: 0; }
.sc-fila { display: flex; gap: 8px; }
.sc-fila > * { flex: 1; }
.sc-fila > .sc-form { display: flex; }
.btn-waze { background: #33ccff; color: #0b2a3a; border: 1px solid #1fb6e6; }
.sc-espera { font-size: 15px; font-weight: 600; color: var(--text-dim); }

.sc-paquete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: #8a6d00; }
.sc-paquete .paquete-codigo-valor { font-size: 22px; }
.sc .entrega-paquete { background: #fff; padding: 10px; }
.sc .entrega-paquete input[type=text] { width: 100%; min-width: 0; }

.sc-pago { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.sc-pago-monto { font-size: 28px; font-weight: 800; color: var(--text); }
.sc-alias { font-family: ui-monospace, 'Courier New', monospace; font-size: 16px; word-break: break-all; }

.sc-otra { font-size: 13px; color: var(--text-dim); border-top: 1px dashed var(--border); padding-top: 8px; }
.sc-final { font-size: 15px; }
.sc-final-gris { color: var(--text-dim); }

.sc-mas summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    list-style: none;
    padding: 4px 0;
}
.sc-mas summary::-webkit-details-marker { display: none; }
.sc-mas[open] summary { margin-bottom: 8px; }
.sc-mas-cuerpo { display: flex; flex-direction: column; gap: 6px; }
.sc-mas .sc-peligro { color: var(--danger); }
.sc-revision { flex-direction: column; gap: 6px; }
.sc-revision textarea { min-height: 60px; }
.sc-historial { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 8px; font-size: 13px; }
.sc-historial-titulo { font-weight: 700; margin-bottom: 4px; }
.sc-historial-fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; }
.sc-historial-fila .sc-fila { flex: 0 0 auto; }
.sc-historial-fila .btn { width: auto; padding: 4px 8px; font-size: 13px; }

.sc-filtros { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 12px; padding-bottom: 2px; }
.sc-filtro {
    flex: 0 0 auto;
    border: 1px solid var(--border-strong);
    background: #fff;
    color: var(--text);
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.sc-filtro b { margin-left: 3px; }
.sc-filtro.activo { background: var(--violet); border-color: var(--violet); color: #fff; }
.sc .btn { font-family: 'Inter', sans-serif; font-weight: 600; line-height: 1.2; }
.sc-mas .btn { font-size: 14px; padding: 10px 12px; }
.sc .entrega-paquete .btn { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.sc-seguir summary { cursor: pointer; font-size: 13px; color: var(--text-dim); text-decoration: underline; list-style: none; padding: 2px 0; }
.sc-seguir summary::-webkit-details-marker { display: none; }
.sc-seguir-cuerpo { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-strong); }
.sc-despues { display: flex; flex-direction: column; gap: 8px; }
.sc-despues[hidden] { display: none; }
.sc-ya-sali { background: none; border: none; padding: 2px 0; font-size: 13px; color: var(--text-dim); text-decoration: underline; cursor: pointer; align-self: flex-start; }

/* Buscador de paquetes plegable (panel de solicitudes) */
.buscar-paquete {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin: 0 0 12px;
    max-width: 640px;
}
.buscar-paquete summary {
    cursor: pointer;
    list-style: none;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.buscar-paquete summary::-webkit-details-marker { display: none; }
.buscar-paquete summary::after { content: '▾'; color: var(--text-dim); transition: transform .15s; }
.buscar-paquete[open] summary::after { transform: rotate(180deg); }
.buscar-paquete[open] { padding-bottom: 10px; }
.buscar-paquete-form, .buscar-paquete > .alerta { margin: 0 12px; }
.buscar-paquete-form { display: flex; gap: 8px; }
.buscar-paquete-form input[type=text] {
    flex: 1;
    min-width: 0;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 7px 10px;
}