/* =========================
   PÁGINA: PERFIL DEL VENDEDOR
========================= */

.perfil-vendedor {
    width: 100%;
    padding-top: 76px;
}


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

.vendedor-contenedor {
    width: 100%;
    max-width: 1120px;

    margin: 0 auto;

    padding-left: 24px;
    padding-right: 24px;
}


/* =========================
   PORTADA DEL VENDEDOR
========================= */

.vendedor-portada {
    padding: 90px 0 70px;

    background-color: #ffffff;
}

.vendedor-presentacion {
    display: flex;
    align-items: center;

    gap: 40px;
}


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

.vendedor-logo {
    width: 220px;
    height: 220px;

    flex-shrink: 0;

    overflow: hidden;

    border: 3px solid #e5b83f;

    border-radius: 20px;

    background-color: #f3f4f6;

    box-shadow:
        0 8px 20px
        rgba(91, 42, 120, 0.12);
}

.vendedor-logo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================
   PLACEHOLDER SIN FOTOGRAFÍA
========================= */

.vendedor-logo-placeholder {
    width: 100%;
    height: 100%;

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

    background-color: #f3f4f6;

    color: #5b2a78;

    font-family: var(--fuente-principal);

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

    text-transform: uppercase;
}


/* =========================
   INFORMACIÓN PRINCIPAL
========================= */

.vendedor-info {
    max-width: 700px;
}

.vendedor-etiqueta {
    margin: 0 0 10px;

    color: #5b2a78;

    font-size: 15px;
    font-weight: 700;
}

.vendedor-info h1 {
    margin: 0 0 16px;

    color: #283545;

    font-size: 42px;
    line-height: 1.2;
}

.vendedor-descripcion-corta {
    margin: 0 0 24px;

    color: #596573;

    font-size: 17px;
    line-height: 1.7;
}


/* =========================
   DATOS DEL VENDEDOR
========================= */

.vendedor-datos {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}

.vendedor-datos span {
    padding: 10px 15px;

    border: 1px solid #d9dfe5;
    border-radius: 25px;

    background-color: #faf8fc;

    color: #5b2a78;

    font-size: 14px;
    font-weight: 700;
}


/* =========================
   SOBRE EL VENDEDOR
========================= */

.vendedor-sobre {
    padding: 70px 0;

    background-color: #f6f2f8;

    border-top: 1px solid #eee5f2;
    border-bottom: 1px solid #eee5f2;
}

.vendedor-sobre-contenido {
    max-width: 800px;
}

.vendedor-sobre h2 {
    margin: 0 0 24px;

    padding-bottom: 12px;

    border-bottom: 3px solid #e5b83f;

    color: #283545;

    font-size: 32px;
}

.vendedor-sobre p {
    margin: 0 0 18px;

    color: #596573;

    font-size: 17px;
    line-height: 1.8;
}

.vendedor-sobre p:last-child {
    margin-bottom: 0;
}

.vendedor-sobre p strong {
    color: #5b2a78;
}


/* =========================
   PRODUCTOS DEL VENDEDOR
========================= */

.vendedor-productos {
    padding: 70px 0 80px;

    background-color: #ffffff;
}

.vendedor-productos-encabezado {
    margin-bottom: 35px;

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

    gap: 20px;
}

.vendedor-productos-encabezado h2 {
    margin: 0;

    color: #283545;

    font-size: 32px;
}

.vendedor-productos-encabezado a {
    padding: 9px 15px;

    border-radius: 8px;

    color: #5b2a78;

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

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.vendedor-productos-encabezado a:hover {
    background-color: #5b2a78;

    color: #ffffff;

    text-decoration: none;
}


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

.vendedor-productos .productos-grid {
    display: grid;

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

    gap: 24px;
}


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

.vendedor-productos .producto {
    overflow: hidden;

    display: flex;
    flex-direction: column;

    background-color: #ffffff;

    border: 1px solid #e1e5e8;

    border-radius: 14px;

    box-shadow:
        0 5px 15px
        rgba(91, 42, 120, 0.06);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.vendedor-productos .producto:hover {
    transform: translateY(-5px);

    box-shadow:
        0 12px 25px
        rgba(91, 42, 120, 0.14);
}


/* =========================
   IMAGEN DEL PRODUCTO
========================= */

.vendedor-productos .producto-imagen {
    position: relative;

    width: 100%;
    height: 220px;

    overflow: hidden;

    background-color: #f3f4f6;

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

.vendedor-productos .producto-imagen img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}

.vendedor-productos .producto-imagen-placeholder {
    width: 100%;
    height: 100%;

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

    color: #6b7280;

    font-size: 0.95rem;
    font-weight: 700;
}


/* =========================
   INFORMACIÓN DEL PRODUCTO
========================= */

.vendedor-productos .producto-informacion {
    display: flex;
    flex-direction: column;

    flex-grow: 1;

    padding: 20px;
}

.vendedor-productos .producto-informacion h3 {
    margin: 0 0 6px;

    color: #283545;

    font-size: 1.1rem;
    font-weight: 700;

    line-height: 1.35;
}

.vendedor-productos .producto-pyme {
    margin: 0 0 12px;

    color: #5b2a78;

    font-size: 0.9rem;
    font-weight: 700;

    line-height: 1.5;
}

.vendedor-productos .producto-descripcion {
    margin: 0 0 14px;

    color: #6b7785;

    font-size: 0.88rem;

    line-height: 1.5;
}

.vendedor-productos .producto-precio {
    margin: 0 0 10px;

    color: #283545;

    font-size: 1.2rem;
    font-weight: 700;
}

.vendedor-productos .producto-stock {
    margin: 0 0 16px;

    color: #6b7785;

    font-size: 0.85rem;
}

.vendedor-productos .producto-stock strong {
    color: #283545;
}


/* =========================
   BOTÓN CARRITO
========================= */

.vendedor-productos .agregar-carrito {
    width: 100%;

    margin-top: auto;

    padding: 11px 16px;

    border: none;

    border-radius: 8px;

    background-color: #5b2a78;

    color: #ffffff;

    font-family: var(--fuente-principal);

    font-size: 0.95rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.vendedor-productos .agregar-carrito:hover {
    background-color: #48205f;
}

.vendedor-productos .agregar-carrito:active {
    transform: scale(0.98);
}

.vendedor-productos .agregar-carrito:focus-visible {
    outline: 3px solid #e5b83f;

    outline-offset: 3px;
}


/* =========================
   PRODUCTO NO DISPONIBLE
========================= */

.vendedor-productos .agregar-carrito:disabled {
    background-color: #aab1b8;

    color: #ffffff;

    cursor: not-allowed;

    opacity: 0.7;
}

.vendedor-productos .agregar-carrito:disabled:hover {
    background-color: #aab1b8;

    transform: none;
}


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

.sin-productos {
    margin: 0;

    padding: 30px;

    border: 1px solid #ddd3e4;

    border-radius: 15px;

    background-color: #f6f2f8;

    color: #596573;

    font-size: 16px;
    line-height: 1.6;

    text-align: center;
}


/* =========================
   CONTACTO
========================= */

.vendedor-contacto {
    padding: 70px 0 80px;

    background-color: #f6f2f8;

    border-top: 1px solid #eee5f2;

    text-align: center;
}

.vendedor-contacto h2 {
    margin: 0 0 14px;

    color: #283545;

    font-size: 32px;
}

.vendedor-contacto > .vendedor-contenedor > p {
    max-width: 600px;

    margin: 0 auto 30px;

    color: #596573;

    font-size: 17px;
    line-height: 1.7;
}

.vendedor-enlaces {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;
}

.vendedor-enlaces a {
    min-width: 170px;

    padding: 13px 20px;

    border: 1px solid #d9dfe5;

    border-radius: 10px;

    background-color: #ffffff;

    color: #5b2a78;

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

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.vendedor-enlaces a:hover {
    background-color: #5b2a78;

    border-color: #5b2a78;

    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 8px 18px
        rgba(91, 42, 120, 0.18);
}


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

body.modo-oscuro .vendedor-portada,
body.modo-oscuro .vendedor-productos {
    background-color: #101214;
}

body.modo-oscuro .vendedor-sobre,
body.modo-oscuro .vendedor-contacto {
    background-color: #1d1820;

    border-color: #3b3040;
}

body.modo-oscuro .vendedor-logo {
    background-color: #202326;

    border-color: #d9b64a;

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

body.modo-oscuro .vendedor-logo-placeholder {
    background-color: #202326;

    color: #d9b64a;
}

body.modo-oscuro .vendedor-etiqueta {
    color: #c49bd8;
}

body.modo-oscuro .vendedor-info h1,
body.modo-oscuro .vendedor-sobre h2,
body.modo-oscuro .vendedor-productos-encabezado h2,
body.modo-oscuro .vendedor-contacto h2 {
    color: #f1f3f5;
}

body.modo-oscuro .vendedor-descripcion-corta,
body.modo-oscuro .vendedor-sobre p,
body.modo-oscuro .vendedor-contacto > .vendedor-contenedor > p {
    color: #b9c0c8;
}

body.modo-oscuro .vendedor-sobre p strong {
    color: #d9b64a;
}

body.modo-oscuro .vendedor-datos span {
    background-color: #29242d;

    border-color: #51465a;

    color: #d1b5df;
}

body.modo-oscuro .vendedor-productos-encabezado a {
    color: #c49bd8;
}

body.modo-oscuro .vendedor-productos-encabezado a:hover {
    background-color: #5b2a78;

    color: #ffffff;
}

body.modo-oscuro .vendedor-productos .producto {
    background-color: #242424;

    border-color: #393939;

    box-shadow:
        0 5px 15px
        rgba(0, 0, 0, 0.25);
}

body.modo-oscuro .vendedor-productos .producto:hover {
    box-shadow:
        0 12px 25px
        rgba(0, 0, 0, 0.4);
}

body.modo-oscuro .vendedor-productos .producto-imagen {
    background-color: #303030;
}

body.modo-oscuro .vendedor-productos .producto-informacion h3,
body.modo-oscuro .vendedor-productos .producto-precio,
body.modo-oscuro .vendedor-productos .producto-stock strong {
    color: #f5f5f5;
}

body.modo-oscuro .vendedor-productos .producto-pyme {
    color: #c49bd8;
}

body.modo-oscuro .vendedor-productos .producto-descripcion,
body.modo-oscuro .vendedor-productos .producto-stock {
    color: #c3c8ce;
}

body.modo-oscuro .sin-productos {
    background-color: #242424;

    border-color: #393939;

    color: #b9c0c8;
}

body.modo-oscuro .vendedor-enlaces a {
    background-color: #202326;

    border-color: #464b50;

    color: #c49bd8;
}

body.modo-oscuro .vendedor-enlaces a:hover {
    background-color: #5b2a78;

    border-color: #5b2a78;

    color: #ffffff;
}


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

@media (max-width: 800px) {

    .vendedor-presentacion {
        align-items: flex-start;

        gap: 30px;
    }

    .vendedor-logo {
        width: 180px;
        height: 180px;
    }

    .vendedor-info h1 {
        font-size: 36px;
    }

}


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

@media (max-width: 600px) {

    .vendedor-contenedor {
        padding-left: 16px;
        padding-right: 16px;
    }

    .vendedor-portada {
        padding: 90px 0 70px;
    }

    .vendedor-presentacion {
        flex-direction: column;

        align-items: center;

        text-align: center;
    }

    .vendedor-logo {
        width: 180px;
        height: 180px;
    }

    .vendedor-info {
        max-width: 100%;
    }

    .vendedor-info h1 {
        font-size: 30px;
    }

    .vendedor-descripcion-corta {
        font-size: 16px;
    }

    .vendedor-datos {
        justify-content: center;
    }

    .vendedor-sobre,
    .vendedor-productos,
    .vendedor-contacto {
        padding: 55px 0;
    }

    .vendedor-sobre h2,
    .vendedor-productos-encabezado h2,
    .vendedor-contacto h2 {
        font-size: 28px;
    }

    .vendedor-sobre p,
    .vendedor-contacto > .vendedor-contenedor > p {
        font-size: 16px;
    }

    .vendedor-productos-encabezado {
        flex-direction: column;

        align-items: flex-start;

        gap: 10px;
    }

    .vendedor-enlaces {
        flex-direction: column;

        align-items: stretch;
    }

    .vendedor-enlaces a {
        width: 100%;
    }

    .vendedor-productos .productos-grid {
        grid-template-columns: 1fr;
    }

}