/* ═══════════════════════════════════════════════════════════════
   PAV · estilos minimos sobre Bootstrap 5
   La estrategia: pisar los tokens de Bootstrap (--bs-*) en :root
   con los colores Truper, asi `bg-warning`, `btn-danger`, `bg-dark`,
   etc. ya respetan la marca sin necesidad de clases custom.
   Solo queda CSS para lo que Bootstrap no resuelve por defecto:
     • Posicion sticky del filter bar (top dinamico via JS)
     • Tamaño responsivo del titulo hero (Bootstrap no trae .fs-md-*)
     • Detalle del circulo coloreado en filtros (Aumento/Reduccion/Sin)
     • Hover-lift sutil en tarjetas
     • Hover ambar en filas de tabla
     • Animacion fade-up al cargar
   ═══════════════════════════════════════════════════════════════ */


/* ── 1. Paleta Truper sobre tokens de Bootstrap ────────────── */
:root {
    /* Amarillo Truper → .bg-warning, .btn-warning, .text-warning */
    --bs-warning:        #FFCB05;
    --bs-warning-rgb:    255, 203, 5;

    /* Rojo PDF → .btn-danger */
    --bs-danger:         #d6433b;
    --bs-danger-rgb:     214, 67, 59;

    /* Verde Excel → .btn-success */
    --bs-success:        #2e9b5b;
    --bs-success-rgb:    46, 155, 91;

    /* Negro corporativo → .bg-dark, .text-bg-dark */
    --bs-dark:           #111;
    --bs-dark-rgb:       17, 17, 17;

    /* Variables propias para los detalles que no calzan en Bootstrap */
    --pav-hero-h:        70px;  /* el JS la sobreescribe con la altura real */
    --pav-transition:    .18s ease;
}


/* ── 1.b Container custom — menos gutter que el de Bootstrap ──────
   Bootstrap topa max-width en 1320px (.container-xxl) y, en pantallas
   amplias, deja un margen lateral grande. `.pav-container` sube el
   max-width a 1600px y reduce el gutter (1rem en mobile, 1.5rem en md+),
   aprovechando mas el viewport sin pegarse al borde. */
.pav-container {
    width: 100%;
    max-width: 1600px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
}
@media (min-width: 768px) {
    .pav-container { padding-right: 1.5rem; padding-left: 1.5rem; }
}


/* ── 2. Titulo del hero — responsivo (Bootstrap no trae .fs-md-*) */
.pav-hero-title {
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: .01em;
}
@media (min-width: 768px)  { .pav-hero-title { font-size: 1.35rem; } }
@media (min-width: 992px)  { .pav-hero-title { font-size: 1.55rem; } }
@media (min-width: 1200px) { .pav-hero-title { font-size: 1.65rem; } }


/* ── 3. Filter bar sticky bajo el hero (top dinamico) ─────── */
.pav-filter-sticky {
    position: sticky;
    top: var(--pav-hero-h, 70px);
    z-index: 15;
}


/* ── 4. Botones de filtro — circulo coloreado a la izquierda  */
.pav-filter-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
}
.pav-filter-up    .pav-filter-arrow { background: rgba(var(--bs-success-rgb), .15); color: var(--bs-success); }
.pav-filter-down  .pav-filter-arrow { background: rgba(var(--bs-danger-rgb),  .12); color: var(--bs-danger);  }
.pav-filter-flat  .pav-filter-arrow { background: rgba(var(--bs-warning-rgb), .25); color: #7a5a00; }

/* Estado activo del filtro (lo aplica el JS cuando ?change=X) */

.pav-filter-btn {
    border: none;
    background-color: white;
    cursor: pointer;
}

/* Iconos: por defecto en blanco y negro (filtro NO seleccionado).
   `opacity .6` agrega un de-enfasis extra al estado inactivo. */
.pav-filter-btn img {
    filter: grayscale(100%);
    opacity: .55;
    transition: filter var(--pav-transition), opacity var(--pav-transition);
}

/* Hover: preview en color (sugiere que es clickable). */
.pav-filter-btn:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* Estado activo: a color completo, sin atenuar. */
.pav-filter-btn.is-active {
    border: none;
    /*background: rgba(var(--bs-warning-rgb), .25);
    border-color: var(--bs-warning);*/
}
.pav-filter-btn.is-active img {
    filter: none;
    opacity: 1;
}

/* Cuando "Mostrar todos los productos" esta marcado, los 3 filtros se ven
   a color completo (porque conceptualmente TODOS estan "activos").
   Usa :has() para detectar el checkbox marcado sin necesidad de JS. */
.pav-filter-sticky:has(#chkAll:checked) .pav-filter-btn img {
    filter: none;
    opacity: 1;
}


/* ── 4.b Masonry de tarjetas — sin gaps cuando los altos varian ──
   Reemplaza el grid de Bootstrap (.row + .col-12 col-lg-6) para evitar
   que las tarjetas cortas dejen aire debajo cuando la pareja es mas
   alta. En mobile (<992px) se vuelve una sola columna automatica. */
.pav-masonry {
    column-count: 1;
    column-gap: 1rem;
}
.pav-masonry > article {
    break-inside: avoid;     /* nunca cortar una tarjeta entre columnas */
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    display: inline-block;   /* fix de Safari/Webkit para break-inside */
    width: 100%;
    margin-bottom: 1rem;
}
@media (min-width: 992px) {
    .pav-masonry { column-count: 2; }
}


/* ── 5. Card hover-lift sutil ─────────────────────────────── */
.pav-card-lift { transition: box-shadow var(--pav-transition), transform var(--pav-transition); }
.pav-card-lift:hover {
    box-shadow: 0 10px 28px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04) !important;
}


/* ── 6. Hover ambar en filas (alineado con marca) ──────────── */
.table-hover > tbody > tr:hover > * {
    --bs-table-hover-bg:    #fff8e1;
    --bs-table-hover-color: inherit;
}


/* ── 7. Animacion de entrada de tarjetas ──────────────────── */
@keyframes pav-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
[data-fam-id] { animation: pav-fade-up .35s ease both; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:  .01ms !important;
        transition-duration: .01ms !important;
    }
}