/* ============================================================================
   C81 — /Vendidos: vitrina pública de ventas. "Propuesta 3".
   Cada fila es una TARJETA con su borde redondeado (no una tabla plana), la
   cabecera lleva icono por columna, la venta más nueva va con borde magenta
   encendido y su etiqueta "Nueva", y la paginación son botones redondos.
   Toda la paleta sale de la marca: morado #7c3aed / #a855f7 y magenta #d946ef.
   ============================================================================ */

.vd-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.6rem 1rem 3.5rem;
}

/* ---------------------------------------------------------------- HERO ---- */
.vd-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.6rem;
    min-height: 190px;
}

.vd-hero-txt { position: relative; z-index: 2; max-width: 620px; }

/* Russo One: ancha y cuadrada, de aire arcade, elegida por Diego entre nueve.
   Solo existe en un peso (400), así que NO se le pone 900: si se le fuerza, el
   navegador se inventa el grosor y las letras salen sucias. Va SOLO en el
   título; el resto del texto sigue con la fuente del sistema, que se lee mejor
   en párrafos. Si no llega a cargar, cae a la de siempre: distinta, nunca rota. */
.vd-title {
    font-family: "Russo One", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: clamp(2.2rem, 5.6vw, 3.9rem);
    font-weight: 400;
    letter-spacing: .005em;
    line-height: 1.05;
    margin: 0 0 .55rem;
    background: linear-gradient(100deg, #ffffff 12%, #f5d0fe 52%, #c084fc 92%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 26px rgba(192, 38, 211, .38));
}

.vd-sub { margin: 0 0 1.15rem; color: #a49dbe; font-size: .95rem; }

/* Pastilla del total: contorno magenta encendido, como en la propuesta. */
.vd-total {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem 1.05rem;
    border-radius: 999px;
    background: rgba(217, 70, 239, .1);
    border: 1px solid rgba(217, 70, 239, .55);
    color: #f5d0fe;
    font-weight: 800;
    font-size: .88rem;
    box-shadow: 0 0 22px rgba(217, 70, 239, .2);
}

.vd-total svg { width: 16px; height: 16px; color: #e879f9; }

/* Adorno SVG: decorativo, se recorta si no cabe y desaparece en pantallas
   pequeñas para no robarle sitio al contenido. */
.vd-hero-art {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: min(420px, 42%);
    pointer-events: none;
    opacity: .95;
    z-index: 1;
}

.vd-hero-art svg,
.vd-hero-art img { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------- PANEL ---- */
.vd-panel {
    border-radius: 20px;
    padding: 1px;                                  /* deja ver el borde degradado */
    background: linear-gradient(150deg, rgba(168, 85, 247, .55), rgba(217, 70, 239, .18) 40%, rgba(124, 58, 237, .35));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

.vd-tabla-wrap {
    border-radius: 19px;
    background: #0d0a1c;
    padding: .4rem .5rem .6rem;
    overflow: hidden;
}

.vd-tabla {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;                         /* el aire entre tarjetas */
    font-size: .86rem;
}

/* ------------------------------------------------------------ CABECERA ---- */
.vd-tabla thead th {
    background: transparent;
    color: #a79ec9;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-align: left;
    padding: .9rem 1rem .7rem;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.vd-th-ic {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-right: .4rem;
    color: #a855f7;
}

.vd-th-ord { color: #7c3aed; margin-left: .25rem; font-size: .9rem; }

/* --------------------------------------------------------------- FILAS ---- */
/* Cada fila es una tarjeta: el fondo y el borde van en las celdas porque un
   <tr> no admite border-radius de forma fiable. Se redondean los extremos. */
.vd-tabla tbody td {
    background: #14102a;
    border-top: 1px solid rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    padding: .85rem 1rem;
    vertical-align: middle;
    color: #e9e5f7;
    transition: background .16s ease;
}

.vd-tabla tbody td:first-child {
    border-left: 1px solid rgba(255, 255, 255, .06);
    border-radius: 13px 0 0 13px;
}

.vd-tabla tbody td:last-child {
    border-right: 1px solid rgba(255, 255, 255, .06);
    border-radius: 0 13px 13px 0;
}

.vd-tabla tbody tr:hover td { background: #1a1436; }

/* La venta MÁS NUEVA: tinte UNIFORME + borde magenta + halo difuso.
   Antes llevaba un degradado horizontal, y ahí estaba el fallo: el degradado se
   aplicaba a CADA celda, así que arrancaba y terminaba seis veces a lo ancho de
   la fila y dejaba unas bandas duras muy feas. Un tinte plano no puede bandear.
   El brillo lo da el halo, que es lo que de verdad hace que destaque. */
.vd-tabla tbody tr.vd-nueva td {
    background: #1a1237;
    border-top-color: rgba(232, 121, 249, .55);
    border-bottom-color: rgba(232, 121, 249, .55);
    box-shadow: 0 0 30px rgba(217, 70, 239, .13);
}

.vd-tabla tbody tr.vd-nueva:hover td { background: #1f1642; }

.vd-tabla tbody tr.vd-nueva td:first-child { border-left-color: rgba(232, 121, 249, .55); }
.vd-tabla tbody tr.vd-nueva td:last-child { border-right-color: rgba(232, 121, 249, .55); }

/* Etiqueta "Nueva": cuelga del borde superior DERECHO de la fila, así que se
   ancla en la última celda (la de estado), que es la que llega a ese extremo. */
.vd-c-est { position: relative; }

.vd-badge-nueva {
    position: absolute;
    top: -8px;
    right: 10px;
    padding: .12rem .55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #a21caf, #e879f9);
    color: #fff;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    box-shadow: 0 3px 12px rgba(217, 70, 239, .55);
    white-space: nowrap;
    z-index: 3;
}

/* ---- Fecha ---- */
.vd-fecha { display: inline-flex; align-items: center; gap: .5rem; }

.vd-punto {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a855f7;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, .18);
}

.vd-nueva .vd-punto { background: #e879f9; box-shadow: 0 0 0 3px rgba(232, 121, 249, .25); }

.vd-fecha-txt { display: flex; flex-direction: column; }
.vd-dia { font-weight: 700; white-space: nowrap; }
.vd-hora { font-size: .74rem; color: #948caf; white-space: nowrap; }

/* ---- Servicio ---- */
.vd-serv { display: flex; align-items: center; gap: .7rem; min-width: 0; }

.vd-logo {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: color-mix(in srgb, var(--ac) 20%, #14112a);
    border: 1px solid color-mix(in srgb, var(--ac) 45%, transparent);
}

.vd-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.vd-logo-ini { font-weight: 900; color: var(--ac); font-size: .95rem; }

.vd-serv-txt { display: flex; flex-direction: column; min-width: 0; }
.vd-serv-nom { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-serv-det { font-size: .73rem; color: #948caf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Comprador ---- */
.vd-comprador { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.vd-comprador svg { width: 14px; height: 14px; color: #8b83a8; flex: 0 0 auto; }

/* ---- Método de pago ---- */
.vd-metodo {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}

.vd-metodo svg { width: 13px; height: 13px; }

.vd-metodo-yape { background: rgba(147, 51, 234, .16); border-color: rgba(192, 132, 252, .45); color: #e9d5ff; }
.vd-metodo-tarjeta { background: rgba(59, 130, 246, .14); border-color: rgba(96, 165, 250, .45); color: #bfdbfe; }
.vd-metodo-saldo { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .42); color: #86efac; }

/* ---- Monto ---- */
.vd-monto { font-weight: 800; white-space: nowrap; letter-spacing: .01em; }

/* ---- Estado ---- */
.vd-c-est { text-align: center; }
.vd-tabla thead th.vd-c-est { text-align: center; }

.vd-estado {
    display: inline-block;
    padding: .3rem .85rem;
    border-radius: 999px;
    font-size: .73rem;
    font-weight: 800;
    white-space: nowrap;
}

.vd-estado-ok { background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .55); color: #6ee7a0; }
.vd-estado-proceso { background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .55); color: #fbbf24; }

/* --------------------------------------------------------- PAGINACIÓN ----- */
.vd-pag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin-top: 1.6rem;
    flex-wrap: wrap;
}

.vd-pag-b {
    min-width: 38px;
    height: 38px;
    padding: 0 .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .09);
    background: #14102a;
    color: #cfc9ea;
    font-size: .86rem;
    font-weight: 800;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease;
}

.vd-pag-b:hover { background: rgba(139, 92, 246, .24); border-color: rgba(168, 85, 247, .5); color: #fff; }

.vd-pag-b.is-on {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 20px rgba(124, 58, 237, .45);
}

.vd-pag-b.is-off { opacity: .3; }
.vd-pag-sep { color: #6f688a; padding: 0 .2rem; }

/* -------------------------------------------------------------- VACÍO ----- */
.vd-vacio {
    text-align: center;
    padding: 3rem 1rem;
    border: 1px dashed rgba(255, 255, 255, .12);
    border-radius: 18px;
    color: #948caf;
}

.vd-vacio-ic { font-size: 2rem; display: block; margin-bottom: .5rem; }

/* ============================================================================
   MÓVIL (<= 780px) — la tabla se convierte en TARJETAS APILADAS.
   Arrastrar una tabla de seis columnas en un teléfono es incómodo, y esta
   página existe para lucir las ventas: si cuesta leerla, no cumple su función.
   El HTML no cambia (sigue siendo una tabla, que es lo correcto para estos
   datos y lo que entienden los lectores de pantalla): solo cambia cómo se
   dibuja. Cada fila se reordena con CSS Grid en cuatro zonas:
        fecha            (arriba, ancho completo)
        servicio         (ancho completo)
        comprador | monto
        método    | estado
   ============================================================================ */
@media (max-width: 900px) {
    .vd-hero-art { opacity: .3; width: 58%; right: -60px; }
}

@media (max-width: 780px) {
    .vd-wrap { padding: 1.1rem .75rem 3rem; }

    /* --- Hero --- */
    .vd-hero { min-height: 0; margin-bottom: 1.1rem; display: block; }
    .vd-hero-art { display: none; }
    .vd-title { font-size: clamp(1.9rem, 9.5vw, 2.7rem); }
    .vd-sub { font-size: .88rem; margin-bottom: .85rem; }

    /* --- La tabla deja de comportarse como tabla --- */
    .vd-panel { border-radius: 16px; }
    .vd-tabla-wrap { padding: .55rem .55rem .3rem; border-radius: 15px; }
    .vd-tabla { display: block; border-spacing: 0; }
    .vd-tabla thead { display: none; }         /* los títulos van dentro de cada tarjeta */
    .vd-tabla tbody { display: block; }

    .vd-tabla tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "fecha  fecha"
            "serv   serv"
            "comp   monto"
            "met    est";
        gap: .45rem .6rem;
        align-items: center;
        position: relative;
        padding: .8rem .85rem;
        margin-bottom: 9px;
        background: #14102a;
        border: 1px solid rgba(255, 255, 255, .06);
        border-radius: 14px;
    }

    /* Las celdas pierden su marco: el marco ahora lo lleva la tarjeta. */
    .vd-tabla tbody td {
        display: block;
        background: none;
        border: 0;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
    }

    .vd-tabla tbody tr:hover td,
    .vd-tabla tbody tr.vd-nueva:hover td { background: none; }

    .vd-c-fecha { grid-area: fecha; }
    .vd-c-serv { grid-area: serv; }
    .vd-c-comp { grid-area: comp; }
    .vd-c-monto { grid-area: monto; text-align: right; }
    .vd-c-met { grid-area: met; }
    .vd-c-est { grid-area: est; text-align: right; }

    /* La venta más nueva: el borde y el halo pasan a la TARJETA. */
    .vd-tabla tbody tr.vd-nueva {
        background: #1a1237;
        border-color: rgba(232, 121, 249, .6);
        box-shadow: 0 0 26px rgba(217, 70, 239, .16);
    }

    .vd-tabla tbody tr.vd-nueva td { background: none; border-color: transparent; }

    /* La etiqueta "Nueva" se ancla a la tarjeta, no a una celda. */
    .vd-c-est { position: static; }
    .vd-badge-nueva { top: -7px; right: 10px; }

    /* Fecha en UNA línea, con un punto de separación: ocupa la mitad de alto. */
    .vd-fecha-txt { flex-direction: row; align-items: baseline; gap: .4rem; }
    .vd-dia { font-size: .82rem; }
    .vd-hora { font-size: .74rem; }
    .vd-hora::before { content: "·"; margin-right: .4rem; color: #6f688a; }

    /* Servicio: un pelín más grande, que es lo que la gente busca primero. */
    .vd-logo { width: 38px; height: 38px; }
    .vd-serv-nom { font-size: .95rem; }
    .vd-serv-det { font-size: .76rem; }

    /* Monto destacado: en el móvil es el otro dato que se mira de golpe. */
    .vd-monto { font-size: 1.02rem; color: #fff; }

    .vd-comprador { font-size: .86rem; }
    .vd-metodo { font-size: .72rem; padding: .26rem .6rem; }
    .vd-estado { font-size: .72rem; padding: .26rem .7rem; }

    /* --- Paginación con el pulgar --- */
    .vd-pag { gap: .35rem; margin-top: 1.2rem; }
    .vd-pag-b { min-width: 42px; height: 42px; }   /* objetivo táctil cómodo */
}

/* Teléfonos estrechos: el comprador y el monto ya no caben lado a lado. */
@media (max-width: 400px) {
    .vd-tabla tbody tr {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .4rem .45rem;
    }
    .vd-serv-nom { font-size: .9rem; }
    .vd-monto { font-size: .96rem; }
}