.wa-flotante {
    position: fixed;
    left: 45px;
    bottom: 45px;
    z-index: 99;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    font-size: 26px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
    transition: .3s;
}

    .wa-flotante:hover {
        color: #fff;
        transform: scale(1.08);
    }

/* --- Filtros de categoría --- */

.filtros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    margin-bottom: 48px;
}

.filtro {
    font-family: "Playfair Display", serif;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bs-dark);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: .3s;
}

    .filtro:hover {
        color: var(--bs-primary);
    }

    .filtro.activo {
        color: var(--bs-primary);
        border-bottom-color: var(--bs-primary);
    }

    .filtro i {
        margin-right: 6px;
    }

.gallery .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery .pieza-vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--bs-light);
    color: var(--bs-primary);
    font-size: 48px;
}

/* --- Pie de cada pieza --- */

.pieza-pie {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 18px 20px;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.pieza-titulo {
    margin: 0;
    font-size: 18px;
    color: #fff;
}

.pieza-categoria {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: .85;
}

/* --- Marcas sobre la foto --- */

.marca-destacado, .marca-video {
    position: absolute;
    top: 14px;
    z-index: 2;
    padding: 4px 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.marca-destacado {
    left: 14px;
    background: var(--bs-primary);
    color: var(--bs-dark);
}

.marca-video {
    right: 14px;
    background: rgba(0, 0, 0, .7);
    color: #fff;
}

    .marca-video i {
        margin-right: 5px;
    }

/* --- Galería vacía --- */

.galeria-vacia {
    text-align: center;
    padding: 60px 20px;
}

    .galeria-vacia i {
        font-size: 56px;
        color: var(--bs-primary);
        margin-bottom: 20px;
    }

/* --- Detalle del trabajo --- */

.medio-detalle.gallery-item {
    height: auto;
}

    .medio-detalle.gallery-item img {
        height: auto;
        object-fit: initial;
    }

.service .service-item .btn {
    margin-top: auto;
}

.service .service-item i {
    min-height: 48px;
}

/* --- Logo del gato --- */

.logo-gato {
    height: 1.1em;
    width: auto;
}

.logo-gato-pie {
    filter: brightness(0) saturate(100%) invert(72%) sepia(24%) saturate(628%) hue-rotate(357deg) brightness(90%) contrast(88%);
}

.header-carousel img {
    width: 100%;
    height: 620px;
    object-fit: cover;
    object-position: center 25%;
}

/* --- Carrusel del hero con datos del trabajo --- */

.header-carousel, .header-carousel .owl-stage-outer, .header-carousel .owl-stage, .header-carousel .owl-item {
    height: 620px;
}

.hero-slide img {
    width: 100%;
    height: 620px;
    object-fit: cover;
    object-position: center 25%;
    transition: transform 6s ease;
}

.hero-slide:hover img {
    transform: scale(1.06);
}

.hero-etiqueta {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 2;
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    background: #1e8449;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}

.hero-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 30px 28px;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .92) 20%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, 0));
}

.hero-categoria {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 6px 16px;
    border-radius: 30px;
    background: var(--bs-primary);
    color: var(--bs-dark);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}

.hero-titulo {
    margin: 0;
    font-size: 28px;
    color: #fff;
    line-height: 1.2;
}

.hero-precio {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.hero-precio-actual {
    font-size: 32px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
}

.hero-precio-anterior {
    font-size: 18px;
    color: rgba(255, 255, 255, .65);
    text-decoration: line-through;
}

.hero-oferta {
    display: block;
    margin-top: 8px;
    font-size: 15px;
    color: var(--bs-primary);
}

.hero-vermas {
    display: inline-block;
    margin-top: 16px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fff;
    transition: .3s;
}

    .hero-vermas i {
        margin-left: 8px;
        transition: .3s;
    }

.hero-slide:hover .hero-vermas {
    color: var(--bs-primary);
}

    .hero-slide:hover .hero-vermas i {
        transform: translateX(6px);
    }

.hero-header .hero-header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 620px;
}

@media (max-width: 991.98px) {
    .panel-consulta {
        position: static;
    }

    .header-carousel, .header-carousel .owl-stage-outer, .header-carousel .owl-stage, .header-carousel .owl-item, .header-carousel img {
        height: 420px;
    }

    .hero-header .hero-header-text {
        min-height: auto;
    }

    .header-carousel, .header-carousel .owl-stage-outer, .header-carousel .owl-stage, .header-carousel .owl-item, .hero-slide, .hero-slide img {
        height: 460px;
    }

    .hero-titulo {
        font-size: 23px;
    }

    .hero-precio-actual {
        font-size: 26px;
    }
}

/* --- Precios y ofertas sobre la pieza de la galería --- */

.marcas-derecha {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

    /* Anulamos el posicionamiento propio: ahora lo maneja el contenedor. */

    .marcas-derecha .marca-video {
        position: static;
        top: auto;
        right: auto;
    }

.marca-oferta {
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    background: #1e8449;
    border-radius: 4px;
}

.pieza-precio {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.precio-actual {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
}

.precio-anterior {
    font-size: 15px;
    color: rgba(255, 255, 255, .7);
    text-decoration: line-through;
}

.pieza-oferta {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--bs-primary);
}

@media (max-width: 575.98px) {
    .wa-flotante {
        left: 20px;
        bottom: 20px;
    }

    .precio-actual {
        font-size: 19px;
    }

    .marca-oferta {
        font-size: 12px;
        padding: 4px 9px;
    }
}

/* --- Bordes redondeados y sombras --- */

.gallery .gallery-item {
    height: 320px;
    border-radius: 14px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .12);
    transition: box-shadow .4s, transform .4s;
}

    .gallery .gallery-item:hover {
        box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
        transform: translateY(-4px);
    }

.panel-consulta, .medio-detalle.gallery-item {
    border-radius: 14px;
}

.panel-consulta {
    position: sticky;
    top: 110px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
}

/* --- Revelado de las piezas de la galería ---
   Tres capas que entran juntas pero a distinto ritmo: la tarjeta sube y
   se enfoca, la foto suelta un zoom lento, y el texto del pie llega
   último. El retraso escalonado lo pone la vista en cada columna. */

@keyframes revelaPieza {
    from {
        opacity: 0;
        transform: translateY(22px) scale(1.03);
        filter: blur(16px) saturate(1.6);
    }

    45% {
        opacity: .8;
    }

    to {
        opacity: 1;
        transform: none;
        filter: blur(0) saturate(1);
    }
}

@keyframes acercaFoto {
    from {
        transform: scale(1.12);
    }

    to {
        transform: scale(1);
    }
}

@keyframes subePie {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    22% {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.entra {
    animation: revelaPieza 1.25s cubic-bezier(.16, .84, .44, 1) both;
}

    /* La foto acompaña con un acercamiento más largo, para que el
       movimiento siga vivo cuando la tarjeta ya se asentó. */
    .entra .gallery-item img,
    .entra .producto-foto img {
        animation: acercaFoto 2s cubic-bezier(.16, .84, .44, 1) both;
        animation-delay: inherit;
    }

    /* El texto entra un poco después, así se lee como algo que aparece
       sobre la foto y no junto con ella. */
    .entra .pieza-pie,
    .entra .producto-cuerpo {
        animation: subePie 1.4s cubic-bezier(.16, .84, .44, 1) both;
        animation-delay: inherit;
    }

#galeria-contenido {
    position: relative;
    transition: opacity .5s ease;
}

    #galeria-contenido.cargando {
        pointer-events: none;
    }

/* --- Ficha de datos del detalle --- */

.ficha {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    padding: 18px 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.ficha-dato {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bs-dark);
}

    .ficha-dato i {
        color: var(--bs-primary);
    }

    .ficha-dato.destacado {
        color: var(--bs-primary);
    }

/* --- Precio en el panel lateral del detalle --- */

.precio-panel {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
}

.precio-panel-actual {
    font-family: "Playfair Display", serif;
    font-size: 34px;
    font-weight: 500;
    color: var(--bs-dark);
    line-height: 1.1;
}

.precio-panel-anterior {
    font-size: 18px;
    color: rgba(0, 0, 0, .45);
    text-decoration: line-through;
}

.precio-panel-nota {
    margin-top: 8px;
    margin-bottom: 0;
    font-size: 14px;
    color: #1e8449;
}

/* --- Transición entre vistas --- */

#contenido {
    transition: opacity .35s ease, transform .35s ease;
}

.pagina-entrando #contenido {
    opacity: 0;
    transform: translateY(12px);
}

.pagina-saliendo #contenido {
    opacity: 0;
    transform: translateY(-10px);
}

/* El pie acompaña, más discreto. */

.pagina-entrando .footer, .pagina-saliendo .footer {
    opacity: 0;
}

.footer {
    transition: opacity .35s ease;
}

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

.volver {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 28px 14px 14px;
    border: 2px solid var(--bs-primary);
    border-radius: 40px;
    background: transparent;
    color: var(--bs-dark);
    font-family: "Playfair Display", serif;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: background .35s, color .35s, box-shadow .35s;
}

    .volver:hover {
        background: var(--bs-primary);
        color: var(--bs-dark);
        box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
    }

.volver-flecha {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bs-primary);
    color: var(--bs-dark);
    transition: transform .35s, background .35s;
}

.volver:hover .volver-flecha {
    background: var(--bs-dark);
    color: var(--bs-white);
    transform: translateX(-5px);
}

/* Sobre fondos oscuros. */

.bg-dark .volver, .footer .volver {
    color: var(--bs-white);
}

/* --- Vista tienda: categoría Productos --- */

.tienda {
    padding: 40px 28px;
    border-radius: 20px;
    background: linear-gradient(160deg, #fdf4f2 0%, #fbeeec 100%);
}

.producto-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
    transition: box-shadow .35s, transform .35s;
}

    .producto-card:hover {
        box-shadow: 0 16px 38px rgba(0, 0, 0, .13);
        transform: translateY(-5px);
    }

.producto-foto {
    position: relative;
    height: 230px;
    background: #faf7f6;
    overflow: hidden;
}

    .producto-foto img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s ease;
    }

.producto-card:hover .producto-foto img {
    transform: scale(1.07);
}

.producto-sin-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 46px;
    color: var(--bs-primary);
    opacity: .35;
}

.producto-destacado {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 13px;
    color: var(--bs-dark);
    background: var(--bs-primary);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}

.producto-cuerpo {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 20px 20px 22px;
}

.producto-titulo {
    margin: 0 0 12px;
    font-family: "Work Sans", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bs-dark);
}

.producto-linea-oferta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 4px;
}

.producto-off {
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    color: #fff;
    background: #c2708a;
}

.producto-antes {
    font-size: 14px;
    color: rgba(0, 0, 0, .4);
    text-decoration: line-through;
}

.producto-precio {
    font-family: "Playfair Display", serif;
    font-size: 27px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--bs-dark);
}

.producto-nota {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: #b05a77;
}

.producto-vermas {
    margin-top: auto;
    padding-top: 16px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--bs-primary);
    transition: .3s;
}

    .producto-vermas i {
        margin-left: 6px;
        transition: .3s;
    }

.producto-card:hover .producto-vermas i {
    transform: translateX(5px);
}

@media (max-width: 767.98px) {
    .gallery .gallery-item {
        height: 260px;
    }

    .tienda {
        padding: 26px 14px;
        border-radius: 14px;
    }

    .producto-foto {
        height: 185px;
    }

    .producto-precio {
        font-size: 23px;
    }
}

/* --- Fondo suave para la sección Servicios --- */
/* La franja completa toma un crema apenas rosado, para que las tarjetas
   no floten sobre blanco. */

.service {
    background: linear-gradient(180deg, #fdfaf7 0%, #fbf5f2 100%);
}

    .service .service-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        border-radius: 14px;
        background: linear-gradient(160deg, #ffffff 0%, #fdf8f5 100%);
        backdrop-filter: blur(4px);
        transition: box-shadow .4s, transform .4s, background .4s;
        border-color: rgba(194, 161, 113, .22) !important;
        box-shadow: 0 4px 18px rgba(120, 90, 70, .06);
    }

        .service .service-item:hover {
            background: linear-gradient(160deg, #ffffff 0%, #fbf1ec 100%);
            box-shadow: 0 16px 38px rgba(120, 90, 70, .14);
            transform: translateY(-5px);
            border-color: rgba(194, 161, 113, .45) !important;
        }

        /* La tarjeta de Productos, un punto más cálida que el resto.
   La especificidad de estos selectores gana sobre el bloque de la vista. */

        .service .service-item.service-item-producto {
            background: linear-gradient(160deg, #fdf6f3 0%, #faeee9 100%);
        }

            .service .service-item.service-item-producto:hover {
                background: linear-gradient(160deg, #fdf6f3 0%, #f7e5df 100%);
            }

        /* El ícono queda sobre un círculo suave, así no flota solo. */

        .service .service-item > i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 88px;
            height: 88px;
            border-radius: 50%;
            background: rgba(194, 161, 113, .12);
            transition: background .4s, transform .4s;
        }

        .service .service-item:hover > i {
            background: rgba(194, 161, 113, .22);
            transform: translateY(-3px);
        }

@media (prefers-reduced-motion: reduce) {
    .entra,
    .entra .gallery-item img,
    .entra .producto-foto img,
    .entra .pieza-pie,
    .entra .producto-cuerpo {
        animation: none;
    }

    .hero-slide img {
        transition: none;
    }

    #contenido, .footer, .volver, .volver-flecha {
        transition: none;
    }

    .pagina-entrando #contenido {
        opacity: 1;
        transform: none;
    }

    .producto-card, .producto-foto img, .producto-vermas i {
        transition: none;
    }

    .service .service-item, .service .service-item > i {
        transition: none;
    }
}

/* Corrección visual para el selector de temas en el Layout Salone */

.temas {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tema-opcion {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    padding: 0;
    outline: none;
    transition: transform 0.2s;
}

    .tema-opcion:hover {
        transform: scale(1.15);
    }

.tema-claro {
    background-color: #f8f9fa;
}

.tema-oscuro {
    background-color: #212529;
}

.tema-bloques {
    background: linear-gradient(135deg, #ffc107 50%, #0dcaf0 50%);
}

/* --- Definición de Temas para _LayoutSalone --- */
/* Tema Claro (Por defecto) */

html[data-tema="claro"] {
    --bs-body-bg: #f8f9fa;
    --bs-body-color: #212529;
}

    html[data-tema="claro"] body {
        background-color: var(--bs-body-bg);
        color: var(--bs-body-color);
    }

/* Tema Oscuro */

html[data-tema="oscuro"] {
    --bs-body-bg: #121212;
    --bs-body-color: #e0e0e0;
}

    html[data-tema="oscuro"] body {
        background-color: var(--bs-body-bg) !important;
        color: var(--bs-body-color) !important;
    }

    html[data-tema="oscuro"] .container-fluid.bg-light, html[data-tema="oscuro"] .navbar, html[data-tema="oscuro"] .dropdown-menu {
        background-color: #1a1a1a !important;
        color: #e0e0e0 !important;
    }

    html[data-tema="oscuro"] .navbar-light .navbar-nav .nav-link {
        color: #cccccc !important;
    }

    html[data-tema="oscuro"] .card, html[data-tema="oscuro"] .vidrio {
        background-color: #1e1e1e !important;
        color: #e0e0e0 !important;
        border-color: #333 !important;
    }

/* Tema Bloques de color */

html[data-tema="bloques"] {
    --bs-body-bg: #fff8e1;
    --bs-body-color: #3e2723;
}

    html[data-tema="bloques"] body {
        background-color: var(--bs-body-bg);
        color: var(--bs-body-color);
    }

    html[data-tema="bloques"] .container-fluid.bg-light {
        background-color: #ffe0b2 !important;
    }

    html[data-tema="bloques"] .navbar-brand {
        background-color: #d84315 !important;
    }

/* --- Estilo global de bordes redondeados (Soft UI / Moderno) --- */
/* Tarjetas, contenedores de vidrio, bloques y modales */

.vidrio, .card, .producto-card, .gallery-item, .service-item, .tabla-envoltorio, .aviso, .dropdown-menu {
    border-radius: 16px !important;
    overflow: hidden;
}

/* Botones y controles de formulario */

.btn, .boton, input.form-control, select.form-control, textarea.form-control, .form-control {
    border-radius: 10px !important;
}

/* Imágenes dentro de tarjetas y galerías */

.producto-foto img, .gallery-item img, .miniatura-fila {
    border-radius: 12px;
}

/* Etiquetas (Badges) */

.etiqueta, .marca-destacado, .marca-oferta, .marca-video, .producto-destacado, .producto-off {
    border-radius: 20px !important;
}

/* Barra de filtros / solapas */

.filtros .filtro {
    border-radius: 30px !important;
}

/* Redondeo específico para las tarjetas de resumen del panel */

.resumen .vidrio, .panel-cabecera .fila .boton, .tabla-envoltorio {
    border-radius: 16px !important;
}

    /* Bordes para la tabla y sus contenedores internos */

    .tabla-envoltorio table {
        border-radius: 16px;
        overflow: hidden;
    }

/* Forzar esquinas redondeadas en las tarjetas del panel */

.row.g-4.mb-5 .border {
    border-radius: 1rem !important;
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

    .tabla th, .tabla td {
        padding: 14px 16px;
        vertical-align: middle;
    }

    .tabla th {
        font-weight: 600;
        border-bottom: 2px solid rgba(0, 0, 0, 0.08);
    }

    .tabla td {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

/* --- Corrección definitiva de Tablas y Formularios del Panel --- */

.tabla-envoltorio {
    width: 100%;
    overflow-x: auto;
    padding: 0;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

    .tabla-envoltorio table, table.tabla {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-bottom: 0 !important;
        background: transparent !important;
    }

        .tabla-envoltorio th, .tabla-envoltorio td, table.tabla th, table.tabla td {
            padding: 16px 20px !important;
            vertical-align: middle !important;
            text-align: left !important;
            background: transparent !important;
        }

        .tabla-envoltorio th, table.tabla th {
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #6c757d;
            border-bottom: 2px solid rgba(0, 0, 0, 0.08) !important;
        }

        .tabla-envoltorio td, table.tabla td {
            border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        }

/* Campos de texto y formularios de edición */

.campo {
    margin-bottom: 20px;
}

    .campo label {
        display: block;
        font-weight: 600;
        margin-bottom: 6px;
        font-size: 0.95rem;
    }

    .entrada, .campo input[type="text"], .campo input[type="number"], .campo input[type="email"], .campo input[type="password"], .campo textarea {
        display: block;
        width: 100%;
        padding: 12px 16px;
        font-size: 1rem;
        line-height: 1.5;
        color: #212529;
        background-color: #fff;
        border: 1px solid #ced4da;
        border-radius: 10px;
        box-sizing: border-box;
    }

        .entrada:focus, .campo input:focus, .campo textarea:focus {
            border-color: #b85d33;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(184, 93, 51, 0.15);
        }

/* --- Alineación y estilo de botones de acción en tablas --- */

td form, td .acciones, .tabla td div {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

/* Normalizar botones de editar y eliminar en todas las tablas */

td a.btn, td button.btn, .tabla a.btn, .tabla button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50% !important;
    border: 1px solid #dee2e6;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

/* Botón Editar */

td a.btn-editar, td .btn-warning, .tabla .btn-warning {
    color: #b85d33;
    border-color: #f1d3c5;
    background-color: #fffbf9;
}

    td a.btn-editar:hover, td .btn-warning:hover {
        background-color: #b85d33;
        color: #fff;
    }

/* Botón Eliminar */

td button.btn-eliminar, td .btn-danger, .tabla .btn-danger {
    color: #dc3545;
    border-color: #f8d7da;
    background-color: #fff8f8;
}

    td button.btn-eliminar:hover, td .btn-danger:hover {
        background-color: #dc3545;
        color: #fff;
    }

/* --- Corrección definitiva de botones de acción en la tabla --- */

.acciones {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Botón Editar y botón Eliminar (tanto a como button) */

.tabla .acciones a.boton-icono, .tabla .acciones button.boton-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50% !important;
    background-color: #fff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
}

/* Botón Editar (Lápiz) */

.tabla .acciones a.boton-icono {
    border: 1px solid #f1d3c5;
    color: #b85d33;
}

    .tabla .acciones a.boton-icono:hover {
        background-color: #b85d33 !important;
        color: #fff !important;
        border-color: #b85d33;
    }

/* Botón Eliminar (Tacho de basura dentro del form) */

.tabla .acciones form.en-linea {
    display: inline-flex;
    margin: 0;
}

    .tabla .acciones form.en-linea button.boton-icono {
        border: 1px solid #f8d7da;
        color: #dc3545;
    }

        .tabla .acciones form.en-linea button.boton-icono:hover {
            background-color: #dc3545 !important;
            color: #fff !important;
            border-color: #dc3545;
        }

/* --- Corrección de botones en cabeceras de panel --- */

.panel-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

    .panel-cabecera .fila {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .panel-cabecera .boton, section.contenedor.seccion > div.panel-cabecera a.boton {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        font-size: 0.95rem;
        font-weight: 500;
        border-radius: 10px !important;
        text-decoration: none;
        transition: all 0.2s ease;
        box-sizing: border-box;
    }

    /* Botón secundario / claro (Volver) */

    .panel-cabecera .boton-claro, .panel-cabecera a.boton:not(.boton-primario) {
        background-color: #fff !important;
        color: #212529 !important;
        border: 1px solid #ced4da !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    }

        .panel-cabecera .boton-claro:hover, .panel-cabecera a.boton:not(.boton-primario):hover {
            background-color: #f8f9fa !important;
            border-color: #adb5bd !important;
        }

    /* Botón principal (Nueva categoría) */

    .panel-cabecera .boton-primario {
        background-color: #b85d33 !important;
        color: #fff !important;
        border: 1px solid #b85d33 !important;
        box-shadow: 0 4px 10px rgba(184, 93, 51, 0.2);
    }

        .panel-cabecera .boton-primario:hover {
            background-color: #9d4d29 !important;
            border-color: #9d4d29 !important;
        }

/* --- Corrección de la vista de Consultas --- */

.consulta {
    padding: 24px;
    margin-bottom: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

    .consulta.sin-leer {
        border-left: 4px solid #b85d33;
        background: rgba(255, 248, 243, 0.85);
    }

.consulta-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.consulta-nombre {
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
}

.consulta-fecha {
    font-size: 0.85rem;
    color: #6c757d;
}

.consulta-datos {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 14px;
}

    .consulta-datos a {
        color: #b85d33;
        text-decoration: none;
    }

        .consulta-datos a:hover {
            text-decoration: underline;
        }

.consulta-mensaje {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #333;
    background: rgba(255, 255, 255, 0.5);
    padding: 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    white-space: pre-line;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.consulta-acciones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    /* Normalización de botones chicos dentro de consultas */

    .consulta-acciones .boton, .consulta-acciones button.boton, .consulta-acciones form.en-linea {
        display: inline-flex;
        margin: 0;
    }

    .consulta-acciones .boton-chico {
        padding: 8px 14px !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s ease;
        cursor: pointer;
        box-sizing: border-box;
    }

    /* Botón WhatsApp */

    .consulta-acciones .boton-whatsapp {
        background-color: #25d366 !important;
        color: #fff !important;
        border: 1px solid #25d366 !important;
    }

        .consulta-acciones .boton-whatsapp:hover {
            background-color: #20ba5a !important;
        }

    /* Botón Peligro / Eliminar */

    .consulta-acciones .boton-peligro {
        background-color: #fff8f8 !important;
        color: #dc3545 !important;
        border: 1px solid #f8d7da !important;
    }

        .consulta-acciones .boton-peligro:hover {
            background-color: #dc3545 !important;
            color: #fff !important;
        }

    /* Botones de borde / secundarios en consultas */

    .consulta-acciones .boton-borde {
        background-color: #fff !important;
        color: #495057 !important;
        border: 1px solid #ced4da !important;
    }

        .consulta-acciones .boton-borde:hover {
            background-color: #f8f9fa !important;
            border-color: #adb5bd !important;
        }

/* --- Aparición suave de las fotos ---
   Las fotos arrancan atenuadas y se revelan al terminar de cargar.
   El estado inicial se aplica solo dentro de la galería filtrable,
   que es donde galeria.js agrega la clase "cargada". En el resto del
   sitio las fotos se ven siempre, sin depender de ningún script. */
#galeria-contenido .gallery-item img,
#galeria-contenido .producto-foto img {
    opacity: 0;
    transition: opacity .7s ease, transform .5s ease;
}

    #galeria-contenido .gallery-item img.cargada,
    #galeria-contenido .producto-foto img.cargada {
        opacity: 1;
    }

/* Red de seguridad: si el script no llegara a correr, después de un
   segundo y medio las fotos se muestran igual. */
@media (scripting: none) {
    #galeria-contenido .gallery-item img,
    #galeria-contenido .producto-foto img {
        opacity: 1;
    }
}

/* Fondo tenue mientras la foto todavía no llegó. */
.gallery .gallery-item,
.producto-foto {
    background-color: #f4efe9;
}

    /* El acercamiento de entrada usa transform, igual que el zoom del hover.
   Una vez terminada la animación, el hover recupera el control. */
    .gallery .gallery-item:hover img,
    .producto-card:hover .producto-foto img {
        animation: none;
    }

/* --- Salida de las piezas al cambiar de filtro ---
   En lugar de desaparecer de golpe, cada pieza se disuelve: se desenfoca,
   se encoge apenas y se va. El retraso lo pone galeria.js, de a una. */
@keyframes disuelvePieza {
    from {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px) scale(.955);
        filter: blur(14px);
    }
}

.sale {
    animation: disuelvePieza .5s cubic-bezier(.55, .06, .68, .19) both;
}

/* Mientras se disuelve nada responde al mouse. */
#galeria-contenido.cambiando {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .sale {
        animation: none;
        opacity: 0;
    }
}

/* ============================================================
   AGREGAR AL FINAL DE wwwroot/plantilla/css/gatonegro.css
   ============================================================ */

/* --- Filtros de la galería: mano y color al pasar por encima --- */
.filtros.isotope-filters li {
    position: relative;
    cursor: pointer;
    padding-bottom: 6px;
    border-bottom: none;
    color: var(--bs-dark);
    transition: color .35s ease;
}

    /* El subrayado crece desde el centro en vez de aparecer de golpe. */
    .filtros.isotope-filters li::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 0;
        height: 2px;
        background: var(--bs-primary);
        transform: translateX(-50%);
        transition: width .35s ease;
    }

    .filtros.isotope-filters li:hover {
        color: var(--bs-primary);
    }

        .filtros.isotope-filters li:hover::after {
            width: 100%;
        }

    .filtros.isotope-filters li.filter-active {
        color: var(--bs-primary);
    }

        .filtros.isotope-filters li.filter-active::after {
            width: 100%;
        }

    /* El ícono acompaña el cambio de color y se levanta apenas. */
    .filtros.isotope-filters li i {
        margin-right: 6px;
        transition: transform .35s ease;
    }

    .filtros.isotope-filters li:hover i {
        transform: translateY(-2px);
    }

@media (prefers-reduced-motion: reduce) {
    .filtros.isotope-filters li,
    .filtros.isotope-filters li::after,
    .filtros.isotope-filters li i {
        transition: none;
    }
}

@media (max-width: 991.98px) {
    .hero-slide .hero-precio,
    .hero-slide .hero-precio-anterior,
    .hero-slide .hero-precio-actual {
        display: block !important;
    }
}

/* ============================================================
   AJUSTES ESPECÍFICOS PARA EL HERO (Carrusel de Productos)
   Este bloque se coloca al final de wwwroot/plantilla/css/gatonegro.css
   ============================================================ */


    .hero-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ocupa todo el espacio sin deformarse */
        object-position: center 25%;
        transition: transform 6s ease; /* Efecto Ken Burns */
    }

    .hero-slide:hover img {
        transform: scale(1.06);
    }

/* 2. Categoría (Arriba a la izquierda) */
.hero-slide .hero-categoria {
    position: absolute;
    top: 1.5rem; /* 24px */
    left: 1.5rem; /* 24px */
    z-index: 3;
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 30px;
    background: var(--bs-primary); /* Color primario del tema */
    color: var(--bs-dark);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    margin-bottom: 1.5rem; /* Margen inferior para separarlo del título si están en el mismo flujo */
}

/* Forzamos separación al título en PC por si comparte contenedor */
.hero-slide .hero-info .hero-titulo,
.hero-slide .hero-titulo {
    margin-top: 1rem; /* Margen hacia arriba para que no se pegue */
}

    /* 3. Etiqueta de oferta/descuento (Arriba a la derecha) */
    .hero-slide .hero-etiqueta {
        position: absolute;
        top: 1.5rem; /* 24px */
        right: 1.5rem; /* 24px */
        z-index: 3;
        padding: 8px 16px;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: #fff;
        background: #1e8449; /* Verde de oferta por defecto */
        border-radius: 6px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    }

    /* 4. Bloque de información principal (Abajo con degradado) */
    .hero-slide .hero-info {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Alineación a la izquierda */
        padding: 48px 30px 28px; /* Más espacio superior para el degradado */
        color: #fff;
        /* Degradado limpio de oscuro a transparente para que el texto destaque */
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.5) 65%, transparent 100%);
        text-shadow: 0 1px 3px rgba(0,0,0,0.6); /* Sombra de texto para legibilidad */
    }

    .hero-slide .hero-titulo {
        margin: 0;
        font-size: 28px;
        color: #fff;
        line-height: 1.2;
        font-weight: 700; /* Asegurar grosor */
    }

    .hero-slide .hero-precio {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 12px;
    }

.hero-slide .hero-precio-actual {
    font-size: 34px; /* Un poco más grande el precio actual */
    font-weight: 600;
    color: #ffffff; /* Color blanco para el precio */
    line-height: 1;
}

    .hero-slide .hero-precio-anterior {
        font-size: 18px;
        color: rgba(255, 255, 255, .75); /* Algo más visible que en la versión anterior */
        text-decoration: line-through;
    }

    .hero-slide .hero-oferta {
        display: block;
        margin-top: 8px;
        font-size: 15px;
        color: var(--bs-primary);
    }

    .hero-slide .hero-vermas {
        display: inline-block;
        margin-top: 16px;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #fff;
        opacity: 0.9;
        transition: .3s;
    }

    .hero-slide:hover .hero-vermas {
        color: var(--bs-primary);
        opacity: 1;
    }

        .hero-slide:hover .hero-vermas i {
            transform: translateX(6px);
        }

/* Estilos para la barra inferior mobile tipo app */
@media (max-width: 991.98px) {
    /* Agregamos margen inferior al body para que el contenido no quede oculto detrás de la barra fija */
    body {
        padding-bottom: 60px;
    }

    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 56px;
        background-color: var(--bs-light, #f8f9fa);
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 1030;
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
    }

    .mobile-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #6c757d;
        font-size: 10px;
        text-decoration: none;
        padding: 4px 0;
        transition: color 0.2s ease;
    }

        .mobile-nav-item i {
            font-size: 18px;
            margin-bottom: 2px;
        }

        .mobile-nav-item.active,
        .mobile-nav-item:hover {
            color: var(--bs-primary, #0d6efd);
        }
}

.hero-slide {
    position: relative; /* Esencial para que el .hero-info con absolute se quede dentro */
    width: 100%;
    overflow: hidden;
    /* Añade aquí cualquier otra propiedad que estuviera repartida en las líneas 2104 o 2237 */
}

/* ---------- Ajustes para Mobile (Responsivo) ---------- */
/* Es vital incluir esto para que en celulares no se rompa el diseño */
@media (max-width: 767.98px) {
    .hero-slide {
        min-height: 28rem; /* Un poco más alto para que entre la info */
    }

        /* Reajustamos el tamaño de fuente para móviles */
        .hero-slide .hero-categoria {
            top: 1rem;
            left: 1rem;
            font-size: 10px;
            letter-spacing: 1px;
            margin-bottom: 1rem; /* <--- Agregado para separar la categoría hacia arriba del contenido/título */
            display: inline-block; /* <--- Vital para que respete el margen superior */
        }

        .hero-slide .hero-etiqueta {
            top: 1rem;
            right: 1rem;
            font-size: 12px;
        }

        .hero-slide .hero-info {
            padding: 36px 1rem 1rem;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 45%, transparent);
        }

        .hero-slide .hero-titulo {
            font-size: 20px;
            margin-top: 0.5rem; /* <--- Asegura aire extra arriba del título si lo requiere */
        }

        .hero-slide .hero-precio-actual {
            font-size: 24px;
        }

        .hero-slide .hero-precio-anterior {
            font-size: 16px;
        }

        .hero-slide .hero-vermas {
            font-size: 12px;
            margin-top: 12px;
        }
}

/* ---------- Buscador y filtros de la tabla del Panel ---------- */
.filtros-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

    .filtros-panel .buscador-caja {
        position: relative;
        flex: 1 1 18rem;
    }

    .filtros-panel select {
        width: auto;
        min-width: 9rem;
        border-radius: 2rem;
    }

.buscador-lupa {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    opacity: .45;
    pointer-events: none;
}

.filtros-panel .buscador-caja input {
    width: 100%;
    padding: .45rem 4.8rem .45rem 2.6rem;
    font-size: .9rem;
    color: inherit;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 2rem;
}

    .filtros-panel .buscador-caja input:focus {
        outline: none;
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
    }

    .filtros-panel .buscador-caja input::-webkit-search-cancel-button {
        display: none;
    }

.buscador-limpiar,
.buscador-voz {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1.8rem;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: 50%;
    color: inherit;
    opacity: .55;
    cursor: pointer;
}

    .buscador-limpiar:hover,
    .buscador-voz:hover {
        opacity: 1;
        background-color: rgba(0, 0, 0, .06);
    }

.buscador-limpiar {
    right: 2.6rem;
}

.buscador-voz {
    right: .6rem;
}

    .buscador-voz.escuchando {
        opacity: 1;
        color: #c0392b;
        background-color: rgba(192, 57, 43, .12);
        animation: latido 1.1s ease-in-out infinite;
    }

@keyframes latido {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(192, 57, 43, .45);
    }

    70% {
        box-shadow: 0 0 0 .5rem rgba(192, 57, 43, 0);
    }
}

.filtros-cuenta-filas {
    font-size: .85rem;
    opacity: .65;
    white-space: nowrap;
}

.sin-coincidencias td {
    padding: 2.5rem 1rem;
    text-align: center;
    opacity: .7;
}

html[data-tema="oscuro"] .filtros-panel .buscador-caja input {
    border-color: rgba(255, 255, 255, .2);
    color: #e0e0e0;
}

html[data-tema="oscuro"] .buscador-limpiar:hover,
html[data-tema="oscuro"] .buscador-voz:hover {
    background-color: rgba(255, 255, 255, .1);
}

html[data-tema="oscuro"] .card,
html[data-tema="oscuro"] .bg-light {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}

html[data-tema="oscuro"] .table {
    color: #e0e0e0 !important;
}

html[data-tema="oscuro"] .table-light {
    background-color: #222 !important;
    color: #fff !important;
}

/* --- Campanita de notificaciones: recuadro visible en ambos estados ---
   El "recuadro" que se ve en el botón activado no es el borde del botón:
   es el marco decorativo que arma style.css con ::before/::after, y esa
   regla de la plantilla está escrita solo para .btn-primary (ver
   style.css). Por eso al desactivar (que saca la clase btn-primary y
   pone btn-outline-primary) el marco desaparecía: nunca dependió del
   contraste ni de la cascada del borde, sino de que esa regla no incluye
   btn-outline-primary. Acá se repite el mismo marco pero atado a
   .boton-notificaciones en sí, así queda siempre, esté o no btn-primary
   puesto. */
.boton-notificaciones::before,
.boton-notificaciones::after {
    position: absolute;
    content: "";
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    top: -5px;
    left: -5px;
}

.boton-notificaciones::before {
    top: -10px;
    height: calc(100% + 20px);
    border-left: 2px solid var(--bs-primary);
    border-right: 2px solid var(--bs-primary);
}

.boton-notificaciones::after {
    left: -10px;
    width: calc(100% + 20px);
    border-top: 2px solid var(--bs-primary);
    border-bottom: 2px solid var(--bs-primary);
}