/* ==========================================================================
   Programa de vendedores (lado público)
   ==========================================================================
   Sigue la escala de marca.css: seis tamaños de letra, espaciado en base 4px,
   un radio y una línea. Ni un valor inventado.
   ========================================================================== */

.vnd {
    --vnd-linea: #E6EAF0;
    --vnd-suave: #5A6B8C;
    --vnd-tinta: var(--marca-tinta, #060B1A);
    /* Fondo del enlace al pasar el raton, en el menu lateral. */
    --vnd-suave-fondo: #F2F5FA;

    max-width: 64rem;
    margin: 0 auto;
    padding: 3rem 1rem;
    color: var(--marca-tinta);
}

.vnd--estrecho { max-width: 40rem; }

:root[data-theme="dark"] .vnd {
    --vnd-linea: #1E2A4A;
    --vnd-suave: #93A2C4;
    --vnd-tinta: var(--marca-humo, #EDF2FC);
    --vnd-suave-fondo: #16223C;
    color: var(--marca-humo);
}

/* --- Portada -------------------------------------------------------------
   La elegancia sale del CONTRASTE de tamaños, no de añadir adornos: una cosa
   grande y el resto pequeño. Si compiten dos, no gana ninguna. */

.vnd-hero {
    padding-bottom: 3rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--vnd-linea);
}

.vnd-hero--corto {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

.vnd-hero-cintillo {
    font-size: 0.8125rem;
    color: var(--vnd-suave);
    margin: 0 0 0.75rem;
}

.vnd-hero-titulo {
    font-size: 2.5rem;
    font-weight: 600;
    /* El tracking negativo solo en tamaños grandes: a 40px las letras se
       separan de más y el titular se deshilacha. */
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 0 0 1rem;
    max-width: 20ch;
}

.vnd-hero-titulo--medio {
    font-size: 1.5625rem;
    letter-spacing: -.01em;
    max-width: none;
}

.vnd-hero-entrada {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--vnd-suave);
    margin: 0;
    /* Medida de lectura: pasadas ~65 letras por linea el ojo pierde el
       renglon al volver a la izquierda. */
    max-width: 34rem;
}

.vnd-hero-accion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.vnd-hero-nota {
    font-size: 0.8125rem;
    color: var(--vnd-suave);
}

@media (max-width: 40rem) {
    .vnd-hero-titulo { font-size: 1.5625rem; }
}

/* --- Las cifras ----------------------------------------------------------
   El numero es el argumento entero del programa. Se le da el peso visual que
   le corresponde y el texto de al lado se queda pequeno. */

.vnd-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.vnd-cifra-num {
    display: block;
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.vnd-cifra-pie {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.vnd-cifra-texto {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--vnd-suave);
    margin: 0.5rem 0 0;
}

/* --- Botón --- */

.vnd-boton {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 0;
    border-radius: 3px;
    background: var(--marca-azul);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.vnd-boton:hover {
    background: var(--marca-azul-medio, #0A56D6);
    color: #fff;
    text-decoration: none;
}

/* --- Lo que gana: tres celdas separadas por línea, no tres tarjetas --- */

.vnd-puntos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    border: 1px solid var(--vnd-linea);
}

.vnd-punto {
    padding: 1.5rem;
    border-right: 1px solid var(--vnd-linea);
}

.vnd-punto:last-child { border-right: 0; }

.vnd-punto-cifra {
    display: block;
    font-size: 1.5625rem;
    font-weight: 600;
    line-height: 1.15;
}

.vnd-punto-nombre {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

.vnd-punto-texto {
    font-size: 0.8125rem;
    color: var(--vnd-suave);
    margin: 0.5rem 0 0;
}

/* --- Pasos --- */

.vnd-pasos {
    list-style: none;
    counter-reset: paso;
    padding: 0;
    margin: 0;
}

.vnd-pasos li {
    counter-increment: paso;
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.75rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--vnd-linea);
}

/* El número va en el pseudo-elemento para que no se pueda seleccionar ni
   se lea dos veces con un lector de pantalla. */
.vnd-pasos li::before {
    content: counter(paso);
    grid-row: span 2;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--marca-azul-texto);
}

.vnd-pasos strong { font-size: 0.875rem; }

.vnd-pasos span {
    grid-column: 2;
    font-size: 0.8125rem;
    color: var(--vnd-suave);
}

:root[data-theme="dark"] .vnd-pasos li::before { color: var(--marca-cian); }

/* --- Lista de requisitos --- */

.vnd-lista {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.875rem;
}

.vnd-lista li { margin-bottom: 0.5rem; }

.vnd-nota {
    font-size: 0.8125rem;
    color: var(--vnd-suave);
    margin-top: 1rem;
}

/* --- Formulario --- */

.vnd-form { margin-top: 1.5rem; }

.vnd-campo { margin-bottom: 1rem; }

.vnd-campo label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.vnd-campo small {
    display: block;
    font-size: 0.75rem;
    color: var(--vnd-suave);
    margin-top: 0.25rem;
}

.vnd-campo .form-control,
.vnd-campo .form-select { border-radius: 3px; }

.vnd-fila {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 0.75rem;
}

.vnd-acepta {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    margin: 1rem 0;
}

/* --- Avisos de estado ----------------------------------------------------
   Franja a la izquierda y nada más. Aquí el color SÍ significa: dice en qué
   punto está la solicitud. */

.vnd-estado {
    padding: 1rem 1.5rem;
    border: 1px solid var(--vnd-linea);
    border-left-width: 3px;
    margin-bottom: 1.5rem;
}

.vnd-estado strong {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.vnd-estado p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--vnd-suave);
}

.vnd-estado--ok     { border-left-color: var(--marca-verde-texto); }
.vnd-estado--espera { border-left-color: var(--marca-ambar-texto); }
.vnd-estado--no     { border-left-color: var(--marca-rojo-texto); }

:root[data-theme="dark"] .vnd-estado--ok     { border-left-color: var(--marca-verde); }
:root[data-theme="dark"] .vnd-estado--espera { border-left-color: var(--marca-ambar); }
:root[data-theme="dark"] .vnd-estado--no     { border-left-color: var(--marca-rojo); }

.vnd-ok,
.vnd-error,
.vnd-aviso {
    padding: 0.75rem 1rem;
    border: 1px solid var(--vnd-linea);
    border-radius: 3px;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.vnd-error { color: var(--marca-rojo-texto); }
.vnd-error ul { margin: 0; padding-left: 1rem; }

:root[data-theme="dark"] .vnd-error { color: var(--marca-rojo); }

/* --- Datos en dos columnas --- */

.vnd-datos {
    margin: 0 0 1.5rem;
    border: 1px solid var(--vnd-linea);
}

.vnd-datos > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--vnd-linea);
}

.vnd-datos > div:last-child { border-bottom: 0; }

.vnd-datos dt {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--vnd-suave);
}

.vnd-datos dd {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* --- Mercado -------------------------------------------------------------- */

.vnd-ofertas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    border-top: 1px solid var(--vnd-linea);
    border-left: 1px solid var(--vnd-linea);
}

.vnd-oferta {
    padding: 1.5rem;
    border-right: 1px solid var(--vnd-linea);
    border-bottom: 1px solid var(--vnd-linea);
}

.vnd-oferta-servicio {
    display: block;
    font-size: 0.75rem;
    color: var(--vnd-suave);
}

.vnd-oferta-nombre {
    font-size: 1rem;
    font-weight: 600;
    margin: 0.25rem 0 0.5rem;
}

.vnd-oferta-texto {
    font-size: 0.8125rem;
    color: var(--vnd-suave);
    margin: 0 0 0.75rem;
}

.vnd-oferta-datos { margin: 0 0 0.75rem; }

.vnd-oferta-datos > div {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8125rem;
    padding: 0.25rem 0;
}

.vnd-oferta-datos dt { font-weight: 400; color: var(--vnd-suave); }
.vnd-oferta-datos dd { margin: 0; }

.vnd-oferta-precio {
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin: 0 0 0.75rem;
}

/* --- Panel del vendedor --------------------------------------------------- */

.vnd-entrega {
    padding: 1rem 0;
    border-bottom: 1px solid var(--vnd-linea);
}

.vnd-entrega-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.vnd-fila-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.5rem;
}

.vnd-fila-4 .form-control,
.vnd-fila-4 .form-select { border-radius: 3px; }

/* Botón secundario: mismo tamaño, sin relleno. Para acciones que no son la
   principal de la pantalla (pausar, borrar). */
.vnd-boton-lite {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--vnd-linea);
    border-radius: 3px;
    background: transparent;
    color: var(--vnd-suave);
    font-size: 0.75rem;
    cursor: pointer;
}

.vnd-boton-lite:hover { color: var(--marca-rojo-texto); }

:root[data-theme="dark"] .vnd-boton-lite:hover { color: var(--marca-rojo); }

/* Un importe negativo se lee como salida de dinero. */
.vnd-neg { color: var(--marca-rojo-texto); }
:root[data-theme="dark"] .vnd-neg { color: var(--marca-rojo); }

/* --- Requisitos y cierre --------------------------------------------------- */

.vnd-requisitos {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vnd-requisitos li {
    padding: 0.75rem 0 0.75rem 1.5rem;
    border-bottom: 1px solid var(--vnd-linea);
    font-size: 0.875rem;
    position: relative;
}

/* Una raya en vez de un punto: es más discreta y no compite con el texto. */
.vnd-requisitos li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.25rem;
    width: 0.75rem;
    height: 1px;
    background: var(--vnd-suave);
}

.vnd-cierre {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--vnd-linea);
}

.vnd-cierre p {
    font-size: 0.8125rem;
    color: var(--vnd-suave);
    max-width: 34rem;
    margin: 0 0 1.5rem;
}

/* --- Botones --------------------------------------------------------------- */

.vnd-boton--ancho {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 1.5rem;
}

.vnd-boton--secundario {
    background: transparent;
    border: 1px solid var(--vnd-linea);
    color: var(--marca-azul-texto);
}

.vnd-boton--secundario:hover {
    background: transparent;
    border-color: var(--marca-azul);
    color: var(--marca-azul-texto);
}

:root[data-theme="dark"] .vnd-boton--secundario { color: var(--marca-cian); }

.vnd-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* --- Formulario por grupos -------------------------------------------------
   Agrupar en bloques con su título convierte una pila de doce campos en tres
   preguntas cortas. El formulario es el mismo; se percibe la mitad. */

.vnd-grupo {
    border: 0;
    padding: 0;
    margin: 0 0 2rem;
}

.vnd-grupo-titulo {
    float: none;
    width: auto;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0 0 0.75rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--vnd-linea);
}

/* El código se lee mejor separado y en mayúsculas: se dicta por WhatsApp. */
.vnd-campo--codigo {
    font-size: 1.25rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* --- Qué pasa después ------------------------------------------------------
   Justo antes del botón, que es donde la persona duda si enviarlo. */

.vnd-despues {
    padding: 1.5rem;
    border: 1px solid var(--vnd-linea);
    margin: 2rem 0 1.5rem;
}

.vnd-despues-titulo {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.vnd-despues ol {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.8125rem;
    color: var(--vnd-suave);
}

.vnd-despues li { margin-bottom: 0.5rem; }
.vnd-despues li:last-child { margin-bottom: 0; }

/* --- Indicador de avance ---------------------------------------------------
   Cuatro pasos con una línea que los une. Dice de un vistazo dónde está y
   cuánto le queda, que es la primera pregunta de quien entra aquí. */

.vnd-avance {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.vnd-avance-paso {
    position: relative;
    padding-top: 1.5rem;
    text-align: center;
}

/* La línea que une los puntos. Va detrás del punto, de ahí el z-index. */
.vnd-avance-paso::before {
    content: "";
    position: absolute;
    top: 0.375rem;
    left: -50%;
    width: 100%;
    height: 1px;
    background: var(--vnd-linea);
}

.vnd-avance-paso:first-child::before { display: none; }

.vnd-avance-punto {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    border: 1px solid var(--vnd-linea);
    background: var(--marca-humo);
    z-index: 1;
}

.vnd-avance-texto {
    font-size: 0.75rem;
    color: var(--vnd-suave);
}

.vnd-avance-paso.is-hecho .vnd-avance-punto,
.vnd-avance-paso.is-actual .vnd-avance-punto {
    background: var(--marca-azul);
    border-color: var(--marca-azul);
}

.vnd-avance-paso.is-hecho::before { background: var(--marca-azul); }

/* El actual se marca con un anillo, no con otro color: así se distingue del
   completado sin meter un tercer color en la pantalla. */
.vnd-avance-paso.is-actual .vnd-avance-punto {
    outline: 3px solid rgba(11, 99, 246, .2);
    outline-offset: 0;
}

.vnd-avance-paso.is-actual .vnd-avance-texto {
    color: var(--marca-tinta);
    font-weight: 600;
}

:root[data-theme="dark"] .vnd-avance-punto { background: var(--marca-tinta); }

:root[data-theme="dark"] .vnd-avance-paso.is-hecho .vnd-avance-punto,
:root[data-theme="dark"] .vnd-avance-paso.is-actual .vnd-avance-punto {
    background: var(--marca-cian);
    border-color: var(--marca-cian);
}

:root[data-theme="dark"] .vnd-avance-paso.is-hecho::before { background: var(--marca-cian); }

:root[data-theme="dark"] .vnd-avance-paso.is-actual .vnd-avance-punto {
    outline: 3px solid rgba(34, 211, 238, .25);
    outline-offset: 0;
}

:root[data-theme="dark"] .vnd-avance-paso.is-actual .vnd-avance-texto { color: var(--marca-humo); }

/* --- Barra del depósito ---------------------------------------------------- */

.vnd-progreso {
    height: 3px;
    background: var(--vnd-linea);
    margin-bottom: 1.5rem;
}

.vnd-progreso > span {
    display: block;
    height: 100%;
    background: var(--marca-azul);
}

:root[data-theme="dark"] .vnd-progreso > span { background: var(--marca-cian); }

/* --- Errores del formulario ------------------------------------------------ */

.vnd-error strong {
    display: block;
    margin-bottom: 0.5rem;
}

/* --- Catalogo del vendedor -------------------------------------------------
   Tabla y encabezado de la pantalla de productos. Mismo acabado que el resto:
   una linea de separacion, sin sombras ni bordes redondeados grandes. */

.vnd-cab-seccion {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e-3);
    flex-wrap: wrap;
    margin-bottom: var(--e-4);
}

.vnd-cab-seccion .vnd-seccion,
.vnd-cab-seccion .vnd-titulo { margin-bottom: 0; }

.vnd-tabla {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--e-5);
    font-size: var(--t-3);
}

.vnd-tabla th,
.vnd-tabla td {
    text-align: left;
    padding: var(--e-3) var(--e-3) var(--e-3) 0;
    border-bottom: var(--linea) solid var(--vnd-linea);
    vertical-align: top;
}

.vnd-tabla th {
    font-size: var(--t-2);
    font-weight: 600;
    color: var(--vnd-suave);
}

.vnd-tabla td strong { display: block; }
.vnd-tabla .vnd-nota { display: block; margin: 0; }

.vnd-tabla-acciones {
    white-space: nowrap;
    text-align: right;
}

/* El estado de revision. Color solo donde cambia lo que tiene que hacer:
   en revision espera, rechazado exige corregir. Publicado no necesita grito. */

.vnd-marca {
    display: inline-block;
    font-size: var(--t-2);
    font-weight: 600;
    padding: 0.125rem var(--e-2);
    border: var(--linea) solid var(--vnd-linea);
    border-radius: var(--radio);
}

.vnd-marca--en_revision { border-color: #B26B00; color: #8A5200; }
.vnd-marca--rechazado   { border-color: #B3261E; color: #8C1D18; }
.vnd-marca--publicado   { color: var(--vnd-suave); }

/* En oscuro, las variantes vivas: los tonos oscurecidos son para fondo blanco
   y sobre grafito bajan de 3:1. */
:root[data-theme="dark"] .vnd-marca--en_revision { border-color: var(--marca-ambar, #FFC53D); color: var(--marca-ambar, #FFC53D); }
:root[data-theme="dark"] .vnd-marca--rechazado   { border-color: var(--marca-rojo, #FF6B66); color: var(--marca-rojo, #FF6B66); }

.vnd-miniatura {
    display: block;
    margin-top: var(--e-2);
    max-width: 120px;
    height: auto;
    border: var(--linea) solid var(--vnd-linea);
    border-radius: var(--radio);
}

/* --- Navegacion del panel --------------------------------------------------
   Una fila de enlaces separada por una linea, no una barra lateral flotante.
   La seccion actual se marca con la misma linea, mas gruesa: sin cambiar de
   color de fondo ni meter la fila en otra caja. */

.vnd-nav {
    display: flex;
    /* En angosto NO envuelve: siete secciones en tres filas son un desorden.
       Una sola fila que se desliza de lado, como cualquier app del telefono. */
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Pastillas: van juntas. Con la separacion de las pestanas quedaban
       flotando sueltas y no se leian como un menu. */
    gap: var(--e-1);
    border-bottom: var(--linea) solid var(--vnd-linea);
    padding-bottom: var(--e-2);
    margin-bottom: var(--e-5);
}

.vnd-nav::-webkit-scrollbar { display: none; }

.vnd-nav-enlace { white-space: nowrap; }

/* Pastillas, como la barra lateral del panel de administracion: la seccion
   actual en azul solido con texto blanco. Antes eran enlaces subrayados y
   no se leian como algo que se pulsa. */
.vnd-nav-enlace {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-3);
    border-radius: var(--radio);
    color: var(--vnd-suave);
    font-size: var(--t-3);
    text-decoration: none;
}

.vnd-nav-enlace:hover {
    background: var(--vnd-suave-fondo);
    color: var(--vnd-tinta);
    text-decoration: none;
}

.vnd-nav-enlace.is-actual,
.vnd-nav-enlace.is-actual:hover {
    background: var(--marca-azul, #0B63F6);
    color: #FFFFFF;
    font-weight: var(--p-medio, 500);
}

/* El icono hereda el color del enlace, tambien en la pastilla activa. */
.vnd-nav-enlace.is-actual svg { color: inherit; }

/* Solo lo lleva «Listos para entrega»: es lo unico donde alguien espera. */
.vnd-nav-cuenta {
    font-size: var(--t-1);
    font-weight: 600;
    padding: 0.0625rem var(--e-2);
    border: var(--linea) solid #B26B00;
    border-radius: var(--radio);
    color: #8A5200;
    font-variant-numeric: tabular-nums;
}

:root[data-theme="dark"] .vnd-nav-cuenta {
    border-color: var(--marca-ambar, #FFC53D);
    color: var(--marca-ambar, #FFC53D);
}

/* Entregar a mano es la salida de emergencia, no el camino normal: va
   plegada para que lo primero que vea sea servir desde su stock. */

.vnd-mano {
    margin-top: var(--e-3);
    border-top: var(--linea) solid var(--vnd-linea);
    padding-top: var(--e-3);
}

.vnd-mano > summary {
    cursor: pointer;
    font-size: var(--t-3);
    color: var(--vnd-suave);
}

.vnd-mano[open] > summary { margin-bottom: var(--e-3); }

/* Icono de seccion. Se mide en `em` para que crezca con la letra, y toma el
   color del texto: el enlace y su icono son siempre del mismo tono, y al
   cambiar de tema cambian los dos a la vez sin tocar nada. */

.vnd-nav-icono {
    display: inline-flex;
    flex: 0 0 auto;
}

.ls-icono {
    width: 1.15em;
    height: 1.15em;
    display: block;
}

/* --- Comparativa de niveles ------------------------------------------------
   Una sola superficie dividida por lineas de 1px, no seis tarjetas separadas
   por huecos. La columna del nivel actual se marca con una linea vertical y
   el texto en tinta; el resto queda en gris. Sin fondo de color: eso meteria
   un acento mas compitiendo con el unico que hay. */

.vnd-siguiente {
    margin: 0 0 var(--e-5);
    padding: var(--e-3) 0;
    border-top: var(--linea) solid var(--vnd-linea);
    border-bottom: var(--linea) solid var(--vnd-linea);
    font-size: var(--t-3);
}

/* Con seis niveles no cabe en un movil. Se desplaza la tabla, no la pagina. */
.vnd-comparativa-caja {
    overflow-x: auto;
    margin-bottom: var(--e-5);
}

.vnd-comparativa {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-3);
    font-variant-numeric: tabular-nums;
}

.vnd-comparativa th,
.vnd-comparativa td {
    padding: var(--e-3);
    border-bottom: var(--linea) solid var(--vnd-linea);
    text-align: right;
    white-space: nowrap;
    vertical-align: top;
}

/* La primera columna nombra el beneficio: va a la izquierda y en gris, que es
   la etiqueta. Las cifras a la derecha, para poder compararlas de un vistazo. */
.vnd-comparativa tbody th[scope="row"],
.vnd-comparativa thead th:first-child {
    text-align: left;
    font-weight: var(--p-normal);
    color: var(--vnd-suave);
}

.vnd-comparativa thead th {
    font-weight: var(--p-fuerte);
    border-bottom-width: 2px;
}

.vnd-comparativa tfoot td,
.vnd-comparativa tfoot th { border-bottom: 0; }

/* El nivel actual. Una linea vertical y tinta plena: se distingue sin pintar
   la columna de otro color. */
.vnd-comparativa .is-actual {
    color: var(--vnd-tinta);
    font-weight: var(--p-medio);
    border-left: 2px solid var(--vnd-tinta);
    border-right: 2px solid var(--vnd-tinta);
}

.vnd-comparativa thead th.is-actual { border-top: 2px solid var(--vnd-tinta); }
.vnd-comparativa tfoot td.is-actual { border-bottom: 2px solid var(--vnd-tinta); }

.vnd-comparativa-tuyo {
    display: block;
    font-size: var(--t-1);
    font-weight: var(--p-normal);
    color: var(--vnd-suave);
}

/* --- Cambiar el nombre de la tienda ---------------------------------------
   Plegado bajo el titulo: es una accion ocasional y abierta ocuparia mas que
   el propio titulo al que acompana. */

.vnd-renombrar { margin-bottom: var(--e-4); }

.vnd-renombrar > summary {
    cursor: pointer;
    font-size: var(--t-2);
    color: var(--vnd-suave);
}

.vnd-renombrar-forma {
    display: flex;
    gap: var(--e-2);
    margin-top: var(--e-3);
    max-width: 24rem;
}

/* --- Perfiles de una cuenta del stock -------------------------------------
   Plegados bajo su cuenta: cinco formularios abiertos por cuenta harian de la
   tabla una pared. La fila que los contiene no lleva su propia linea inferior
   porque visualmente pertenece a la fila de arriba. */

.vnd-perfiles-fila > td {
    padding-top: 0;
    border-bottom: var(--linea) solid var(--vnd-linea);
}

.vnd-perfiles > summary {
    cursor: pointer;
    font-size: var(--t-2);
    color: var(--vnd-suave);
}

.vnd-perfiles-lista {
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
    padding: var(--e-3) 0 var(--e-2);
}

.vnd-perfil-forma {
    display: flex;
    gap: var(--e-2);
    align-items: center;
    max-width: 30rem;
    margin: 0;
}

.vnd-perfil-pin { max-width: 8rem; }

.vnd-perfil-forma--entregado {
    font-size: var(--t-3);
    color: var(--vnd-suave);
}

/* --- El menu del panel, en columna ----------------------------------------
   En pantalla ancha va a la izquierda, como una barra lateral: seis secciones
   se recorren mejor en vertical y el contenido gana un ancho de lectura
   constante. En movil vuelve arriba, donde una columna se comeria el ancho.

   La rejilla pone el menu en la primera columna y TODO lo demas en la
   segunda: asi ninguna pantalla del panel tiene que saber nada del menu. */

@media (min-width: 62rem) {
    .vnd--panel {
        display: grid;
        grid-template-columns: 13rem minmax(0, 1fr);
        column-gap: var(--e-7);
    }

    .vnd--panel > * { grid-column: 2; }

    .vnd--panel > .vnd-nav {
        grid-column: 1;
        /* Ocupa todas las filas que hagan falta: las vacias miden cero. */
        grid-row: 1 / span 99;

        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        align-self: start;
        border-bottom: 0;
        border-right: var(--linea) solid var(--vnd-linea);
        padding-right: var(--e-4);

        /* Acompana al desplazarse; el tope respira un poco del borde. */
        position: sticky;
        top: var(--e-4);
    }

    /* En columna las pastillas ocupan el ancho, como la barra lateral del
       panel de administracion. */
    .vnd--panel .vnd-nav-enlace {
        padding: var(--e-2) var(--e-3);
        margin-bottom: 0.125rem;
    }
}

/* Precio con su selector de moneda delante, en una sola linea. */
.vnd-precio-moneda {
    display: flex;
    gap: var(--e-2);
}

.vnd-precio-moneda > select { flex: 0 0 auto; width: auto; }


/* --- El panel no lleva el reclamo flotante de la tienda -------------------
   «Contrata aqui» es para compradores; sobre el panel del vendedor solo
   tapa. El boton de WhatsApp se queda: es soporte. */

body:has(.vnd--panel) .whatsapp-tooltip,
body:has(.vnd--panel) .welcome-message,
body:has(.cht) .whatsapp-tooltip,
body:has(.cht) .welcome-message {
    display: none !important;
}

/* En angosto, el contenedor respira menos por arriba: el menu ya separa. */
@media (max-width: 48rem) {
    .vnd { padding-top: 1rem; }
}

/* La barra de «Guardar todo» de los perfiles: pegada arriba de la lista,
   para no tener que bajar hasta el final con diez perfiles en pantalla. */
.vnd-perfiles-barra {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--e-3, .75rem);
    flex-wrap: wrap;
    padding: var(--e-3, .75rem) 0;
    margin-bottom: var(--e-2, .5rem);
    border-bottom: var(--linea, 1px) solid var(--vnd-linea);
    /* Fondo propio: la barra queda pegada arriba y, sin opaco, el
       contenido de la lista se le transparenta por debajo al desplazar. */
    background: #FFFFFF;
}

:root[data-theme="dark"] .vnd-perfiles-barra { background: #0D1526; }

/* La referencia del comprador en la lista de entregas: le dice al vendedor
   para quién es cada pedido cuando se lleva varios el mismo día. */
.vnd-referencia {
    font-size: var(--t-1, .75rem);
    color: var(--vnd-tinta);
    border: var(--linea, 1px) solid var(--vnd-linea);
    border-radius: var(--radio, 3px);
    padding: .0625rem .375rem;
}

/* El ajuste de vencimiento en la lista de entregados: fecha, motivo y
   botón en una línea, que baja a bloque en pantalla estrecha. */
.vnd-venc-forma {
    display: flex;
    gap: var(--e-2, .5rem);
    align-items: center;
    flex-wrap: wrap;
}

.vnd-venc-forma input[type="date"] { max-width: 10rem; }
.vnd-venc-forma input[type="text"] { min-width: 12rem; flex: 1; }

/* El aviso de que editar esta cuenta repone las credenciales de clientes
   que ya la tienen. Va en ámbar: es una consecuencia, no un error. */
.vnd-aviso-reposicion {
    margin: 0 0 var(--e-4, 1rem);
    padding: var(--e-3, .75rem);
    font-size: var(--t-2, .8125rem);
    line-height: 1.5;
    border: var(--linea, 1px) solid var(--marca-ambar, #FFB020);
    border-radius: var(--radio, 3px);
    color: var(--vnd-tinta);
}

/* Un perfil ya vendido sigue siendo editable —hace falta al reponer una
   cuenta— pero se distingue: el cambio le llega a un cliente real. */
.vnd-perfil-forma--vendido {
    padding-left: var(--e-2, .5rem);
    border-left: 2px solid var(--marca-ambar, #FFB020);
}

/* Listas de consulta que se recogen: con veinte perfiles libres, la tabla
   tapaba los pedidos pendientes, que es lo que sí hay que atender. */
.vnd-plegable { margin-top: var(--e-5, 1.5rem); }

.vnd-plegable > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--e-2, .5rem);
    padding: var(--e-3, .75rem) 0;
    border-bottom: var(--linea, 1px) solid var(--vnd-linea);
}

.vnd-plegable > summary::-webkit-details-marker { display: none; }

/* El triángulo lo dibujamos nosotros para que gire al abrir. */
.vnd-plegable > summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .15s ease;
}

.vnd-plegable[open] > summary::before { transform: rotate(90deg); }

/* La cuenta regresiva del servicio del cliente. En gris mientras hay
   margen; en ámbar cuando quedan cinco días o menos, que es cuando el
   vendedor tiene que decidir si renueva o repone. */
.vnd-cuenta-atras {
    display: inline-block;
    margin-left: var(--e-2, .5rem);
    font-size: var(--t-1, .75rem);
    color: var(--vnd-suave);
    font-variant-numeric: tabular-nums;
}

.vnd-cuenta-atras.esta-al-limite {
    color: var(--marca-ambar-texto, #8A5900);
    font-weight: var(--p-medio, 500);
}

:root[data-theme="dark"] .vnd-cuenta-atras.esta-al-limite { color: var(--marca-ambar, #FFB020); }

/* El reembolso va separado del ajuste de fecha: son decisiones distintas
   y una devuelve dinero de verdad. */
.vnd-reembolso-forma {
    margin-top: var(--e-2, .5rem);
    padding-top: var(--e-2, .5rem);
    border-top: var(--linea, 1px) solid var(--vnd-linea);
}

.vnd-boton-peligro {
    border-color: var(--marca-rojo-texto, #C01B2C);
    color: var(--marca-rojo-texto, #C01B2C);
}

:root[data-theme="dark"] .vnd-boton-peligro {
    border-color: var(--marca-rojo, #FF4D5E);
    color: var(--marca-rojo, #FF4D5E);
}

/* ==========================================================================
   El panel: cifras, gráficos y estado
   ==========================================================================
   Regla de color: el azul es el único acento; el ámbar y el rojo se reservan
   para lo que significa algo (un aviso, un vencimiento). Todo lo demás vive
   en tinta y gris. Barras a escuadra y sin sombras, razón dato-tinta.
   ========================================================================== */

/* La variación contra el mes pasado: verde si sube, rojo si baja. Es un
   estado, no un adorno — por eso lleva color. */
.vnd-variacion {
    display: inline-block;
    margin-left: var(--e-2, .5rem);
    font-size: var(--t-1, .75rem);
    font-weight: var(--p-fuerte, 600);
    font-variant-numeric: tabular-nums;
}

.vnd-variacion.es-arriba { color: var(--marca-verde-texto, #157F45); }
.vnd-variacion.es-abajo  { color: var(--marca-rojo-texto, #C01B2C); }

:root[data-theme="dark"] .vnd-variacion.es-arriba { color: var(--marca-verde, #22C55E); }
:root[data-theme="dark"] .vnd-variacion.es-abajo  { color: var(--marca-rojo, #FF4D5E); }

/* El estado del inventario: una fila de datos separada por líneas, no
   tarjetas flotantes. */
.vnd-salud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-5, 1.5rem);
    padding: var(--e-3, .75rem) 0;
    border-bottom: var(--linea, 1px) solid var(--vnd-linea);
    margin-bottom: var(--e-5, 1.5rem);
    font-size: var(--t-2, .8125rem);
    color: var(--vnd-suave);
}

.vnd-salud-dato { color: inherit; text-decoration: none; }
.vnd-salud-dato strong { color: var(--vnd-tinta); font-variant-numeric: tabular-nums; }

.vnd-salud-dato.es-aviso,
.vnd-salud-dato.es-aviso strong { color: var(--marca-ambar-texto, #8A5900); }

.vnd-salud-dato.es-alerta,
.vnd-salud-dato.es-alerta strong { color: var(--marca-rojo-texto, #C01B2C); }

:root[data-theme="dark"] .vnd-salud-dato.es-aviso,
:root[data-theme="dark"] .vnd-salud-dato.es-aviso strong { color: var(--marca-ambar, #FFB020); }

:root[data-theme="dark"] .vnd-salud-dato.es-alerta,
:root[data-theme="dark"] .vnd-salud-dato.es-alerta strong { color: var(--marca-rojo, #FF4D5E); }

/* El gráfico de 30 días. Barras a escuadra, sin degradado ni sombra: lo
   que no es dato, sobra. */
.vnd-grafico {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 9rem;
    padding: var(--e-3, .75rem) 0;
    border-bottom: var(--linea, 1px) solid var(--vnd-linea);
}

.vnd-barra-envoltorio {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    min-width: 3px;
}

.vnd-barra {
    width: 100%;
    background: var(--marca-azul, #0B63F6);
    border-radius: 0;
}

.vnd-grafico-pie {
    display: flex;
    justify-content: space-between;
    gap: var(--e-3, .75rem);
    margin: var(--e-2, .5rem) 0 var(--e-6, 2rem);
    font-size: var(--t-1, .75rem);
    color: var(--vnd-suave);
    font-variant-numeric: tabular-nums;
}

/* La barra de proporción del top de productos: dentro de la propia fila,
   sin una columna aparte que repita el dato. */
.vnd-barra-linea {
    display: block;
    height: 3px;
    margin-top: .375rem;
    background: var(--vnd-suave-fondo);
}

.vnd-barra-linea > span {
    display: block;
    height: 100%;
    background: var(--marca-azul, #0B63F6);
}

/* Dos columnas en pantalla ancha; una sola en el teléfono. */
.vnd-dos-columnas {
    display: grid;
    gap: var(--e-6, 2rem);
    margin-bottom: var(--e-6, 2rem);
}

@media (min-width: 48rem) {
    .vnd-dos-columnas { grid-template-columns: 1fr 1fr; }
}

.vnd-cifra {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Programa de socios: la pagina "Mi plan"
   ==========================================================================
   Tarjetas de plan al estilo de la pagina de planes de Crescavia, con la
   escala de la casa: una linea de 1px, radio 3px solo en controles, un
   acento. Nada de sombras. */

/* --- El plan vigente: una sola superficie con lineas dentro --- */

.pln-vigente {
    border: 1px solid var(--vnd-linea);
    margin-bottom: 2rem;
}

.pln-vigente .vnd-puntos { border: 0; border-top: 1px solid var(--vnd-linea); }

.pln-vigente-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
}

.pln-insignia {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    background: var(--marca-azul);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    margin-right: 0.25rem;
}

.pln-suave { color: var(--vnd-suave); }

/* Cuantos dias quedan. Ambar cuando quedan pocos: es un estado, no un adorno. */
.pln-dias {
    font-size: 0.8125rem;
    color: var(--vnd-suave);
    white-space: nowrap;
}

.pln-dias.is-pronto { color: var(--marca-ambar-texto, #8A5A00); font-weight: 600; }
:root[data-theme="dark"] .pln-dias.is-pronto { color: var(--marca-ambar, #E8A13C); }

.pln-pagado-solo {
    margin: 0;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--vnd-linea);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--marca-verde-texto, #0F6B3C);
}

:root[data-theme="dark"] .pln-pagado-solo { color: var(--marca-verde, #34C77B); }

.pln-renovacion {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--vnd-linea);
    font-size: 0.875rem;
}

.pln-renovacion label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    cursor: pointer;
}

/* --- Las tarjetas de plan --- */

.pln-planes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.pln-tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--vnd-linea);
    padding: 1.5rem;
}

/* El elegido de la casa y el propio se marcan con el borde, no con colores
   nuevos: la tarjeta que importa es mas firme, no mas adornada. */
.pln-tarjeta.is-destacado,
.pln-tarjeta.is-actual { border-color: var(--marca-azul); }

.pln-cinta {
    position: absolute;
    top: -0.6875rem;
    right: 1rem;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    background: var(--marca-azul);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.pln-tarjeta-nombre { font-size: 1rem; }

.pln-precio { margin: 0.75rem 0 0; }

.pln-precio-cifra {
    font-size: 1.5625rem;
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.pln-resumen {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--vnd-suave);
}

.pln-gancho {
    margin: 0.75rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--vnd-linea);
    font-size: 0.8125rem;
}

.pln-gancho strong { color: var(--marca-verde-texto, #0F6B3C); }
:root[data-theme="dark"] .pln-gancho strong { color: var(--marca-verde, #34C77B); }

.pln-ventajas {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--vnd-linea);
    font-size: 0.875rem;
}

.pln-ventajas li {
    padding-left: 1.25rem;
    position: relative;
    margin-bottom: 0.5rem;
}

.pln-ventajas li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--vnd-suave);
}

/* El boton abajo del todo aunque las listas midan distinto. */
.pln-accion { margin-top: auto; padding-top: 1rem; }

.pln-boton {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.pln-boton--contorno {
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--marca-azul);
    border-radius: 3px;
    background: transparent;
    color: var(--marca-azul);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.pln-boton--contorno:hover { background: var(--vnd-suave-fondo); }

.pln-boton--apagado {
    display: block;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--vnd-linea);
    border-radius: 3px;
    color: var(--vnd-suave);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
}

.pln-letra-chica {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--vnd-suave);
    text-align: center;
}