/* =====================================================================
   HelloSaurio Store — tema verde oscuro inspirado en loro
   ===================================================================== */
:root {
    /* Tema negro con verde elegante/sutil */
    --bg-principal: #0a0a0a;        /* Negro */
    --bg-elevado: #0d0d0d;          /* Negro slight */
    --bg-card: #141414;             /* Gris muy oscuro */
    --bg-hover: #1a1a1a;            /* Gris oscuro */
    --borde: #2a2a2a;               /* Borde sutil */

    /* Texto */
    --texto: #f0f0f0;               /* Blanco suave */
    --texto-suave: #888888;          /* Gris medio */

    /* Acentos - Verde elegante/sutil */
    --accent-naranja: #22c55e;      /* Verde elegante */
    --accent-naranja-hover: #16a34a;
    --accent-verde: #22c55e;       /* Verde suave */
    --accent-amarillo: #eab308;     /* Dorado sutil */

    /* Alias de compatibilidad */
    --naranja: var(--accent-naranja);
    --naranja-hover: var(--accent-naranja-hover);
    --verde: var(--accent-verde);
    --bg: var(--bg-principal);

    /* Estados */
    --rojo: #dc2626;
    --morado: #9333ea;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background: #0a0a0a;
    color: var(--texto);
    font-family: 'Segoe UI', Arial, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Animación suave al hacer scroll */
html {
    scroll-behavior: smooth;
}

/* Efectos de entrada */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.producto-card, .panel, .stat-card, .pedido-card, .categoria-card-admin {
    animation: fadeInUp 0.4s ease-out forwards;
}

/* Delay para efectos en cadena */
.producto-card:nth-child(1) { animation-delay: 0.05s; }
.producto-card:nth-child(2) { animation-delay: 0.1s; }
.producto-card:nth-child(3) { animation-delay: 0.15s; }
.producto-card:nth-child(4) { animation-delay: 0.2s; }
.producto-card:nth-child(5) { animation-delay: 0.25s; }
.producto-card:nth-child(6) { animation-delay: 0.3s; }

/* Efecto hover suave */
.producto-card, .panel, .stat-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

a { color: inherit; text-decoration: none; }

/* ===================== CABECERA ===================== */
.cabecera {
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borde);
    position: sticky;
    top: 0;
    z-index: 50;
}

.cabecera-top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 40px;
    max-width: 1600px;
    margin: 0 auto;
    flex-wrap: wrap;
}

@media (min-width: 1400px) {
    .cabecera-top {
        padding: 12px 60px;
    }
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}
.logo img {
    height: 50px;
    width: 50px;
    object-fit: contain;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.logo img:hover {
    transform: scale(1.05);
}
}
.logo-texto { display: none; } /* Ahora solo imagen */

.buscador {
    flex: 1;
    display: flex;
    max-width: 500px;
    min-width: 200px;
}
.buscador input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--borde);
    border-right: none;
    border-radius: 25px 0 0 25px;
    background: var(--bg-card);
    color: var(--texto);
    font-size: 0.95em;
}
.buscador input::placeholder { color: var(--texto-suave); }
.buscador button {
    padding: 0 20px;
    border: none;
    background: var(--accent-naranja);
    color: #0d2818;
    border-radius: 0 25px 25px 0;
    cursor: pointer;
    font-weight: 700;
    font-size: 1em;
}
.buscador button:hover { background: var(--accent-naranja-hover); }

.selector-region, .selector-pago {
    padding: 10px 14px;
    border-radius: 20px;
    border: 2px solid var(--borde);
    background: var(--bg-card);
    color: var(--texto);
    font-size: 0.85em;
    cursor: pointer;
    font-weight: 600;
}
.selector-region:hover, .selector-pago:hover {
    border-color: var(--accent-verde);
}

.icono-carrito {
    position: relative;
    text-decoration: none;
    color: var(--texto);
    padding: 6px 10px;
    border-radius: 20px;
    border: 2px solid var(--borde);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    transition: all 0.2s;
}
.icono-carrito img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}
.icono-carrito:hover {
    border-color: var(--accent-verde);
    background: var(--bg-hover);
}
.badge-carrito {
    background: var(--accent-naranja);
    color: #0d2818;
    border-radius: 50%;
    padding: 2px 8px;
    font-size: 0.75em;
    font-weight: 800;
    position: absolute;
    top: -5px;
    right: -5px;
}

.sesion { display: flex; align-items: center; gap: 8px; }
.sesion-link {
    color: var(--texto-suave);
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 20px;
    transition: all 0.2s;
}
.sesion-link:hover { color: var(--accent-verde); }
.icono-perfil {
    position: relative;
    text-decoration: none;
    color: var(--texto);
    padding: 6px 10px;
    border-radius: 20px;
    border: 2px solid var(--borde);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    font-size: 1.1em;
    transition: all 0.2s;
}
.icono-perfil img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}
.icono-perfil:hover { border-color: var(--accent-verde); background: var(--bg-hover); }
.boton-cerrar {
    background: transparent;
    border: 2px solid var(--borde);
    color: var(--texto-suave);
    padding: 8px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85em;
}
.boton-cerrar:hover {
    border-color: var(--rojo);
    color: var(--rojo);
}
.boton-login {
    padding: 10px 20px;
    background: var(--accent-naranja);
    color: #0d2818 !important;
    text-decoration: none;
    border-radius: 20px;
    font-weight: 700;
    white-space: nowrap;
    border: 2px solid var(--accent-naranja);
}
.boton-login:hover {
    background: transparent;
    color: var(--accent-naranja) !important;
}
.sesion button {
    background: var(--bg-card);
    border: 2px solid var(--borde);
    color: var(--texto);
    padding: 10px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
}
.sesion button:hover {
    border-color: var(--rojo);
    color: var(--rojo);
}
.sesion .link-perfil {
    color: var(--texto);
    text-decoration: none;
    font-size: 0.9em;
    padding: 8px 14px;
    border-radius: 20px;
    border: 2px solid var(--borde);
    background: var(--bg-card);
    font-weight: 600;
}
.sesion .link-perfil:hover {
    border-color: var(--accent-verde);
    color: var(--accent-verde);
}

/* Menú horizontal */
.menu-horizontal {
    display: flex;
    gap: 4px;
    padding: 10px 40px;
    max-width: 1600px;
    margin: 0 auto;
    background: var(--bg-elevado);
    border-top: 1px solid var(--borde);
    overflow-x: auto;
}

@media (min-width: 1400px) {
    .menu-horizontal {
        padding: 10px 60px;
    }
}
.menu-horizontal a {
    padding: 10px 18px;
    text-decoration: none;
    color: var(--texto-suave);
    font-size: 0.9em;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s;
}
.menu-horizontal a:hover {
    color: var(--texto);
    background: var(--bg-card);
}
.menu-horizontal a.activo {
    color: var(--accent-naranja);
    border-bottom-color: var(--accent-naranja);
    background: var(--bg-card);
}

/* ===================== CONTENIDO GENERAL ===================== */
.contenido {
    max-width: 1400px;
    margin: 24px auto;
    padding: 0 40px;
}

/* Distribuir mejor en pantallas grandes */
@media (min-width: 1400px) {
    .contenido {
        padding: 0 60px;
    }
}
.contenido h1 {
    font-size: 1.6em;
    margin-bottom: 16px;
    color: var(--accent-verde);
    border-left: 4px solid var(--accent-naranja);
    padding-left: 12px;
}
.contenido h2 {
    font-size: 1.2em;
    margin-bottom: 12px;
    color: var(--texto);
}

/* ===================== ANUNCIO / BANNER ===================== */
.anuncio {
    background: linear-gradient(135deg, var(--bg-elevado), var(--bg-card));
    border: 2px solid var(--accent-naranja);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.15);
}
.anuncio img { width: 70px; height: 70px; border-radius: 12px; object-fit: cover; border: 2px solid var(--accent-verde); }
.anuncio-texto { flex: 1; }
.anuncio-titulo { font-weight: 700; color: var(--accent-naranja); font-size: 1.15em; margin-bottom: 4px; }
.anuncio p { color: var(--texto-suave); font-size: 0.9em; }
.anuncio .boton-comprar { flex-shrink: 0; }

/* ===================== PILDORAS DE CATEGORÍA ===================== */
.pildoras-categoria {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--borde);
}
.pildora {
    padding: 10px 20px;
    border-radius: 20px;
    background: var(--bg-elevado);
    border: 2px solid var(--borde);
    color: var(--texto-suave);
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
    transition: all 0.2s;
}
.pildora:hover {
    border-color: var(--accent-verde);
    color: var(--accent-verde);
    transform: translateY(-2px);
}
.pildora.activa {
    background: var(--accent-naranja);
    color: #0d2818;
    border-color: var(--accent-naranja);
}

/* ===================== GRID DE PRODUCTOS ===================== */
.grid-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

@media (min-width: 1600px) {
    .grid-productos {
        grid-template-columns: repeat(5, 1fr);
    }
}
.producto-card {
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--texto);
    display: flex;
    flex-direction: column;
}
.producto-card:hover {
    border-color: var(--accent-verde);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(34, 197, 94, 0.15);
}
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(74, 222, 128, 0.15);
}
.producto-imagen-wrap {
    position: relative;
    aspect-ratio: 4/3;
    background: var(--bg-elevado);
    overflow: hidden;
}
.producto-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.producto-card:hover img { transform: scale(1.05); }
.producto-card .sin-imagen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--texto-suave);
    font-size: 0.8em;
}

.etiqueta-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    z-index: 2;
}
.badge-popular { background: var(--accent-naranja); color: #0d2818; }
.badge-oferta { background: var(--rojo); color: #fff; }
.badge-nuevo { background: var(--morado); color: #fff; }
.badge-link { background: #3b82f6; color: #fff; }

.producto-info {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.producto-info h3 {
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1.3;
}
.producto-info .vendedor {
    font-size: 0.75em;
    color: var(--texto-suave);
}
.producto-info .precio {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.precio-final { font-weight: 800; color: var(--accent-naranja); font-size: 1.1em; }
.precio-tachado { text-decoration: line-through; color: var(--texto-suave); font-size: 0.8em; }

/* ===================== BOTONES ===================== */
.boton-comprar {
    display: inline-block;
    padding: 12px 28px;
    background: var(--accent-naranja);
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
}

.boton-comprar:hover {
    background: var(--accent-naranja-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}
.boton-comprar:hover {
    background: var(--accent-naranja-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}
.boton-comprar:disabled { opacity: 0.5; cursor: not-allowed; }

.boton-secundario {
    padding: 10px 18px;
    background: transparent;
    color: var(--texto);
    border: 2px solid var(--borde);
    border-radius: 20px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    transition: all 0.2s;
}
.boton-secundario:hover {
    border-color: var(--accent-verde);
    color: var(--accent-verde);
}

.boton-eliminar {
    padding: 8px 14px;
    background: transparent;
    color: var(--rojo);
    border: 2px solid var(--rojo);
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
}
.boton-eliminar:hover {
    background: rgba(239,68,68,0.1);
}

/* ===================== FORMULARIOS ===================== */
input, select, textarea, button { font-family: inherit; font-size: 1em; }
.contenido-auth {
    max-width: 420px;
    margin: 40px auto;
    background: var(--bg-card);
    border: 2px solid var(--borde);
    padding: 28px;
    border-radius: 16px;
}
.contenido-auth h1 {
    margin-bottom: 20px;
    color: var(--accent-verde);
    text-align: center;
}
.contenido-auth form, .panel form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.contenido-auth label, .panel label {
    font-size: 0.85em;
    color: var(--texto-suave);
    margin-top: 4px;
    font-weight: 600;
}
/* Estilo de las casillas del login/registro (.contenido-auth):
   se mantiene el look original del proyecto (fondo oscuro del card,
   texto claro). Los .panel si llevan casillas blancas/texto negro
   porque ahi se renderizan formularios de checkout/pedidos donde
   el texto claro sobre fondo oscuro no se leia bien. */
.contenido-auth input, .contenido-auth select, .contenido-auth textarea {
    padding: 11px 12px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--bg);
    color: var(--texto);
}
.contenido-auth input:focus, .contenido-auth select:focus, .contenido-auth textarea:focus {
    outline: none;
    border-color: var(--naranja);
}

/* Casillas de los formularios que NO son de auth: blanco/negro,
   para que se lean bien sobre el card oscuro. Tambien el dropdown. */
.panel input, .panel select, .panel textarea {
    padding: 12px 14px;
    border: 2px solid var(--borde);
    border-radius: 12px;
    background: #ffffff;
    color: #000000;
    font-weight: 500;
    transition: border-color 0.2s;
}
.panel select option {
    background: #ffffff;
    color: #000000;
}
.panel input:focus, .panel select:focus, .panel textarea:focus {
    outline: none;
    border-color: var(--accent-verde);
}
.contenido-auth button, .panel button {
    padding: 12px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
}
.contenido-auth button[type=submit], .panel button[type=submit] {
    background: var(--accent-naranja);
    color: #0d2818;
    font-weight: 700;
    margin-top: 8px;
    transition: all 0.2s;
}
.contenido-auth button[type=submit]:hover, .panel button[type=submit]:hover {
    background: var(--accent-naranja-hover);
    transform: translateY(-2px);
}
.boton-google {
    display: block;
    text-align: center;
    padding: 12px;
    background: var(--bg-elevado);
    color: var(--texto) !important;
    text-decoration: none;
    border-radius: 12px;
    border: 2px solid var(--borde);
    margin-top: 8px;
    font-weight: 600;
}
.boton-google:hover {
    border-color: var(--accent-verde);
    color: var(--accent-verde) !important;
}
.mensaje-error { color: var(--rojo); margin-bottom: 12px; font-size: 0.9em; }
.mensaje-exito { color: var(--accent-verde); margin-bottom: 12px; font-size: 0.9em; }
.mensaje-warning { color: var(--accent-amarillo); margin-bottom: 12px; font-size: 0.9em; }
.mensaje-info { color: var(--accent-verde); margin-bottom: 12px; font-size: 0.9em; font-style: italic; }

.form-inline {
    flex-direction: row !important;
    max-width: none !important;
    align-items: center;
}
.form-inline input { flex: 1; }

/* ===================== PANELES / TARJETAS GENÉRICAS ===================== */
.panel {
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}
.panel h2 {
    margin-bottom: 12px;
    color: var(--accent-verde);
}

.categoria-card-admin, .pedido-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-elevado);
    border: 2px solid var(--borde);
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 10px;
    text-decoration: none;
    color: var(--texto);
    transition: all 0.2s;
}
.categoria-card-admin:hover, .pedido-card:hover {
    border-color: var(--accent-verde);
    transform: translateX(4px);
}
.lista-pedidos .pedido-card {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 12px;
    align-items: center;
}

.etiqueta-estado {
    background: var(--bg-card);
    color: var(--texto-suave);
    border: 1px solid var(--borde);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: 600;
}

/* ===================== SUBMENÚ (paneles vendedor/admin) ===================== */
.submenu-vendedor {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    padding: 10px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--borde);
}
.submenu-vendedor a {
    padding: 10px 16px;
    background: var(--bg-elevado);
    border: 2px solid var(--borde);
    border-radius: 20px;
    text-decoration: none;
    color: var(--texto-suave);
    font-size: 0.85em;
    font-weight: 600;
    transition: all 0.2s;
}
.submenu-vendedor a:hover {
    border-color: var(--accent-naranja);
    color: var(--accent-naranja);
}
.submenu-vendedor a.activo {
    background: var(--accent-naranja);
    color: #0d2818 !important;
    border-color: var(--accent-naranja);
}

/* ===================== DETALLE DE PRODUCTO ===================== */
.detalle-producto {
    display: flex;
    gap: 24px;
    background: var(--bg-card);
    border: 2px solid var(--borde);
    padding: 24px;
    border-radius: 16px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.detalle-imagen {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 14px;
    background: var(--bg-elevado);
    border: 2px solid var(--borde);
}
.detalle-info { flex: 1; min-width: 260px; }
.precio-grande {
    font-size: 1.8em;
    font-weight: 800;
    color: var(--accent-naranja);
    margin: 14px 0;
}
.etiqueta-descuento {
    background: var(--rojo);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.6em;
    margin-left: 10px;
    vertical-align: middle;
    font-weight: 700;
}
.stock-disponible { color: var(--accent-verde); font-size: 0.9em; font-weight: 600; }
.sin-stock { color: var(--rojo); font-size: 0.9em; font-weight: 600; }

.lista-otros-vendedores {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.otro-vendedor-card {
    background: var(--bg-elevado);
    border: 2px solid var(--borde);
    padding: 12px 20px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--texto);
    font-weight: 600;
    transition: all 0.2s;
}
.otro-vendedor-card:hover {
    border-color: var(--accent-verde);
    color: var(--accent-verde);
}

/* ===================== CHAT DE PEDIDO ===================== */
.estado-pedido {
    background: var(--bg-card);
    border: 2px solid var(--borde);
    padding: 20px;
    border-radius: 14px;
    margin-top: 16px;
}
.acciones-pedido {
    display: flex;
    gap: 10px;
    margin: 16px 0;
    flex-wrap: wrap;
}
.chat-pedido {
    background: var(--bg-card);
    border: 2px solid var(--borde);
    padding: 16px;
    border-radius: 14px;
    margin-top: 16px;
}
.mensajes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 350px;
    overflow-y: auto;
    margin-bottom: 12px;
    padding: 10px;
    background: var(--bg-principal);
    border-radius: 10px;
}
.mensaje {
    background: var(--bg-card);
    border: 1px solid var(--borde);
    padding: 10px 14px;
    border-radius: 12px;
}
.mensaje-imagen {
    max-width: 180px;
    display: block;
    margin-top: 6px;
    border-radius: 8px;
}
.mensaje-fecha {
    font-size: 0.7em;
    color: var(--texto-suave);
    margin-left: 8px;
}
.form-mensaje {
    display: flex;
    gap: 8px;
}
.form-mensaje input {
    flex: 1;
    padding: 12px;
    border: 2px solid var(--borde);
    border-radius: 25px;
    background: var(--bg-principal);
    color: var(--texto);
}
.form-mensaje input:focus {
    border-color: var(--accent-verde);
    outline: none;
}
.form-mensaje button {
    padding: 12px 24px;
    background: var(--accent-naranja);
    color: #0d2818;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 700;
}

/* ===================== PERFIL ===================== */
.paneles-perfil {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
}

/* ===================== PRODUCTOS ADMIN/VENDEDOR ===================== */
.producto-card-admin {
    background: var(--bg-elevado);
    border: 2px solid var(--borde);
    padding: 14px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.producto-card-admin form { flex-direction: row !important; max-width: none !important; }
.acciones-inline { display: flex; gap: 8px; }

/* ===================== TARJETAS DE ESTADISTICA CON ICONO ===================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.stat-card {
    background: var(--bg-card);
    border: 2px solid var(--borde);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s;
}
.stat-card:hover {
    border-color: var(--accent-verde);
    transform: translateY(-3px);
}
.stat-icono {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    border: 2px solid var(--accent-verde);
}

.stat-icono-texto {
    font-size: 1.6em;
    line-height: 1;
    color: var(--accent-verde);
    font-weight: 700;
}
.stat-valor { font-size: 1.5em; font-weight: 800; line-height: 1.1; }
.stat-label { font-size: 0.75em; color: var(--texto-suave); margin-top: 2px; }

/* ===================== BANNER DE BIENVENIDA DE PANELES ===================== */
.banner-panel {
    background: linear-gradient(120deg, var(--bg-elevado), var(--bg-card));
    border: 2px solid var(--borde);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.banner-panel h1 {
    margin-bottom: 2px;
    border: none;
    padding: 0;
}
.banner-panel p { color: var(--texto-suave); font-size: 0.9em; }

/* ===================== FILAS DE PRODUCTO ===================== */
.producto-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border: 2px solid var(--borde);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    transition: all 0.2s;
}
.producto-fila:hover {
    border-color: var(--accent-verde);
}
.producto-fila img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--bg-elevado);
}
.producto-fila .sin-imagen-mini {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: var(--bg-elevado);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6em;
    color: var(--texto-suave);
    flex-shrink: 0;
    text-align: center;
}
.producto-fila-info { flex: 1; min-width: 160px; }
.producto-fila-info h3 { font-size: 0.95em; margin-bottom: 2px; }
.producto-fila-acciones { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.producto-fila-extra { flex-basis: 100%; margin-top: 8px; }

/* ===================== BOTON ADJUNTAR IMAGEN EN CHAT ===================== */
.boton-adjuntar {
    padding: 10px 14px;
    background: var(--bg-card);
    border: 2px solid var(--borde);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.boten-adjuntar:hover {
    border-color: var(--accent-naranja);
    background: var(--bg-hover);
}

/* ===================== CHAT ESTILO MESSENGER ===================== */
.fila-mensaje {
    display: flex;
    flex-direction: column;
    max-width: 75%;
}
.fila-derecha { align-self: flex-end; align-items: flex-end; }
.fila-izquierda { align-self: flex-start; align-items: flex-start; }

.burbuja {
    padding: 12px 16px;
    border-radius: 20px;
    font-size: 0.92em;
    line-height: 1.4;
    word-wrap: break-word;
    max-width: 100%;
}
.burbuja p { margin: 0; }
.burbuja-comprador {
    background: var(--accent-naranja);
    color: #0d2818;
    border-bottom-right-radius: 6px;
}
.burbuja-vendedor {
    background: var(--bg-card);
    border: 1px solid var(--borde);
    color: var(--texto);
    border-bottom-left-radius: 6px;
}
.burbuja .mensaje-imagen {
    max-width: 200px;
    display: block;
    margin-top: 6px;
    border-radius: 12px;
}

.hora-fuera {
    font-size: 0.65em;
    color: var(--texto-suave);
    margin-top: 4px;
    padding: 0 6px;
}

/* ===================== RESPONSIVE ===================== */

/* Helpers: desktop-only se oculta en mobile, mobile-only se oculta en
   desktop. Asi podemos tener layouts distintos segun el tamano sin
   duplicar contenido. */
.desktop-only { display: initial; }
.mobile-only { display: none; }

/* Link de login dentro del menu hamburguesa mobile. Por defecto oculto
   en desktop; en el @media (max-width: 900px) de abajo lo hacemos
   visible. Asi no se duplica con el boton "Iniciar sesion" del header
   (que ya tiene clase desktop-only). */
.menu-login-mobile { display: none; }

/* Boton que envuelve al avatar: clickable, abre menu de perfil.
   Visible siempre (mobile y desktop). */
.btn-avatar {
    background: transparent;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    position: relative;
    transition: border-color 0.2s ease;
    line-height: 0;
}
.btn-avatar:hover { border-color: var(--accent-naranja); }
.btn-avatar:focus { outline: none; border-color: var(--accent-naranja); }
.badge-avatar {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--accent-naranja, #22c55e);
    color: #0a0a0a;
    border-radius: 999px;
    padding: 1px 5px;
    font-size: 0.65em;
    font-weight: 800;
    border: 2px solid var(--bg-principal, #0a0a0a);
}

/* Badge rojo de pedidos compartidos esperando. Va al lado izquierdo
   del badge de mensajes (que esta en top-right) para que no se
   superpongan. Rojo porque es urgente: hay clientes que quieren
   comprar. Animacion sutil de pulse para llamar la atencion. */
.badge-pedidos-esperando {
    background: var(--rojo, #dc2626) !important;
    color: #fff !important;
    top: -2px;
    right: 14px;
    animation: pulse-rojo 1.6s ease-in-out infinite;
}
@keyframes pulse-rojo {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* Menu desplegable del perfil: aparece debajo del avatar al hacer click. */
.menu-perfil {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-card, #141414);
    border: 1px solid var(--borde, #2a2a2a);
    border-radius: 10px;
    min-width: 200px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    z-index: 200;
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.menu-perfil[hidden] { display: none !important; }
.menu-perfil-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--texto, #f0f0f0);
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}
.menu-perfil-item:hover {
    background: var(--bg-elevado, #0d0d0d);
    color: var(--accent-naranja, #22c55e);
}
.menu-perfil-cerrar {
    color: var(--rojo, #dc2626);
    border-top: 1px solid var(--borde, #2a2a2a);
    margin-top: 4px;
    padding-top: 12px;
}
.menu-perfil-cerrar:hover { color: var(--rojo, #dc2626); background: rgba(220, 38, 38, 0.1); }
.menu-perfil-form { margin: 0; }

/* Posicion relativa para que el menu-perfil se ancle al sesion-logueado. */
.sesion-logueado { position: relative; }

/* Helpers de visibilidad: .desktop-only se muestra en pantallas grandes
   y .mobile-only solo en pequenas. Los valores por defecto asumen
   desktop, y el breakpoint de 900px los invierte. */
.desktop-only { display: initial; }
.mobile-only { display: none; }

/* Selectores dentro del menu hamburguesa (mobile). Se ocultan en
   desktop porque ya estan en la cabecera. */
.selector-mobile { display: none; }

/* Boton hamburguesa: solo visible en pantallas pequenas. Las tres
   lineas se animan a una X cuando el menu esta abierto. */
.btn-menu {
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--bg-elevado);
    padding: 0;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.btn-menu span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--texto);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.btn-menu.activo span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.btn-menu.activo span:nth-child(2) {
    opacity: 0;
}
.btn-menu.activo span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Breakpoint 1: tablet pequena / pantallas medianas (901px-1100px).
   El header se comprime pero el menu sigue horizontal. */
@media (max-width: 1100px) {
    .buscador {
        max-width: 220px;
    }
    .selector-pago { display: none; }
    .sesion-link { font-size: 0.85em; padding: 6px 10px; }
}

/* Breakpoint 2: tablet y celular (<= 900px).
   Layout limpio y compacto:
   - Logo + carrito + avatar a la derecha + hamburguesa (orden claro)
   - Buscador en su propia fila (no satura la cabecera)
   - Selector de region/pago DENTRO del menu hamburguesa
   - Avatar abre un menu desplegable con perfil / vendedor / cerrar */
@media (max-width: 900px) {
    .contenido { padding: 0 14px; }

    /* En mobile ocultamos los elementos de desktop y mostramos los mobile */
    .desktop-only { display: none !important; }
    .mobile-only { display: initial; }

    /* Mostramos el link de login dentro del menu hamburguesa. */
    .menu-login-mobile {
        display: block;
        margin: 12px 16px;
        padding: 12px 18px;
        background: linear-gradient(90deg, var(--accent-naranja, #f97316) 0%, #ff8a3d 100%);
        color: #fff !important;
        text-align: center;
        font-weight: 700;
        border-radius: 10px;
        text-decoration: none;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 2px 8px rgba(249, 115, 22, 0.18);
    }
    .menu-login-mobile:hover { filter: brightness(1.06); }

    .cabecera-top {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 12px;
        align-items: center;
    }

    /* Orden: logo | buscador | (carrito, avatar, hamburguesa) a la derecha.
       El buscador va en una segunda fila (order 3) para no saturar. */
    .logo { flex: 0 0 auto; order: 1; }
    .buscador { order: 3; max-width: 100%; flex-basis: 100%; margin: 4px 0 0 0; }
    .selector-region-form { display: none; }
    .selector-pago { display: none; }
    .icono-carrito { order: 2; margin-left: auto; }
    .sesion-logueado { order: 2; }
    .sesion { order: 2; }
    .btn-menu { display: flex; order: 2; }

    .icono-carrito { width: 36px; height: 36px; }
    .icono-carrito svg { width: 24px; height: 24px; }

    .btn-menu { width: 38px; height: 38px; }

    /* Menu hamburguesa: oculto hasta que se abra. */
    .menu-horizontal {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px 0;
        background: var(--bg-card);
        border-top: 1px solid var(--borde);
        border-bottom: 1px solid var(--borde);
        animation: menu-desplegar 180ms ease-out;
    }
    .menu-horizontal.abierto { display: flex; }
    .menu-horizontal a {
        padding: 12px 18px;
        font-size: 0.95em;
        border-radius: 0;
        border-bottom: 1px solid var(--borde);
        text-align: left;
    }
    .menu-horizontal a:last-child { border-bottom: none; }
    .menu-horizontal a.activo {
        background: rgba(34, 197, 94, 0.08);
        border-left: 3px solid var(--accent-verde);
    }

    /* Bloque de selectores dentro del panel hamburguesa. */
    .selector-mobile {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px 18px;
        border-top: 1px solid var(--borde);
        margin-top: 6px;
    }
    .selector-mobile select {
        width: 100%;
        padding: 10px 12px;
        background: var(--bg-elevado, #0d0d0d);
        color: var(--texto, #f0f0f0);
        border: 1px solid var(--borde, #2a2a2a);
        border-radius: 8px;
        font-size: 0.95em;
        box-sizing: border-box;
    }
    .selector-mobile form { margin: 0; }

    @keyframes menu-desplegar {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .grid-productos {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .detalle-producto {
        flex-direction: column;
        padding: 16px;
    }
    .detalle-imagen {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
    }

    .fila-mensaje { max-width: 88%; }
    .burbuja .mensaje-imagen { width: 140px; }
    .mensajes { max-height: 280px; }

    .acciones-pedido { flex-direction: column; }
    .acciones-pedido form, .acciones-pedido a { width: 100%; }
    .boton-comprar, .boton-secundario { width: 100%; text-align: center; }
    .form-mensaje { flex-wrap: nowrap; }
    .form-mensaje input { min-width: 0; }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .submenu-vendedor {
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
        padding-bottom: 4px;
    }
    .submenu-vendedor a {
        flex: 0 0 auto;
        padding: 8px 12px;
    }

    .splash-logo { width: 140px; }
    .login-logo { width: 130px; }

    /* Menu de perfil en mobile: ocupa casi todo el ancho para que
       las opciones sean faciles de tocar con el dedo. */
    .menu-perfil {
        right: 0;
        left: auto;
        min-width: 180px;
        max-width: 240px;
        font-size: 0.95em;
    }
}

/* Breakpoint 3: celular pequeno. */
@media (max-width: 480px) {
    .grid-productos { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .producto-card { font-size: 0.85em; }
    .producto-card h3 { font-size: 0.95em; }
    .producto-info { padding: 8px 10px; }

    .cabecera-top { padding: 8px 10px; gap: 6px; }
    .logo img { width: 32px; height: 32px; }

    .icono-carrito { width: 32px; height: 32px; }
    .icono-carrito svg { width: 22px; height: 22px; }
    .btn-menu { width: 34px; height: 34px; }
    .btn-avatar .avatar-sm { width: 28px !important; height: 28px !important; }

    .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-card { padding: 12px; }
    .stat-icono { width: 40px; height: 40px; }
    .stat-valor { font-size: 1.25em; }

    .banner-panel h1 { font-size: 1.4em; }
    .banner-panel p { font-size: 0.85em; }

    h1 { font-size: 1.5em; }
    h2 { font-size: 1.15em; }

    /* En el celular mas chico el menu de perfil ocupa el ancho del
       header para que sea comodo tocar las opciones. */
    .menu-perfil {
        right: 8px;
        min-width: 200px;
        max-width: calc(100vw - 16px);
    }
}

/* ===================== REPORTES ===================== */

.reporte-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.reporte-tarjeta {
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s ease;
    min-width: 0; /* evita que el contenido rompa el grid en mobile */
}

@media (max-width: 600px) {
    .reporte-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .reporte-tarjeta {
        padding: 14px 12px;
    }
    .reporte-tarjeta .reporte-valor {
        font-size: 1.1em !important;
    }
}

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

.reporte-tarjeta:hover {
    border-color: var(--accent-verde);
}

.reporte-label {
    font-size: 0.85em;
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reporte-valor {
    font-size: 1.8em;
    font-weight: 600;
    color: var(--accent-verde);
}

.form-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.form-filtros label { margin-bottom: 4px; }
.form-filtros input { min-width: 180px; }

/* ===================== BOTÓN DE PELIGRO ===================== */

.boton-peligro {
    background: transparent;
    color: #ef4444;
    border: 1px solid #ef4444;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95em;
    transition: all 0.2s ease;
    display: inline-block;
}

.boton-peligro:hover {
    background: #ef4444;
    color: #fff;
}

.reportar-admin {
    margin-top: 12px;
}

.reportar-admin summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.reportar-admin summary::-webkit-details-marker { display: none; }

.form-reporte {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: 12px;
}

.form-reporte textarea {
    background: var(--bg-elevado);
    border: 1px solid var(--borde);
    color: var(--texto);
    border-radius: 8px;
    padding: 10px;
    font-family: inherit;
    resize: vertical;
}

/* ===================== MARCA DE AGUA ===================== */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url('/uploads/emblema-hellosaurio.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 55vmin;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}

.marca-agua {
    position: fixed;
    inset: 0;
    background-image: url('/uploads/emblema-hellosaurio.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 55vmin;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}

/* Logo grande en la pantalla de login, justo arriba del titulo */
.login-logo-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 16px auto;
    width: 100%;
    text-align: center;
}

.login-logo {
    display: block;
    margin: 0 auto;
    width: 180px;
    height: auto;
    filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.35));
}

/* ===================== SELECTOR DE IMAGEN (input file con preview) ===================== */

.selector-imagen-wrap {
    margin: 6px 0 10px 0;
}

/* Estado vacio: solo se ve un boton discreto "Elegir imagen". Sin
   icono, sin caja grande. */
.selector-imagen {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--bg-elevado);
    cursor: pointer;
    font-size: 0.85em;
    color: var(--texto-suave);
    transition: border-color 0.15s, color 0.15s;
}

.selector-imagen:hover {
    border-color: var(--accent-verde);
    color: var(--accent-verde);
}

.selector-imagen-icono,
.selector-imagen-texto {
    /* El icono y el texto extra estan ocultos: solo se usa el <label>
       como boton plano. El nombre del archivo se muestra abajo del
       preview cuando ya se eligio uno. */
    display: none;
}

/* Input real, pero invisible: cubre todo el label para que el click
   abra el selector de archivos del sistema. */
.selector-imagen input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Preview: solo se ve la imagen cuando hay archivo elegido. */
.selector-imagen-preview {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.selector-imagen-preview img {
    max-width: 280px;
    max-height: 200px;
    border-radius: 10px;
    border: 1px solid var(--borde);
    display: block;
    object-fit: cover;
    background: var(--bg-elevado);
}

.selector-imagen-quitar {
    background: transparent;
    border: 1px solid var(--borde);
    color: var(--texto-suave);
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8em;
    transition: border-color 0.15s, color 0.15s;
}

.selector-imagen-quitar:hover {
    border-color: var(--accent-naranja);
    color: var(--accent-naranja);
}

/* ===================== SPLASH DE CARGA ENTRE NAVEGACIONES ===================== */

.splash {
    position: fixed;
    inset: 0;
    background: #000;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
}

.splash.visible {
    display: flex;
    animation: splash-fade-in 180ms ease-out;
}

.splash-logo {
    width: 220px;
    height: auto;
    filter: drop-shadow(0 0 18px rgba(0, 255, 136, 0.5));
    animation: splash-blink 900ms ease-in-out infinite;
}

@keyframes splash-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes splash-blink {
    0%   { opacity: 1;    transform: scale(1); }
    50%  { opacity: 0.35; transform: scale(0.94); }
    100% { opacity: 1;    transform: scale(1); }
}

body > header,
body > footer,
main {
    position: relative;
    z-index: 1;
}

/* ===================== ESTRELLAS ANIMADAS TIPO OLA ===================== */

.estrellas {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}

.estrella {
    --relleno: 0%;
    width: 18px;
    height: 18px;
    position: relative;
    display: inline-block;
}

.estrella svg {
    width: 100%;
    height: 100%;
    display: block;
}

.estrella .fondo {
    fill: transparent;
    stroke: var(--texto-suave);
    stroke-width: 1.5;
}

.estrella .mascara {
    fill: var(--accent-verde, #22c55e);
    -webkit-clip-path: inset(0 calc(100% - var(--relleno)) 0 0);
    clip-path: inset(0 calc(100% - var(--relleno)) 0 0);
    filter: drop-shadow(0 0 2px rgba(34, 197, 94, 0.6));
    animation: ola 2.4s ease-in-out infinite alternate;
}

@keyframes ola {
    0%   { transform: translateY(-0.5px) scale(1); }
    50%  { transform: translateY(0.5px)  scale(1.06); }
    100% { transform: translateY(-0.5px) scale(1); }
}

/* delay en cascada para que la ola recorra las estrellas */
.estrella:nth-child(1) .mascara { animation-delay: 0s;    }
.estrella:nth-child(2) .mascara { animation-delay: 0.15s; }
.estrella:nth-child(3) .mascara { animation-delay: 0.30s; }
.estrella:nth-child(4) .mascara { animation-delay: 0.45s; }
.estrella:nth-child(5) .mascara { animation-delay: 0.60s; }

.estrellas-grandes .estrella { width: 28px; height: 28px; }
.estrellas-medianas .estrella { width: 18px; height: 18px; }

/* ===================== TARJETA DE VENDEDOR (en pedido-detalle) ===================== */

.tarjeta-vendedor {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    margin-top: 12px;
    background: var(--bg-elevado, #1a1f2b);
    border: 1px solid var(--borde, #2a2f3a);
    border-radius: 12px;
    flex-wrap: wrap;
}
.tarjeta-vendedor-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}
.tarjeta-vendedor-nombre {
    color: var(--accent-verde, #10b981);
    font-weight: 700;
    font-size: 1.05em;
    text-decoration: none;
}
.tarjeta-vendedor-nombre:hover {
    text-decoration: underline;
}
.tarjeta-vendedor-rol {
    color: var(--texto-suave, #8a92a5);
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tarjeta-vendedor-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.tarjeta-vendedor-promedio {
    color: var(--accent-naranja, #ff8c1a);
    font-weight: 700;
    font-size: 0.9em;
}
.tarjeta-vendedor-comentarios {
    color: var(--texto-suave, #8a92a5);
    font-size: 0.85em;
}

/* ===================== FORM COMPROBANTE (bonito) ===================== */

.form-comprobante {
    background: var(--bg-elevado, #1a1f2b);
    border: 1px solid var(--borde, #2a2f3a);
    border-radius: 12px;
    padding: 16px;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.form-comprobante label {
    font-weight: 600;
    color: var(--texto, #e6e8ee);
    margin-bottom: 4px;
}

.comprobante-vista {
    margin-top: 16px;
    padding: 14px;
    background: var(--bg-elevado, #1a1f2b);
    border: 1px solid var(--borde, #2a2f3a);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.comprobante-etiqueta {
    color: var(--texto-suave, #8a92a5);
    font-size: 0.85em;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.comprobante-vista a {
    display: inline-block;
    max-width: 320px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--borde, #2a2f3a);
    transition: transform 0.15s;
}
.comprobante-vista a:hover {
    transform: scale(1.02);
    border-color: var(--accent-verde, #10b981);
}
.comprobante-vista img {
    display: block;
    max-width: 100%;
    max-height: 320px;
    object-fit: cover;
    background: var(--bg-principal, #0f1320);
}

/* ===================== BOTON CANCELAR ===================== */

.cancelar-ayuda {
    display: block;
    color: var(--texto-suave, #8a92a5);
    font-size: 0.8em;
    margin-top: 4px;
    font-style: italic;
}

button.boton-peligro {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95em;
    transition: filter 0.15s;
}
button.boton-peligro:hover {
    filter: brightness(1.1);
}

/* Panel de "Cerrar sesion" dentro del perfil del cliente.
   Se diferencia del resto de los paneles con un acento rojo
   sutil (borde) para que el usuario entienda que es una accion
   destructiva (no guarda datos, te saca de la app). */
.panel-cerrar-sesion {
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.04);
}
.panel-cerrar-sesion h2 { color: #ef4444; }

/* Modal propio de confirmacion de logout. Reemplaza al feo
   confirm() del navegador. Solo se muestra para clientes
   (los vendedores y admins cierran sesion desde el menu
   del avatar en la cabecera). */
.confirm-logout-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}
.confirm-logout-overlay[hidden] { display: none; }
.confirm-logout-card {
    background: var(--bg-card, #141414);
    color: var(--texto, #f0f0f0);
    border: 1px solid var(--borde, #2a2a2a);
    border-radius: 14px;
    padding: 20px 22px;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.confirm-logout-card h3 {
    margin: 0 0 8px 0;
    font-size: 1.1em;
    color: #ef4444;
}
.confirm-logout-card p {
    margin: 0 0 18px 0;
    color: var(--texto-suave, #ccc);
    font-size: 0.95em;
    line-height: 1.4;
}
.confirm-logout-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.confirm-logout-cancelar {
    background: transparent;
    color: var(--texto, #f0f0f0);
    border: 1px solid var(--borde, #2a2a2a);
    padding: 9px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95em;
}
.confirm-logout-cancelar:hover { background: rgba(255, 255, 255, 0.05); }
.confirm-logout-aceptar {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #fff;
    border: 0;
    padding: 9px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95em;
}
.confirm-logout-aceptar:hover { filter: brightness(1.1); }
.confirm-logout-cancelar:disabled,
.confirm-logout-aceptar:disabled { opacity: 0.6; cursor: wait; }

/* ===================== LINEAS DE DATOS (Mis datos del perfil) =====================
   Cada dato se ve SIEMPRE con su valor. Un boton "Cambiar" expande
   el form de edicion (details/summary). Asi el usuario ve sus datos
   sin tener que hacer submit para nada. */
.dato-linea {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--borde-suave, #2a2f3a);
    flex-wrap: wrap;
}
.dato-linea:last-child {
    border-bottom: none;
}
.dato-info {
    flex: 1;
    min-width: 220px;
}
.dato-etiqueta {
    color: var(--texto-suave, #8a92a5);
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.dato-valor {
    color: var(--texto, #e6e8ee);
    font-size: 1.05em;
    font-weight: 600;
    word-break: break-word;
}
.dato-ayuda {
    color: var(--texto-suave, #8a92a5);
    font-size: 0.8em;
    margin-top: 4px;
}
.dato-editar {
    align-self: center;
}
.dato-editar summary {
    cursor: pointer;
    color: var(--accent-verde, #10b981);
    padding: 8px 14px;
    border: 1px solid var(--accent-verde, #10b981);
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 600;
    background: transparent;
    transition: background 0.15s;
    list-style: none;
    user-select: none;
}
.dato-editar summary::-webkit-details-marker {
    display: none;
}
.dato-editar summary:hover {
    background: rgba(16, 185, 129, 0.1);
}
.dato-editar[open] summary {
    background: var(--accent-verde, #10b981);
    color: #fff;
}
.dato-editar form {
    width: 100%;
    margin-top: 12px;
    padding: 14px;
    background: var(--bg-principal, #0f1320);
    border: 1px solid var(--borde, #2a2f3a);
    border-radius: 10px;
}

/* ===================== MENSAJE PROPIO PRODUCTO (vendedor) =====================
   Cuando el producto es del vendedor actual, en lugar de los botones
   "Comprar" / "Agregar al carrito" se muestra este cartel. */
.mensaje-propio {
    background: rgba(255, 140, 26, 0.08);
    border: 1px solid var(--accent-naranja, #ff8c1a);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 16px;
    color: var(--texto, #e6e8ee);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
.mensaje-propio p {
    margin: 0;
    color: var(--accent-naranja, #ff8c1a);
    font-weight: 600;
}

/* ===================== CHAT GRUPAL DE VENDEDORES =====================
   Layout: lista de grupos a la izquierda (como sidebar de chats) +
   conversacion a la derecha (tipo messenger). */

.grupos-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 16px;
    margin-top: 16px;
    align-items: start;
}
.grupos-lista {
    background: var(--bg-elevado, #1a1f2b);
    border: 1px solid var(--borde, #2a2f3a);
    border-radius: 12px;
    overflow: hidden;
    max-height: 70vh;
    overflow-y: auto;
}
.grupos-lista-titulo {
    padding: 14px 16px;
    color: var(--texto-suave, #8a92a5);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--borde, #2a2f3a);
    background: var(--bg-principal, #0f1320);
}
.grupo-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    color: var(--texto, #e6e8ee);
    text-decoration: none;
    border-bottom: 1px solid var(--borde, #2a2f3a);
    transition: background 0.15s;
}
.grupo-item:hover {
    background: rgba(16, 185, 129, 0.08);
}
.grupo-item-activo {
    background: rgba(16, 185, 129, 0.15);
    border-left: 3px solid var(--accent-verde, #10b981);
    padding-left: 13px;
}
.grupo-item small {
    color: var(--texto-suave, #8a92a5);
    font-size: 0.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* (Clases .grupo-chat / .fila-mensaje-grupo / .burbuja-grupo
   eliminadas: el chat de grupos ahora usa el mismo estilo
   Messenger que el chat de pedidos: .chat-messenger +
   .fila-mensaje + .fila-izquierda / .fila-derecha. Las
   variantes de color de la burbuja en grupos son
   .burbuja-mia (naranja, mis mensajes) y .burbuja-otros
   (gris, mensajes de los demas).) */
@media (max-width: 900px) {
    .grupos-layout {
        grid-template-columns: 1fr;
    }
    .grupos-lista {
        max-height: 240px;
    }
}

/* ===================== LAYOUT HORIZONTAL PEDIDO (chat + lateral) =====================
   En pantallas anchas el chat va a la izquierda y la columna con
   comprobante / calificacion a la derecha. En pantallas chicas cae a
   vertical para no romper nada. */
.pedido-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap: 16px;
    margin-top: 16px;
    align-items: start;
}
.pedido-col-izq {
    min-width: 0; /* permite que el chat haga overflow-x scroll si hay
                     mensajes con imagenes muy anchas */
}
.pedido-col-der {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 12px;
}
@media (max-width: 900px) {
    .pedido-layout {
        grid-template-columns: 1fr;
    }
    .pedido-col-der {
        position: static;
    }
}

/* ===================== STOCK POR VENDEDOR (producto-detalle) =====================
   Bloque que aparece en la cabecera del producto cuando hay varios
   vendedores. Muestra "Stock de denisaurio: 3" y abajo un link por
   cada otro vendedor con su stock y precio, para que el comprador
   pueda cambiar de vendedor con un click. */
.stock-por-vendedor-lista {
    margin: 4px 0 12px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stock-por-vendedor-item {
    margin: 0;
    padding: 0;
}
.stock-link-vendedor {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--bg-elevado);
    border: 1px solid var(--borde);
    color: var(--texto);
    text-decoration: none;
    font-size: 0.88em;
    transition: all 0.15s ease;
    flex-wrap: wrap;
}
.stock-link-vendedor:hover {
    border-color: var(--accent-verde);
    background: rgba(34, 197, 94, 0.06);
    transform: translateX(2px);
}
.stock-link-vendedor strong {
    color: var(--accent-verde);
    font-weight: 700;
}
.stock-link-vendedor small {
    color: var(--texto-suave);
    font-size: 0.85em;
}

/* Flecha indicadora "›" al final de cada tarjeta de "otros
   vendedores" para que se vea que son clickeables. */
.otro-vendedor-ir {
    color: var(--accent-verde);
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1;
    align-self: center;
    margin-left: 8px;
    opacity: 0.6;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.otro-vendedor-card:hover .otro-vendedor-ir {
    transform: translateX(3px);
    opacity: 1;
}

/* ===================== COMPRA CANCELADA (perfil) =====================
   Diferenciamos visualmente los pedidos cancelados en "Mis compras"
   del perfil. No cuentan para tickets, ni para subir foto, ni para
   el total gastado. Solo aparecen en el historial con un estilo
   atenuado para que el usuario sepa que esa compra no fue efectiva. */
.pedido-card.compra-cancelada {
    opacity: 0.65;
    border-style: dashed;
}
.pedido-card.compra-cancelada:hover {
    opacity: 0.9;
}

/* ===================== MODAL DE CONFIRMACION =====================
   Modal tematico (oscuro con borde verde/naranja) que reemplaza al
   confirm() nativo del navegador. Es invocado automaticamente por
   cualquier <form onsubmit="return confirm('...');"> mediante
   confirm-modal.js. Asi no se ve mas el cuadro gris de "localhost". */
.confirm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    padding: 16px;
}
.confirm-modal-overlay.confirm-modal-visible {
    opacity: 1;
    pointer-events: auto;
}
.confirm-modal-caja {
    background: var(--bg-card);
    border: 2px solid var(--borde);
    border-radius: 16px;
    padding: 24px 22px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    transform: translateY(-12px) scale(0.98);
    transition: transform 0.18s ease;
}
.confirm-modal-overlay.confirm-modal-visible .confirm-modal-caja {
    transform: translateY(0) scale(1);
}
.confirm-modal-titulo {
    color: var(--accent-verde);
    margin: 0 0 12px 0;
    font-size: 1.2em;
    font-weight: 700;
}
.confirm-modal-texto {
    color: var(--texto);
    line-height: 1.5;
    margin: 0 0 22px 0;
    font-size: 0.98em;
    word-wrap: break-word;
}
.confirm-modal-acciones {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.confirm-modal-btn {
    padding: 10px 18px;
    border-radius: 10px;
    border: 2px solid var(--borde);
    background: var(--bg-elevado);
    color: var(--texto);
    font-weight: 600;
    font-size: 0.95em;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.confirm-modal-btn:hover {
    border-color: var(--accent-verde);
    color: var(--accent-verde);
}
.confirm-modal-btn-aceptar {
    background: var(--accent-naranja);
    color: #0a0a0a;
    border-color: var(--accent-naranja);
}
.confirm-modal-btn-aceptar:hover {
    background: var(--accent-naranja-hover);
    color: #0a0a0a;
    border-color: var(--accent-naranja-hover);
    transform: translateY(-1px);
}
.confirm-modal-btn-aceptar.confirm-modal-btn-peligro {
    background: var(--rojo, #dc2626);
    border-color: var(--rojo, #dc2626);
    color: #ffffff;
}
.confirm-modal-btn-aceptar.confirm-modal-btn-peligro:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}
.confirm-modal-btn:focus-visible {
    outline: 2px solid var(--accent-verde);
    outline-offset: 2px;
}

/* ===================== INPUTS / SELECTS / TEXTAREAS =====================
   Regla GLOBAL para que CUALQUIER input, select o textarea de la pagina
   tenga el color del tema (oscuro, no blanco). Asi si alguien mete un
   form dentro de <main class="contenido"> sin envolverlo en .panel o
   .contenido-auth, no termina con una casilla blanca fuera de tono.
   Los .contenido-auth usan su propio estilo (casillas claras) y van
   despues con especificidad mayor. */
input:not([type=hidden]):not([type=submit]):not([type=button]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=image]),
select,
textarea {
    padding: 11px 12px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--bg-elevado);
    color: var(--texto);
    font-family: inherit;
    font-size: 0.95em;
    transition: border-color 0.2s;
}
input:not([type=hidden]):not([type=submit]):not([type=button]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=image]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-verde);
}
select option {
    background: var(--bg-elevado);
    color: var(--texto);
}

/* ===================== INPUT CANTIDAD ===================== */

.cantidad-input {
    width: 80px;
    padding: 10px 12px;
    /* Fondo blanco + texto negro SIEMPRE, para que la cantidad que
       escribe el usuario (ej. "2") se vea bien sobre cualquier fondo.
       Antes usaba --texto (blanco en tema oscuro) y quedaba invisible
       sobre los fondos claros de algunas paginas. */
    background: #ffffff;
    border: 1px solid var(--borde);
    border-radius: 10px;
    color: #000000;
    font-size: 0.95em;
    text-align: center;
    font-weight: 600;
    transition: border-color 0.2s ease;
}

.cantidad-input:focus {
    outline: none;
    border-color: var(--accent-verde);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
}

.cantidad-input:hover {
    border-color: var(--accent-verde);
}

/* Quitamos las flechitas nativas (spinner) del input number: en
   Chrome se ven como dos circulos blancos invisibles sobre el
   fondo blanco del input. El usuario puede escribir la cantidad
   directamente, o usar los botones +/- que tenemos en el HTML. */
.cantidad-input::-webkit-outer-spin-button,
.cantidad-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cantidad-input[type=number] {
    -moz-appearance: textfield;
}

.boton-actualizar {
    background: transparent;
    color: var(--accent-verde);
    border: 1px solid var(--accent-verde);
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s ease;
}

.boton-actualizar:hover {
    background: var(--accent-verde);
    color: var(--bg-principal);
}

/* ===================== MENSAJES CENTRADOS (errores, ok, etc.) ===================== */

.mensaje-error,
.mensaje-exito {
    max-width: 600px;
    margin: 24px auto;
    padding: 18px 24px;
    border-radius: 14px;
    text-align: center;
    font-weight: 600;
    font-size: 1em;
    background: var(--bg-card);
    border: 1px solid var(--borde);
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

.mensaje-error {
    color: #ef4444;
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.mensaje-exito {
    color: var(--accent-verde);
    border-color: var(--accent-verde);
    background: rgba(34, 197, 94, 0.06);
}

.loyalty-precio {
    color: var(--accent-verde);
    font-weight: 700;
}

.precio-total {
    color: var(--accent-verde);
    font-weight: 700;
}

/* ========== Avatar circular (foto de perfil) ========== */
.avatar-circulo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
    user-select: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    vertical-align: middle;
}
.avatar-circulo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.avatar-xs { width: 28px; height: 28px; font-size: 0.75em; }
.avatar-sm { width: 36px; height: 36px; font-size: 0.9em; }
.avatar-md { width: 48px; height: 48px; font-size: 1.1em; }
.avatar-lg { width: 80px; height: 80px; font-size: 1.8em; }
.avatar-xl { width: 96px; height: 96px; font-size: 2.2em; }

/* Boton que envuelve al avatar y muestra un lapiz de "editar".
     Usado en el perfil cuando el usuario YA puede subir foto:
     al hacer click abre el cropper. */
.avatar-clickable {
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.avatar-clickable:hover { transform: scale(1.04); }
.avatar-clickable:hover .avatar-lapiz { opacity: 1; }
.avatar-lapiz {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-naranja, #f97316);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

/* ===========================================================
   Aviso de "registra tu telefono".
   Es un banner que se pega debajo de la cabecera, NO un modal
   que tape la pantalla. El usuario lo cierra con la X y el flag
   se persiste para que NO vuelva a salir en futuras sesiones.
   =========================================================== */
.aviso-telefono {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
    border-bottom: 1px solid rgba(34, 197, 94, 0.35);
    color: var(--texto, #f0f0f0);
    font-size: 0.92em;
    flex-wrap: wrap;
}
.aviso-telefono-texto {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.aviso-telefono-texto strong { color: var(--accent-naranja, #22c55e); }
.aviso-telefono-texto span { color: var(--texto-suave, #ccc); font-size: 0.92em; }
.aviso-telefono-accion {
    background: var(--accent-naranja, #22c55e);
    color: #0a0a0a;
    text-decoration: none;
    padding: 7px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9em;
    white-space: nowrap;
}
.aviso-telefono-accion:hover { filter: brightness(1.08); }
.aviso-telefono-cerrar {
    background: transparent;
    border: 0;
    color: var(--texto, #f0f0f0);
    font-size: 1.4em;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
}
.aviso-telefono-cerrar:hover { background: rgba(255,255,255,0.08); }

@media (max-width: 600px) {
    .aviso-telefono { padding: 8px 12px; font-size: 0.85em; gap: 8px; }
    .aviso-telefono-texto { min-width: 0; }
    .aviso-telefono-accion { padding: 6px 10px; font-size: 0.82em; }
}

/* (Clases .modal-telefono* eliminadas: el HTML del layout ahora usa
   un banner (.aviso-telefono) en lugar del modal. Se borran estos
   estilos para que no queden reglas huerfanas que puedan pisar
   el banner.) */
.cropper-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}
.cropper-modal[hidden] { display: none; }
.cropper-modal-card {
    background: var(--bg-card, #1a1a1a);
    color: var(--texto, #f0f0f0);
    border-radius: 14px;
    max-width: 480px;
    width: 100%;
    padding: 18px 18px 14px 18px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    border: 1px solid var(--borde, #2a2a2a);
}
.cropper-modal-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.cropper-modal-cabecera h3 { margin: 0; font-size: 1.1em; }
.cropper-cerrar {
    background: transparent;
    border: 0;
    color: var(--texto, #f0f0f0);
    font-size: 1.6em;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
}
.cropper-cerrar:hover { background: rgba(255,255,255,0.06); }

.cropper-paso { margin: 8px 0 12px 0; }

/* El input file nativo es horrible y rompe el estilo del modal.
     Lo escondemos y disparamos su click desde el boton
     "Seleccionar archivo" (#cropper-elegir-btn). Asi el usuario
     ve solo el boton con el mismo estilo que el "Cancelar". */
.cropper-input-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cropper-elegir-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.cropper-archivo-nombre {
    color: var(--texto-suave, #888);
    font-size: 0.9em;
    /* Si el nombre es muy largo, lo cortamos con "..." para que no
       rompa el layout en mobile. */
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Marco cuadrado que contiene al canvas. Adentro va un overlay
   que oscurece todo lo que NO esta dentro del circulo. */
.cropper-marco-cuadrado {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 400px;
    margin: 0 auto;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    touch-action: none; /* para que el touchmove no haga scroll */
}
.cropper-marco-cuadrado canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
}
.cropper-marco-cuadrado canvas:active { cursor: grabbing; }

/* Overlay: deja visible solo el area circular. Se hace con
   box-shadow inset en el circulo (un "agujero" sobre el fondo
   oscurecido). */
.cropper-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.55);
    /* Un "agujero" circular en el medio via mask. Asi el usuario
       ve EXACTAMENTE que va a quedar de su foto. */
    --circulo: radial-gradient(circle at center, transparent 45%, black 45.5%);
    -webkit-mask-image: var(--circulo);
            mask-image: var(--circulo);
}
/* Borde del circulo (anillo visible). Va por encima del overlay. */
.cropper-overlay::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 90%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.7);
    pointer-events: none;
}

.cropper-modal-pie {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}
.cropper-btn-principal {
    background: var(--accent-naranja, #f97316);
    color: #fff;
    border: 0;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}
.cropper-btn-principal:hover { filter: brightness(1.1); }
.cropper-btn-principal:disabled { opacity: 0.6; cursor: wait; }
.cropper-btn-secundario {
    background: transparent;
    color: var(--texto, #f0f0f0);
    border: 1px solid var(--borde, #2a2a2a);
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
}
.cropper-btn-secundario:hover { background: rgba(255,255,255,0.04); }

@media (max-width: 480px) {
    .cropper-modal-card { padding: 14px; }
    .cropper-modal-cabecera h3 { font-size: 1em; }
}

.icono-perfil .avatar-circulo {
    border: 2px solid var(--borde, #2a2f3a);
}

/* Avatar al lado de cada burbuja del chat.
   Estilo Messenger: avatar redondo mas grande y cerca de la
   burbuja, fila a la derecha con flex-direction:row-reverse
   para que el avatar quede a la derecha de la burbuja y la
   burbuja quede del lado interno de la pantalla. */
.chat-messenger .fila-mensaje {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 4px;
    max-width: 80%;
    margin-top: 4px;
}
.chat-messenger .fila-izquierda { align-self: flex-start; }
.chat-messenger .fila-derecha  { align-self: flex-end; flex-direction: row-reverse; }
.chat-messenger .fila-derecha .avatar-circulo  { margin-left: 0; }
.chat-messenger .fila-izquierda .avatar-circulo { margin-right: 0; }

/* ========== Chat tipo Messenger (FASE 11) ========== */
.chat-messenger {
    display: flex;
    flex-direction: column;
    height: 520px;
    max-height: 70vh;
    border: 1px solid var(--borde);
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-card);
    margin-top: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--primary), var(--primary-2, var(--primary)));
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.chat-header h3 { margin: 0; font-size: 1.05em; font-weight: 600; }
.chat-header small { opacity: 0.85; font-size: 0.8em; }
.chat-header img.chat-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.3);
    background: #fff;
}

.chat-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--bg-page, #0f1115);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-messenger .fila-mensaje {
    /* La regla "avatar al lado" de la linea 2487 ya define
       display:flex + flex-direction:row + max-width:80%. Esta
       linea estaba redefiniendo todo a column/75% y rompia
       el row-reverse de la fila derecha. No la duplicamos:
       dejamos que la primera regla gane y solo limitamos el
       ancho de la burbuja interna para que no ocupe toda la
       fila. */
    max-width: 80%;
}
.chat-messenger .fila-izquierda { align-self: flex-start; }
.chat-messenger .fila-derecha  { align-self: flex-end; }

/* ============================================================
   Burbujas del chat estilo Messenger.
   - Radio grande y uniforme (18px) en las 4 esquinas: la forma
     base es un "pastilla" bien circular.
   - La "colita" hacia el avatar se logra achicando el radio
     SOLO en la esquina que apunta al avatar (esquina pegada al
     avatar, NO la esquina inferior como estaba antes, que era
     el bug visual que reportaste).
   - Cada variante (.burbuja-comprador / .burbuja-vendedor /
     .burbuja-mia / .burbuja-otros) tiene su propio "lado" de
     colita segun la fila en la que aparece.
   ============================================================ */
.chat-messenger .burbuja {
    position: relative;
    padding: 9px 14px;
    border-radius: 18px;
    word-wrap: break-word;
    line-height: 1.35;
    font-size: 0.95em;
    box-shadow: 0 1px 1px rgba(0,0,0,0.18);
}

/* Burbuja del COMPRADOR en el chat de pedidos (lado derecho). */
.chat-messenger .burbuja-comprador {
    background: var(--accent, #2563eb);
    color: #fff;
    /* Esquina inferior-derecha mas chiquita = colita hacia el
       avatar que esta a la derecha. */
    border-bottom-right-radius: 6px;
}

/* Burbuja del VENDEDOR en el chat de pedidos (lado izquierdo). */
.chat-messenger .burbuja-vendedor {
    background: var(--bg-card, #1a1d24);
    color: var(--text, #e5e7eb);
    border: 1px solid var(--borde, #2a2f3a);
    /* Esquina inferior-izquierda mas chiquita = colita hacia el
       avatar que esta a la izquierda. */
    border-bottom-left-radius: 6px;
}

/* Burbuja "mia" en grupos de vendedores (lado derecho,
   color naranja de marca). */
.chat-messenger .burbuja-mia {
    background: var(--accent-naranja, #f97316);
    color: #0a0a0a;
    border-bottom-right-radius: 6px;
}

/* Burbuja de otro vendedor en grupos (lado izquierdo, gris). */
.chat-messenger .burbuja-otros {
    background: var(--bg-card, #1a1d24);
    color: var(--text, #e5e7eb);
    border: 1px solid var(--borde, #2a2f3a);
    border-bottom-left-radius: 6px;
}

/* Margen interior para que la "colita" no quede pegada al
   siguiente mensaje: lo da el gap de .chat-scroll (6px) que ya
   existe. Si queres mas aire, subilo ahi. */
.chat-messenger .burbuja-nombre {
    display: block;
    font-size: 0.72em;
    opacity: 0.75;
    margin-bottom: 2px;
    font-weight: 600;
}
.chat-messenger .burbuja p {
    margin: 0;
    white-space: pre-wrap;
}
.chat-messenger .mensaje-imagen {
    display: block;
    max-width: 220px;
    max-height: 220px;
    border-radius: 8px;
    margin-top: 4px;
    object-fit: cover;
}
.chat-messenger .hora-fuera {
    font-size: 0.7em;
    color: var(--texto-suave, #888);
    margin-top: 2px;
    padding: 0 4px;
}

.chat-messenger .form-mensaje {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--borde, #2a2f3a);
    background: var(--bg-card, #1a1d24);
}
.chat-messenger .form-mensaje input[type="text"] {
    flex: 1;
    padding: 9px 14px;
    border: 1px solid var(--borde, #2a2f3a);
    border-radius: 20px;
    background: var(--bg-page, #0f1115);
    color: var(--text, #e5e7eb);
    font-size: 0.95em;
    outline: none;
}
.chat-messenger .form-mensaje input[type="text"]:focus {
    border-color: var(--accent, #2563eb);
}
.chat-messenger .boton-adjuntar {
    cursor: pointer;
    font-size: 1.2em;
    padding: 6px 8px;
    user-select: none;
}
.chat-messenger .form-mensaje button {
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    background: var(--accent, #2563eb);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.chat-messenger .form-mensaje button:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 600px) {
    .chat-messenger { height: 480px; }
    .chat-messenger .fila-mensaje { max-width: 88%; }
}
}

/* ===== Contador regresivo de 30 min para ticket gratis ===== */
.contador-30min {
    border-radius: 10px;
    padding: 14px 18px;
    margin-top: 12px;
    color: var(--texto, #f0f0f0);
}
.contador-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.contador-label {
    color: var(--texto-suave, #888);
    font-size: 0.85em;
}
.contador-tiempo {
    color: var(--accent-naranja, #22c55e);
    font-weight: 800;
    font-size: 1.4em;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}
.contador-barra {
    height: 6px;
    background: var(--bg-elevado, #0d0d0d);
    border-radius: 999px;
    overflow: hidden;
}
.contador-barra-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-naranja, #22c55e) 0%, var(--accent-amarillo, #eab308) 100%);
    border-radius: 999px;
    transition: width 0.5s linear;
}
.contador-detalle {
    color: var(--texto-suave, #888);
    font-size: 0.78em;
    margin: 8px 0 0 0;
    line-height: 1.4;
}

/* ===================== METODOS DE PAGO DEL VENDEDOR =====================
   Tarjetas de cada MetodoPagoVendedor registrado. Muestran texto,
   QR (imagen) y descripcion en bloques separados. La imagen se ve
   en miniatura con link a su version real. */
.metodo-pago-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px;
    margin-bottom: 12px;
    background: var(--bg-tarjeta, #161616);
    border: 1px solid var(--borde, #2a2a2a);
    border-radius: 10px;
    flex-wrap: wrap;
}
.metodo-pago-tipo {
    flex-shrink: 0;
    min-width: 110px;
}
.metodo-pago-tipo strong {
    display: inline-block;
    padding: 4px 10px;
    background: var(--accent-naranja, #22c55e);
    color: #0d0d0d;
    border-radius: 999px;
    font-size: 0.85em;
    letter-spacing: 0.5px;
}
.metodo-pago-info {
    flex: 1 1 320px;
    min-width: 0;
}
.metodo-pago-info p {
    margin: 4px 0;
    font-size: 0.92em;
}
.metodo-pago-etiqueta {
    color: var(--texto-suave, #888);
    font-weight: 600;
    margin-right: 6px;
    font-size: 0.85em;
}
.metodo-pago-qr {
    margin-top: 8px;
}
.metodo-pago-qr img {
    max-width: 160px;
    max-height: 160px;
    border-radius: 8px;
    border: 1px solid var(--borde, #2a2a2a);
    display: block;
    margin-top: 4px;
}
.metodo-pago-descripcion {
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--texto, #f0f0f0);
}

/* ===================== BOTON PASAR METODO DE PAGO EN CHAT =====================
   Boton que el vendedor pulsa para mandar al cliente la info de su
   metodo de pago (texto + QR + descripcion) en un solo paso. */
.boton-pasar-pago {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #0d0d0d;
    border: none;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95em;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    width: 100%;
    margin-top: 8px;
}
.boton-pasar-pago:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.5);
}
.boton-pasar-pago:active {
    transform: translateY(0);
}
.form-pasar-info-pago {
    padding: 10px 12px;
    border-top: 1px solid var(--borde, #2a2a2a);
    background: rgba(34, 197, 94, 0.04);
}

/* ===================== LIGHTBOX DE IMAGENES DEL CHAT =====================
   Overlay negro semitransparente que muestra cualquier imagen del chat
   (comprobante, QR, fotos) en grande. Click fuera o la X lo cierra. */
.chat-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 24px;
    animation: chat-lightbox-fade 0.15s ease-out;
}
.chat-lightbox[hidden] {
    display: none;
}
@keyframes chat-lightbox-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.chat-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    background: #0d0d0d;
}
.chat-lightbox-cerrar {
    position: absolute;
    top: 18px;
    right: 22px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.chat-lightbox-cerrar:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.05);
}
.mensaje-imagen-clickable {
    cursor: zoom-in;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.mensaje-imagen-clickable:hover {
    opacity: 0.92;
    transform: scale(1.01);
}