/* ==========================================================
   STARPOINT - CSS GLOBAL
   LIQUID GLASS + NEUMÓRFICO
   RESPONSIVE + ANIMACIONES
========================================================== */


/* ==========================================================
   VARIABLES
========================================================== */

:root {

    --bg-color: #e0e5ec;

    --glass: rgba(255, 255, 255, .44);
    --glass-hover: rgba(255, 255, 255, .58);
    --glass-active: rgba(210, 220, 235, .46);

    --shadow-light: #ffffff;
    --shadow-dark: #a3b1c6;

    --azul: #2563eb;
    --azul-oscuro: #1e40af;

    --texto: #2d3748;
    --gris: #64748b;

    --rojo: #e11d48;
    --verde: #16a34a;

    --blanco: #ffffff;

    --sombra:
        8px 8px 16px var(--shadow-dark),
        -8px -8px 16px var(--shadow-light);

    --sombra-card:
        10px 10px 25px rgba(163,177,198,.40),
        -8px -8px 20px rgba(255,255,255,.75);

    --sombra-inset:
        inset 5px 5px 10px rgba(163,177,198,.50),
        inset -5px -5px 10px rgba(255,255,255,.75);

    --radio: 16px;

    --transicion: .25s ease;
}


/* ==========================================================
   RESET
========================================================== */

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

html {
    scroll-behavior: smooth;
}

body {

    min-height: 100vh;

    font-family: Arial, sans-serif;

    color: var(--texto);

    background:

        radial-gradient(
            circle at 10% 10%,
            rgba(37,99,235,.10),
            transparent 30%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(6,182,212,.10),
            transparent 30%
        ),

        var(--bg-color);

    background-attachment: fixed;
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font-family: inherit;
}


/* ==========================================================
   ANIMACIONES
========================================================== */

@keyframes aparecer {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes aparecerSuave {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes subir {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes pulsar {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1);
    }
}


@keyframes girar {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================
   LOGO
========================================================== */

.logo {

    font-size: 24px;

    font-weight: 800;

    color: var(--texto);

    text-decoration: none;
}

.logo span {

    color: var(--azul);
}

.estrella {

    margin-right: 3px;
}


/* ==========================================================
   TOPBAR - LIQUID GLASS
========================================================== */

.topbar {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    height: 75px;

    display: flex;

    align-items: center;

    padding: 0 30px;

    z-index: 1000;

    background: rgba(224,229,236,.55);

    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);

    border-bottom:
        1px solid rgba(255,255,255,.60);

    box-shadow:
        0 5px 20px rgba(163,177,198,.35);

    animation: aparecerSuave .5s ease;
}


/* ==========================================================
   USUARIO TOP
========================================================== */

.usuario-top {

    margin-left: auto;

    display: flex;

    align-items: center;

    gap: 10px;

    font-weight: 700;
}


.usuario-icono {

    width: 40px;
    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    color: var(--azul);

    background: var(--glass);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border:
        1px solid rgba(255,255,255,.60);

    box-shadow:
        5px 5px 12px rgba(163,177,198,.40),
        -4px -4px 10px rgba(255,255,255,.75);
}


/* ==========================================================
   BUSCADOR
========================================================== */

.busqueda {

    flex: 1;

    max-width: 600px;

    margin: 0 auto;

    position: relative;
}


.busqueda input,
.search {

    width: 100%;

    border: 1px solid rgba(255,255,255,.55);

    outline: none;

    background: rgba(255,255,255,.28);

    color: var(--texto);

    padding: 14px 20px 14px 45px;

    border-radius: 16px;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow: var(--sombra-inset);

    transition: var(--transicion);
}


.busqueda input:focus,
.search:focus {

    border-color: rgba(37,99,235,.35);

    box-shadow:
        var(--sombra-inset),
        0 0 0 2px rgba(37,99,235,.25);
}


.icono-busqueda {

    position: absolute;

    left: 16px;

    top: 50%;

    transform: translateY(-50%);

    z-index: 2;
}


/* ==========================================================
   SIDEBAR - LIQUID GLASS
========================================================== */

.sidebar {

    position: fixed;

    left: 0;
    top: 0;
    bottom: 0;

    width: 240px;

    height: 100vh;

    padding: 30px 15px;

    z-index: 900;

    overflow-y: auto;

    background: rgba(224,229,236,.48);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    border-right:
        1px solid rgba(255,255,255,.60);

    box-shadow:
        6px 0 20px rgba(163,177,198,.30);

    animation: aparecerSuave .5s ease;
}


.sidebar * {
    box-sizing: border-box;
}


/* ==========================================================
   LOGO SIDEBAR
========================================================== */

.sidebar .logo {

    display: block;

    text-align: center;

    margin-bottom: 35px;
}


/* ==========================================================
   TÍTULO MENÚ
========================================================== */

.menu-titulo {

    font-size: 11px;

    color: var(--gris);

    font-weight: bold;

    margin: 0 10px 15px;

    letter-spacing: 1px;
}


/* ==========================================================
   BOTONES DEL MENÚ
========================================================== */

.menu-item,
.sidebar > a {

    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    min-height: 48px;

    padding: 13px 16px;

    margin-bottom: 12px;

    text-decoration: none;

    color: var(--texto);

    border-radius: 16px;

    font-weight: 600;

    font-size: 14px;

    cursor: pointer;

    background: var(--glass);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border:
        1px solid rgba(255,255,255,.55);

    /* RELIEVE NORMAL */

    box-shadow:
        7px 7px 14px rgba(163,177,198,.45),
        -5px -5px 12px rgba(255,255,255,.75),
        inset 1px 1px 2px rgba(255,255,255,.65);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        color .18s ease;
}


/* ==========================================================
   HOVER
========================================================== */

.menu-item:hover,
.sidebar > a:hover {

    color: var(--azul);

    transform: translateY(-2px);

    background: var(--glass-hover);

    box-shadow:
        8px 8px 17px rgba(163,177,198,.40),
        -6px -6px 14px rgba(255,255,255,.80),
        inset 1px 1px 3px rgba(255,255,255,.75);
}


/* ==========================================================
   AL PRESIONAR
   EFECTO DE BOTÓN HUNDIDO
========================================================== */

.menu-item:active,
.sidebar > a:active {

    transform:
        translateY(2px)
        scale(.97);

    background: var(--glass-active);

    box-shadow:
        inset 6px 6px 12px rgba(163,177,198,.55),
        inset -5px -5px 10px rgba(255,255,255,.70);

    transition: .08s ease;
}


/* ==========================================================
   BOTÓN DE LA PÁGINA ACTUAL
========================================================== */

.menu-item.activo,
.sidebar > a.activo {

    color: var(--azul);

    background: rgba(255,255,255,.30);

    box-shadow:
        inset 5px 5px 10px rgba(163,177,198,.42),
        inset -4px -4px 9px rgba(255,255,255,.75);

    transform: none;

    font-weight: 800;
}


/* ==========================================================
   PRESIONAR BOTÓN ACTIVO
========================================================== */

.menu-item.activo:active,
.sidebar > a.activo:active {

    transform:
        scale(.97);

    box-shadow:
        inset 7px 7px 13px rgba(163,177,198,.55),
        inset -4px -4px 9px rgba(255,255,255,.65);
}


/* ==========================================================
   INACTIVOS
========================================================== */

.menu-item:not(.activo),
.sidebar > a:not(.activo) {

    color: var(--texto);
}


/* ==========================================================
   LOGOUT
========================================================== */

.menu-item.logout,
.sidebar > a.logout {

    color: var(--rojo);

    margin-top: 20px;
}


/* ==========================================================
   BOTÓN MENÚ MÓVIL
========================================================== */

.menu-btn {

    border:
        1px solid rgba(255,255,255,.55);

    width: 42px;
    height: 42px;

    border-radius: 14px;

    background: var(--glass);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    color: var(--texto);

    box-shadow:
        6px 6px 13px rgba(163,177,198,.40),
        -5px -5px 11px rgba(255,255,255,.75);

    cursor: pointer;

    font-size: 22px;

    display: none;

    align-items: center;
    justify-content: center;

    transition: .18s ease;
}


.menu-btn:hover {

    color: var(--azul);

    transform: translateY(-2px);
}


.menu-btn:active {

    transform: scale(.94);

    box-shadow: var(--sombra-inset);
}


/* ==========================================================
   CONTENIDO PRINCIPAL
========================================================== */

.contenido,
.content {

    margin-left: 240px;

    width: calc(100% - 240px);

    min-height: 100vh;

    padding: 110px 40px 40px;

    animation: aparecer .5s ease;

    box-sizing: border-box;
}


/* ==========================================================
   TÍTULOS
========================================================== */

.titulo {

    margin-bottom: 30px;
}


.titulo h1,
.content > h1 {

    font-size: 30px;

    margin-bottom: 7px;

    color: var(--texto);
}


.titulo p {

    color: var(--gris);

    font-size: 15px;
}


/* ==========================================================
   HERO
========================================================== */

.hero {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding: 30px;

    border-radius: 24px;

    background: var(--glass);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border:
        1px solid rgba(255,255,255,.55);

    box-shadow: var(--sombra-card);

    margin-bottom: 30px;
}


.hero h1 {

    font-size: 30px;

    margin-bottom: 8px;
}


.hero p {

    color: var(--gris);
}


/* ==========================================================
   BOTONES GENERALES
========================================================== */

.btn-subir,
.btn,
.btn-action,
.btn-submit,
.boton {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255,255,255,.55);

    text-decoration: none;

    cursor: pointer;

    border-radius: 14px;

    font-weight: 700;

    background: var(--glass);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transition: .18s ease;

    box-shadow:
        6px 6px 14px rgba(163,177,198,.40),
        -5px -5px 12px rgba(255,255,255,.75);
}


/* ==========================================================
   HOVER BOTONES
========================================================== */

.btn-subir:hover,
.btn:hover,
.btn-action:hover,
.btn-submit:hover,
.boton:hover {

    color: var(--azul);

    transform: translateY(-2px);

    background: var(--glass-hover);
}


/* ==========================================================
   PRESIONAR BOTONES
========================================================== */

.btn-subir:active,
.btn:active,
.btn-action:active,
.btn-submit:active,
.boton:active {

    transform:
        translateY(2px)
        scale(.97);

    box-shadow:
        inset 5px 5px 10px rgba(163,177,198,.50),
        inset -4px -4px 8px rgba(255,255,255,.70);
}


/* ==========================================================
   BOTÓN SUBIR
========================================================== */

.btn-subir {

    padding: 14px 20px;

    color: var(--azul);
}


/* ==========================================================
   BOTONES
========================================================== */

.btn,
.boton {

    padding: 12px 18px;

    color: var(--azul);
}


.btn-action,
.btn-submit {

    width: 100%;

    padding: 15px;

    color: var(--azul);
}


.btn-chat {

    color: var(--verde);
}


.btn-favorito {

    color: var(--rojo);
}


.btn-volver,
.back {

    display: inline-block;

    text-decoration: none;

    color: var(--azul);

    font-weight: 700;

    margin-bottom: 25px;
}


/* ==========================================================
   PRODUCTOS
========================================================== */

.productos-grid,
.favoritos {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 25px;
}


.producto-card,
.card {

    background: var(--glass);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border:
        1px solid rgba(255,255,255,.55);

    border-radius: 22px;

    overflow: hidden;

    box-shadow: var(--sombra-card);

    transition: .25s ease;

    animation: subir .5s ease;
}


.producto-card:hover,
.card:hover {

    transform: translateY(-6px);

    box-shadow:
        13px 13px 27px rgba(163,177,198,.38),
        -9px -9px 22px rgba(255,255,255,.80);
}


.imagen-contenedor {

    width: 100%;

    height: 220px;

    overflow: hidden;
}


.mi-producto-imagen {
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: rgba(255,255,255,.25);
}

.mi-producto-imagen img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    padding: 10px;
    box-sizing: border-box;
}

.producto-card:hover .producto-imagen {

    transform: scale(1.05);
}


.producto-info,
.card .info {

    padding: 20px;
}


.categoria,
.categoria-badge {

    display: inline-block;

    color: var(--azul);

    font-size: 12px;

    font-weight: 800;

    margin-bottom: 8px;
}


.producto-info h3,
.card h3 {

    font-size: 19px;

    margin-bottom: 8px;
}


.descripcion {

    color: var(--gris);

    line-height: 1.5;

    margin-bottom: 15px;
}


.precio {

    font-size: 23px;

    font-weight: 800;

    color: var(--azul);

    margin: 12px 0;
}


.vendedor {

    color: var(--gris);

    font-size: 13px;

    margin-bottom: 15px;
}


.acciones-producto,
.acciones {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 15px;
}


.acciones-producto form {

    display: flex;
}


.btn-detalle,
.btn-chat,
.btn-favorito {

    border:
        1px solid rgba(255,255,255,.55);

    text-decoration: none;

    cursor: pointer;

    border-radius: 12px;

    padding: 10px 14px;

    background: var(--glass);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        5px 5px 12px rgba(163,177,198,.40),
        -4px -4px 10px rgba(255,255,255,.70);

    font-weight: 700;

    transition: .18s ease;
}


.btn-detalle:hover,
.btn-chat:hover,
.btn-favorito:hover {

    transform: translateY(-2px);

    box-shadow:
        6px 6px 13px rgba(163,177,198,.35),
        -5px -5px 11px rgba(255,255,255,.75);
}


.btn-detalle:active,
.btn-chat:active,
.btn-favorito:active {

    transform:
        translateY(2px)
        scale(.97);

    box-shadow:
        inset 5px 5px 9px rgba(163,177,198,.50),
        inset -4px -4px 8px rgba(255,255,255,.70);
}


.sin-imagen {

    width: 100%;

    height: 220px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 8px;

    font-size: 40px;

    color: var(--gris);
}


/* ==========================================================
   CONTADORES
========================================================== */

.titulo-seccion {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;
}


.titulo-seccion h2 {

    font-size: 23px;
}


.contador {

    color: var(--gris);

    font-weight: 700;
}


/* ==========================================================
   SIN RESULTADOS
========================================================== */

.sin-productos,
.vacio,
.empty {

    background: var(--glass);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border:
        1px solid rgba(255,255,255,.55);

    border-radius: 22px;

    padding: 50px 30px;

    text-align: center;

    box-shadow: var(--sombra-card);

    animation: aparecer .5s ease;
}


.sin-productos .emoji {

    font-size: 55px;

    margin-bottom: 15px;
}


.sin-productos p,
.vacio p,
.empty p {

    color: var(--gris);

    margin: 10px 0 25px;
}


/* ==========================================================
   MENSAJES
========================================================== */

.messages,
.mensajes {

    margin-bottom: 20px;
}


.message,
.mensaje {

    padding: 14px 18px;

    border-radius: 14px;

    margin-bottom: 12px;

    font-weight: 600;

    background: var(--glass);

    backdrop-filter: blur(12px);

    border:
        1px solid rgba(255,255,255,.50);
}


.message.success,
.mensaje.success {

    color: var(--verde);

    box-shadow:
        var(--sombra-inset),
        0 0 0 1px rgba(22,163,74,.25);
}


.message.error,
.mensaje.error {

    color: var(--rojo);

    box-shadow:
        var(--sombra-inset),
        0 0 0 1px rgba(225,29,72,.25);
}


/* ==========================================================
   FORMULARIOS
========================================================== */

.form-group,
.campo {

    margin-bottom: 20px;
}


.form-group label,
.campo label {

    display: block;

    margin-bottom: 8px;

    font-weight: 700;

    color: var(--texto);
}


.form-group input,
.form-group textarea,
.form-group select,
.campo input,
.campo textarea,
.campo select {

    width: 100%;

    border:
        1px solid rgba(255,255,255,.50);

    outline: none;

    background: rgba(255,255,255,.25);

    color: var(--texto);

    border-radius: 15px;

    padding: 14px 16px;

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    box-shadow: var(--sombra-inset);

    transition: var(--transicion);
}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.campo input:focus,
.campo textarea:focus,
.campo select:focus {

    box-shadow:
        var(--sombra-inset),
        0 0 0 2px rgba(37,99,235,.25);
}


.form-group textarea,
.campo textarea {

    min-height: 140px;

    resize: vertical;
}


select {

    cursor: pointer;
}


/* ==========================================================
   CONTACTO Y REPORTES
========================================================== */

.contenedor {

    width: 100%;

    max-width: 850px;
}


.contact-card,
.report-card {

    background: var(--glass);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border:
        1px solid rgba(255,255,255,.55);

    border-radius: 24px;

    padding: 40px;

    box-shadow: var(--sombra-card);

    animation: subir .5s ease;
}


.contact-card > p {

    color: var(--gris);

    line-height: 1.6;

    margin-bottom: 25px;
}


.buttons {

    display: flex;

    gap: 15px;

    margin-top: 20px;
}


.buttons .btn {

    flex: 1;
}


.btn-back {

    color: var(--gris);
}


/* ==========================================================
   PERFIL
========================================================== */

.perfil {

    background: var(--glass);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border:
        1px solid rgba(255,255,255,.55);

    border-radius: 24px;

    padding: 35px;

    box-shadow: var(--sombra-card);

    animation: subir .5s ease;
}


.cabecera-perfil,
.cabecera {

    text-align: center;

    padding-bottom: 30px;

    margin-bottom: 25px;
}


.cabecera-perfil h2,
.cabecera h2 {

    margin-top: 15px;

    font-size: 25px;
}


.cabecera-perfil p,
.cabecera p {

    color: var(--gris);

    margin-top: 6px;
}


.avatar,
.foto-perfil {

    width: 110px;
    height: 110px;

    margin: 0 auto;

    border-radius: 50%;

    background: var(--glass);

    backdrop-filter: blur(14px);

    color: var(--azul);

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 40px;

    font-weight: 800;

    border:
        1px solid rgba(255,255,255,.60);

    box-shadow:
        7px 7px 15px rgba(163,177,198,.40),
        -6px -6px 13px rgba(255,255,255,.75);
}


.foto-perfil {

    overflow: hidden;
}


.foto-perfil img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.datos {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;
}


.dato {

    display: flex;

    flex-direction: column;

    gap: 8px;

    padding: 18px;

    border-radius: 15px;

    background: rgba(255,255,255,.18);

    backdrop-filter: blur(10px);

    box-shadow: var(--sombra-inset);
}


.dato strong {

    font-size: 14px;
}


.dato span {

    color: var(--gris);
}


/* ==========================================================
   EDITAR PERFIL
========================================================== */

.foto-container {

    margin-bottom: 20px;
}


.foto-input {

    text-align: center;

    margin-bottom: 25px;
}


#foto {

    display: none;
}


.boton-foto {

    display: inline-flex;

    padding: 13px 20px;

    border-radius: 14px;

    cursor: pointer;

    color: var(--azul);

    font-weight: 700;

    background: var(--glass);

    backdrop-filter: blur(12px);

    border:
        1px solid rgba(255,255,255,.55);

    box-shadow:
        6px 6px 13px rgba(163,177,198,.40),
        -5px -5px 11px rgba(255,255,255,.75);

    transition: .18s ease;
}


.boton-foto:hover {

    transform: translateY(-2px);
}


.boton-foto:active {

    transform: scale(.97);

    box-shadow: var(--sombra-inset);
}


.texto-ayuda {

    color: var(--gris);

    font-size: 13px;

    margin-top: 10px;
}


.formulario {

    max-width: 650px;

    margin: auto;
}


.acciones .principal {

    color: var(--azul);
}


.acciones .salir {

    color: var(--rojo);
}


.guardar {

    color: var(--verde);
}


.cancelar {

    color: var(--rojo);
}


/* ==========================================================
   FAVORITOS
========================================================== */

.content > h1 {

    margin-bottom: 25px;
}


.content .search {

    max-width: 600px;

    margin-bottom: 30px;
}


.card {

    display: flex;

    flex-direction: column;
}


.card > img,
.card > .sin-imagen {

    height: 210px;
}


.card .info {

    flex: 1;
}


.card .categoria {

    margin-top: 8px;
}


/* ==========================================================
   CHATS
========================================================== */

.chat-list {

    max-width: 850px;

    display: flex;

    flex-direction: column;

    gap: 15px;
}


.chat-item {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 18px;

    text-decoration: none;

    background: var(--glass);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    border:
        1px solid rgba(255,255,255,.55);

    border-radius: 18px;

    box-shadow:
        7px 7px 15px rgba(163,177,198,.40),
        -6px -6px 13px rgba(255,255,255,.75);

    transition: .18s ease;

    animation: aparecer .4s ease;
}


.chat-item:hover {

    transform: translateX(5px);

    color: var(--azul);

    box-shadow:
        var(--sombra-inset);
}


.chat-item:active {

    transform:
        translateX(5px)
        scale(.99);

    box-shadow:
        var(--sombra-inset);
}


.chat-item .avatar {

    width: 60px;
    height: 60px;

    margin: 0;

    font-size: 23px;

    flex-shrink: 0;
}


.chat-info {

    min-width: 0;
}


.chat-info h3 {

    margin-bottom: 5px;
}


.chat-info p {

    color: var(--gris);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ==========================================================
   CHAT INDIVIDUAL
========================================================== */

.chat-container {

    width: min(900px, 92%);

    margin: 110px auto 40px;

    background: var(--glass);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border:
        1px solid rgba(255,255,255,.55);

    border-radius: 24px;

    box-shadow: var(--sombra-card);

    overflow: hidden;

    animation: subir .5s ease;
}


.chat-header {

    padding: 20px 25px;

    font-size: 19px;

    font-weight: 800;

    background: rgba(255,255,255,.15);

    box-shadow:
        0 5px 10px rgba(163,177,198,.25);
}


.chat-container .mensajes {

    height: 500px;

    overflow-y: auto;

    padding: 25px;

    display: flex;

    flex-direction: column;

    gap: 12px;
}


.chat-container .mensaje {

    max-width: 70%;

    padding: 12px 16px;

    margin: 0;

    background: var(--glass);

    backdrop-filter: blur(10px);

    box-shadow:
        5px 5px 10px rgba(163,177,198,.35),
        -4px -4px 9px rgba(255,255,255,.70);

    line-height: 1.5;
}


.chat-container .mensaje.enviado {

    align-self: flex-end;

    color: var(--azul-oscuro);
}


.chat-container .mensaje.recibido {

    align-self: flex-start;

    color: var(--texto);
}


.hora {

    font-size: 10px;

    color: var(--gris);

    margin-top: 5px;

    text-align: right;
}


.chat-container .formulario {

    display: flex;

    gap: 12px;

    padding: 20px;
}


.chat-container .formulario input {

    flex: 1;

    border:
        1px solid rgba(255,255,255,.50);

    outline: none;

    background: rgba(255,255,255,.25);

    border-radius: 14px;

    padding: 14px 18px;

    box-shadow: var(--sombra-inset);
}


.chat-container .formulario button {

    border:
        1px solid rgba(255,255,255,.55);

    border-radius: 14px;

    padding: 0 25px;

    cursor: pointer;

    color: var(--azul);

    font-weight: 700;

    background: var(--glass);

    backdrop-filter: blur(12px);

    box-shadow:
        6px 6px 13px rgba(163,177,198,.40),
        -5px -5px 11px rgba(255,255,255,.75);

    transition: .18s ease;
}


.chat-container .formulario button:hover {

    transform: translateY(-2px);
}


.chat-container .formulario button:active {

    transform: scale(.97);

    box-shadow: var(--sombra-inset);
}


/* ==========================================================
   DETALLE DEL PRODUCTO
========================================================== */

.producto-container {

    max-width: 1100px;

    margin: 25px auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 45px;

    align-items: center;

    background: var(--glass);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border:
        1px solid rgba(255,255,255,.55);

    border-radius: 25px;

    padding: 35px;

    box-shadow: var(--sombra-card);

    animation: subir .5s ease;
}


.imagen-wrapper {

    width: 100%;
}


.imagen-frame {

    width: 100%;

    height: 450px;

    border-radius: 22px;

    overflow: hidden;

    box-shadow: var(--sombra-inset);

    display: flex;

    align-items: center;
    justify-content: center;
}


.imagen-frame img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.info-wrapper h1 {

    font-size: 34px;

    margin: 10px 0;
}


.descripcion-block {

    margin-top: 25px;

    padding: 20px;

    border-radius: 18px;

    background: rgba(255,255,255,.18);

    box-shadow: var(--sombra-inset);
}


.descripcion-titulo {

    font-weight: 800;

    margin-bottom: 10px;
}


.vendedor-card {

    margin-top: 20px;

    padding: 20px;

    border-radius: 18px;

    background: var(--glass);

    backdrop-filter: blur(14px);

    border:
        1px solid rgba(255,255,255,.50);

    box-shadow: var(--sombra);
}


.vendedor-header {

    font-weight: 800;

    margin-bottom: 12px;
}


.vendedor-nombre {

    font-size: 17px;

    font-weight: 700;

    margin-bottom: 12px;
}


.vendedor-meta {

    color: var(--gris);

    display: flex;

    flex-direction: column;

    gap: 8px;

    font-size: 13px;
}


.info-wrapper .acciones {

    margin-top: 25px;
}


/* ==========================================================
   LOGIN / REGISTRO
========================================================== */

.login-wrapper {

    min-height: 100vh;

    display: grid;

    grid-template-columns: 1fr 1fr;

    animation: aparecerSuave .5s ease;
}


.login-banner {

    background: rgba(255,255,255,.18);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    padding: 70px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    border-right:
        1px solid rgba(255,255,255,.50);

    box-shadow:
        inset -10px 0 20px rgba(163,177,198,.20);
}


.banner-logo {

    font-size: 30px;

    font-weight: 800;

    margin-bottom: 45px;
}


.banner-logo span,
.mobile-brand span {

    color: var(--azul);
}


.banner-icon {

    font-size: 55px;

    margin-bottom: 10px;
}


.banner-title {

    font-size: 42px;

    line-height: 1.15;

    margin-bottom: 20px;
}


.banner-subtitle {

    color: var(--gris);

    line-height: 1.7;

    max-width: 600px;
}


.features-list {

    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top: 35px;
}


.feature-item {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 15px;

    border-radius: 15px;

    background: var(--glass);

    backdrop-filter: blur(12px);

    border:
        1px solid rgba(255,255,255,.50);

    box-shadow:
        6px 6px 13px rgba(163,177,198,.35),
        -5px -5px 11px rgba(255,255,255,.70);

    font-weight: 700;
}


.feature-icon {

    font-size: 25px;
}


.login-content {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px;

    background: rgba(255,255,255,.10);
}


.auth-card {

    width: 100%;

    max-width: 480px;

    padding: 40px;

    border-radius: 25px;

    background: var(--glass);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border:
        1px solid rgba(255,255,255,.60);

    box-shadow: var(--sombra-card);

    animation: subir .5s ease;
}


.mobile-brand {

    display: none;

    text-align: center;

    font-size: 26px;

    font-weight: 800;

    margin-bottom: 30px;
}


.auth-header {

    text-align: center;

    margin-bottom: 30px;
}


.auth-header h2 {

    font-size: 28px;

    margin-bottom: 8px;
}


.auth-header p {

    color: var(--gris);
}


.auth-footer {

    text-align: center;

    margin-top: 25px;

    color: var(--gris);
}


.auth-footer a {

    color: var(--azul);

    font-weight: 800;

    text-decoration: none;
}


.auth-footer a:hover {

    text-decoration: underline;
}


/* ==========================================================
   RESPONSIVE - TABLET
========================================================== */

@media (max-width: 1100px) {

    .productos-grid,
    .favoritos {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .producto-container {

        grid-template-columns: 1fr;
    }


    .imagen-frame {

        height: 400px;
    }


    .login-banner {

        padding: 45px;
    }


    .banner-title {

        font-size: 34px;
    }
}


/* ==========================================================
   RESPONSIVE - MÓVIL
========================================================== */

@media (max-width: 800px) {

    body {

        overflow-x: hidden;
    }


    .topbar {

        height: 65px;

        padding: 0 20px;
    }


    .topbar .logo {

        font-size: 21px;
    }


    .usuario-top {

        display: none;
    }


    .busqueda {

        display: none;
    }


    .menu-btn {

        display: flex;

        margin-left: auto;
    }


    .sidebar {

        display: none;

        top: 65px;
        bottom: auto;

        width: 100%;

        height: auto;

        max-height:
            calc(100vh - 65px);

        padding: 20px;

        border-radius:
            0 0 20px 20px;
    }


    .sidebar .logo {

        display: none;
    }


    .contenido,
    .content {

        margin-left: 0;

        width: 100%;

        padding:
            90px 20px 30px;
    }


    .titulo h1,
    .content > h1 {

        font-size: 25px;
    }


    .hero {

        flex-direction: column;

        align-items: flex-start;

        padding: 25px;
    }


    .hero h1 {

        font-size: 25px;
    }


    .btn-subir {

        width: 100%;
    }


    .productos-grid,
    .favoritos {

        grid-template-columns: 1fr;
    }


    .titulo-seccion {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;
    }


    .contact-card,
    .report-card,
    .perfil {

        padding: 25px 20px;
    }


    .buttons {

        flex-direction: column;
    }


    .datos {

        grid-template-columns: 1fr;
    }


    .producto-container {

        padding: 20px;

        gap: 25px;
    }


    .imagen-frame {

        height: 300px;
    }


    .info-wrapper h1 {

        font-size: 27px;
    }


    .chat-container {

        width: 94%;

        margin-top: 90px;
    }


    .chat-container .mensajes {

        height: 55vh;

        padding: 15px;
    }


    .chat-container .mensaje {

        max-width: 85%;
    }


    .chat-container .formulario {

        padding: 12px;
    }


    .chat-container .formulario button {

        padding: 0 15px;
    }


    .login-wrapper {

        display: block;

        min-height: 100vh;
    }


    .login-banner {

        display: none;
    }


    .login-content {

        min-height: 100vh;

        padding: 25px 18px;
    }


    .auth-card {

        padding: 30px 22px;
    }


    .mobile-brand {

        display: block;
    }
}


/* ==========================================================
   MÓVILES PEQUEÑOS
========================================================== */

@media (max-width: 480px) {

    .contenido,
    .content {

        padding-left: 14px;

        padding-right: 14px;
    }


    .topbar {

        padding: 0 14px;
    }


    .producto-card,
    .card {

        border-radius: 18px;
    }


    .imagen-contenedor {

        height: 190px;
    }


    .producto-info,
    .card .info {

        padding: 16px;
    }


    .acciones-producto {

        flex-direction: column;
    }


    .acciones-producto form,
    .btn-detalle,
    .btn-chat,
    .btn-favorito {

        width: 100%;

        justify-content: center;
    }


    .perfil {

        padding: 22px 15px;
    }


    .avatar,
    .foto-perfil {

        width: 90px;
        height: 90px;

        font-size: 32px;
    }


    .chat-item {

        padding: 14px;

        gap: 12px;
    }


    .chat-item .avatar {

        width: 50px;
        height: 50px;

        font-size: 20px;
    }


    .chat-container {

        width: 96%;
    }


    .chat-container .formulario input {

        min-width: 0;
    }


    .chat-container .formulario button {

        padding: 0 12px;
    }


    .banner-title {

        font-size: 30px;
    }


    .auth-card {

        padding: 25px 18px;
    }
}


/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar {

    width: 8px;
}


::-webkit-scrollbar-track {

    background: transparent;
}


::-webkit-scrollbar-thumb {

    background: rgba(163,177,198,.65);

    border-radius: 20px;
}


::-webkit-scrollbar-thumb:hover {

    background: var(--azul);
}


/* ==========================================================
   SELECCIÓN
========================================================== */

::selection {

    background: var(--azul);

    color: white;
}


/* ==========================================================
   COMPATIBILIDAD
========================================================== */

@supports not (backdrop-filter: blur(18px)) {

    .topbar,
    .sidebar,
    .menu-item,
    .sidebar > a,
    .hero,
    .card,
    .producto-card,
    .perfil,
    .auth-card {

        background: rgba(255,255,255,.75);
    }
}
/* ==========================================================
   STARPOINT - ADMINISTRADOR
   LIQUID GLASS + NEUMORPHIC
   COMPATIBLE CON TODOS LOS HTML
========================================================== */


/* ==========================================================
   VARIABLES
========================================================== */

:root {

    --bg-color: #e0e5ec;

    --glass: rgba(255, 255, 255, 0.42);
    --glass-light: rgba(255, 255, 255, 0.70);
    --glass-border: rgba(255, 255, 255, 0.65);

    --shadow-light: #ffffff;
    --shadow-dark: #a3b1c6;

    --azul: #2563eb;
    --azul-oscuro: #1e40af;

    --texto: #2d3748;
    --gris: #64748b;

    --rojo: #e11d48;
    --verde: #16a34a;

    --blanco: #ffffff;

    --sombra:
        8px 8px 16px var(--shadow-dark),
        -8px -8px 16px var(--shadow-light);

    --sombra-card:
        10px 10px 20px var(--shadow-dark),
        -10px -10px 20px var(--shadow-light);

    --sombra-inset:
        inset 5px 5px 9px var(--shadow-dark),
        inset -5px -5px 9px var(--shadow-light);

    --radio: 16px;

    --transicion: .25s ease;
}


/* ==========================================================
   CONFIGURACIÓN GENERAL
========================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    font-family:
        "Poppins",
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--texto);

    background:
        radial-gradient(
            circle at top left,
            rgba(255,255,255,.85),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(37,99,235,.08),
            transparent 35%
        ),
        var(--bg-color);

    min-height: 100vh;
}


/* ==========================================================
   LIQUID GLASS GENERAL
========================================================== */

.topbar,
.sidebar,
.card,
.stat-card,
.action-card,
.product,
.report,
.categories-container,
.perfil,
.table-container,
.users-header,
.search-container,
.dato,
.contenido .card {

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.60),
            rgba(255,255,255,.25)
        );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border:
        1px solid var(--glass-border);

    box-shadow:
        8px 8px 18px rgba(163,177,198,.55),
        -8px -8px 18px rgba(255,255,255,.80);

}


/* ==========================================================
   BARRA SUPERIOR
========================================================== */

.topbar {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    height: 75px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 30px;

    z-index: 1000;

    border-radius: 0 0 22px 22px;

}


/* LOGO */

.brand,
.topbar .logo {

    font-size: 24px;

    font-weight: 900;

    letter-spacing: -.5px;

    color: var(--texto);

}

.brand span,
.topbar .logo span {

    color: var(--azul);

}


/* NOMBRE ADMIN */

.admin-name {

    padding: 10px 18px;

    border-radius: 14px;

    background: rgba(255,255,255,.35);

    box-shadow:
        inset 2px 2px 5px rgba(163,177,198,.25),
        inset -2px -2px 5px rgba(255,255,255,.6);

    font-weight: 700;

}


/* ==========================================================
   LAYOUT
========================================================== */

.layout {

    display: flex;

    min-height: 100vh;

    padding-top: 75px;

}


/* ==========================================================
   SIDEBAR
========================================================== */

.sidebar {

    position: fixed;

    left: 15px;
    top: 90px;
    bottom: 15px;

    width: 245px;

    padding: 25px 15px;

    border-radius: 25px;

    z-index: 900;

    overflow-y: auto;

}


/* TÍTULO SIDEBAR */

.sidebar-title,
.menu-titulo {

    text-align: center;

    color: var(--gris);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 22px;

}


/* LOGO DENTRO DEL SIDEBAR */

.sidebar .logo {

    text-align: center;

    font-size: 23px;

    font-weight: 900;

    margin-bottom: 25px;

}


/* ==========================================================
   MENÚ
========================================================== */

.menu {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


/* TODOS LOS BOTONES DEL MENÚ */

.menu a,
.menu-item,
.sidebar > a {

    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    min-height: 50px;

    padding: 13px 16px;

    border-radius: 15px;

    text-decoration: none;

    color: var(--texto);

    font-size: 14px;

    font-weight: 650;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.55),
            rgba(255,255,255,.20)
        );

    border: 1px solid rgba(255,255,255,.5);

    box-shadow:
        6px 6px 12px rgba(163,177,198,.55),
        -6px -6px 12px rgba(255,255,255,.75);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        color .18s ease;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

}


/* ==========================================================
   EFECTO AL PASAR EL MOUSE
========================================================== */

.menu a:hover,
.menu-item:hover,
.sidebar > a:hover {

    color: var(--azul);

    transform: translateY(-2px);

    box-shadow:
        4px 4px 9px rgba(163,177,198,.55),
        -4px -4px 9px rgba(255,255,255,.8);

}


/* ==========================================================
   EFECTO LIQUID GLASS AL PRESIONAR
========================================================== */

.menu a:active,
.menu-item:active,
.sidebar > a:active {

    transform:
        translateY(2px)
        scale(.98);

    box-shadow:
        inset 5px 5px 10px rgba(163,177,198,.60),
        inset -5px -5px 10px rgba(255,255,255,.75);

    background:
        rgba(255,255,255,.30);

}


/* ==========================================================
   BOTÓN ACTIVO
   SOLO EL QUE TENGA active O activo
========================================================== */

.menu a.active,
.menu a.activo,
.menu-item.active,
.menu-item.activo,
.sidebar > a.active,
.sidebar > a.activo {

    color: var(--azul);

    font-weight: 800;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.35),
            rgba(255,255,255,.18)
        );

    box-shadow:
        inset 5px 5px 10px rgba(163,177,198,.60),
        inset -5px -5px 10px rgba(255,255,255,.75);

}


/* ==========================================================
   AL PRESIONAR UN BOTÓN ACTIVO
========================================================== */

.menu a.active:active,
.menu a.activo:active,
.menu-item.active:active,
.menu-item.activo:active {

    transform:
        translateY(3px)
        scale(.97);

}


/* ==========================================================
   CERRAR SESIÓN
========================================================== */

.menu a.logout,
.menu-item.logout,
.sidebar > a.logout {

    color: var(--rojo);

    margin-top: 10px;

}

.menu a.logout:hover,
.menu-item.logout:hover,
.sidebar > a.logout:hover {

    color: #be123c;

}


/* ==========================================================
   CONTENIDO PRINCIPAL
========================================================== */

.content,
.contenido,
.container,
.contenedor {

    width: 100%;

    margin-left: 275px;

    padding:
        115px
        35px
        40px
        35px;

}


/* Para páginas que no usan layout */

main.container {

    max-width: 1250px;

}


/* ==========================================================
   TÍTULOS
========================================================== */

h1 {

    margin-top: 0;

    font-size: 32px;

    font-weight: 900;

    color: var(--texto);

}

h2 {

    font-weight: 800;

}

.welcome {

    color: var(--gris);

    font-size: 15px;

    margin-bottom: 30px;

}


/* ==========================================================
   BOTÓN VOLVER
========================================================== */

.back,
.volver {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    text-decoration: none;

    color: var(--azul);

    font-weight: 700;

    padding: 11px 17px;

    border-radius: 14px;

    background: rgba(255,255,255,.35);

    box-shadow:
        5px 5px 10px rgba(163,177,198,.5),
        -5px -5px 10px rgba(255,255,255,.7);

    transition: .2s ease;

}

.back:hover,
.volver:hover {

    transform: translateY(-2px);

}

.back:active,
.volver:active {

    transform: translateY(2px);

    box-shadow: var(--sombra-inset);

}


/* ==========================================================
   ESTADÍSTICAS
========================================================== */

.stats {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px, 1fr)
        );

    gap: 25px;

    margin: 25px 0 40px;

}


.stat-card,
.card {

    padding: 25px;

    border-radius: 22px;

    transition: .25s ease;

}


.stat-card:hover,
.card:hover {

    transform: translateY(-3px);

}


.stat-card h3,
.card h2 {

    margin-top: 0;

    color: var(--gris);

    font-size: 15px;

}


.stat-number,
.number {

    font-size: 38px;

    font-weight: 900;

    color: var(--azul);

}


/* ==========================================================
   TÍTULO DE SECCIÓN
========================================================== */

.section-title {

    font-size: 20px;

    font-weight: 850;

    margin-bottom: 20px;

}


/* ==========================================================
   ACCIONES ADMINISTRATIVAS
========================================================== */

.actions {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px, 1fr)
        );

    gap: 25px;

}


.action-card {

    min-height: 210px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 25px;

    border-radius: 22px;

    transition: .25s ease;

}


.action-card:hover {

    transform: translateY(-5px);

}


.action-card h2 {

    margin-top: 0;

}


.action-card p {

    color: var(--gris);

    line-height: 1.6;

}


/* ==========================================================
   BOTONES DE ACCIÓN
========================================================== */

.action-btn,
.boton {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    padding: 13px 18px;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.65),
            rgba(255,255,255,.25)
        );

    color: var(--azul);

    text-decoration: none;

    font-weight: 800;

    border: 1px solid rgba(255,255,255,.55);

    box-shadow:
        6px 6px 12px rgba(163,177,198,.5),
        -6px -6px 12px rgba(255,255,255,.75);

    transition: .18s ease;

}


.action-btn:hover,
.boton:hover {

    transform: translateY(-2px);

}


.action-btn:active,
.boton:active {

    transform: translateY(2px) scale(.98);

    box-shadow: var(--sombra-inset);

}


/* ==========================================================
   BUSCADOR DE USUARIOS
========================================================== */

.users-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding: 20px;

    border-radius: 20px;

    margin-bottom: 20px;

}


.counter,
.contador {

    padding: 10px 15px;

    border-radius: 12px;

    color: var(--gris);

    background: rgba(255,255,255,.3);

    box-shadow: var(--sombra-inset);

}


.search-container {

    padding: 15px;

    border-radius: 18px;

    margin-bottom: 25px;

}


.search-box {

    width: 100%;

    border: none;

    outline: none;

    padding: 16px 20px;

    border-radius: 15px;

    background: rgba(255,255,255,.35);

    color: var(--texto);

    font-size: 15px;

    box-shadow: var(--sombra-inset);

}


.search-box:focus {

    box-shadow:
        inset 5px 5px 10px rgba(163,177,198,.45),
        inset -5px -5px 10px rgba(255,255,255,.75),
        0 0 0 2px rgba(37,99,235,.15);

}


/* ==========================================================
   TABLAS
========================================================== */

.table-container,
.tabla-contenedor {

    width: 100%;

    overflow-x: auto;

    border-radius: 22px;

    padding: 10px;

}


.table-container table,
.tabla-contenedor table {

    width: 100%;

    border-collapse: separate;

    border-spacing: 0 8px;

}


.table-container th,
.tabla-contenedor th {

    padding: 15px;

    text-align: left;

    color: var(--gris);

    font-size: 12px;

}


.table-container td,
.tabla-contenedor td {

    padding: 16px;

    background: rgba(255,255,255,.30);

}


.table-container tbody tr td:first-child,
.tabla-contenedor tbody tr td:first-child {

    border-radius: 14px 0 0 14px;

}


.table-container tbody tr td:last-child,
.tabla-contenedor tbody tr td:last-child {

    border-radius: 0 14px 14px 0;

}


.table-container tbody tr,
.tabla-contenedor tbody tr {

    transition: .2s ease;

}


.table-container tbody tr:hover td,
.tabla-contenedor tbody tr:hover td {

    background: rgba(255,255,255,.5);

}


/* ==========================================================
   USUARIOS
========================================================== */

.user-info,
.usuario {

    display: flex;

    align-items: center;

    gap: 10px;

}


.avatar {

    width: 42px;

    height: 42px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background: rgba(255,255,255,.4);

    box-shadow: var(--sombra);

}


.user-name {

    font-weight: 800;

}


.email,
.seller-email {

    color: var(--gris);

    font-size: 13px;

}


.user-id,
.id {

    color: var(--azul);

    font-weight: 800;

}


.date,
.fecha {

    color: var(--gris);

    font-size: 13px;

}


/* ==========================================================
   ROLES
========================================================== */

.role {

    display: inline-flex;

    padding: 7px 12px;

    border-radius: 10px;

    font-size: 12px;

    font-weight: 800;

}


.role-admin {

    color: var(--azul);

    background: rgba(37,99,235,.10);

}


.role-user {

    color: var(--gris);

    background: rgba(100,116,139,.10);

}


/* ==========================================================
   ESTADOS
========================================================== */

.status,
.estado {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 11px;

    border-radius: 10px;

    font-size: 12px;

    font-weight: 800;

}


.status-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--verde);

}


.estado.pendiente {

    color: #b45309;

    background: rgba(245,158,11,.12);

}


.estado.leido {

    color: var(--azul);

    background: rgba(37,99,235,.10);

}


.estado.respondido {

    color: var(--verde);

    background: rgba(22,163,74,.10);

}


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

.report {

    padding: 25px;

    margin-bottom: 20px;

    border-radius: 22px;

    transition: .25s ease;

}


.report:hover {

    transform: translateY(-3px);

}


.report-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 20px;

}


.report-header h2 {

    margin: 0;

}


.report-details {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(240px, 1fr)
        );

    gap: 15px;

}


.report-item {

    padding: 15px;

    border-radius: 15px;

    background: rgba(255,255,255,.25);

    box-shadow: var(--sombra-inset);

}


.report-item strong {

    display: block;

    margin-bottom: 6px;

    color: var(--gris);

}


/* ==========================================================
   PRODUCTOS
========================================================== */

.products {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(270px, 1fr)
        );

    gap: 25px;

}


.product {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 20px;

    border-radius: 22px;

    transition: .25s ease;

}


.product:hover {

    transform: translateY(-5px);

}


.img-container {

    width: 100%;

    height: 210px;

    overflow: hidden;

    border-radius: 18px;

    margin-bottom: 15px;

    background: rgba(255,255,255,.3);

    box-shadow: var(--sombra-inset);

}


.img-container img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}


.no-image {

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--gris);

}


.category-badge {

    display: inline-block;

    padding: 6px 10px;

    border-radius: 9px;

    background: rgba(37,99,235,.1);

    color: var(--azul);

    font-size: 12px;

    font-weight: 800;

}


.product h2 {

    margin-bottom: 8px;

}


.description {

    color: var(--gris);

    line-height: 1.5;

}


.price {

    font-size: 27px;

    font-weight: 900;

    color: var(--azul);

    margin: 15px 0;

}


.info {

    color: var(--gris);

    font-size: 13px;

}


.seller {

    padding: 15px;

    border-radius: 15px;

    background: rgba(255,255,255,.25);

    box-shadow: var(--sombra-inset);

    margin-top: 15px;

}


.seller-title {

    font-size: 12px;

    color: var(--gris);

    font-weight: 800;

}


.seller-name {

    font-weight: 800;

    margin-top: 5px;

}


/* ==========================================================
   BOTÓN ELIMINAR
========================================================== */

.delete-btn {

    width: 100%;

    margin-top: 18px;

    padding: 13px;

    border: none;

    border-radius: 14px;

    cursor: pointer;

    background:
        rgba(225,29,72,.10);

    color: var(--rojo);

    font-weight: 800;

    box-shadow:
        5px 5px 10px rgba(163,177,198,.4),
        -5px -5px 10px rgba(255,255,255,.7);

    transition: .18s ease;

}


.delete-btn:hover {

    transform: translateY(-2px);

}


.delete-btn:active {

    transform: translateY(2px) scale(.98);

    box-shadow: var(--sombra-inset);

}


/* ==========================================================
   CATEGORÍAS - ESTADÍSTICAS
========================================================== */

.categories-container {

    padding: 25px;

    border-radius: 22px;

}


.categories-list {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.category {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px 18px;

    border-radius: 14px;

    background: rgba(255,255,255,.25);

    box-shadow: var(--sombra);

}


.category-name {

    font-weight: 800;

}


.count {

    color: var(--gris);

    font-size: 13px;

}


/* ==========================================================
   PERFIL ADMINISTRADOR
========================================================== */

.header {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    height: 75px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 30px;

    z-index: 1000;

    background: rgba(255,255,255,.45);

    backdrop-filter: blur(18px);

    border-bottom:
        1px solid rgba(255,255,255,.6);

}


.header .logo {

    font-size: 24px;

    font-weight: 900;

    color: var(--azul);

}


.slogan {

    color: var(--gris);

    font-size: 13px;

}


.contenedor {

    min-height: 100vh;

}


.perfil {

    max-width: 850px;

    margin: 30px auto;

    padding: 35px;

    border-radius: 28px;

}


.encabezado {

    text-align: center;

    padding-bottom: 30px;

}


.encabezado .avatar {

    width: 90px;

    height: 90px;

    margin: 0 auto 15px;

    font-size: 30px;

    color: var(--azul);

}


.encabezado h1 {

    margin-bottom: 5px;

}


.encabezado p {

    color: var(--gris);

}


.datos {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            1fr
        );

    gap: 18px;

}


.dato {

    padding: 18px;

    border-radius: 17px;

}


.dato span {

    display: block;

    color: var(--gris);

    font-size: 12px;

    margin-bottom: 6px;

}


.dato strong {

    word-break: break-word;

}


.rol {

    color: var(--azul);

}


.acciones {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 30px;

}


.boton-admin {

    color: var(--azul);

}


.boton-salir {

    color: var(--rojo);

}


/* ==========================================================
   CONTACTOS
========================================================== */

.card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 20px;

}


.card-header h2 {

    margin: 0;

}


.mensaje {

    max-width: 450px;

    line-height: 1.5;

    white-space: normal;

}


.sin-mensajes {

    text-align: center;

    padding: 60px 20px;

}


.icono,
.empty-icon {

    font-size: 50px;

    margin-bottom: 15px;

}


.sin-mensajes h3,
.empty h2 {

    margin-bottom: 8px;

}


.sin-mensajes p,
.empty p {

    color: var(--gris);

}


/* ==========================================================
   MENSAJES FLASH
========================================================== */

.flash {

    padding: 15px 18px;

    border-radius: 14px;

    margin-bottom: 20px;

    font-weight: 700;

    background: rgba(255,255,255,.35);

    box-shadow: var(--sombra);

}


.flash.success {

    color: var(--verde);

}


.flash.error {

    color: var(--rojo);

}


/* ==========================================================
   ESTADO VACÍO
========================================================== */

.empty {

    text-align: center;

    padding: 60px 25px;

    border-radius: 22px;

    background: rgba(255,255,255,.25);

    box-shadow: var(--sombra);

}


/* ==========================================================
   BOTÓN MENÚ MÓVIL
========================================================== */

.menu-btn {

    display: none;

    border: none;

    width: 45px;

    height: 45px;

    border-radius: 14px;

    background: rgba(255,255,255,.4);

    box-shadow: var(--sombra);

    cursor: pointer;

    font-size: 20px;

}


.menu-btn:active {

    box-shadow: var(--sombra-inset);

    transform: scale(.95);

}


/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar {

    width: 8px;
    height: 8px;

}


::-webkit-scrollbar-track {

    background: transparent;

}


::-webkit-scrollbar-thumb {

    background: rgba(100,116,139,.35);

    border-radius: 20px;

}


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

@media (max-width: 900px) {

    .sidebar {

        left: 10px;
        right: 10px;

        width: auto;

        top: 85px;

        bottom: auto;

        max-height: calc(100vh - 100px);

        display: none;

    }


    .menu-btn {

        display: block;

    }


    .content,
    .contenido,
    .container,
    .contenedor {

        margin-left: 0;

        padding:
            105px
            20px
            30px;

    }


    .layout {

        display: block;

    }


    .datos {

        grid-template-columns: 1fr;

    }


    .actions {

        grid-template-columns: 1fr;

    }


    .products {

        grid-template-columns: 1fr;

    }


    .users-header {

        flex-direction: column;

        align-items: stretch;

    }


    .report-header {

        flex-direction: column;

        align-items: flex-start;

    }

}


@media (max-width: 600px) {

    .topbar,
    .header {

        padding: 0 15px;

    }


    .admin-name {

        font-size: 12px;

        padding: 8px 10px;

    }


    .brand,
    .topbar .logo,
    .header .logo {

        font-size: 20px;

    }


    h1 {

        font-size: 25px;

    }


    .stat-number,
    .number {

        font-size: 32px;

    }


    .acciones {

        flex-direction: column;

    }


    .boton {

        width: 100%;

    }


    .table-container,
    .tabla-contenedor {

        overflow-x: auto;

    }

}


/* ==========================================================
   ANIMACIONES LIQUID GLASS
========================================================== */

@keyframes liquidEntrada {

    from {

        opacity: 0;

        transform:
            translateY(10px)
            scale(.98);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


.card,
.stat-card,
.action-card,
.product,
.report,
.perfil,
.categories-container {

    animation:
        liquidEntrada
        .35s
        ease
        both;

}
/* ==========================================================
   STARPOINT - PÁGINA PRINCIPAL
   LIQUID GLASS + NEUMORPHIC
   ========================================================== */

/* ---------- VARIABLES ---------- */

:root {
    --glass: rgba(255, 255, 255, 0.42);
    --glass-light: rgba(255, 255, 255, 0.70);
    --glass-border: rgba(255, 255, 255, 0.65);

    --azul: #2563eb;
    --azul-oscuro: #1e40af;
    --texto: #2d3748;
    --gris: #64748b;

    --sombra:
        8px 8px 16px rgba(163, 177, 198, .65),
        -8px -8px 16px rgba(255, 255, 255, .85);

    --sombra-card:
        12px 12px 25px rgba(163, 177, 198, .55),
        -12px -12px 25px rgba(255, 255, 255, .85);

    --sombra-inset:
        inset 5px 5px 10px rgba(163, 177, 198, .60),
        inset -5px -5px 10px rgba(255, 255, 255, .80);

    --radio: 20px;
    --transicion: .25s ease;
}


/* ==========================================================
   CUERPO
   ========================================================== */

body {
    margin: 0;
    padding: 0;

    font-family: "Poppins", Arial, sans-serif;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(37, 99, 235, .10),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(6, 182, 212, .10),
            transparent 30%
        ),
        #e0e5ec;

    color: var(--texto);

    overflow-x: hidden;
}


/* ==========================================================
   NAVBAR
   ========================================================== */

.navbar {
    position: sticky;
    top: 15px;

    width: calc(100% - 50px);
    max-width: 1250px;

    margin: 15px auto;

    padding: 15px 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.55),
            rgba(255,255,255,.25)
        );

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid var(--glass-border);

    border-radius: 22px;

    box-shadow: var(--sombra);

    z-index: 1000;
}


/* ---------- LOGO ---------- */

.logo-text {
    text-decoration: none;

    font-size: 25px;
    font-weight: 900;

    letter-spacing: -1px;

    color: var(--azul);

    transition: var(--transicion);
}

.logo-text:hover {
    transform: scale(1.04);
}


/* ---------- LINKS ---------- */

.nav-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-links a {
    text-decoration: none;

    color: var(--texto);

    font-size: 14px;
    font-weight: 600;

    padding: 10px 15px;

    border-radius: 14px;

    transition: var(--transicion);
}

.nav-links a:hover {
    color: var(--azul);

    background: rgba(255,255,255,.40);

    box-shadow: var(--sombra-inset);

    transform: translateY(-2px);
}


/* ==========================================================
   BOTONES DEL NAVBAR
   ========================================================== */

.nav-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-login,
.btn-register {
    text-decoration: none;

    padding: 11px 18px;

    border-radius: 14px;

    font-size: 13px;
    font-weight: 700;

    transition: var(--transicion);
}


/* LOGIN */

.btn-login {
    color: var(--azul);

    background:
        rgba(255,255,255,.35);

    border: 1px solid rgba(255,255,255,.60);

    box-shadow: var(--sombra);
}

.btn-login:hover {
    transform: translateY(-2px);
}

.btn-login:active {
    transform: translateY(2px) scale(.97);

    box-shadow: var(--sombra-inset);
}


/* REGISTRO */

.btn-register {
    color: white;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1e40af
        );

    box-shadow:
        6px 6px 12px rgba(37,99,235,.30),
        -4px -4px 10px rgba(255,255,255,.65);
}

.btn-register:hover {
    transform: translateY(-3px);

    box-shadow:
        8px 8px 16px rgba(37,99,235,.35),
        -5px -5px 12px rgba(255,255,255,.70);
}

.btn-register:active {
    transform: translateY(2px) scale(.97);

    box-shadow:
        inset 5px 5px 10px rgba(0,0,0,.20),
        inset -5px -5px 10px rgba(255,255,255,.25);
}


/* ==========================================================
   HERO
   ========================================================== */

.hero {
    min-height: 650px;

    max-width: 1250px;

    margin: 0 auto;

    padding: 90px 35px 80px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 70px;

    box-sizing: border-box;
}


/* ---------- CONTENIDO ---------- */

.hero-content {
    animation: aparecerHero .7s ease;
}

.tag {
    display: inline-block;

    padding: 9px 15px;

    margin-bottom: 20px;

    border-radius: 30px;

    color: var(--azul);

    font-size: 12px;
    font-weight: 800;

    background:
        rgba(255,255,255,.40);

    border: 1px solid rgba(255,255,255,.65);

    box-shadow: var(--sombra);
}

.hero h1 {
    margin: 0 0 20px;

    font-size: clamp(45px, 6vw, 75px);

    line-height: 1.02;

    letter-spacing: -3px;

    font-weight: 900;
}

.hero h1 span {
    color: var(--azul);
}

.hero p {
    max-width: 600px;

    margin: 0 0 30px;

    color: var(--gris);

    font-size: 16px;

    line-height: 1.8;
}


/* ==========================================================
   BOTONES HERO
   ========================================================== */

.hero-buttons {
    display: flex;

    gap: 15px;

    align-items: center;
}

.primary-btn,
.secondary-btn {
    text-decoration: none;

    padding: 15px 24px;

    border-radius: 16px;

    font-size: 14px;
    font-weight: 800;

    transition: var(--transicion);
}


/* PRINCIPAL */

.primary-btn {
    color: white;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1e40af
        );

    box-shadow:
        7px 7px 15px rgba(37,99,235,.30),
        -6px -6px 13px rgba(255,255,255,.80);
}

.primary-btn:hover {
    transform: translateY(-3px);
}

.primary-btn:active {
    transform: translateY(3px) scale(.97);

    box-shadow:
        inset 5px 5px 10px rgba(0,0,0,.20),
        inset -5px -5px 10px rgba(255,255,255,.30);
}


/* SECUNDARIO */

.secondary-btn {
    color: var(--texto);

    background:
        rgba(255,255,255,.38);

    border: 1px solid rgba(255,255,255,.65);

    box-shadow: var(--sombra);
}

.secondary-btn:hover {
    color: var(--azul);

    transform: translateY(-3px);
}

.secondary-btn:active {
    transform: translateY(2px) scale(.97);

    box-shadow: var(--sombra-inset);
}


/* ==========================================================
   TARJETA DE PRODUCTO
   ========================================================== */

.hero-visual {
    display: flex;

    justify-content: center;
    align-items: center;

    perspective: 1000px;
}

.market-card {
    width: 390px;

    padding: 18px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.58),
            rgba(255,255,255,.25)
        );

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    border: 1px solid rgba(255,255,255,.70);

    box-shadow: var(--sombra-card);

    transform: rotate(2deg);

    transition: .4s ease;

    animation: tarjetaFlotante 4s ease-in-out infinite;
}

.market-card:hover {
    transform:
        rotate(0deg)
        translateY(-8px)
        scale(1.02);
}


/* IMAGEN */

.product-image {
    height: 250px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 105px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.55),
            rgba(255,255,255,.20)
        );

    box-shadow: var(--sombra-inset);
}


/* INFORMACIÓN */

.product-info {
    padding: 22px 8px 5px;
}

.product-info small {
    color: var(--azul);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;
}

.product-info h3 {
    margin: 8px 0;

    font-size: 21px;
}

.product-info p {
    margin: 0 0 18px;

    color: var(--gris);

    font-size: 13px;
}


/* PRECIO */

.price-row {
    display: flex;

    justify-content: space-between;

    align-items: center;
}

.price {
    font-size: 25px;

    font-weight: 900;

    color: var(--texto);
}

.buy-btn {
    padding: 10px 15px;

    border-radius: 12px;

    color: var(--azul);

    font-size: 12px;
    font-weight: 800;

    background: rgba(255,255,255,.45);

    box-shadow: var(--sombra);
}


/* ==========================================================
   SECCIONES
   ========================================================== */

.features,
.how-section {
    max-width: 1250px;

    margin: 0 auto;

    padding: 90px 35px;

    box-sizing: border-box;
}


/* ---------- TÍTULOS ---------- */

.section-title {
    max-width: 750px;

    margin: 0 auto 55px;

    text-align: center;
}

.section-title > span {
    color: var(--azul);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;
}

.section-title h2 {
    margin: 12px 0 15px;

    font-size: clamp(30px, 4vw, 45px);

    line-height: 1.15;

    letter-spacing: -1.5px;
}

.section-title p {
    margin: 0;

    color: var(--gris);

    line-height: 1.7;

    font-size: 15px;
}


/* ==========================================================
   CARACTERÍSTICAS
   ========================================================== */

.feature-grid {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 20px;
}

.feature-card {
    padding: 27px 20px;

    text-align: center;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.48),
            rgba(255,255,255,.22)
        );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255,255,255,.65);

    box-shadow: var(--sombra-card);

    transition: var(--transicion);
}

.feature-card:hover {
    transform: translateY(-8px);

    box-shadow:
        15px 15px 30px rgba(163,177,198,.55),
        -15px -15px 30px rgba(255,255,255,.85);
}

.feature-card:active {
    transform:
        translateY(2px)
        scale(.98);

    box-shadow: var(--sombra-inset);
}


/* ICONOS */

.feature-icon {
    width: 65px;
    height: 65px;

    margin: 0 auto 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 28px;

    border-radius: 18px;

    background: rgba(255,255,255,.40);

    box-shadow: var(--sombra);
}

.feature-card h3 {
    margin: 0 0 10px;

    font-size: 17px;
}

.feature-card p {
    margin: 0;

    color: var(--gris);

    font-size: 13px;

    line-height: 1.6;
}


/* ==========================================================
   CÓMO FUNCIONA
   ========================================================== */

.steps {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 30px;
}

.step {
    position: relative;

    padding: 35px;

    border-radius: 25px;

    background:
        rgba(255,255,255,.35);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255,255,255,.65);

    box-shadow: var(--sombra-card);

    transition: var(--transicion);
}

.step:hover {
    transform: translateY(-7px);
}


/* NÚMERO */

.step-number {
    width: 65px;
    height: 65px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 20px;

    color: var(--azul);

    font-size: 18px;

    font-weight: 900;

    background:
        rgba(255,255,255,.45);

    box-shadow: var(--sombra);
}

.step h3 {
    margin: 0 0 12px;

    font-size: 20px;
}

.step p {
    margin: 0;

    color: var(--gris);

    font-size: 14px;

    line-height: 1.7;
}


/* ==========================================================
   CTA
   ========================================================== */

.cta {
    max-width: 1000px;

    margin: 70px auto;

    padding: 65px 35px;

    text-align: center;

    box-sizing: border-box;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.58),
            rgba(255,255,255,.25)
        );

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    border: 1px solid rgba(255,255,255,.70);

    box-shadow: var(--sombra-card);
}

.cta h2 {
    margin: 0 0 15px;

    font-size: clamp(28px, 4vw, 42px);

    letter-spacing: -1px;
}

.cta p {
    max-width: 650px;

    margin: 0 auto 28px;

    color: var(--gris);

    line-height: 1.7;

    font-size: 15px;
}

.cta-button {
    display: inline-block;

    text-decoration: none;

    padding: 15px 25px;

    border-radius: 16px;

    color: white;

    font-size: 14px;
    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1e40af
        );

    box-shadow:
        7px 7px 15px rgba(37,99,235,.30),
        -6px -6px 13px rgba(255,255,255,.80);

    transition: var(--transicion);
}

.cta-button:hover {
    transform: translateY(-3px);
}

.cta-button:active {
    transform: translateY(3px) scale(.97);

    box-shadow:
        inset 5px 5px 10px rgba(0,0,0,.20),
        inset -5px -5px 10px rgba(255,255,255,.30);
}


/* ==========================================================
   FOOTER
   ========================================================== */

footer {
    margin-top: 80px;

    padding: 45px 25px;

    text-align: center;

    background:
        rgba(255,255,255,.28);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-top:
        1px solid rgba(255,255,255,.60);

    box-shadow:
        0 -8px 20px rgba(163,177,198,.25);
}

.footer-logo {
    margin-bottom: 15px;
}

footer p {
    margin: 7px 0;

    color: var(--gris);

    font-size: 12px;
}


/* ==========================================================
   ANIMACIONES
   ========================================================== */

@keyframes aparecerHero {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes tarjetaFlotante {

    0%,
    100% {
        transform: rotate(2deg) translateY(0);
    }

    50% {
        transform: rotate(2deg) translateY(-10px);
    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .navbar {
        width: calc(100% - 30px);
    }

    .hero {
        gap: 40px;
    }

    .feature-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 800px) {

    .navbar {
        position: relative;

        flex-wrap: wrap;

        gap: 15px;

        padding: 15px;
    }

    .nav-links {
        order: 3;

        width: 100%;

        justify-content: center;

        flex-wrap: wrap;
    }

    .nav-buttons {
        gap: 7px;
    }

    .btn-login,
    .btn-register {
        padding: 9px 12px;

        font-size: 11px;
    }

    .hero {
        grid-template-columns: 1fr;

        text-align: center;

        padding-top: 55px;
    }

    .hero-content {
        display: flex;

        flex-direction: column;

        align-items: center;
    }

    .hero h1 {
        font-size: 48px;
    }

    .hero p {
        font-size: 14px;
    }

    .hero-buttons {
        justify-content: center;

        flex-wrap: wrap;
    }

    .market-card {
        width: min(390px, 90%);

        transform: none;
    }

    .feature-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .steps {
        grid-template-columns: 1fr;
    }

    .cta {
        margin-left: 20px;
        margin-right: 20px;
    }

}


/* ==========================================================
   MÓVIL PEQUEÑO
   ========================================================== */

@media (max-width: 520px) {

    .navbar {
        width: calc(100% - 20px);

        margin: 10px auto;
    }

    .logo-text {
        font-size: 21px;
    }

    .nav-links {
        gap: 3px;
    }

    .nav-links a {
        padding: 7px 9px;

        font-size: 11px;
    }

    .hero {
        padding:
            45px 20px
            60px;
    }

    .hero h1 {
        font-size: 40px;

        letter-spacing: -2px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .features,
    .how-section {
        padding:
            65px 20px;
    }

    .section-title h2 {
        font-size: 30px;
    }

    .cta {
        padding: 45px 20px;
    }

}
/* ==========================================================
   BOTÓN MODO OSCURO
   ========================================================== */

.navbar {
    position: relative;
}

.theme-toggle {
    position: fixed;

    top: 15px;
    right: 500px;
    left: auto;
    bottom: auto;

    z-index: 9999;

    width: 45px;
    height: 45px;
}

/* BOTÓN EN MODO OSCURO */
body.dark-mode .theme-toggle {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .12);
    color: #f1f5f9;
    box-shadow: var(--sombra);
}

/* EFECTO AL PASAR EL MOUSE */
.theme-toggle:hover {
    transform: scale(1.08);
}

/* MÓVIL */
@media (max-width: 600px) {
    .theme-toggle {
        position: absolute;
        top: 12px;
        right: 15px !important;
        left: auto;
        bottom: auto;

        width: 40px;
        height: 40px;
    }
}


/* ==========================================================
   MODO OSCURO
========================================================== */

body.dark-mode {

    --bg-color: #171b24;
    --texto: #eaeef0;
    --gris: #a7b0bf;

    --glass: rgba(35, 41, 54, .55);
    --glass-light: rgba(60, 68, 84, .65);
    --glass-border: rgba(255,255,255,.10);

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(37,99,235,.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(6,182,212,.12),
            transparent 30%
        ),
        #171b24;

    color: var(--texto);
}


/* NAVBAR */

body.dark-mode .navbar {
    background:
        linear-gradient(
            145deg,
            rgba(45,52,66,.75),
            rgba(25,30,40,.55)
        );

    border-color: rgba(255,255,255,.10);

    box-shadow:
        10px 10px 25px rgba(0,0,0,.45),
        -8px -8px 20px rgba(255,255,255,.03);
}


/* LINKS */

body.dark-mode .nav-links a {
    color: #dbe4ef;
}

body.dark-mode .nav-links a:hover {
    color: #60a5fa;

    background: rgba(255,255,255,.06);

    box-shadow:
        inset 4px 4px 8px rgba(0,0,0,.30),
        inset -4px -4px 8px rgba(255,255,255,.04);
}


/* LOGIN */

body.dark-mode .btn-login {
    color: #60a5fa;

    background: rgba(255,255,255,.06);

    border-color: rgba(255,255,255,.10);

    box-shadow:
        6px 6px 12px rgba(0,0,0,.40),
        -5px -5px 12px rgba(255,255,255,.03);
}


/* BOTÓN TEMA */

body.dark-mode .theme-toggle {
    background: rgba(255,255,255,.07);

    box-shadow:
        6px 6px 12px rgba(0,0,0,.45),
        -5px -5px 12px rgba(255,255,255,.03);
}


/* TARJETA PRODUCTO */

body.dark-mode .market-card {

    background:
        linear-gradient(
            145deg,
            rgba(45,52,66,.75),
            rgba(25,30,40,.55)
        );

    border-color: rgba(255,255,255,.10);

    box-shadow:
        12px 12px 25px rgba(0,0,0,.50),
        -8px -8px 20px rgba(255,255,255,.03);
}


/* IMAGEN PRODUCTO */

body.dark-mode .product-image {

    background:
        linear-gradient(
            145deg,
            rgba(60,68,84,.60),
            rgba(30,35,45,.50)
        );

    box-shadow:
        inset 6px 6px 12px rgba(0,0,0,.45),
        inset -5px -5px 10px rgba(255,255,255,.04);
}


/* CARACTERÍSTICAS */

body.dark-mode .feature-card {

    background:
        linear-gradient(
            145deg,
            rgba(45,52,66,.65),
            rgba(25,30,40,.50)
        );

    border-color: rgba(255,255,255,.08);

    box-shadow:
        10px 10px 22px rgba(0,0,0,.45),
        -8px -8px 18px rgba(255,255,255,.03);
}


/* ICONOS */

body.dark-mode .feature-icon {

    background: rgba(255,255,255,.06);

    box-shadow:
        6px 6px 12px rgba(0,0,0,.40),
        -5px -5px 10px rgba(255,255,255,.03);
}


/* PASOS */

body.dark-mode .step {

    background:
        rgba(40,47,60,.60);

    border-color: rgba(255,255,255,.08);

    box-shadow:
        10px 10px 22px rgba(0,0,0,.45),
        -8px -8px 18px rgba(255,255,255,.03);
}


/* NÚMEROS */

body.dark-mode .step-number {

    background: rgba(255,255,255,.06);

    box-shadow:
        6px 6px 12px rgba(0,0,0,.40),
        -5px -5px 10px rgba(255,255,255,.03);
}


/* CTA */

body.dark-mode .cta {

    background:
        linear-gradient(
            145deg,
            rgba(45,52,66,.75),
            rgba(25,30,40,.55)
        );

    border-color: rgba(255,255,255,.10);

    box-shadow:
        12px 12px 25px rgba(0,0,0,.50),
        -8px -8px 20px rgba(255,255,255,.03);
}


/* PRECIO */

body.dark-mode .price {
    color: #f1f5f9;
}


/* BOTÓN VER PRODUCTO */

body.dark-mode .buy-btn {

    color: #60a5fa;

    background: rgba(255,255,255,.06);

    box-shadow:
        5px 5px 10px rgba(0,0,0,.40),
        -4px -4px 9px rgba(255,255,255,.03);
}


/* FOOTER */

body.dark-mode footer {

    background: rgba(20,25,34,.65);

    border-top-color: rgba(255,255,255,.08);

    box-shadow:
        0 -8px 20px rgba(0,0,0,.30);
}


/* TRANSICIÓN GENERAL */

body,
.navbar,
.market-card,
.feature-card,
.step,
.cta,
footer,
.product-image,
.feature-icon,
.step-number,
.btn-login,
.theme-toggle {
    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}



/* ==========================================================
   CORRECCIÓN FINAL DE LAYOUT
   ========================================================== */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.layout {
    display: block;
    width: 100%;
    max-width: 100%;
}

.layout > .content,
.layout > .contenido {
    width: calc(100% - 275px);
    max-width: none;
    margin-left: 275px;
    padding: 110px 35px 40px;
}

body > .content,
body > .contenido {
    width: calc(100% - 275px);
    max-width: none;
    margin-left: 275px;
}

.content *,
.contenido * {
    max-width: 100%;
}

.hero,
.productos-grid,
.favoritos,
.stats,
.actions,
.products,
.feature-grid {
    width: 100%;
    min-width: 0;
}

img, video, iframe {
    max-width: 100%;
}

main.container {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 900px) {
    .layout > .content,
    .layout > .contenido,
    body > .content,
    body > .contenido {
        width: 100%;
        margin-left: 0;
        padding: 105px 20px 30px;
    }

    .sidebar {
        width: auto;
        max-width: calc(100% - 20px);
        left: 10px;
        right: 10px;
    }

    .productos-grid,
    .favoritos,
    .products {
        grid-template-columns: 1fr;
    }

    .hero {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 600px) {
    .layout > .content,
    .layout > .contenido,
    body > .content,
    body > .contenido {
        padding: 90px 14px 25px;
    }

    .hero {
        padding: 20px;
    }

    .card,
    .producto-card,
    .perfil,
    .contact-card,
    .report-card {
        width: 100%;
    }
}

/* ==========================================================
   CORRECCION GLOBAL FINAL - TODAS LAS PAGINAS
   Evita que contenido, perfiles, formularios y tarjetas
   se desplacen hacia la derecha o se corten.
   ========================================================== */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*, *::before, *::after {
    box-sizing: border-box;
}

.layout {
    display: block;
    width: 100%;
    max-width: 100%;
}

.layout > .content,
.layout > .contenido {
    width: calc(100% - 240px);
    max-width: none;
    margin-left: 240px;
    padding: 110px 35px 40px;
}

body > .content,
body > .contenido {
    width: calc(100% - 240px);
    max-width: none;
    margin-left: 240px;
    padding: 110px 35px 40px;
}

/* Contenedores internos */
.content > .contenedor,
.contenido > .contenedor,
.content > .perfil,
.contenido > .perfil,
.content > .formulario,
.contenido > .formulario,
.content > .producto-container,
.contenido > .producto-container,
.content > .chat-list,
.contenido > .chat-list {
    width: 100%;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

/* Perfil y editar perfil */
.perfil {
    width: 100%;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
}

.formulario {
    width: 100%;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
}

.perfil form,
.perfil input,
.perfil textarea,
.perfil select,
.formulario input,
.formulario textarea,
.formulario select,
.formulario button {
    max-width: 100%;
}

/* Evita que grids y tarjetas provoquen overflow */
.productos-grid,
.favoritos,
.products,
.stats,
.actions,
.feature-grid,
.datos {
    width: 100%;
    min-width: 0;
}

.productos-grid > *,
.favoritos > *,
.products > *,
.stats > *,
.actions > *,
.datos > * {
    min-width: 0;
    max-width: 100%;
}

img, video, iframe {
    max-width: 100%;
}

/* Tablas */
.table-container,
.tabla-contenedor {
    max-width: 100%;
    overflow-x: auto;
}

/* Pantallas medianas */
@media (max-width: 900px) {
    .layout > .content,
    .layout > .contenido,
    body > .content,
    body > .contenido {
        width: 100%;
        margin-left: 0;
        padding: 100px 20px 30px;
    }

    .sidebar {
        left: 10px;
        right: 10px;
        width: auto;
        max-width: calc(100% - 20px);
    }

    .perfil,
    .formulario,
    .contenedor,
    .producto-container,
    .chat-list {
        width: 100%;
        max-width: 100%;
    }

    .datos,
    .productos-grid,
    .favoritos,
    .products {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .layout > .content,
    .layout > .contenido,
    body > .content,
    body > .contenido {
        padding: 90px 14px 25px;
    }

    .perfil,
    .contact-card,
    .report-card {
        padding: 22px 15px;
    }

    .formulario {
        width: 100%;
    }

    .acciones,
    .buttons {
        flex-direction: column;
    }

    .acciones > *,
    .buttons > * {
        width: 100%;
    }
}

/* ==========================================================
   BOTÓN MODO OSCURO
   ========================================================== */

.theme-toggle {
    position: fixed;
    bottom: auto;
    top: 150px;
    left: 200px;
    z-index: 9999;

    width: 45px;
    height: 45px;

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.75);

    font-size: 20px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        transform .2s ease;

    box-shadow:
        6px 6px 12px rgba(0, 0, 0, .12),
        -5px -5px 12px rgba(255, 255, 255, .8);
}

.theme-toggle:hover {
    transform: scale(1.08);
}


/* BOTÓN EN MODO OSCURO */

body.dark-mode .theme-toggle {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .10);
    color: #f1f5f9;

    box-shadow:
        6px 6px 12px rgba(0,0,0,.45),
        -5px -5px 12px rgba(255,255,255,.03);
}


/* MÓVIL */

@media (max-width: 600px) {

    .theme-toggle {
        top: 12px;
        right: 15px;

        width: 40px;
        height: 40px;

        font-size: 18px;
    }

}

/* ==========================================================
   MENÚ LATERAL - MODO OSCURO
   ========================================================== */

body.dark-mode .sidebar {
    background:
        linear-gradient(
            145deg,
            rgba(35, 41, 54, .95),
            rgba(20, 25, 34, .98)
        );

    border-color: rgba(255, 255, 255, .10);

    box-shadow:
        10px 0 25px rgba(0, 0, 0, .45);
}


/* LOGO DEL MENÚ */

body.dark-mode .sidebar .logo {
    color: #f1f5f9;
}

body.dark-mode .sidebar .logo span {
    color: #60a5fa;
}


/* TÍTULO DEL MENÚ */

body.dark-mode .menu-titulo {
    color: #8f9aaa;
}


/* OPCIONES DEL MENÚ */

body.dark-mode .menu-item {
    color: #dbe4ef;

    background: transparent;
}


/* AL PASAR EL MOUSE */

body.dark-mode .menu-item:hover {
    color: #ffffff;

    background: rgba(255, 255, 255, .07);

    box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, .30),
        inset -4px -4px 8px rgba(255, 255, 255, .03);
}


/* OPCIÓN ACTIVA */

body.dark-mode .menu-item.activo {
    color: #60a5fa;

    background:
        rgba(37, 99, 235, .16);

    box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, .25),
        inset -4px -4px 8px rgba(255, 255, 255, .03);
}


/* CERRAR SESIÓN */

body.dark-mode .menu-item.logout {
    color: #f87171;
}

body.dark-mode .menu-item.logout:hover {
    color: #fca5a5;

    background: rgba(239, 68, 68, .10);
}

/* ==========================================================
   ADMINISTRADOR - MODO OSCURO
   ========================================================== */

/* FONDO GENERAL */

body.dark-mode {
    background: #171b24;
    color: #f1f5f9;
}


/* BARRA SUPERIOR */

body.dark-mode .topbar {
    background:
        linear-gradient(
            145deg,
            rgba(45, 52, 66, .95),
            rgba(25, 30, 40, .95)
        );

    border-bottom-color: rgba(255, 255, 255, .10);

    box-shadow:
        0 5px 20px rgba(0, 0, 0, .35);
}

body.dark-mode .brand {
    color: #f1f5f9;
}

body.dark-mode .brand span {
    color: #60a5fa;
}

body.dark-mode .admin-name {
    color: #dbe4ef;
}


/* ==========================================================
   MENÚ LATERAL
   ========================================================== */

body.dark-mode .sidebar {
    background:
        linear-gradient(
            145deg,
            rgba(35, 41, 54, .98),
            rgba(20, 25, 34, .98)
        );

    border-right-color: rgba(255, 255, 255, .10);

    box-shadow:
        10px 0 25px rgba(0, 0, 0, .45);
}


/* TÍTULO DEL MENÚ */

body.dark-mode .sidebar-title {
    color: #f1f5f9;
}


/* LINKS DEL MENÚ */

body.dark-mode .menu a {
    color: #dbe4ef;
    background: transparent;
}


/* HOVER */

body.dark-mode .menu a:hover {
    color: #ffffff;

    background: rgba(255, 255, 255, .07);

    box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, .30),
        inset -4px -4px 8px rgba(255, 255, 255, .03);
}


/* LINK ACTIVO */

body.dark-mode .menu a.active {
    color: #60a5fa;

    background: rgba(37, 99, 235, .16);

    box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, .25),
        inset -4px -4px 8px rgba(255, 255, 255, .03);
}


/* CERRAR SESIÓN */

body.dark-mode .menu a.logout {
    color: #f87171;
}

body.dark-mode .menu a.logout:hover {
    color: #fca5a5;
    background: rgba(239, 68, 68, .10);
}


/* ==========================================================
   CONTENIDO DEL ADMINISTRADOR
   ========================================================== */

body.dark-mode .content {
    color: #f1f5f9;
}

body.dark-mode .content h1,
body.dark-mode .content h2,
body.dark-mode .content h3 {
    color: #f1f5f9;
}

body.dark-mode .welcome {
    color: #a7b0bf;
}

body.dark-mode .section-title {
    color: #f1f5f9;
}


/* ==========================================================
   TARJETAS DE ESTADÍSTICAS
   ========================================================== */

body.dark-mode .stat-card {
    background:
        linear-gradient(
            145deg,
            rgba(45, 52, 66, .80),
            rgba(25, 30, 40, .65)
        );

    border-color: rgba(255, 255, 255, .10);

    box-shadow:
        10px 10px 22px rgba(0, 0, 0, .45),
        -8px -8px 18px rgba(255, 255, 255, .03);
}

body.dark-mode .stat-card h3 {
    color: #a7b0bf;
}

body.dark-mode .stat-number {
    color: #60a5fa;
}


/* ==========================================================
   TARJETAS DE ACCIONES
   ========================================================== */

body.dark-mode .action-card {
    background:
        linear-gradient(
            145deg,
            rgba(45, 52, 66, .80),
            rgba(25, 30, 40, .65)
        );

    border-color: rgba(255, 255, 255, .10);

    box-shadow:
        10px 10px 22px rgba(0, 0, 0, .45),
        -8px -8px 18px rgba(255, 255, 255, .03);
}

body.dark-mode .action-card h2 {
    color: #f1f5f9;
}

body.dark-mode .action-card p {
    color: #a7b0bf;
}


/* ==========================================================
   BOTONES
   ========================================================== */

body.dark-mode .action-btn {
    background: rgba(255, 255, 255, .06);

    color: #60a5fa;

    border-color: rgba(255, 255, 255, .10);

    box-shadow:
        5px 5px 10px rgba(0, 0, 0, .40),
        -4px -4px 9px rgba(255, 255, 255, .03);
}

body.dark-mode .action-btn:hover {
    background: rgba(37, 99, 235, .15);
    color: #93c5fd;
}


/* ==========================================================
   TRANSICIONES
   ========================================================== */

body,
.topbar,
.sidebar,
.menu a,
.content,
.stat-card,
.action-card,
.action-btn {
    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}
/* ==========================================================
   STARPOINT - UNIFICACIÓN FINAL
   Correcciones globales y modo oscuro consistente
   ========================================================== */

:root {
    --bg-color: #e0e5ec;
    --glass: rgba(255,255,255,.42);
    --glass-hover: rgba(255,255,255,.55);
    --glass-active: rgba(210,220,235,.38);
    --glass-light: rgba(255,255,255,.70);
    --glass-border: rgba(255,255,255,.65);
    --shadow-light: #ffffff;
    --shadow-dark: #a3b1c6;
    --azul: #2563eb;
    --azul-oscuro: #1e40af;
    --texto: #2d3748;
    --gris: #64748b;
    --rojo: #e11d48;
    --verde: #16a34a;
    --blanco: #ffffff;
    --sombra: 8px 8px 16px rgba(163,177,198,.55), -8px -8px 16px rgba(255,255,255,.80);
    --sombra-card: 10px 10px 25px rgba(163,177,198,.45), -8px -8px 20px rgba(255,255,255,.70);
    --sombra-inset: inset 5px 5px 10px rgba(163,177,198,.45), inset -5px -5px 10px rgba(255,255,255,.70);
    --radio: 18px;
    --transicion: .25s ease;
}

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

body {
    color: var(--texto);
    background-color: var(--bg-color);
}

*, *::before, *::after {
    box-sizing: border-box;
}

img, video, iframe, svg {
    max-width: 100%;
}

/* Evita que los contenedores se salgan de la pantalla */
.contenido, .content, .container, .contenedor, .layout,
main, section, .producto-container, .chat-container,
.login-wrapper {
    max-width: 100%;
}

.contenido, .content, .container, .contenedor {
    box-sizing: border-box;
}

/* ==========================================================
   MODO OSCURO - VARIABLES CENTRALES
   ========================================================== */

body.dark-mode {
    --bg-color: #171b24;
    --glass: rgba(35,41,54,.62);
    --glass-hover: rgba(55,63,80,.72);
    --glass-active: rgba(25,30,40,.75);
    --glass-light: rgba(60,68,84,.70);
    --glass-border: rgba(255,255,255,.10);
    --shadow-light: rgba(255,255,255,.035);
    --shadow-dark: rgba(0,0,0,.48);
    --texto: #eaeef0;
    --gris: #a7b0bf;
    --azul: #60a5fa;
    --azul-oscuro: #93c5fd;
    --blanco: #ffffff;
    --sombra: 8px 8px 18px rgba(0,0,0,.45), -6px -6px 16px rgba(255,255,255,.025);
    --sombra-card: 12px 12px 28px rgba(0,0,0,.50), -8px -8px 20px rgba(255,255,255,.025);
    --sombra-inset: inset 5px 5px 10px rgba(0,0,0,.38), inset -5px -5px 10px rgba(255,255,255,.025);
}

body.dark-mode {
    background:
        radial-gradient(circle at 10% 10%, rgba(37,99,235,.18), transparent 30%),
        radial-gradient(circle at 90% 80%, rgba(6,182,212,.12), transparent 30%),
        #171b24;
    color: var(--texto);
}

/* ==========================================================
   ELEMENTOS GENERALES EN OSCURO
   ========================================================== */

body.dark-mode .topbar,
body.dark-mode .header,
body.dark-mode .sidebar,
body.dark-mode .navbar,
body.dark-mode .hero,
body.dark-mode .card,
body.dark-mode .producto-card,
body.dark-mode .market-card,
body.dark-mode .stat-card,
body.dark-mode .action-card,
body.dark-mode .product,
body.dark-mode .report,
body.dark-mode .perfil,
body.dark-mode .categories-container,
body.dark-mode .table-container,
body.dark-mode .users-header,
body.dark-mode .search-container,
body.dark-mode .contact-card,
body.dark-mode .report-card,
body.dark-mode .auth-card,
body.dark-mode .chat-item,
body.dark-mode .chat-container,
body.dark-mode .producto-container,
body.dark-mode .vendedor-card {
    background: linear-gradient(145deg, rgba(45,52,66,.78), rgba(25,30,40,.62));
    border-color: var(--glass-border);
    box-shadow: var(--sombra-card);
    color: var(--texto);
}

body.dark-mode .menu-item,
body.dark-mode .menu a,
body.dark-mode .sidebar > a,
body.dark-mode .dato,
body.dark-mode .report-item,
body.dark-mode .seller,
body.dark-mode .category,
body.dark-mode .empty,
body.dark-mode .vacio,
body.dark-mode .sin-productos,
body.dark-mode .message,
body.dark-mode .mensaje,
body.dark-mode .feature-item,
body.dark-mode .descripcion-block,
body.dark-mode .chat-header,
body.dark-mode .img-container,
body.dark-mode .product-image,
body.dark-mode .admin-name,
body.dark-mode .counter,
body.dark-mode .contador {
    background: rgba(255,255,255,.055);
    border-color: rgba(255,255,255,.09);
    box-shadow: var(--sombra-inset);
    color: var(--texto);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode label,
body.dark-mode strong,
body.dark-mode .logo,
body.dark-mode .brand,
body.dark-mode .topbar .logo,
body.dark-mode .header .logo,
body.dark-mode .nav-links a,
body.dark-mode .menu-item,
body.dark-mode .menu a,
body.dark-mode .sidebar > a {
    color: var(--texto);
}

body.dark-mode .gris,
body.dark-mode .texto-ayuda,
body.dark-mode .descripcion,
body.dark-mode .description,
body.dark-mode .vendedor,
body.dark-mode .seller-email,
body.dark-mode .email,
body.dark-mode .date,
body.dark-mode .fecha,
body.dark-mode .info,
body.dark-mode .count,
body.dark-mode .welcome,
body.dark-mode .slogan,
body.dark-mode .hero p,
body.dark-mode .auth-header p,
body.dark-mode .auth-footer,
body.dark-mode .banner-subtitle,
body.dark-mode .product-info p,
body.dark-mode .chat-info p {
    color: var(--gris);
}

/* ==========================================================
   NAVEGACIÓN
   ========================================================== */

body.dark-mode .nav-links a:hover,
body.dark-mode .menu-item:hover,
body.dark-mode .menu a:hover,
body.dark-mode .sidebar > a:hover {
    color: var(--azul);
    background: rgba(255,255,255,.08);
    box-shadow: var(--sombra-inset);
}

body.dark-mode .menu-item.activo,
body.dark-mode .menu a.active,
body.dark-mode .menu a.activo,
body.dark-mode .sidebar > a.active,
body.dark-mode .sidebar > a.activo {
    color: var(--azul);
    background: rgba(37,99,235,.16);
    box-shadow: var(--sombra-inset), 0 0 0 1px rgba(96,165,250,.08);
}

body.dark-mode .logo span,
body.dark-mode .brand span,
body.dark-mode .topbar .logo span,
body.dark-mode .banner-logo span,
body.dark-mode .mobile-brand span,
body.dark-mode .hero h1 span,
body.dark-mode .logo-text {
    color: var(--azul);
}

/* ==========================================================
   INPUTS Y BUSCADORES
   ========================================================== */

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .search,
body.dark-mode .search-box,
body.dark-mode .busqueda input,
body.dark-mode .chat-container .formulario input {
    background: rgba(10,14,20,.38);
    color: var(--texto);
    border-color: rgba(255,255,255,.12);
    box-shadow: var(--sombra-inset);
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #8792a3;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus,
body.dark-mode .search:focus,
body.dark-mode .search-box:focus {
    border-color: rgba(96,165,250,.45);
    box-shadow: var(--sombra-inset), 0 0 0 2px rgba(96,165,250,.15);
}

/* ==========================================================
   BOTONES
   ========================================================== */

body.dark-mode .btn,
body.dark-mode .boton,
body.dark-mode .btn-action,
body.dark-mode .btn-submit,
body.dark-mode .btn-subir,
body.dark-mode .btn-detalle,
body.dark-mode .btn-chat,
body.dark-mode .btn-favorito,
body.dark-mode .boton-foto,
body.dark-mode .action-btn,
body.dark-mode .secondary-btn,
body.dark-mode .btn-login,
body.dark-mode .back,
body.dark-mode .volver {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.10);
    color: var(--azul);
    box-shadow: var(--sombra);
}

body.dark-mode .btn-register,
body.dark-mode .primary-btn {
    color: #fff;
    background: linear-gradient(135deg,#2563eb,#1e40af);
    border-color: rgba(96,165,250,.25);
}

body.dark-mode .btn:hover,
body.dark-mode .boton:hover,
body.dark-mode .btn-action:hover,
body.dark-mode .btn-submit:hover,
body.dark-mode .btn-subir:hover,
body.dark-mode .btn-detalle:hover,
body.dark-mode .btn-chat:hover,
body.dark-mode .btn-favorito:hover,
body.dark-mode .boton-foto:hover,
body.dark-mode .action-btn:hover,
body.dark-mode .secondary-btn:hover,
body.dark-mode .btn-login:hover,
body.dark-mode .back:hover,
body.dark-mode .volver:hover {
    background: rgba(255,255,255,.11);
    color: #93c5fd;
}

/* ==========================================================
   BOTÓN MODO OSCURO
   ========================================================== */

.navbar {
    position: relative;
}

.theme-toggle {
    position: absolute;
    right: 400px !important;
    top: 7px;
}
body.dark-mode .theme-toggle {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
    color: #f1f5f9;
    box-shadow: var(--sombra);
}

/* ==========================================================
   TABLAS
   ========================================================== */

body.dark-mode .table-container td,
body.dark-mode .tabla-contenedor td {
    background: rgba(255,255,255,.045);
    color: var(--texto);
}

body.dark-mode .table-container tbody tr:hover td,
body.dark-mode .tabla-contenedor tbody tr:hover td {
    background: rgba(255,255,255,.085);
}

/* ==========================================================
   LOGIN
   ========================================================== */

body.dark-mode .login-banner,
body.dark-mode .login-content {
    background: rgba(15,19,27,.28);
    border-color: rgba(255,255,255,.08);
}

/* ==========================================================
   ESTADOS
   ========================================================== */

body.dark-mode .role-admin,
body.dark-mode .estado.leido,
body.dark-mode .category-badge {
    color: #93c5fd;
    background: rgba(37,99,235,.16);
}

body.dark-mode .role-user {
    color: #cbd5e1;
    background: rgba(148,163,184,.12);
}

body.dark-mode .estado.pendiente {
    color: #fbbf24;
    background: rgba(245,158,11,.14);
}

body.dark-mode .estado.respondido {
    color: #4ade80;
    background: rgba(22,163,74,.14);
}

/* ==========================================================
   SCROLLBAR OSCURA
   ========================================================== */

body.dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,.35);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--azul);
}

/* ==========================================================
   COMPATIBILIDAD SIN BACKDROP FILTER
   ========================================================== */

@supports not (backdrop-filter: blur(18px)) {
    body.dark-mode .topbar,
    body.dark-mode .header,
    body.dark-mode .sidebar,
    body.dark-mode .navbar,
    body.dark-mode .hero,
    body.dark-mode .card,
    body.dark-mode .producto-card,
    body.dark-mode .market-card,
    body.dark-mode .perfil,
    body.dark-mode .auth-card {
        background: #252b37;
    }
}

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

@media (max-width: 1100px) {
    .contenido, .content {
        width: calc(100% - 240px);
        margin-left: 240px;
        padding-left: 25px;
        padding-right: 25px;
    }
}

@media (max-width: 900px) {
    .contenido, .content, .container, .contenedor {
        width: 100%;
        margin-left: 0;
        padding: 105px 20px 30px;
    }

    .sidebar {
        left: 10px;
        right: 10px;
        width: auto;
        max-width: calc(100% - 20px);
    }

    .productos-grid,
    .favoritos,
    .products {
        grid-template-columns: 1fr;
    }

    .datos,
    .actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .theme-toggle {
        top: 12px;
        right: 15px !important;
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .contenido, .content, .container, .contenedor {
        padding-left: 14px;
        padding-right: 14px;
    }

    .hero {
        padding: 25px;
    }

    .producto-container {
        width: 100%;
        padding: 20px;
        gap: 25px;
    }

    .login-content {
        padding: 25px 18px;
    }
}

/* ==========================================================
   ADMIN PRODUCTOS - MODO OSCURO
   Gestionar Productos + Productos del Usuario
   ========================================================== */

body.dark-mode {

    --card-bg: rgba(45, 52, 66, 0.78);
    --card-border: rgba(255,255,255,0.10);
}

/* ==========================================================
   TARJETAS DE USUARIO
   ========================================================== */

body.dark-mode .usuario-card,
body.dark-mode .usuario-header {

    background:
        linear-gradient(
            145deg,
            rgba(45,52,66,.78),
            rgba(25,30,40,.62)
        );

    border: 1px solid rgba(255,255,255,.10);

    color: var(--texto);

    box-shadow:
        12px 12px 28px rgba(0,0,0,.50),
        -8px -8px 20px rgba(255,255,255,.025);
}

/* Hover */

body.dark-mode .usuario-card:hover {

    transform: translateY(-5px);

    background:
        linear-gradient(
            145deg,
            rgba(55,63,80,.82),
            rgba(30,36,48,.68)
        );

    box-shadow:
        14px 14px 30px rgba(0,0,0,.55),
        -8px -8px 20px rgba(255,255,255,.03);
}

/* ==========================================================
   ICONO DE USUARIO
   ========================================================== */

body.dark-mode .usuario-icono {

    background:
        linear-gradient(
            145deg,
            #252c3a,
            #161b25
        );

    color: #a78bfa;

    border: 1px solid rgba(255,255,255,.10);

    box-shadow:
        6px 6px 14px rgba(0,0,0,.40),
        -4px -4px 10px rgba(255,255,255,.02);
}

/* ==========================================================
   TEXTO
   ========================================================== */

body.dark-mode .usuario-card h2,
body.dark-mode .usuario-header h2,
body.dark-mode .product h2 {

    color: #f1f5f9;
}

body.dark-mode .usuario-card p,
body.dark-mode .usuario-header p {

    color: #a7b0bf;
}

body.dark-mode .description {

    color: #a7b0bf;
}

body.dark-mode .info {

    color: #8f9aaa;
}

body.dark-mode .no-image {

    color: #a7b0bf;
}

/* ==========================================================
   CONTADORES Y BADGES
   ========================================================== */

body.dark-mode .cantidad-productos,
body.dark-mode .category-badge {

    background: rgba(37,99,235,.16);

    color: #93c5fd;

    border: 1px solid rgba(96,165,250,.15);
}

/* ==========================================================
   FLECHA
   ========================================================== */

body.dark-mode .flecha {

    color: #93c5fd;
}

/* ==========================================================
   PRODUCTOS
   ========================================================== */

body.dark-mode .product {

    background:
        linear-gradient(
            145deg,
            rgba(45,52,66,.78),
            rgba(25,30,40,.62)
        );

    border: 1px solid rgba(255,255,255,.10);

    color: var(--texto);

    box-shadow:
        12px 12px 28px rgba(0,0,0,.50),
        -8px -8px 20px rgba(255,255,255,.025);
}

/* Hover producto */

body.dark-mode .product:hover {

    transform: translateY(-5px);

    box-shadow:
        14px 14px 30px rgba(0,0,0,.55),
        -8px -8px 20px rgba(255,255,255,.03);
}

/* ==========================================================
   IMÁGENES
   ========================================================== */

body.dark-mode .img-container {

    background: rgba(255,255,255,.055);

    border: 1px solid rgba(255,255,255,.08);

    box-shadow:
        inset 5px 5px 10px rgba(0,0,0,.35),
        inset -5px -5px 10px rgba(255,255,255,.02);
}

/* ==========================================================
   PRECIO
   ========================================================== */

body.dark-mode .price {

    color: #60a5fa;
}

/* ==========================================================
   BOTÓN ELIMINAR
   ========================================================== */

body.dark-mode .delete-btn {

    background: #dc2626;

    color: white;

    box-shadow:
        5px 5px 12px rgba(0,0,0,.35);
}

body.dark-mode .delete-btn:hover {

    background: #ef4444;
}

/* ==========================================================
   EMPTY
   ========================================================== */

body.dark-mode .empty {

    color: var(--texto);
}

body.dark-mode .empty p {

    color: var(--gris);
}

/* ==========================================================
   CONTENEDOR GENERAL
   ========================================================== */

body.dark-mode .container {

    color: var(--texto);
}

body.dark-mode .container p {

    color: var(--gris);
}

/* ==========================================================
   TOPBAR
   ========================================================== */

body.dark-mode .topbar {

    background:
        linear-gradient(
            145deg,
            rgba(35,41,54,.95),
            rgba(20,25,34,.98)
        );

    border-bottom: 1px solid rgba(255,255,255,.08);

    box-shadow:
        0 8px 25px rgba(0,0,0,.35);
}

/* BOTÓN VOLVER */

body.dark-mode .back {

    background: rgba(255,255,255,.06);

    color: #dbe4ef;

    border: 1px solid rgba(255,255,255,.08);
}

body.dark-mode .back:hover {

    background: rgba(255,255,255,.10);

    color: #93c5fd;
}


/*super liqido*/

/* ==========================================================
   STARPOINT — LIQUID GLASS UI
   ========================================================== */

/* ----------------------------------------------------------
   VARIABLES
   ---------------------------------------------------------- */

:root {

    --liquid-bg:
        linear-gradient(
            135deg,
            rgba(255,255,255,.62),
            rgba(255,255,255,.28)
        );

    --liquid-border:
        rgba(255,255,255,.55);

    --liquid-highlight:
        rgba(255,255,255,.70);

    --liquid-shadow:
        0 20px 50px rgba(80,90,130,.22),
        0 5px 15px rgba(0,0,0,.08);

    --liquid-blur: blur(22px);

    --liquid-radius: 24px;
}


/* ==========================================================
   MODO OSCURO
   ========================================================== */

body.dark-mode {

    --liquid-bg:
        linear-gradient(
            135deg,
            rgba(55,65,85,.48),
            rgba(25,30,42,.36)
        );

    --liquid-border:
        rgba(255,255,255,.13);

    --liquid-highlight:
        rgba(255,255,255,.09);

    --liquid-shadow:
        0 25px 60px rgba(0,0,0,.45),
        0 8px 20px rgba(0,0,0,.25);
}


/* ==========================================================
   TARJETAS LIQUID GLASS
   ========================================================== */

body.dark-mode .usuario-card,
body.dark-mode .usuario-header,
body.dark-mode .product,
body.dark-mode .card,
body.dark-mode .producto-card,
body.dark-mode .market-card,
body.dark-mode .stat-card,
body.dark-mode .action-card,
body.dark-mode .perfil,
body.dark-mode .contact-card,
body.dark-mode .report-card,
body.dark-mode .auth-card {

    position: relative;

    background: var(--liquid-bg);

    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);

    border: 1px solid var(--liquid-border);

    border-radius: var(--liquid-radius);

    box-shadow: var(--liquid-shadow);

    overflow: hidden;

    isolation: isolate;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


/* ==========================================================
   REFLEJO SUPERIOR DEL VIDRIO
   ========================================================== */

body.dark-mode .usuario-card::before,
body.dark-mode .usuario-header::before,
body.dark-mode .product::before,
body.dark-mode .card::before,
body.dark-mode .producto-card::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: -1;

    background:
        linear-gradient(
            125deg,
            rgba(255,255,255,.18),
            transparent 35%,
            transparent 65%,
            rgba(255,255,255,.04)
        );

    opacity: .8;
}


/* ==========================================================
   BRILLO LÍQUIDO INTERNO
   ========================================================== */

body.dark-mode .usuario-card::after,
body.dark-mode .usuario-header::after,
body.dark-mode .product::after,
body.dark-mode .card::after,
body.dark-mode .producto-card::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -100px;
    left: -70px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.20),
            transparent 70%
        );

    filter: blur(12px);

    pointer-events: none;

    z-index: -1;
}


/* ==========================================================
   HOVER — EFECTO VIDRIO LÍQUIDO
   ========================================================== */

body.dark-mode .usuario-card:hover,
body.dark-mode .product:hover,
body.dark-mode .card:hover {

    transform: translateY(-6px) scale(1.008);

    border-color:
        rgba(147,197,253,.28);

    box-shadow:
        0 30px 70px rgba(0,0,0,.55),
        0 0 30px rgba(96,165,250,.08),
        inset 0 1px 0 rgba(255,255,255,.10);
}


/* ==========================================================
   TÍTULOS
   ========================================================== */

body.dark-mode .usuario-card h2,
body.dark-mode .usuario-header h2,
body.dark-mode .product h2 {

    color: #f8fafc;

    text-shadow:
        0 1px 10px rgba(255,255,255,.08);
}


/* ==========================================================
   TEXTOS SECUNDARIOS
   ========================================================== */

body.dark-mode .usuario-card p,
body.dark-mode .usuario-header p,
body.dark-mode .description {

    color: rgba(226,232,240,.68);
}


/* ==========================================================
   PRECIO
   ========================================================== */

body.dark-mode .price {

    color: #93c5fd;

    text-shadow:
        0 0 18px rgba(96,165,250,.20);
}


/* ==========================================================
   BADGES — VIDRIO
   ========================================================== */

body.dark-mode .cantidad-productos,
body.dark-mode .category-badge {

    background:
        linear-gradient(
            135deg,
            rgba(96,165,250,.20),
            rgba(37,99,235,.08)
        );

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border:
        1px solid rgba(147,197,253,.18);

    color: #bfdbfe;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 6px 15px rgba(0,0,0,.15);
}


/* ==========================================================
   CONTENEDOR DE IMAGEN
   ========================================================== */

body.dark-mode .img-container {

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.025)
        );

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -10px 25px rgba(0,0,0,.12);

    border-radius: 18px;
}


/* ==========================================================
   BOTÓN ELIMINAR — GLASS
   ========================================================== */

body.dark-mode .delete-btn {

    background:
        linear-gradient(
            135deg,
            rgba(239,68,68,.85),
            rgba(185,28,28,.75)
        );

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border:
        1px solid rgba(255,255,255,.12);

    box-shadow:
        0 8px 20px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.18);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


body.dark-mode .delete-btn:hover {

    background:
        linear-gradient(
            135deg,
            rgba(248,113,113,.9),
            rgba(220,38,38,.8)
        );

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(0,0,0,.35),
        0 0 20px rgba(239,68,68,.12);
}


/* ==========================================================
   BOTÓN DE TEMA
   ========================================================== */

body.dark-mode .theme-toggle {

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.04)
        );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border:
        1px solid rgba(255,255,255,.14);

    box-shadow:
        0 12px 30px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.10);

    color: #f8fafc;
}


/* ==========================================================
   TOPBAR
   ========================================================== */

body.dark-mode .topbar {

    background:
        linear-gradient(
            120deg,
            rgba(35,42,58,.70),
            rgba(15,20,30,.50)
        );

    backdrop-filter: blur(25px) saturate(140%);
    -webkit-backdrop-filter: blur(25px) saturate(140%);

    border-bottom:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        0 15px 35px rgba(0,0,0,.25);
}


/* ==========================================================
   BOTÓN VOLVER
   ========================================================== */

body.dark-mode .back {

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.035)
        );

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    border:
        1px solid rgba(255,255,255,.10);

    color: #dbeafe;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 8px 20px rgba(0,0,0,.18);
}


/* ==========================================================
   SCROLLBAR
   ========================================================== */

body.dark-mode::-webkit-scrollbar {

    width: 10px;
}

body.dark-mode::-webkit-scrollbar-track {

    background: rgba(10,14,22,.5);
}

body.dark-mode::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            180deg,
            rgba(147,197,253,.45),
            rgba(96,165,250,.18)
        );

    border-radius: 20px;

    border:
        2px solid rgba(10,14,22,.5);
}

body.dark-mode::-webkit-scrollbar-thumb:hover {

    background:
        linear-gradient(
            180deg,
            rgba(147,197,253,.65),
            rgba(96,165,250,.35)
        );
}


/* ==========================================================
   REDUCCIÓN DE EFECTOS SI EL USUARIO LO PREFIERE
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    body.dark-mode .usuario-card,
    body.dark-mode .product,
    body.dark-mode .card {

        transition: none;
    }
}


/* ==========================================================
   COMPATIBILIDAD
   ========================================================== */

@supports not (backdrop-filter: blur(20px)) {

    body.dark-mode .usuario-card,
    body.dark-mode .usuario-header,
    body.dark-mode .product,
    body.dark-mode .card {

        background:
            linear-gradient(
                145deg,
                rgba(45,52,66,.95),
                rgba(25,30,40,.95)
            );
    }
}

/*logo*/

.logo-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
}

.logo-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================
   BOTÓN MODO OSCURO - MOVIBLE CON EL CURSOR
   ========================================================== */

.theme-toggle {
    position: fixed !important;
    top: 10px;
    left: 225px;
    right: auto !important;
    bottom: auto !important;

    z-index: 99999;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.theme-toggle:active {
    cursor: grabbing;
}

/* ==========================================================
   PERFIL ADMINISTRADOR - DISEÑO EXCLUSIVO
   ========================================================== */

.admin-perfil-page {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}


/* ==========================================================
   CONTENEDOR PRINCIPAL
   ========================================================== */

.admin-perfil-contenedor {
    width: 100%;
    min-height: 100vh;

    box-sizing: border-box;

    padding: 120px 30px 50px;

    display: flex;
    flex-direction: column;
    align-items: center;

    margin: 0 auto;
}


/* ==========================================================
   BOTÓN VOLVER
   ========================================================== */

.admin-volver {
    align-self: center;

    margin-bottom: 35px;

    text-decoration: none;

    font-size: 18px;
    font-weight: 700;

    color: var(--azul);

    padding: 14px 22px;

    border-radius: 16px;

    background: rgba(255,255,255,.35);

    box-shadow: var(--sombra);

    transition: .25s ease;
}

.admin-volver:hover {
    transform: translateY(-2px);
}


/* ==========================================================
   TARJETA PRINCIPAL
   ========================================================== */

.admin-perfil-card {
    width: min(850px, 100%);

    box-sizing: border-box;

    margin: 0 auto;

    padding: 40px;

    border-radius: 28px;

    background: rgba(255,255,255,.45);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255,255,255,.65);

    box-shadow: var(--sombra);

    text-align: center;
}


/* ==========================================================
   ENCABEZADO
   ========================================================== */

.admin-perfil-encabezado {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    padding-bottom: 30px;
}


/* AVATAR */

.admin-avatar {
    width: 90px;
    height: 90px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border-radius: 50%;

    font-size: 30px;
    font-weight: 900;

    color: var(--azul);

    background: rgba(255,255,255,.55);

    border: 1px solid rgba(255,255,255,.7);

    box-shadow: var(--sombra);
}


/* NOMBRE */

.admin-perfil-encabezado h1 {
    margin: 0 0 6px;

    font-size: 36px;

    text-align: center;
}


/* SUBTÍTULO */

.admin-perfil-encabezado p {
    margin: 0;

    color: var(--gris);

    font-size: 18px;
}


/* ==========================================================
   DATOS
   ========================================================== */

.admin-datos {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

    text-align: left;
}


/* TARJETA DE DATO */

.admin-dato {
    min-width: 0;

    box-sizing: border-box;

    padding: 20px;

    border-radius: 18px;

    background: rgba(255,255,255,.35);

    border: 1px solid rgba(255,255,255,.55);

    box-shadow: var(--sombra);

    overflow: hidden;
}


/* TEXTO PEQUEÑO */

.admin-dato span {
    display: block;

    margin-bottom: 8px;

    color: var(--gris);

    font-size: 13px;
}


/* VALOR */

.admin-dato strong {
    display: block;

    word-break: break-word;

    font-size: 16px;
}


/* ROL OCUPA TODO EL ANCHO */

.admin-dato-rol {
    grid-column: 1 / -1;
}


/* ROL */

.admin-rol {
    color: var(--azul);
}


/* ==========================================================
   BOTONES
   ========================================================== */

.admin-acciones {
    width: 100%;

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 15px;

    margin-top: 30px;
}


/* ==========================================================
   MODO OSCURO
   ========================================================== */

body.dark-mode .admin-perfil-card {
    background: rgba(25,35,52,.70);

    border-color: rgba(255,255,255,.12);
}

body.dark-mode .admin-dato {
    background: rgba(255,255,255,.06);

    border-color: rgba(255,255,255,.10);
}

body.dark-mode .admin-avatar {
    background: rgba(255,255,255,.10);

    border-color: rgba(255,255,255,.15);
}


/* ==========================================================
   CELULAR
   ========================================================== */

@media (max-width: 700px) {

    .admin-perfil-contenedor {
        padding: 105px 15px 35px;
    }

    .admin-perfil-card {
        padding: 25px 18px;
    }

    .admin-perfil-encabezado h1 {
        font-size: 27px;
    }

    .admin-perfil-encabezado p {
        font-size: 16px;
    }

    .admin-datos {
        grid-template-columns: 1fr;
    }

    .admin-dato-rol {
        grid-column: auto;
    }

    .admin-acciones {
        flex-direction: column;
    }

    .admin-acciones .boton {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ==========================================================
   STARPOINT - RESPONSIVE MOBILE DEFINITIVO
   Menús, encabezados, tema y panel administrador
   ========================================================== */

.mobile-menu-btn {
    display: none;
}

@media (max-width: 900px) {
    .topbar,
    .header {
        height: 74px;
        padding: 0 14px;
        gap: 10px;
    }

    .logo-text {
        min-width: 0;
        max-width: 190px;
        flex-shrink: 1;
    }

    .logo-text span {
        font-size: 22px;
        white-space: nowrap;
    }

    .logo-img {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
    }

    .busqueda {
        display: none;
    }

    .usuario-top,
    .admin-name {
        display: none;
    }

    .mobile-menu-btn {
        display: flex !important;
        position: fixed;
        top: 16px;
        right: 14px;
        width: 44px;
        height: 44px;
        z-index: 10001;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* El modo claro/oscuro queda en la barra, junto al logo,
       y nunca encima del contenido. */
    .theme-toggle {
        position: fixed !important;
        top: 16px !important;
        left: min(180px, calc(100% - 120px)) !important;
        right: auto !important;
        bottom: auto !important;
        width: 44px !important;
        height: 44px !important;
        z-index: 10002;
        margin: 0;
        transform: none;
    }

    .theme-toggle:hover {
        transform: scale(1.05);
    }

    /* Menú lateral móvil */
    .sidebar {
        top: 84px !important;
        bottom: 14px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: calc(100vh - 98px);
        padding: 20px 14px !important;
        border-radius: 24px !important;
        transform: translateX(-115%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform .25s ease, opacity .2s ease, visibility .25s ease;
        overflow-y: auto;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .sidebar .menu a,
    .sidebar .menu-item,
    .sidebar > a {
        min-height: 52px;
        font-size: 15px;
        padding: 14px 16px;
        margin-bottom: 8px;
    }

    .sidebar-title,
    .menu-titulo {
        margin-bottom: 16px;
    }

    .layout > .content,
    .layout > .contenido,
    body > .content,
    body > .contenido,
    .content,
    .contenido,
    .container,
    .contenedor {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding: 100px 18px 30px !important;
    }

    .hero {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 26px 20px;
        margin-bottom: 22px;
    }

    .hero h1 {
        font-size: clamp(27px, 8vw, 36px);
        line-height: 1.12;
    }

    .hero p {
        font-size: 16px;
        line-height: 1.5;
    }

    .btn-subir,
    .btn,
    .btn-action,
    .btn-submit,
    .boton {
        min-height: 48px;
    }

    .stats,
    .actions,
    .products,
    .productos-grid,
    .favoritos,
    .feature-grid,
    .datos {
        grid-template-columns: 1fr !important;
    }

    .stats > *,
    .actions > *,
    .products > *,
    .productos-grid > *,
    .favoritos > * {
        min-width: 0;
    }

    .table-container,
    .tabla-contenedor {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .users-header,
    .card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .users-header .counter {
        width: 100%;
    }

    .admin-mobile-back {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 48px;
        margin: 0 0 22px;
        padding: 12px 16px;
        border-radius: 14px;
        text-decoration: none;
        color: var(--azul);
        font-weight: 800;
        background: rgba(255,255,255,.18);
        border: 1px solid rgba(255,255,255,.45);
        box-shadow: 5px 5px 12px rgba(0,0,0,.12), -4px -4px 10px rgba(255,255,255,.35);
    }

    .admin-mobile-back:hover {
        color: var(--azul-oscuro);
    }

    .admin-perfil-contenedor {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .admin-acciones {
        flex-direction: column;
    }

    .admin-acciones > * {
        width: 100%;
    }
}

@media (min-width: 901px) {
    .admin-mobile-back {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .topbar,
    .header {
        padding-left: 10px;
        padding-right: 10px;
    }

    .logo-text span {
        font-size: 20px;
    }

    .logo-img {
        width: 38px;
        height: 38px;
    }

    .mobile-menu-btn,
    .theme-toggle {
        width: 42px !important;
        height: 42px !important;
        top: 16px !important;
    }

    .theme-toggle {
        left: min(170px, calc(100% - 112px)) !important;
    }

    .mobile-menu-btn {
        right: 10px;
    }

    .contenido, .content, .container, .contenedor {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .hero {
        padding: 24px 16px;
    }

    .hero h1 {
        font-size: 28px;
    }
}


/* ==========================================================
   STARPOINT — BARRA MÓVIL INFERIOR FINAL
   Una sola fila, fija al fondo del teléfono.
   Todos los accesos caben en la misma línea.
========================================================== */
@media (max-width: 900px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body {
    padding-bottom: 0 !important;
  }

  .menu-btn,
  .mobile-menu-btn,
  .sidebar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* UNA SOLA BARRA: siempre pegada al fondo de la pantalla. */
  #sp-mobile-nav.mobile-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 68px !important;
    min-height: 68px !important;
    display: block !important;
    z-index: 2147483646 !important;
    box-sizing: border-box !important;
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: rgba(247, 249, 253, .98) !important;
    border: 0 !important;
    border-top: 1px solid rgba(100, 115, 140, .25) !important;
    box-shadow: 0 -5px 18px rgba(20, 35, 65, .18) !important;
    backdrop-filter: blur(18px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  }

  /* Los 8 accesos quedan EN UNA SOLA FILA. */
  #sp-mobile-nav .sp-nav-grid {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #sp-mobile-nav .sp-nav-item {
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 3px 1px !important;
    margin: 0 !important;
    border-radius: 7px !important;
    text-decoration: none !important;
    color: #536078 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    transition: background .15s ease, color .15s ease, transform .1s ease !important;
  }

  #sp-mobile-nav .sp-nav-item:active {
    transform: scale(.94) !important;
  }

  #sp-mobile-nav .sp-nav-item.active,
  #sp-mobile-nav .sp-nav-item[aria-current="page"] {
    background: rgba(52, 112, 224, .13) !important;
    color: #2463c8 !important;
  }

  #sp-mobile-nav .sp-nav-icon {
    display: block !important;
    font-size: 17px !important;
    line-height: 17px !important;
    height: 18px !important;
  }

  #sp-mobile-nav .sp-nav-label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    font-size: 7.5px !important;
    line-height: 9px !important;
    font-weight: 800 !important;
    color: inherit !important;
  }

  /* El contenido termina por encima de la barra. */
  .contenido,
  .content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-bottom: 88px !important;
    scroll-padding-bottom: 88px !important;
  }

  .layout,
  .container,
  .contenedor,
  main {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .layout { padding-bottom: 0 !important; }

  .contact-card,
  .report-card,
  .auth-card,
  .card,
  .form-card {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .contact-card form { padding-bottom: 70px !important; }

  .contact-card .btn-submit,
  .btn-submit,
  button[type="submit"] {
    position: relative !important;
    z-index: 2 !important;
    margin-bottom: 20px !important;
    scroll-margin-bottom: 88px !important;
    touch-action: manipulation !important;
  }

  input, textarea, select, button {
    max-width: 100%;
    box-sizing: border-box;
  }

  img, video, iframe {
    max-width: 100% !important;
    height: auto;
  }

  h1, h2, h3, p, .titulo, .welcome {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .theme-toggle {
    z-index: 2147483647 !important;
    pointer-events: auto !important;
  }

  .password-field { position: relative !important; width: 100% !important; }
  .password-field input { width: 100% !important; padding-right: 58px !important; }
  .password-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.65) !important;
    color: inherit !important;
    box-shadow: none !important;
    z-index: 10 !important;
    cursor: pointer !important;
    font-size: 20px !important;
  }
}

/* Modo oscuro */
@media (max-width: 900px) {
  body.dark-mode #sp-mobile-nav.mobile-bottom-nav,
  .dark-mode #sp-mobile-nav.mobile-bottom-nav {
    background: rgba(18, 24, 38, .98) !important;
    border-top-color: rgba(255,255,255,.10) !important;
    box-shadow: 0 -6px 20px rgba(0,0,0,.38) !important;
  }

  body.dark-mode #sp-mobile-nav .sp-nav-item,
  .dark-mode #sp-mobile-nav .sp-nav-item {
    color: #cbd5e8 !important;
  }

  body.dark-mode #sp-mobile-nav .sp-nav-item.active,
  body.dark-mode #sp-mobile-nav .sp-nav-item[aria-current="page"],
  .dark-mode #sp-mobile-nav .sp-nav-item.active,
  .dark-mode #sp-mobile-nav .sp-nav-item[aria-current="page"] {
    background: rgba(75,130,235,.20) !important;
    color: #78aaff !important;
  }
}

@media (min-width: 901px) {
  #sp-mobile-nav { display: none !important; }
}

@media (max-width: 360px) {
  #sp-mobile-nav .sp-nav-icon { font-size: 16px !important; }
  #sp-mobile-nav .sp-nav-label { font-size: 6.8px !important; }
}


/* ==========================================================
   STARPOINT v13 - FOTOS DE PERFIL + ELIMINAR CUENTAS ADMIN
========================================================== */
.avatar-perfil,
.avatar-usuario-admin {
    overflow: hidden;
    flex-shrink: 0;
}

.avatar-perfil {
    width: 96px;
    height: 96px;
}

.avatar-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

.foto-preview {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

.acciones-usuario {
    white-space: nowrap;
}

.acciones-usuario form {
    margin: 0;
}

.delete-user-btn {
    border: 1px solid rgba(220,38,38,.25);
    background: rgba(220,38,38,.10);
    color: #dc2626;
    border-radius: 10px;
    padding: 8px 12px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}

.delete-user-btn:hover {
    background: rgba(220,38,38,.18);
    transform: translateY(-1px);
}

.cuenta-actual {
    display: inline-flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(100,116,139,.10);
    color: var(--gris);
    font-size: 12px;
    font-weight: 800;
}

body.dark-mode .delete-user-btn {
    color: #fecaca;
    border-color: rgba(248,113,113,.28);
    background: rgba(127,29,29,.28);
}

body.dark-mode .delete-user-btn:hover {
    background: rgba(127,29,29,.42);
}

@media (max-width: 900px) {
    .avatar-perfil {
        width: 84px;
        height: 84px;
    }

    .acciones-usuario {
        min-width: 112px;
    }

    .delete-user-btn {
        padding: 8px 9px;
        font-size: 12px;
    }
}


/* ==========================================================
   CONTEXTO DE PRODUCTO EN CHAT - STARPOINT
========================================================== */
.chat-product-card {
    display: flex;
    gap: 18px;
    margin: 18px 22px 0;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 18px;
    background: rgba(255,255,255,.12);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.chat-product-image {
    width: 125px;
    min-width: 125px;
    height: 125px;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.12);
    font-size: 48px;
}
.chat-product-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.chat-product-info { min-width: 0; flex: 1; }
.chat-product-label { font-size: 12px; font-weight: 800; opacity: .72; text-transform: uppercase; letter-spacing: .04em; }
.chat-product-info h2 { margin: 4px 0 4px; font-size: 20px; }
.chat-product-price { font-size: 19px; font-weight: 800; color: var(--azul, #4da3ff); margin-bottom: 7px; }
.chat-product-info p { margin: 0 0 10px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.chat-product-link {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 14px; border-radius: 10px; text-decoration: none;
    font-weight: 800; background: rgba(77,163,255,.15); color: var(--azul, #4da3ff);
    border: 1px solid rgba(77,163,255,.28);
}
body.dark-mode .chat-product-card, .dark-mode .chat-product-card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
@media (max-width: 700px) {
    .chat-product-card { margin: 12px 12px 0; padding: 12px; gap: 12px; }
    .chat-product-image { width: 92px; min-width: 92px; height: 92px; }
    .chat-product-info h2 { font-size: 17px; }
    .chat-product-price { font-size: 17px; }
    .chat-product-info p { font-size: 13px; -webkit-line-clamp: 2; }
    .chat-product-link { font-size: 13px; padding: 8px 11px; }
}


/* ==========================================================
   STARPOINT v15 - CHAT ESTILO REFERENCIA / AVATARES GLOBALES
========================================================== */
.sp-user-top { margin-left: 8px; display:flex; align-items:center; }
.sp-user-avatar-link { width:40px; height:40px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; text-decoration:none; background:var(--glass); border:1px solid rgba(255,255,255,.55); box-shadow:var(--sombra, 4px 4px 10px rgba(0,0,0,.10)); }
.sp-user-avatar-img, .admin-top-avatar img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.sp-user-avatar-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight:900; color:var(--azul,#4da3ff); }
.admin-top-avatar { width:32px; height:32px; border-radius:50%; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; margin-right:8px; background:rgba(255,255,255,.25); }
.admin-name { display:flex !important; align-items:center; }
.usuario-icono img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }

.chat-header { display:flex !important; align-items:center; gap:9px; }
.chat-dest-avatar { width:30px; height:30px; border-radius:50%; overflow:hidden; flex:0 0 30px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.18); font-weight:900; }
.chat-dest-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.chat-context-note { margin:8px 14px 0; padding:6px 9px; border-radius:9px; background:rgba(77,163,255,.08); border:1px solid rgba(77,163,255,.15); font-size:10px; display:flex; justify-content:space-between; gap:8px; opacity:.85; }
.chat-messages-modern { display:flex; flex-direction:column; gap:10px; }
.mensaje-fila { display:flex; align-items:flex-end; gap:6px; max-width:92%; }
.mensaje-fila.mio { align-self:flex-end; flex-direction:row-reverse; }
.mensaje-fila.suyo { align-self:flex-start; }
.mensaje-avatar { width:24px; height:24px; min-width:24px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.18); font-size:10px; font-weight:900; }
.mensaje-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.mensaje-columna { min-width:0; max-width:calc(100% - 30px); display:flex; flex-direction:column; gap:4px; }
.mensaje-producto-mini { width:min(300px, 100%); display:flex; gap:8px; padding:7px; border-radius:10px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.075); box-shadow:0 3px 10px rgba(0,0,0,.08); }
.mensaje-producto-mini-img { width:58px; min-width:58px; height:58px; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.12); font-size:20px; }
.mensaje-producto-mini-img img { width:100%; height:100%; object-fit:cover; display:block; }
.mensaje-producto-mini-info { min-width:0; display:flex; flex-direction:column; gap:1px; }
.mensaje-producto-mini-label { font-size:8px; text-transform:uppercase; letter-spacing:.04em; opacity:.65; font-weight:800; }
.mensaje-producto-mini-info strong { font-size:11px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mensaje-producto-mini-price { font-size:10px; font-weight:900; color:var(--azul,#4da3ff); }
.mensaje-producto-mini-info p { margin:0; font-size:8.5px; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; opacity:.78; }
.mensaje-producto-mini-link { align-self:flex-start; margin-top:2px; padding:3px 6px; border-radius:6px; font-size:8px; font-weight:900; text-decoration:none; color:var(--azul,#4da3ff); border:1px solid rgba(77,163,255,.22); background:rgba(77,163,255,.08); }
.mensaje-producto-mini-link:hover { background:rgba(77,163,255,.16); }

/* Botón de eliminar cuenta: compacto y visible en tablas móviles */
.acciones-usuario { min-width:132px; text-align:center; }
.acciones-usuario form { display:flex; justify-content:center; }
.delete-user-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; white-space:nowrap; }

/* Fotos en tarjetas de administración */
.usuario-icono, .usuario-header-avatar { overflow:hidden; }
.usuario-icono img, .usuario-header-avatar img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.usuario-header-avatar { width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.3); font-weight:900; font-size:22px; margin-bottom:10px; }

@media (max-width:700px) {
  .sp-user-avatar-link { width:34px; height:34px; }
  .sp-user-top { margin-left:4px; }
  .chat-product-card { margin:8px 10px 0 !important; padding:8px !important; gap:8px !important; }
  .chat-product-image { width:64px !important; min-width:64px !important; height:64px !important; border-radius:9px !important; }
  .chat-product-info h2 { font-size:12px !important; margin:2px 0 !important; }
  .chat-product-label { font-size:8px !important; }
  .chat-product-price { font-size:11px !important; margin-bottom:2px !important; }
  .chat-product-info p { font-size:9px !important; line-height:1.2 !important; margin-bottom:4px !important; -webkit-line-clamp:2 !important; }
  .chat-product-link { font-size:9px !important; padding:5px 7px !important; border-radius:6px !important; }
  .chat-context-note { font-size:8px; margin:5px 9px 0; }
  .mensaje-producto-mini { width:min(240px, 100%); padding:5px; gap:6px; }
  .mensaje-producto-mini-img { width:48px; min-width:48px; height:48px; }
  .mensaje-producto-mini-info strong { font-size:10px; }
  .mensaje-producto-mini-price { font-size:9px; }
  .mensaje-producto-mini-info p { font-size:8px; }
  .mensaje-producto-mini-link { font-size:7.5px; padding:3px 5px; }
  .mensaje-avatar { width:21px; min-width:21px; height:21px; font-size:9px; }
  .mensaje-fila { max-width:96%; }
  .acciones-usuario { min-width:118px; }
  .delete-user-btn { min-height:34px; padding:7px 9px !important; font-size:10px !important; }
  .delete-user-btn span:last-child { display:inline; }
  .admin-top-avatar { width:28px; height:28px; }
}

@media (max-width:380px) {
  .delete-user-btn span:last-child { font-size:9px; }
  .mensaje-producto-mini { width:min(215px, 100%); }
}



/* ==========================================================
   STARPOINT v16 - CHAT / PERFIL FINAL
   Producto compacto por mensaje + avatares + capas seguras
========================================================== */
.topbar{position:relative;z-index:5000;}
.chat-container{position:relative;z-index:10;width:min(760px,calc(100% - 28px));margin:92px auto 90px;}
.chat-container .mensajes.chat-messages-modern{height:520px;min-height:360px;overflow-y:auto;overflow-x:hidden;padding:18px;gap:12px;}
.chat-header{position:relative;z-index:2;min-height:58px;padding:12px 16px;font-size:16px;}

/* Cada referencia a producto queda pequeña y dentro del mensaje. */
.chat-container .mensaje-fila .mensaje-columna{width:auto;max-width:min(440px,calc(100vw - 90px));}
.chat-container .mensaje-producto-mini{
  width:min(330px,100%) !important;
  max-width:100% !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:10px !important;
  padding:8px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  border-radius:12px !important;
}
.chat-container .mensaje-producto-mini-img{
  width:72px !important;
  min-width:72px !important;
  max-width:72px !important;
  height:72px !important;
  min-height:72px !important;
  max-height:72px !important;
  flex:0 0 72px !important;
  border-radius:9px !important;
  overflow:hidden !important;
  position:relative !important;
}
.chat-container .mensaje-producto-mini-img img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  object-fit:cover !important;
  display:block !important;
}
.chat-container .mensaje-producto-mini-info{min-width:0 !important;max-width:100% !important;overflow:hidden !important;gap:2px !important;}
.chat-container .mensaje-producto-mini-info strong{font-size:12px !important;line-height:1.2 !important;}
.chat-container .mensaje-producto-mini-price{font-size:11px !important;line-height:1.15 !important;}
.chat-container .mensaje-producto-mini-info p{font-size:9px !important;line-height:1.25 !important;margin:0 !important;-webkit-line-clamp:2 !important;}
.chat-container .mensaje-producto-mini-link{font-size:9px !important;padding:5px 8px !important;margin-top:3px !important;line-height:1 !important;white-space:nowrap !important;}

/* Avatar del destinatario y del usuario actual nunca debe agrandarse. */
.chat-dest-avatar,.chat-dest-avatar img,.mensaje-avatar,.mensaje-avatar img,.sp-user-avatar-link,.sp-user-avatar-link img,.avatar-perfil,.avatar-perfil img,.admin-top-avatar,.admin-top-avatar img,.usuario-icono,.usuario-icono img,.usuario-header-avatar,.usuario-header-avatar img{box-sizing:border-box;}
.chat-dest-avatar{width:32px !important;height:32px !important;min-width:32px !important;max-width:32px !important;}
.chat-dest-avatar img,.mensaje-avatar img,.sp-user-avatar-link img,.admin-top-avatar img,.usuario-icono img,.usuario-header-avatar img{width:100% !important;height:100% !important;object-fit:cover !important;max-width:none !important;}

/* Perfil: foto pequeña, redonda y sin posibilidad de estirarse. */
.cabecera-perfil .avatar-perfil{width:104px !important;height:104px !important;min-width:104px !important;max-width:104px !important;min-height:104px !important;max-height:104px !important;margin-left:auto;margin-right:auto;}
.cabecera-perfil .avatar-perfil img{width:104px !important;height:104px !important;max-width:none !important;max-height:none !important;object-fit:cover !important;border-radius:50% !important;}

/* La barra superior siempre queda por encima del contenido. */
.topbar .sp-user-top,.topbar .theme-toggle,.topbar .logo,.topbar .logo-text{position:relative;z-index:5002;}

/* Botones de admin: texto completo y área táctil clara. */
.acciones-usuario{display:flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;min-width:145px !important;}
.acciones-usuario form{display:block !important;width:auto !important;margin:0 !important;}
.delete-user-btn{min-height:40px !important;padding:8px 12px !important;border-radius:9px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;white-space:nowrap !important;font-size:12px !important;}

@media (max-width:700px){
  .chat-container{width:calc(100% - 18px);margin:76px auto 86px;border-radius:16px;}
  .chat-container .mensajes.chat-messages-modern{height:calc(100vh - 245px);min-height:320px;padding:12px 9px;gap:9px;}
  .chat-header{padding:10px 12px;font-size:14px;min-height:48px;}
  .chat-container .mensaje-fila .mensaje-columna{max-width:calc(100vw - 62px);}
  .chat-container .mensaje-producto-mini{width:min(290px,calc(100vw - 74px)) !important;padding:6px !important;gap:8px !important;border-radius:10px !important;}
  .chat-container .mensaje-producto-mini-img{width:58px !important;min-width:58px !important;max-width:58px !important;height:58px !important;min-height:58px !important;max-height:58px !important;flex-basis:58px !important;}
  .chat-container .mensaje-producto-mini-info strong{font-size:11px !important;}
  .chat-container .mensaje-producto-mini-price{font-size:10px !important;}
  .chat-container .mensaje-producto-mini-info p{font-size:8.5px !important;-webkit-line-clamp:2 !important;}
  .chat-container .mensaje-producto-mini-link{font-size:8px !important;padding:4px 6px !important;}
  .cabecera-perfil .avatar-perfil{width:88px !important;height:88px !important;min-width:88px !important;max-width:88px !important;min-height:88px !important;max-height:88px !important;}
  .cabecera-perfil .avatar-perfil img{width:88px !important;height:88px !important;}
  .acciones-usuario{min-width:118px !important;}
  .delete-user-btn{min-height:36px !important;padding:7px 9px !important;font-size:10px !important;}
}
@media (max-width:380px){
  .chat-container .mensaje-producto-mini{width:calc(100vw - 82px) !important;}
  .chat-container .mensaje-producto-mini-img{width:52px !important;min-width:52px !important;max-width:52px !important;height:52px !important;min-height:52px !important;max-height:52px !important;flex-basis:52px !important;}
}


/* ==========================================================
   STARPOINT v17 - CHAT / PERFIL / AVATARES - OVERRIDE FINAL
   ========================================================== */
.chat-container{
    width:min(860px,calc(100% - 32px)) !important;
    max-width:860px !important;
    margin:88px auto 105px !important;
    overflow:hidden !important;
}
.chat-container .chat-header{
    min-height:54px !important;
    padding:11px 16px !important;
}
.chat-container .chat-messages-modern{
    height:clamp(360px,calc(100vh - 285px),680px) !important;
    min-height:360px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:14px !important;
}
.chat-container .mensaje-fila{
    width:100% !important;
    display:flex !important;
    align-items:flex-end !important;
    gap:7px !important;
    margin:0 0 9px !important;
}
.chat-container .mensaje-fila.mio{flex-direction:row-reverse !important;}
.chat-container .mensaje-columna{
    width:auto !important;
    max-width:min(430px,78%) !important;
    min-width:0 !important;
}
.chat-container .mensaje-producto-mini{
    width:min(300px,100%) !important;
    max-width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:9px !important;
    padding:7px !important;
    margin:0 0 5px !important;
    border-radius:11px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    min-height:0 !important;
    background:rgba(255,255,255,.09) !important;
    border:1px solid rgba(255,255,255,.15) !important;
}
.chat-container .mensaje-producto-mini-img{
    flex:0 0 62px !important;
    width:62px !important;
    min-width:62px !important;
    max-width:62px !important;
    height:62px !important;
    min-height:62px !important;
    max-height:62px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    border-radius:8px !important;
    text-decoration:none !important;
    background:rgba(0,0,0,.12) !important;
}
.chat-container .mensaje-producto-mini-img img{
    width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;
}
.chat-container .mensaje-producto-mini-info{
    flex:1 1 auto !important;min-width:0 !important;overflow:hidden !important;display:flex !important;flex-direction:column !important;
}
.chat-container .mensaje-producto-mini-label{font-size:8px !important;line-height:1.1 !important;opacity:.7 !important;margin-bottom:2px !important;}
.chat-container .mensaje-producto-mini-info strong{font-size:11px !important;line-height:1.15 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
.chat-container .mensaje-producto-mini-price{font-size:10px !important;line-height:1.15 !important;margin:2px 0 !important;font-weight:800 !important;}
.chat-container .mensaje-producto-mini-info p{font-size:8.5px !important;line-height:1.25 !important;margin:0 !important;display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important;}
.chat-container .mensaje-producto-mini-link{
    align-self:flex-start !important;display:inline-flex !important;width:max-content !important;max-width:100% !important;
    margin-top:3px !important;padding:4px 7px !important;border-radius:6px !important;font-size:8px !important;line-height:1 !important;
    white-space:nowrap !important;text-decoration:none !important;font-weight:800 !important;
}
.chat-container .mensaje-producto-mini-img + .mensaje-producto-mini-info{}
.chat-container .mensaje-avatar{flex:0 0 24px !important;width:24px !important;height:24px !important;min-width:24px !important;max-width:24px !important;border-radius:50% !important;overflow:hidden !important;}
.chat-container .mensaje-avatar img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;}
.chat-dest-avatar{flex:0 0 32px !important;width:32px !important;height:32px !important;min-width:32px !important;max-width:32px !important;overflow:hidden !important;border-radius:50% !important;}
.chat-dest-avatar img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;}
.sp-user-avatar-link{width:38px !important;height:38px !important;min-width:38px !important;max-width:38px !important;border-radius:50% !important;overflow:hidden !important;display:flex !important;}
.sp-user-avatar-img{width:100% !important;height:100% !important;max-width:none !important;object-fit:cover !important;display:block !important;}
.avatar-perfil,.avatar-perfil img{width:104px !important;height:104px !important;min-width:104px !important;max-width:104px !important;min-height:104px !important;max-height:104px !important;border-radius:50% !important;object-fit:cover !important;overflow:hidden !important;}
.mi-producto-imagen{height:150px !important;max-height:150px !important;overflow:hidden !important;}
.mi-producto-imagen img{width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;object-fit:contain !important;padding:8px !important;}
.acciones-usuario{display:flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;min-width:150px !important;}
.delete-user-btn{min-height:38px !important;padding:8px 11px !important;border-radius:9px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;white-space:nowrap !important;font-size:11px !important;}
@media(max-width:700px){
  .chat-container{width:calc(100% - 12px) !important;margin:72px auto 92px !important;border-radius:14px !important;}
  .chat-container .chat-messages-modern{height:calc(100vh - 250px) !important;min-height:300px !important;padding:10px 7px !important;}
  .chat-container .mensaje-fila{gap:5px !important;margin-bottom:8px !important;}
  .chat-container .mensaje-columna{max-width:calc(100vw - 58px) !important;}
  .chat-container .mensaje-producto-mini{width:min(250px,calc(100vw - 76px)) !important;padding:6px !important;gap:7px !important;border-radius:9px !important;}
  .chat-container .mensaje-producto-mini-img{flex-basis:52px !important;width:52px !important;min-width:52px !important;max-width:52px !important;height:52px !important;min-height:52px !important;max-height:52px !important;}
  .chat-container .mensaje-producto-mini-label{font-size:7px !important;}
  .chat-container .mensaje-producto-mini-info strong{font-size:10px !important;}
  .chat-container .mensaje-producto-mini-price{font-size:9px !important;}
  .chat-container .mensaje-producto-mini-info p{font-size:8px !important;}
  .chat-container .mensaje-producto-mini-link{font-size:7.5px !important;padding:4px 6px !important;}
  .avatar-perfil,.avatar-perfil img{width:88px !important;height:88px !important;min-width:88px !important;max-width:88px !important;min-height:88px !important;max-height:88px !important;}
  .mi-producto-imagen{height:130px !important;max-height:130px !important;}
  .acciones-usuario{min-width:108px !important;gap:5px !important;}
  .delete-user-btn{min-height:34px !important;padding:6px 8px !important;font-size:9px !important;}
}


/* ==========================================================
   STARPOINT v18 - AVATARES Y LOGO AISLADOS
   Evita que las reglas generales de img alteren el avatar
   de la lista de chats o el logo del encabezado.
========================================================== */
.logo-text .logo-img,
.topbar .logo-img,
.header .logo-img {
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    object-fit:contain !important;
    object-position:center !important;
    display:block !important;
    border-radius:0 !important;
    padding:0 !important;
}

/* Foto de cada persona en "Mis Chats": siempre cuadrada y redonda. */
.chat-list .chat-item .chat-list-avatar,
.chat-list .chat-item .avatar.chat-list-avatar {
    width:60px !important;
    height:60px !important;
    min-width:60px !important;
    max-width:60px !important;
    min-height:60px !important;
    max-height:60px !important;
    flex:0 0 60px !important;
    border-radius:50% !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    aspect-ratio:1 / 1 !important;
}

.chat-list .chat-item .chat-list-avatar img,
.chat-list .chat-item .avatar.chat-list-avatar img {
    width:100% !important;
    height:100% !important;
    min-width:100% !important;
    max-width:none !important;
    min-height:100% !important;
    max-height:none !important;
    display:block !important;
    object-fit:cover !important;
    object-position:center !important;
    border-radius:50% !important;
}

.chat-list .chat-item .chat-list-avatar .avatar-fallback,
.chat-list .chat-item .chat-list-avatar > span {
    width:100% !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

/* No permitir que reglas genéricas de imágenes conviertan un avatar en una imagen rectangular. */
.chat-list .chat-item .chat-list-avatar * {
    box-sizing:border-box !important;
}

@media (max-width:700px){
    .logo-text .logo-img,
    .topbar .logo-img,
    .header .logo-img {
        width:36px !important;
        height:36px !important;
        min-width:36px !important;
        max-width:36px !important;
        min-height:36px !important;
        max-height:36px !important;
    }
    .chat-list .chat-item .chat-list-avatar,
    .chat-list .chat-item .avatar.chat-list-avatar {
        width:50px !important;
        height:50px !important;
        min-width:50px !important;
        max-width:50px !important;
        min-height:50px !important;
        max-height:50px !important;
        flex-basis:50px !important;
    }
}

/* ==========================================================
   V19 - CABECERA LIMPIA: quitar círculo duplicado del perfil
   ========================================================== */
/* La foto del usuario sigue visible en la cabecera, pero ya no
   aparece dentro de un círculo. */
.topbar .sp-user-avatar-link,
.header .sp-user-avatar-link,
.sp-user-avatar-link {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    border-radius: 8px !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: hidden !important;
    padding: 0 !important;
}
.topbar .sp-user-avatar-img,
.header .sp-user-avatar-img,
.sp-user-avatar-img {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    display: block !important;
    border: 0 !important;
    box-shadow: none !important;
}
.topbar .sp-user-avatar-fallback,
.header .sp-user-avatar-fallback,
.sp-user-avatar-fallback {
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
/* No volver a mostrar el avatar duplicado que estaba junto al nombre del admin. */
.topbar .admin-top-avatar { display: none !important; }

@media (max-width: 700px) {
    .topbar .sp-user-avatar-link,
    .header .sp-user-avatar-link,
    .sp-user-avatar-link,
    .topbar .sp-user-avatar-img,
    .header .sp-user-avatar-img,
    .sp-user-avatar-img {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        border-radius: 7px !important;
    }
    .topbar .sp-user-avatar-fallback,
    .header .sp-user-avatar-fallback,
    .sp-user-avatar-fallback {
        width: 32px !important;
        height: 32px !important;
        border-radius: 7px !important;
    }
}


/* ==========================================================
   STARPOINT v19 - SIN CIRCULOS EN LOGOS NI AVATARES
   El logo principal nunca debe llevar un contenedor circular.
   Las fotos de perfil se muestran sin el aro/circulo anterior.
========================================================== */
.logo-text .logo-img,
.topbar .logo-img,
.header .logo-img {
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Avatar superior: sin círculo, aro ni fondo. */
.sp-user-avatar-link {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.sp-user-avatar-img,
.sp-user-avatar-fallback {
    border-radius: 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.sp-user-avatar-img { object-fit: cover !important; }

/* Todos los avatares internos: sin círculos. */
.admin-top-avatar,
.chat-dest-avatar,
.mensaje-avatar,
.chat-list .chat-list-avatar,
.usuario-icono,
.usuario-header-avatar,
.avatar-perfil {
    border-radius: 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.admin-top-avatar img,
.chat-dest-avatar img,
.mensaje-avatar img,
.chat-list .chat-list-avatar img,
.usuario-icono img,
.usuario-header-avatar img,
.avatar-perfil img {
    border-radius: 8px !important;
    object-fit: cover !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Si Logo.png se hubiera guardado accidentalmente como foto de perfil,
   no lo mostramos como un segundo logo en el encabezado. */
.sp-user-avatar-img[src*="Logo.png"],
.sp-user-avatar-img[src*="logo.png"] {
    display: none !important;
}
.sp-user-avatar-link:has(.sp-user-avatar-img[src*="Logo.png"]),
.sp-user-avatar-link:has(.sp-user-avatar-img[src*="logo.png"]) {
    display: none !important;
}

@media (max-width:700px) {
    .sp-user-avatar-link {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        border-radius: 7px !important;
    }
    .sp-user-avatar-img,
    .sp-user-avatar-fallback { border-radius: 7px !important; }
}


/* STARPOINT v20 - una sola foto de perfil por pantalla
   La foto del perfil ya no se repite en la barra superior.
   Se conserva la foto que pertenece al contenido de cada pantalla.
*/
.topbar .sp-user-top,
.header .sp-user-top,
.sp-user-top {
    display: none !important;
}

/* ==========================================================
   AUTENTICACIÓN v22 - VERIFICACIÓN + GOOGLE + EDAD
========================================================== */
.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--gris);font-size:14px}
.auth-divider::before,.auth-divider::after{content:"";height:1px;background:rgba(100,116,139,.28);flex:1}
.google-login-btn,.btn-secondary-auth{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;border:0;cursor:pointer;padding:13px 16px;border-radius:12px;background:rgba(255,255,255,.65);color:var(--texto);font-weight:700;box-shadow:4px 4px 10px rgba(163,177,198,.35),-3px -3px 8px rgba(255,255,255,.7);transition:transform .2s ease,box-shadow .2s ease}
.google-login-btn:hover,.btn-secondary-auth:hover{transform:translateY(-1px)}
.google-g{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;background:#fff;font-weight:800;font-size:17px}
.auth-secondary-form{margin-top:10px}
.field-help{display:block;margin-top:6px;color:var(--gris);font-size:12px;line-height:1.4}
@media(max-width:700px){.google-login-btn,.btn-secondary-auth{min-height:48px}.auth-divider{margin:14px 0}.field-help{font-size:11px}}

/* ==========================================================
   STARPOINT PRODUCT CATALOG v24
   Catálogo profesional, filtros y tarjetas renovadas
========================================================== */
.catalogo-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:12px 0 18px}
.catalogo-kicker{display:inline-block;font-size:11px;letter-spacing:.14em;font-weight:900;color:var(--azul);margin-bottom:6px}
.catalogo-header h2{margin:0;font-size:30px;line-height:1.15}
.catalogo-header p{margin:8px 0 0;color:var(--gris);max-width:650px}
.catalogo-total{min-width:125px;padding:15px 18px;border-radius:18px;background:var(--glass);border:1px solid rgba(255,255,255,.55);box-shadow:var(--sombra-card);text-align:center}
.catalogo-total strong{display:block;font-size:25px;color:var(--azul);line-height:1}
.catalogo-total span{display:block;margin-top:5px;color:var(--gris);font-size:12px;font-weight:700}
.catalogo-filtros{display:grid;grid-template-columns:minmax(250px,1.8fr) minmax(145px,.8fr) minmax(135px,.7fr) minmax(165px,.85fr) auto;gap:10px;align-items:end;margin-bottom:12px;padding:13px;border-radius:20px;background:var(--glass);border:1px solid rgba(255,255,255,.55);box-shadow:var(--sombra-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.filtro-busqueda{height:46px;display:flex;align-items:center;gap:9px;padding:0 13px;border-radius:13px;background:rgba(255,255,255,.28);box-shadow:var(--sombra-inset)}
.filtro-busqueda span{font-size:17px}
.filtro-busqueda input,.filtro-campo input,.filtro-campo select{width:100%;height:46px;box-sizing:border-box;border:1px solid rgba(148,163,184,.22);border-radius:12px;background:rgba(255,255,255,.38);color:var(--texto);padding:0 12px;outline:none;font:inherit}
.filtro-busqueda input{height:42px;padding:0;border:0;background:transparent;box-shadow:none}
.filtro-busqueda input:focus,.filtro-campo input:focus,.filtro-campo select:focus{border-color:rgba(37,99,235,.45);box-shadow:0 0 0 3px rgba(37,99,235,.09)}
.filtro-campo{display:flex;flex-direction:column;gap:5px}
.filtro-campo label{font-size:11px;font-weight:800;color:var(--gris);padding-left:3px}
.btn-limpiar-filtros{height:46px;padding:0 14px;border:1px solid rgba(148,163,184,.2);border-radius:12px;background:rgba(255,255,255,.45);color:var(--texto);font-weight:800;cursor:pointer;transition:.18s ease}
.btn-limpiar-filtros:hover{transform:translateY(-1px);box-shadow:var(--sombra-card)}
.catalogo-estado{display:flex;justify-content:flex-end;margin:7px 2px 12px;color:var(--gris);font-size:13px;font-weight:700}
.producto-card{position:relative;display:flex;flex-direction:column;min-width:0}
.producto-card[hidden]{display:none!important}
.imagen-contenedor{position:relative;height:235px;background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(226,232,240,.25));display:flex;align-items:center;justify-content:center}
.producto-imagen{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s ease}
.producto-card:hover .producto-imagen{transform:scale(1.035)}
.producto-badge{position:absolute;z-index:2;top:12px;left:12px;padding:6px 10px;border-radius:999px;background:rgba(15,23,42,.76);color:#fff;font-size:11px;font-weight:800;backdrop-filter:blur(8px);box-shadow:0 4px 12px rgba(0,0,0,.14)}
.imagen-contenedor .sin-imagen{height:100%;background:transparent}
.sin-imagen span{font-size:38px}
.sin-imagen small{font-size:12px;font-weight:700}
.producto-info{display:flex;flex:1;flex-direction:column;padding:17px 18px 18px}
.producto-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:22px}
.producto-card .categoria{margin:0;color:var(--azul);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.producto-fecha{color:var(--gris);font-size:10px;white-space:nowrap}
.producto-info h3{margin:8px 0 5px;font-size:19px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.producto-info .descripcion{margin:0 0 9px;font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:39px}
.producto-info .precio{margin:5px 0 8px;font-size:24px;line-height:1;color:var(--azul)}
.producto-vendedor-line{display:flex;align-items:center;gap:7px;color:var(--gris);font-size:12px;min-height:24px}
.producto-vendedor-line strong{color:var(--texto)}
.acciones-producto{margin-top:auto;padding-top:13px;display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:stretch}
.acciones-producto form{display:flex;margin:0}
.acciones-producto .btn-favorito{width:44px;padding:0;display:flex;align-items:center;justify-content:center;font-size:17px}
.acciones-producto .btn-detalle,.acciones-producto .btn-chat{display:flex;align-items:center;justify-content:center;min-height:42px;box-sizing:border-box}
.acciones-producto .btn-chat{padding-left:12px;padding-right:12px}
@media (max-width:1100px){.catalogo-filtros{grid-template-columns:1.6fr 1fr 1fr;}.filtro-busqueda{grid-column:1/-1}.btn-limpiar-filtros{width:100%}.productos-grid,.favoritos{grid-template-columns:repeat(2,minmax(0,1fr))}.acciones-producto{grid-template-columns:44px 1fr}.acciones-producto .btn-chat{grid-column:1/-1}}
@media (max-width:700px){.catalogo-header{align-items:flex-start;flex-direction:column}.catalogo-header h2{font-size:25px}.catalogo-total{width:100%;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;text-align:left}.catalogo-total strong{font-size:22px}.catalogo-total span{margin:0}.catalogo-filtros{grid-template-columns:1fr 1fr;padding:11px;border-radius:17px}.filtro-busqueda{grid-column:1/-1}.filtro-precio{grid-column:1/-1}.btn-limpiar-filtros{grid-column:1/-1}.catalogo-estado{justify-content:flex-start}.productos-grid,.favoritos{grid-template-columns:1fr}.imagen-contenedor{height:220px}.producto-info{padding:16px}.acciones-producto{grid-template-columns:44px 1fr}.acciones-producto .btn-chat{grid-column:auto}.producto-fecha{font-size:9px}.producto-card-top{align-items:flex-start}}
@media (max-width:480px){.catalogo-filtros{grid-template-columns:1fr}.filtro-busqueda,.filtro-precio,.btn-limpiar-filtros{grid-column:auto}.imagen-contenedor{height:205px}.producto-info h3{font-size:18px}.producto-info .precio{font-size:22px}.acciones-producto{grid-template-columns:44px 1fr}.acciones-producto .btn-chat{grid-column:1/-1}}

/* Formulario de publicación: vista previa profesional */
.upload-zone{position:relative;border:1.5px dashed rgba(37,99,235,.35);border-radius:18px;padding:20px;text-align:center;background:rgba(37,99,235,.035);transition:.2s ease}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--azul);background:rgba(37,99,235,.07)}
.upload-zone input[type=file]{width:100%;padding:12px;border-radius:12px;background:rgba(255,255,255,.5)}
.upload-preview{display:none;margin-top:14px;border-radius:15px;overflow:hidden;max-height:260px;background:rgba(255,255,255,.35);box-shadow:var(--sombra-inset)}
.upload-preview.visible{display:block}.upload-preview img{width:100%;height:260px;object-fit:contain;display:block}.upload-help{margin:8px 0 0;color:var(--gris);font-size:12px}

/* Detalle de producto v24 */
.producto-detalle-pro{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);max-width:1180px;align-items:stretch;padding:28px}
.detalle-imagen-frame{position:relative;width:100%;height:520px;border-radius:22px;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.65),rgba(226,232,240,.3));box-shadow:var(--sombra-inset);display:flex;align-items:center;justify-content:center}
.detalle-producto-img{width:100%;height:100%;object-fit:contain;display:block}
.detalle-categoria{position:absolute;z-index:2;left:15px;top:15px;padding:7px 11px;border-radius:999px;background:rgba(15,23,42,.78);color:#fff;font-size:11px;font-weight:800;backdrop-filter:blur(8px)}
.detalle-image-note{padding:9px 4px 0;color:var(--gris);font-size:11px;text-align:center}
.producto-detalle-info{display:flex;flex-direction:column;justify-content:center;padding:8px 5px 8px 10px}
.detalle-meta-top{display:flex;justify-content:space-between;gap:10px;color:var(--gris);font-size:11px;font-weight:800;letter-spacing:.03em}
.producto-detalle-info h1{font-size:38px!important;line-height:1.12;margin:13px 0 4px!important}
.detalle-precio{font-size:34px;font-weight:900;color:var(--azul);margin:5px 0 4px}
.detalle-divider{height:1px;background:rgba(100,116,139,.18);margin:17px 0}
.producto-detalle-info .descripcion-block{margin-top:0}
.producto-detalle-info .descripcion{margin:0;white-space:pre-line}
.detalle-vendedor-card{margin-top:16px!important}
.acciones-detalle{margin-top:18px!important;display:grid!important;grid-template-columns:1fr 1.3fr 1fr;align-items:stretch}
.acciones-detalle form{display:flex}
.acciones-detalle .btn{width:100%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:46px}
.btn-compartir{border:1px solid rgba(255,255,255,.55);text-decoration:none;cursor:pointer;border-radius:12px;padding:10px 14px;background:var(--glass);color:var(--texto);font-weight:700;box-shadow:5px 5px 12px rgba(163,177,198,.4),-4px -4px 10px rgba(255,255,255,.7);transition:.18s ease}
.btn-compartir:hover{transform:translateY(-2px)}
@media(max-width:900px){.producto-detalle-pro{grid-template-columns:1fr}.detalle-imagen-frame{height:420px}.producto-detalle-info{padding:8px 0}.producto-detalle-info h1{font-size:32px!important}}
@media(max-width:700px){.producto-detalle-pro{padding:15px;border-radius:19px;gap:20px}.detalle-imagen-frame{height:300px;border-radius:17px}.detalle-meta-top{font-size:9px}.producto-detalle-info h1{font-size:27px!important}.detalle-precio{font-size:29px}.acciones-detalle{grid-template-columns:1fr 1fr!important}.acciones-detalle .btn-compartir{grid-column:1/-1}.detalle-vendedor-card{padding:15px!important}}

/* ==========================================================
   STARPOINT V25 - MOBILE PRODUCT CARDS / BOTTOM NAV FIX
   Evita que la barra inferior tape botones o contenido.
========================================================== */
@media (max-width: 800px) {
  html { scroll-padding-bottom: 125px !important; }
  body { padding-bottom: 0 !important; }

  .contenido,
  .content,
  main.contenido,
  main.content {
    padding-bottom: 135px !important;
  }

  .productos-grid,
  .favoritos,
  .mis-productos-grid {
    padding-bottom: 24px !important;
  }

  .producto-card,
  .mi-producto,
  .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .producto-info,
  .mi-producto-info,
  .card .info {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .producto-info h3,
  .mi-producto-info h3,
  .mi-producto-descripcion,
  .descripcion {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .acciones-producto {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 2px !important;
  }

  .acciones-producto .btn-detalle,
  .acciones-producto .btn-chat,
  .acciones-producto .btn-favorito {
    position: relative !important;
    z-index: 4 !important;
    touch-action: manipulation !important;
  }

  /* En pantallas pequeñas, los botones ocupan el ancho real de la tarjeta. */
  .acciones-producto .btn-detalle,
  .acciones-producto .btn-chat {
    min-height: 44px !important;
  }

  #sp-mobile-nav.mobile-bottom-nav {
    height: 74px !important;
    min-height: 74px !important;
    padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 480px) {
  .contenido,
  .content,
  main.contenido,
  main.content {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 145px !important;
  }

  .productos-grid,
  .favoritos,
  .mis-productos-grid {
    gap: 16px !important;
    padding-bottom: 28px !important;
  }

  .producto-card,
  .mi-producto {
    border-radius: 17px !important;
  }

  .imagen-contenedor {
    height: 210px !important;
  }

  .producto-info {
    padding: 16px !important;
  }

  .acciones-producto {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .acciones-producto form,
  .acciones-producto .btn-favorito,
  .acciones-producto .btn-detalle,
  .acciones-producto .btn-chat {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 / -1 !important;
  }

  .acciones-producto .btn-favorito {
    min-height: 44px !important;
  }

  .mi-producto-imagen {
    height: 190px !important;
  }

  .mi-producto-imagen img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}

/* ==========================================================
   MIS PRODUCTOS - tarjeta completa y legible en móvil
========================================================== */
.mis-productos {
  width: 100%;
  max-width: 1180px;
  margin: 28px auto 0;
}

.mis-productos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.mis-productos-header h2 {
  margin: 0;
  font-size: 24px;
}

.mis-productos-header p {
  margin: 6px 0 0;
  color: var(--gris);
  font-size: 13px;
}

.contador-productos {
  flex-shrink: 0;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--glass);
  color: var(--azul);
  font-size: 12px;
  font-weight: 800;
}

.mis-productos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.mi-producto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: var(--sombra-card);
}

.mi-producto-imagen {
  width: 100%;
  height: 210px;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(255,255,255,.25);
}

.mi-producto-imagen img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.mi-producto-sin-imagen {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  color: var(--gris);
}

.mi-producto-info {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  padding: 17px;
}

.mi-producto-categoria {
  align-self: flex-start;
  margin-bottom: 7px;
  color: var(--azul);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.mi-producto-info h3 {
  margin: 0 0 7px;
  font-size: 19px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.mi-producto-descripcion {
  margin: 0 0 12px;
  color: var(--gris);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.mi-producto-precio {
  margin-top: auto;
  padding-top: 8px;
  color: var(--azul);
  font-size: 23px;
  font-weight: 900;
}

.mi-producto-fecha {
  margin-top: 8px;
  color: var(--gris);
  font-size: 11px;
}

@media (max-width: 900px) {
  .mis-productos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .mis-productos-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .contador-productos {
    align-self: stretch;
    text-align: center;
  }

  .mis-productos-grid {
    grid-template-columns: 1fr;
  }

  .mis-productos {
    margin-top: 22px;
  }
}

/* ==========================================================
   STARPOINT V26 — MOBILE SAFE AREA / ADMIN + PRODUCT ACTIONS
========================================================== */
@media (max-width: 900px) {
  html { scroll-padding-bottom: 150px !important; }
  body .content,
  body .contenido,
  body main.content,
  body main.contenido,
  body main.container,
  body main.admin-perfil-contenedor,
  body .container,
  body .admin-perfil-contenedor {
    box-sizing: border-box !important;
    padding-bottom: 150px !important;
    margin-bottom: 0 !important;
    min-height: calc(100vh - 68px) !important;
  }
  body .admin-panel,
  body .admin-container,
  body .admin-content,
  body .admin-card,
  body .stats-container,
  body .categories-container,
  body .usuarios-container,
  body .productos-admin,
  body .reportes-container,
  body .contactos-container { margin-bottom: 28px !important; }

  .mis-productos-grid { padding-bottom: 18px !important; }
  .mi-producto { overflow: visible !important; }
  .mi-producto-info { padding-bottom: 18px !important; }
  .mi-producto-eliminar-form { margin: 14px 0 0 !important; }
  .mi-producto-eliminar {
    width: 100% !important; min-height: 42px !important; padding: 10px 12px !important;
    border: 0 !important; border-radius: 11px !important; cursor: pointer !important;
    background: rgba(220,53,69,.12) !important; color: #c62828 !important;
    font-weight: 800 !important; font-size: 12px !important;
  }
  .favoritos .acciones { display:flex !important; flex-direction:column !important; gap:9px !important; }
  .favoritos .acciones .btn,
  .favoritos .form-eliminar-favorito,
  .favoritos .btn-eliminar-favorito { width:100% !important; box-sizing:border-box !important; }
  .favoritos .btn-eliminar-favorito {
    min-height:42px !important; border:0 !important; border-radius:10px !important;
    background:rgba(220,53,69,.11) !important; color:#c62828 !important;
    font-weight:800 !important; cursor:pointer !important;
  }
}
@media (min-width: 901px) {
  .mi-producto-eliminar-form { margin-top:14px; }
  .mi-producto-eliminar { width:100%; min-height:40px; border:0; border-radius:10px; background:rgba(220,53,69,.10); color:#c62828; font-weight:800; cursor:pointer; }
  .favoritos .acciones { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .favoritos .form-eliminar-favorito { margin:0; }
  .favoritos .btn-eliminar-favorito { min-height:40px; padding:10px 14px; border:0; border-radius:10px; background:rgba(220,53,69,.10); color:#c62828; font-weight:800; cursor:pointer; }
}


/* ==========================================================
   STARPOINT V27 - ADMIN MOBILE BOTTOM SAFE AREA
   La barra inferior es fija; todo el contenido debe terminar
   por encima de ella. Este bloque queda al final para vencer
   reglas antiguas que dejaban .layout sin espacio inferior.
========================================================== */
@media (max-width: 900px) {
  html {
    scroll-padding-bottom: 170px !important;
  }

  body {
    padding-bottom: 0 !important;
    overflow-x: hidden !important;
  }

  /* El contenedor padre de las páginas de administración */
  body > .layout,
  body .layout {
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100vh - 70px) !important;
    padding-bottom: 170px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  /* Panel, Usuarios y todas las demás páginas dentro de .layout */
  body .layout > .content,
  body .layout > .contenido,
  body .layout > main,
  body .layout .content,
  body .layout .contenido {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-bottom: 180px !important;
    margin-bottom: 0 !important;
  }

  /* Evita que el último bloque/tarjeta quede pegado al borde */
  body .layout > .content > :last-child,
  body .layout > .contenido > :last-child,
  body .layout > main > :last-child,
  body .layout .content > :last-child,
  body .layout .contenido > :last-child {
    margin-bottom: 20px !important;
  }

  /* El área de administración también recibe aire al final */
  body .admin-panel,
  body .admin-container,
  body .admin-content,
  body .admin-card,
  body .stats,
  body .stats-container,
  body .usuarios-container,
  body .usuarios-grid,
  body .productos-admin,
  body .reportes-container,
  body .contactos-container,
  body .categorias-container {
    padding-bottom: 35px !important;
    margin-bottom: 20px !important;
  }

  #sp-mobile-nav.mobile-bottom-nav {
    z-index: 99999 !important;
  }
}

@media (max-width: 480px) {
  body .layout > .content,
  body .layout > .contenido,
  body .layout > main,
  body .layout .content,
  body .layout .contenido {
    padding-left: 11px !important;
    padding-right: 11px !important;
    padding-bottom: 190px !important;
  }

  body > .layout,
  body .layout {
    padding-bottom: 180px !important;
  }
}

/* ==========================================================
   STARPOINT V28 — ESPACIO REAL AL FINAL + ROLES
   El espacio se genera como contenido real al final del main,
   no solamente como padding, para que la barra inferior nunca
   tape el último botón o tarjeta en móviles.
========================================================== */
@media (max-width: 900px) {
  body.sp-role-buyer-only a[href="/vender"] { display: none !important; }

  body .layout > .content::after,
  body .layout > .contenido::after {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 190px !important;
    flex: 0 0 190px !important;
    clear: both !important;
  }

  body .layout > .content,
  body .layout > .contenido {
    min-height: 100% !important;
    padding-bottom: 30px !important;
  }

  body .layout > .content > :last-child,
  body .layout > .contenido > :last-child {
    margin-bottom: 24px !important;
  }
}

@media (max-width: 480px) {
  body .layout > .content::after,
  body .layout > .contenido::after {
    height: 210px !important;
    flex-basis: 210px !important;
  }
}

/* Selector de rol en administración */
.role-form { margin: 0; }
.role-select {
  min-width: 185px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid rgba(80,100,130,.25);
  border-radius: 10px;
  background: var(--glass, #fff);
  color: inherit;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}
@media (max-width: 900px) {
  .role-form { width: 100%; }
  .role-select { width: 100%; min-width: 0; min-height: 42px; }
  .acciones-usuario form { max-width: 100%; }
}


/* ==========================================================
   STARPOINT v29 — LIQUID GLASS POLISH
   Estética: glass sutil + marketplace moderno
========================================================== */
:root {
    --sp-glass-bg: rgba(255,255,255,.46);
    --sp-glass-bg-strong: rgba(255,255,255,.62);
    --sp-glass-border: rgba(255,255,255,.72);
    --sp-glass-shadow: 0 18px 45px rgba(45,65,95,.13), 0 4px 14px rgba(45,65,95,.08);
    --sp-glass-blur: 22px;
}

body:not(.dark-mode) {
    background:
        radial-gradient(circle at 8% 12%, rgba(37,99,235,.13), transparent 28%),
        radial-gradient(circle at 92% 18%, rgba(6,182,212,.10), transparent 24%),
        radial-gradient(circle at 50% 100%, rgba(124,58,237,.07), transparent 30%),
        #edf2f8;
}

/* Superficies principales */
.navbar,
.topbar,
.sidebar,
.producto-card,
.card,
.market-card,
.feature-card,
.step,
.catalogo-filtros,
.auth-card,
.form-card,
.contact-card,
.chat-container,
.table-container,
.stat-card,
.action-card,
.report,
.perfil,
.users-header,
.search-container {
    border: 1px solid var(--sp-glass-border) !important;
    box-shadow: var(--sp-glass-shadow) !important;
}

.navbar {
    background: rgba(255,255,255,.54) !important;
    backdrop-filter: blur(24px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
}

.nav-links a,
.btn-login,
.theme-toggle,
.tag,
.secondary-btn,
.buy-btn {
    background: rgba(255,255,255,.38) !important;
    border-color: rgba(255,255,255,.70) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}

.nav-links a:hover,
.btn-login:hover,
.secondary-btn:hover,
.buy-btn:hover {
    background: rgba(255,255,255,.58) !important;
}

/* Productos: vidrio limpio, sin perder protagonismo de la foto */
.producto-card,
.card,
.market-card {
    position: relative;
    background:
        linear-gradient(145deg, rgba(255,255,255,.64), rgba(255,255,255,.28)) !important;
    backdrop-filter: blur(22px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(135%) !important;
}

.producto-card::before,
.card::before,
.market-card::before,
.feature-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255,255,255,.34), transparent 35%, transparent 70%, rgba(255,255,255,.12));
    opacity: .75;
}

.producto-card:hover,
.card:hover {
    transform: translateY(-7px) scale(1.008);
    box-shadow: 0 22px 48px rgba(45,65,95,.17), 0 6px 18px rgba(45,65,95,.10) !important;
}

.producto-card .producto-imagen,
.producto-card .imagen-contenedor,
.card > img,
.card > .sin-imagen {
    position: relative;
}

.categoria,
.categoria-badge,
.catalogo-kicker {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(37,99,235,.09);
    border: 1px solid rgba(37,99,235,.13);
}

.btn-detalle,
.btn-chat,
.btn-favorito,
.btn,
.btn-action,
.btn-submit {
    border: 1px solid rgba(255,255,255,.72) !important;
    box-shadow: 0 8px 20px rgba(45,65,95,.10) !important;
    backdrop-filter: blur(15px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(140%) !important;
}

.btn-detalle:hover,
.btn-chat:hover,
.btn-favorito:hover,
.btn:hover,
.btn-action:hover,
.btn-submit:hover {
    transform: translateY(-2px) scale(1.015);
}

/* Hero: vidrio más premium */
.hero .tag {
    box-shadow: 0 10px 28px rgba(37,99,235,.10) !important;
}

.hero h1 {
    text-shadow: 0 8px 30px rgba(37,99,235,.08);
}

.market-card {
    box-shadow: 0 28px 65px rgba(35,55,90,.18), 0 6px 20px rgba(35,55,90,.09) !important;
}

.product-image {
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.72), transparent 32%),
        linear-gradient(145deg, rgba(255,255,255,.56), rgba(255,255,255,.18)) !important;
}

/* Barra móvil: Liquid Glass real, pero ligera */
#sp-mobile-nav.mobile-bottom-nav {
    background: rgba(248,251,255,.60) !important;
    border-top: 1px solid rgba(255,255,255,.78) !important;
    box-shadow: 0 -12px 35px rgba(25,45,75,.13) !important;
    backdrop-filter: blur(28px) saturate(165%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(165%) !important;
}

#sp-mobile-nav .sp-nav-item {
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    margin: 3px 2px !important;
    height: calc(100% - 6px) !important;
}

#sp-mobile-nav .sp-nav-item.active,
#sp-mobile-nav .sp-nav-item[aria-current="page"] {
    background: rgba(255,255,255,.46) !important;
    border-color: rgba(255,255,255,.66) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 5px 16px rgba(37,99,235,.09) !important;
}

#sp-mobile-nav .sp-nav-icon {
    filter: drop-shadow(0 2px 4px rgba(37,99,235,.12));
}

/* Modo oscuro: vidrio ahumado */
body.dark-mode {
    background:
        radial-gradient(circle at 8% 12%, rgba(37,99,235,.20), transparent 28%),
        radial-gradient(circle at 92% 18%, rgba(6,182,212,.12), transparent 24%),
        #101522 !important;
}

body.dark-mode .navbar,
body.dark-mode .topbar,
body.dark-mode .sidebar,
body.dark-mode .producto-card,
body.dark-mode .card,
body.dark-mode .market-card,
body.dark-mode .feature-card,
body.dark-mode .step,
body.dark-mode .catalogo-filtros,
body.dark-mode .auth-card,
body.dark-mode .form-card,
body.dark-mode .contact-card,
body.dark-mode .chat-container,
body.dark-mode .table-container,
body.dark-mode .stat-card,
body.dark-mode .action-card,
body.dark-mode .report,
body.dark-mode .perfil,
body.dark-mode .users-header,
body.dark-mode .search-container {
    background: linear-gradient(145deg, rgba(38,47,65,.72), rgba(18,24,36,.54)) !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 22px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04) !important;
    backdrop-filter: blur(24px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(135%) !important;
}

body.dark-mode .nav-links a,
body.dark-mode .btn-login,
body.dark-mode .theme-toggle,
body.dark-mode .secondary-btn,
body.dark-mode .buy-btn {
    background: rgba(255,255,255,.055) !important;
    border-color: rgba(255,255,255,.11) !important;
}

body.dark-mode .producto-card:hover,
body.dark-mode .card:hover {
    box-shadow: 0 25px 55px rgba(0,0,0,.38) !important;
}

@media (max-width: 900px) {
    .navbar {
        width: calc(100% - 24px);
        margin: 10px auto;
        padding: 11px 13px;
        border-radius: 18px;
    }

    .producto-card,
    .card {
        border-radius: 20px !important;
    }

    .hero {
        gap: 30px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .producto-card,
    .card,
    .btn-detalle,
    .btn-chat,
    .btn-favorito,
    .primary-btn,
    .secondary-btn,
    .nav-links a {
        transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
    }
}

@media (max-width: 900px) {
    body.dark-mode #sp-mobile-nav.mobile-bottom-nav,
    .dark-mode #sp-mobile-nav.mobile-bottom-nav {
        background: rgba(14,20,32,.66) !important;
        border-top-color: rgba(255,255,255,.12) !important;
        box-shadow: 0 -14px 38px rgba(0,0,0,.34) !important;
        backdrop-filter: blur(28px) saturate(145%) !important;
        -webkit-backdrop-filter: blur(28px) saturate(145%) !important;
    }

    body.dark-mode #sp-mobile-nav .sp-nav-item.active,
    body.dark-mode #sp-mobile-nav .sp-nav-item[aria-current="page"],
    .dark-mode #sp-mobile-nav .sp-nav-item.active,
    .dark-mode #sp-mobile-nav .sp-nav-item[aria-current="page"] {
        background: rgba(96,165,250,.13) !important;
        border-color: rgba(147,197,253,.16) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 5px 16px rgba(0,0,0,.20) !important;
    }
}


/* ==========================================================
   STARPOINT V30 — TOPBAR FIJA + HERO PRINCIPAL COMPACTO
========================================================== */

/* Barra superior siempre fija y por encima del contenido */
.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
    transform: translateZ(0);
}

/* El contenido empieza debajo de la barra fija */
.layout > .content,
.layout > .contenido,
body > .content,
body > .contenido {
    padding-top: 110px !important;
}

/* Solo el título de bienvenida de la página principal */
.pagina-principal .hero h1 {
    font-size: 24px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.6px !important;
    margin-bottom: 7px !important;
}

.pagina-principal .hero {
    padding: 24px 28px !important;
}

@media (max-width: 900px) {
    .topbar {
        height: 65px !important;
        padding: 0 14px !important;
    }

    .layout > .content,
    .layout > .contenido,
    body > .content,
    body > .contenido {
        padding-top: 88px !important;
    }

    .pagina-principal .hero {
        padding: 20px 18px !important;
    }

    .pagina-principal .hero h1 {
        font-size: 22px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.4px !important;
    }
}

@media (max-width: 480px) {
    .pagina-principal .hero h1 {
        font-size: 20px !important;
    }
}


/* ==========================================================
   V31 - LIQUID GLASS MÁS VISIBLE
   Solo estética: no modifica lógica ni navegación.
========================================================== */

.topbar {
    background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.30)) !important;
    border-bottom: 1px solid rgba(255,255,255,.78) !important;
    box-shadow: 0 8px 30px rgba(70,90,120,.22), inset 0 1px 0 rgba(255,255,255,.72) !important;
    backdrop-filter: blur(26px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(155%) !important;
}

.product-card, .card, .panel, .glass, .hero, .form-card, .chat-card, .admin-card {
    border-color: rgba(255,255,255,.62) !important;
}

.product-card:hover, .card:hover {
    box-shadow: 0 18px 40px rgba(70,90,120,.22), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

.btn, button, input, select, textarea, .btn-subir {
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

@media (max-width: 900px) {
    .topbar {
        background: linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.34)) !important;
        backdrop-filter: blur(28px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .topbar, .product-card, .card, .glass {
        transition: box-shadow .22s ease, background .22s ease, border-color .22s ease;
    }
}

/* ==========================================================
   STARPOINT V32 — HERO PRINCIPAL MÁS COMPACTO
   Reduce el gran espacio del cuadro de bienvenida sin tocar funciones.
========================================================== */
.pagina-principal .hero {
    padding: 16px 22px !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
    min-height: 0 !important;
}

.pagina-principal .hero > div {
    min-width: 0;
}

.pagina-principal .hero p {
    margin: 0 !important;
    line-height: 1.35 !important;
}

.pagina-principal .hero h1 {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
}

@media (max-width: 900px) {
    .pagina-principal .hero {
        padding: 14px 16px !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }

    .pagina-principal .hero p {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }
}