/* ==========================================================================
   SITASA — Hoja de estilos propia (BEM)
   --------------------------------------------------------------------------
   Objetivo: desacoplar progresivamente el diseño del e-commerce de las
   dependencias de terceros (Cassiopeia, bootstrap de purity, ck_template).

   Metodología: BEM  ->  bloque, bloque__elemento, bloque--modificador.
   Esta hoja se carga LA ÚLTIMA (mayor prioridad). A medida que cada zona se
   migra aquí en BEM, se retiran las reglas equivalentes de las hojas antiguas.

   Índice:
     0. Fuentes locales (@font-face): Saira + Roboto
     1. Layout a sangre completa (edge-to-edge)
     (… secciones futuras: header, producto, cesta, formularios …)
   ========================================================================== */


/* ==========================================================================
   0. FUENTES LOCALES (@font-face)
   --------------------------------------------------------------------------
   El e-commerce usa Saira (principal: body, títulos) y Roboto (secundaria),
   igual que el J3. En lugar de cargarlas desde Google Fonts (dependencia
   externa, peticiones a terceros), las servimos LOCALES desde el propio
   servidor: más privado, más rápido y acorde al objetivo de seguridad.

   - Saira: fuente VARIABLE (un .woff2 cubre todos los pesos 100-900), en
     media/templates/site/sitasa/fonts/ (subset latin, descargada de Google).
   - Roboto: ya viene con Joomla en media/vendor/roboto-fontface/ (.woff2).
   ========================================================================== */

/* --- Saira (variable: normal + italic) --- */
@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 100 900;        /* fuente variable: todo el rango */
    font-display: swap;
    src: url('../fonts/saira-variable.woff2') format('woff2');
}
@font-face {
    font-family: 'Saira';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/saira-italic-variable.woff2') format('woff2');
}

/* --- Roboto (pesos usados: 300 Light, 400 Regular, 700 Bold + itálicas) ---
   Se referencian los .woff2 que Joomla ya trae en media/vendor/roboto-fontface. */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/media/vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('/media/vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/media/vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/media/vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/media/vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('/media/vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff2') format('woff2');
}


/* ==========================================================================
   1. LAYOUT — contenido a ancho completo, sin márgenes laterales
   --------------------------------------------------------------------------
   El e-commerce (com_mdshop) debe ocupar todo el ancho de la ventana. Los
   contenedores de Cassiopeia aplican padding lateral, gap de grid y un
   max-width que dejan márgenes a los lados. Los anulamos aquí.
   ========================================================================== */

/* Rejilla raíz de Cassiopeia: sin gap ni padding laterales. */
.site-grid {
    display: block;
    grid-template-columns: none;
    gap: 0;
    margin: 0;
    padding: 0;
    max-width: none;
    width: 100%;
}

/* Contenedor del componente: a sangre completa. */
.site-grid > .container-component,
.container-component {
    grid-column: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Wrapper general del sitio (si el template lo define con ancho acotado). */
.site .wrapper,
.wrapper-static,
body.site {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Red de seguridad: ningún desbordamiento lateral (filas .row de BS3 con
   margin negativo, clones de owl-carousel, etc.) debe generar scroll
   horizontal. Sin él, un desborde de 20px corría TODA la página a un lado.
   La página no tiene nada que deba scrollear en horizontal.
   IMPORTANTE: el overflow-x va SOLO en <html>, NO en <body>. Si se pone en el
   body, su overflow-y computa como 'auto' y crea un contenedor de scroll que
   ROMPE position:sticky en los hijos (menú lateral de condiciones, etc.). */
html {
    overflow-x: hidden;
    max-width: 100%;
}
body.site {
    max-width: 100%;
}

/* El propio componente mdshop: ancho completo pero con 20px de aire lateral. */
.com_mdshop .container,
.com_mdshop .container-fluid {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
}

/* Banda de ventajas (.info-bar) a SANGRE COMPLETA: su .container-fluid NO debe
   heredar los 20px de padding lateral, y su .row de Bootstrap 3 trae
   margin:-20px que, sin un .container padre que lo compense, desplazaba la
   banda hacia la izquierda dejando hueco a la derecha. Neutralizamos ambos. */
.info-bar .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.info-bar .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Brand Space (Format): iframe a sangre completa. Se saca del container-fluid
   en template_portada.php; aquí garantizamos que ocupa todo el ancho sin
   heredar el padding lateral de 20px ni ningún margen. */
.sitasa-brandspace {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: none;
}

/* Zona de cliente (acceso + solicitud de alta) bajo el Brand Space: un poco
   de aire arriba para que no quede pegada al iframe. */
.sitasa-zonacliente {
    margin-top: 40px;
}


/* ==========================================================================
   2. TOPBAR — barra superior (buscador + acciones)
   --------------------------------------------------------------------------
   Bloque: sitasa-topbar
   Elementos: __inner, __search, __actions
   Fondo negro, buscador a la izquierda/centro ocupando el espacio flexible,
   e iconos de acción (cesta, usuario, notificaciones, hamburguesa) a la
   derecha. El logo y el menú de familias los aporta el contenido del
   e-commerce ([section-header]), no esta barra.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shim Font Awesome 4/5 -> 6
   El e-commerce usa la sintaxis antigua (class="fa fa-bars"). Joomla 6 trae
   Font Awesome 6, donde la clase `fa` sola no aplica la fuente solid, así que
   los iconos salían vacíos. Mapeamos `.fa` a la familia/peso solid de FA6.
   -------------------------------------------------------------------------- */
.fa {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
}
/* Iconos que son de la familia "brands" (marcas), peso 400 + fuente brands. */
.fa.fa-whatsapp, .fa.fa-facebook, .fa.fa-twitter, .fa.fa-instagram,
.fa.fa-youtube, .fa.fa-linkedin {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* --------------------------------------------------------------------------
   Shim Glyphicons (Bootstrap 3) -> Font Awesome 6
   El e-commerce usa glyphicons de BS3 (class="glyphicon glyphicon-globe") en
   la banda de ventajas del footer, breadcrumbs, etc. La fuente de glyphicons
   (glyphicons-halflings-regular.woff) da 404 en J6, así que salían cuadros
   vacíos. Reaprovechamos Font Awesome 6 (ya cargada) mapeando cada glyphicon
   a su glifo FA6 equivalente.
   -------------------------------------------------------------------------- */
.glyphicon {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
}
.glyphicon-globe::before             { content: "\f0ac"; }  /* globe */
.glyphicon-usd::before               { content: "\24";   }  /* dollar-sign */
.glyphicon-flag::before              { content: "\f024"; }  /* flag */
.glyphicon-piggy-bank::before        { content: "\f4d3"; }  /* piggy-bank */
.glyphicon-chevron-right::before     { content: "\f054"; }  /* chevron-right */
.glyphicon-chevron-left::before      { content: "\f053"; }  /* chevron-left */
.glyphicon-home::before              { content: "\f015"; }  /* house */
.glyphicon-registration-mark::before { content: "\f25d"; }  /* registered */
.glyphicon-search::before            { content: "\f002"; }  /* magnifying-glass */
.glyphicon-tasks::before             { content: "\f0ae"; }  /* list-check */
.glyphicon-user::before              { content: "\f007"; }  /* user */
.glyphicon-remove::before            { content: "\f00d"; }  /* xmark */
.glyphicon-ok::before                { content: "\f00c"; }  /* check */

/* El header del e-commerce ([section-header]) trae un <section.dark> con
   `margin-top:-20px` inline que tira del bloque hacia arriba y descuadra la
   altura. Lo anulamos (el inline obliga a !important). */
.sitasa-main section.dark {
    margin-top: 0 !important;
}

/* ck_template estila el buscador por ID (#md-search-input{height:25px
   !important}) -> gana a cualquier regla por clase. Por eso aquí usamos el
   mismo ID para que NUESTRO tamaño (altura 40px + texto 1.05rem) prevalezca. */
#md-search-input {
    height: 40px !important;
    font-size: 16px !important;    /* px absolutos: el rem base era diminuto */
    line-height: 40px !important;
    background: #fff !important;
    color: #333 !important;
    padding: 0 12px !important;
}
#md-search-input::placeholder {
    font-size: 16px !important;
    color: #999 !important;
}


.sitasa-topbar {
    background: #1a1a1a;
    color: #fff;
    width: 100%;
}

.sitasa-topbar__inner {
    padding: 0.75rem 1.5rem;   /* padding superior/inferior de la barra */
}

/* El módulo mod_mdcesta pinta un <ul.nav-second-main> con los <li> (hamburguesa,
   buscador, cesta, usuario, notificaciones) flotados con pull-right de BS3.
   Lo convertimos en flex y empujamos TODO el grupo (iconos + buscador) a la
   DERECHA: iconos primero (hamburguesa, cesta, usuario) y el BUSCADOR al final,
   alineado a la derecha. */
.sitasa-topbar .nav-second-main {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    float: none !important;
    gap: 0;
    justify-content: flex-end;   /* el bloque alineado a la derecha */
}
.sitasa-topbar .nav-second-main > li {
    display: inline-flex;
    align-items: center;         /* centra verticalmente el contenido del li */
    height: 40px;                /* misma altura que el input -> todo a una línea */
    float: none !important;
    margin: 0;
}

/* Orden visual pedido (de izquierda a derecha dentro del bloque):
   BUSCADOR -> USUARIO -> CESTA -> MENÚ (hamburguesa).
   Los <li> en el HTML llegan: hamburguesa(first), usuario(.fa-user),
   cesta(.quick-cart), buscador(.md-search.hidden-phone). */
.sitasa-topbar .nav-second-main > li.md-search.hidden-phone {   /* buscador */
    order: 0;
    display: flex;
    margin-right: 1rem;       /* separación con el icono de usuario */
}
.sitasa-topbar .nav-second-main > li:has(> a > .fa-user) {       /* usuario */
    order: 1;
}
.sitasa-topbar .nav-second-main > li.quick-cart {                /* cesta */
    order: 2;
}
.sitasa-topbar .nav-second-main > li:first-child {               /* menú (hamburguesa) */
    order: 3;
}
.sitasa-topbar .nav-second-main > li.md-search.hidden-phone form {
    margin: 0 !important;     /* el form trae class="mb-10" -> +10px de alto */
    padding: 0;
    width: 420px;             /* ancho fijo del buscador */
    display: flex;
    align-items: center;
}
/* El <li> del buscador a la MISMA altura que los iconos (no 48px). */
.sitasa-topbar .nav-second-main > li.md-search.hidden-phone {
    height: auto;
    align-items: center;
}

/* Buscador: reconstruido con reglas propias, anulando el input-group de
   Bootstrap 3 (que causaba desnivel input/botón y un "pico" amarillo). Todo
   el conjunto mide EXACTAMENTE 40px: input, span-wrapper y botón.
   Altura unica de referencia: */
.sitasa-topbar .md-search .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 40px !important;
    line-height: normal !important;
    border: none !important;
}
/* Input */
.sitasa-topbar #md-search-input,
.sitasa-topbar .md-search input.form-control {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;
    margin: 0 !important;
    background: #fff !important;
    color: #333 !important;
    border: none !important;
    border-radius: 2px 0 0 2px !important;
    padding: 0 12px !important;
    line-height: 40px !important;
    font-size: 16px !important;    /* px: el rem base de ck_template es 10px */
    box-sizing: border-box !important;
    box-shadow: none !important;
    outline: none !important;
}
.sitasa-topbar .md-search input.form-control::placeholder {
    color: #999;
    font-size: 16px;
}
/* Wrapper del botón (span.input-group-btn): a 40px y sin trucos de BS3. */
.sitasa-topbar .md-search .input-group-btn {
    display: flex !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    height: 40px !important;
    width: auto !important;
    margin: 0 !important;
    font-size: 0 !important;      /* evita el hueco inline que asoma amarillo */
}
/* Botón buscar: 40px exactos, amarillo del J3, pegado al input. La lupa
   centrada con display:flex + align/justify center. */
.sitasa-topbar .md-search .input-group-btn .btn,
.sitasa-topbar .md-search button,
.sitasa-topbar .md-search .btn-theme {
    height: 40px !important;
    width: 46px !important;         /* ancho fijo para centrar bien la lupa */
    margin: 0 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    outline: none !important;
    background: #FFC200 !important;
    color: #000 !important;
    border: none !important;
    border-radius: 0 2px 2px 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;      /* centra vertical la lupa */
    justify-content: center !important;  /* centra horizontal la lupa */
    cursor: pointer;
    line-height: 1 !important;
}
/* Icono de la lupa dentro del botón (el wrapper tiene font-size:0). */
.sitasa-topbar .md-search .input-group-btn .btn i,
.sitasa-topbar .md-search button i {
    font-size: 20px !important;
    line-height: 40px !important;   /* alto completo del botón -> centrado V */
    height: 40px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

/* Iconos de acción (cesta, usuario, hamburguesa): JUNTOS a la derecha,
   centrados verticalmente con el input. px absolutos (rem base = 10px). */
.sitasa-topbar .nav-second-main > li > a {
    color: #FFC200;
    font-size: 22px;          /* px: con rem=10px, 1.3rem salía diminuto */
    height: 40px;             /* misma altura que el input */
    padding: 0 7px;           /* poco espacio horizontal -> iconos juntos */
    display: inline-flex;
    align-items: center;      /* centra verticalmente el icono */
    position: relative;
    text-decoration: none;
    line-height: 1;
}
.sitasa-topbar .nav-second-main > li > a:hover,
.sitasa-topbar .nav-second-main > li > a:focus {
    color: #fff;
    background: transparent !important;  /* Bootstrap 3 (.nav>li>a:hover) ponía
        un fondo #eee en todo el cuadro del <a>; en hover solo debe cambiar el
        color del icono, no el fondo. */
}
/* El glifo (<i> FontAwesome) dentro del <a>: centrado vertical real.
   Igual que la lupa, el <i> tiene line-height/vertical-align propios que lo
   pegaban arriba; lo forzamos a ocupar la altura y centrar. */
.sitasa-topbar .nav-second-main > li > a > i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 30px !important;
}

/* El <a> que contiene el icono + badge debe ser el ancla del badge absoluto. */
.sitasa-topbar .nav-second-main .quick-cart > a,
.sitasa-topbar .nav-second-main li > a {
    position: relative;
    overflow: visible;
}
/* Badge (contador) de cesta/notificaciones: círculo rojo en la esquina
   SUPERIOR DERECHA del icono. El <span.badge> va antes del <i> en el HTML,
   por eso lo sacamos del flujo con position:absolute. */
.sitasa-topbar .nav-second-main .badge,
.sitasa-topbar .nav-second-main .badge-corner {
    position: absolute;
    top: -4px;
    right: -6px;
    background: #d9230f !important;
    color: #fff !important;
    font-size: 11px !important;   /* px: el rem base de ck_template es 10px, así
        que 0.6rem salía a 6px y el número era ilegible. */
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2;
}

/* --------------------------------------------------------------------------
   Desplegables: mini-cesta (.quick-cart-box) y menú de usuario (.md-user-box).
   Fieles al J3: cajas BLANCAS con sombra, ancladas bajo su icono. El JS del
   e-commerce (MDShop.js / scripts.js) las muestra/oculta con fadeIn/fadeOut,
   así que aquí solo definimos su aspecto; el display:none inicial lo pone el
   HTML inline (style="display:none").
   -------------------------------------------------------------------------- */
.sitasa-topbar .md-user,
.sitasa-topbar .quick-cart {
    position: relative;
}
.sitasa-topbar .quick-cart .quick-cart-box,
.sitasa-topbar .md-user .md-user-box {
    position: absolute;
    right: 0;            /* anclado al borde derecho del icono: se abre hacia
        la izquierda y NO se sale de la pantalla (el J3 usaba -70px, que aquí,
        con el topbar pegado al borde, lo empujaba fuera). */
    left: auto;
    top: 100%;
    margin-top: 15px;
    z-index: 1000;
    width: 274px;
    max-width: calc(100vw - 20px);   /* nunca más ancho que la ventana */
    background: #fff;
    color: #333;
    border: rgba(0, 0, 0, 0.07) 1px solid;
    border-top: 0;
    box-shadow: 5px 5px rgba(91, 91, 91, 0.2);
}
.sitasa-topbar .quick-cart .quick-cart-box {
    padding: 10px 0;
}
.sitasa-topbar .md-user .md-user-box {
    right: 0;            /* igual que la cesta: anclado al borde, no se sale */
    width: 240px;
    padding: 8px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    overflow: hidden;
}

/* Contenido de la mini-cesta (cabecera, lista de productos, pie con total). */
.sitasa-topbar .quick-cart-wrapper {
    max-height: 400px;
    overflow-y: auto;
}
.sitasa-topbar .quick-cart-box h4 {
    font-size: 17px;
    margin: 0;
    padding: 0 10px 10px 10px;
    border-bottom: rgba(0, 0, 0, 0.1) 1px solid;
}
.sitasa-topbar .quick-cart-box a {
    display: block;
    padding: 15px 10px;
    color: #333;
    border-bottom: rgba(0, 0, 0, 0.04) 1px solid;
}
.sitasa-topbar .quick-cart-box a:hover {
    background-color: rgba(0, 0, 0, 0.03);
}
.sitasa-topbar .quick-cart-box a > img {
    float: left;
    margin-right: 10px;
}
.sitasa-topbar .quick-cart-box a h6 {
    margin: 0;
    padding: 4px 0 0 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.sitasa-topbar .quick-cart-box a.btn {
    background-color: #FFC200;
    color: #000;
    border: 0;
    margin: 0;
    padding-top: 6px;
    padding-bottom: 4px;
}
.sitasa-topbar .quick-cart-footer {
    padding: 10px 10px 0 10px;
}
.sitasa-topbar .quick-cart-footer > span {
    display: inline-block;
    padding: 4px 3px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

/* Menú de usuario: tabla de enlaces (MI CUENTA, MIS PEDIDOS, …). El HTML es
   una <table> con una fila por enlace; la tratamos como una lista de ítems. */
.sitasa-topbar .md-user-box table {
    width: 100%;
    border-collapse: collapse;
}
.sitasa-topbar .md-user-box td {
    padding: 0;
}
.sitasa-topbar .md-user-box a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
/* Icono en "chip" circular */
.sitasa-topbar .md-user-box a i {
    width: 30px;
    height: 30px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f3f3f3;
    color: #888;
    font-size: 14px;
    transition: background .15s, color .15s;
}
.sitasa-topbar .md-user-box a:hover {
    background: #fff7dc;
    color: #1a1a1a;
}
.sitasa-topbar .md-user-box a:hover i {
    background: #FFC200;
    color: #1a1a1a;
}
/* Separador sutil entre filas (menos la última) */
.sitasa-topbar .md-user-box tr:not(:last-child) td {
    border-bottom: 1px solid #f2f2f2;
}
/* "Cerrar sesión" (última fila) destacado en rojo */
.sitasa-topbar .md-user-box tr:last-child a {
    color: #c0392b;
}
.sitasa-topbar .md-user-box tr:last-child a i {
    background: #fdecea;
    color: #c0392b;
}
.sitasa-topbar .md-user-box tr:last-child a:hover {
    background: #fdecea;
}
.sitasa-topbar .md-user-box tr:last-child a:hover i {
    background: #c0392b;
    color: #fff;
}
.sitasa-topbar .md-user-box input[type="text"] {
    color: #666;
}

/* --------------------------------------------------------------------------
   Panel de resultados de la búsqueda predictiva (#md-search-result-box).
   MDShop.js hace la llamada AJAX a mod_predictiva, vuelca el HTML en
   .quick-search-wrapper y muestra este panel. Se despliega bajo la topbar,
   a ancho completo, con la rejilla de productos (cada <li> es col-md-3) y
   scroll si hay muchos resultados.
   -------------------------------------------------------------------------- */
.sitasa-search-results {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 900;
    background: #fff;
    color: #333;
    border-top: 3px solid #FFC200;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    padding: 15px 20px 20px;
    max-height: 80vh;
    overflow-y: auto;
}
.sitasa-search-results > h4 {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}
.sitasa-search-results #searchpanel_close {
    position: absolute;
    top: 12px;
    right: 16px;
    color: #999;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
}
.sitasa-search-results #searchpanel_close:hover {
    color: #d9230f;
}
/* Rejilla de productos devueltos: los <li> vienen como col-md-3 de BS3, pero
   no cargamos esa grid aquí -> la montamos con flex (4 por fila en escritorio). */
.sitasa-search-results .quick-search-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    gap: 15px;
}
.sitasa-search-results .quick-search-wrapper > li {
    list-style: none;
    width: calc(25% - 15px);
    margin: 0;
}
.sitasa-search-results .quick-search-wrapper .thumbnail {
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    padding: 8px;
    background: #fff;
    height: 100%;
}
.sitasa-search-results .quick-search-wrapper .thumbnail img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.sitasa-search-results .quick-search-wrapper .caption h3 {
    font-size: 14px;
    margin: 8px 0 4px;
    line-height: 1.2;
}
.sitasa-search-results .quick-search-wrapper .price-box h4 {
    color: #d9230f;
    font-weight: 700;
    margin: 4px 0 0;
}
@media (max-width: 991px) {
    .sitasa-search-results .quick-search-wrapper > li {
        width: calc(33.333% - 15px);
    }
}
@media (max-width: 767px) {
    .sitasa-search-results .quick-search-wrapper > li {
        width: calc(50% - 15px);
    }
}

/* --------------------------------------------------------------------------
   Tarjetas de producto del carrusel "MÁS VENDIDAS" (mod_mdmasvendidos en la
   posición md-novedades -> <ul id="md-productos-novedades">). Los títulos (h5)
   ocupan 1, 2 o 3 líneas, así que el precio y el botón COMPRAR quedaban a
   distinta altura en cada tarjeta (medido: caja de 71px con 1-2 líneas vs 98px
   con 3 líneas -> botón 27px más abajo).
   Reservamos en el TÍTULO el alto de 3 líneas (min-height): así el precio+botón
   caen SIEMPRE a la misma altura, tenga el título 1, 2 o 3 líneas.
   (Mismo criterio que el J3 original con sus clases h-60/h-90.)
   -------------------------------------------------------------------------- */
#md-productos-novedades .shop-item-summary {
    min-height: 98px !important;     /* alto de 3 líneas de h5 (medido con CDP) */
    display: flex !important;
    align-items: center !important;  /* centra el título en su caja */
    justify-content: center !important;
}
#md-productos-novedades .shop-item-summary h5 {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;           /* máx 3 líneas, por si algún título es más largo */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* El bloque precio+botón de cada tarjeta es un <div class="row text-center
   mt-10">. El .row de Bootstrap 3 trae margin:0 -20px; dentro de la tarjeta
   (sin un .container padre que lo compense) ese -20px se DESBORDA por la
   derecha -> genera 20px de scroll horizontal en toda la página, que corría
   la web entera (incl. la info-bar) hacia la izquierda. Lo neutralizamos. */
.shop-item .row,
#md-productos-novedades .row,
#md-masvendidos .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Owl-carousel crea slides clonados (.owl-item.cloned) para el loop; su
   contenedor .owl-stage-outer DEBE ocultar el desbordamiento o esos clones
   generan scroll horizontal. Lo forzamos. */
.owl-carousel .owl-stage-outer {
    overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   Menú horizontal de cabecera (Tienda, Marcas, Categorías, Web, Favoritos,
   Contacto). Vive en el [section-header] como:
     .col-md-10 > .hidden-phone > ul.nav.nav-pills.float-right
   El .float-right es de Bootstrap 3 (en BS5 sería .float-end) y Cassiopeia no
   lo define -> el menú se quedaba a la izquierda. Lo alineamos a la derecha
   con flex y le damos el aspecto de pills del J3.
   -------------------------------------------------------------------------- */
/* La .row del header: logo a la izquierda (ancho propio) y la columna del
   menú ocupando TODO el ancho restante, para que dentro el flex-end del <ul>
   pueda empujar los enlaces al borde derecho. La rejilla col-md-* de BS3 no
   la interpreta Cassiopeia, así que la montamos a mano con flex. */
.sitasa-main section.dark .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}
.sitasa-main section.dark .row > [class*="col-md-2"] {
    flex: 0 0 auto !important;         /* el logo: solo su ancho */
    width: auto !important;
    max-width: none !important;
}
.sitasa-main section.dark .row > [class*="col-md-10"] {
    flex: 1 1 auto !important;         /* el menú: todo el espacio restante */
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}
.sitasa-main section.dark [class*="col-md-10"] > .hidden-phone {
    width: 100% !important;            /* el wrapper intermedio, a ancho completo */
}
.sitasa-main section.dark .nav-pills.float-right {
    display: flex !important;
    flex-wrap: nowrap !important;      /* una sola fila, no en vertical */
    justify-content: flex-end !important;  /* items pegados a la derecha */
    align-items: center !important;
    gap: 4px;
    list-style: none;
    margin: 0 !important;
    padding: 0;
    width: 100% !important;            /* ocupa todo el ancho -> flex-end surte efecto */
    float: none !important;
}
.sitasa-main section.dark .nav-pills.float-right > li {
    float: none !important;
    margin: 0;
    white-space: nowrap;               /* cada enlace no se parte */
}
.sitasa-main section.dark .nav-pills.float-right > li {
    float: none;
    margin: 0;
}
.sitasa-main section.dark .nav-pills.float-right > li > a {
    display: block;
    padding: 8px 14px;
    color: #FFC200;
    font-weight: 600;
    text-decoration: none;
    border-radius: 3px;
    transition: all .2s;
}
.sitasa-main section.dark .nav-pills.float-right > li > a:hover,
.sitasa-main section.dark .nav-pills.float-right > li.active > a {
    color: #1a1a1a;
    background: #FFC200;
}

/* Visibilidad responsive heredada de Bootstrap 3 (visible-phone / hidden-phone).
   Cassiopeia no las define, por eso se veían los DOS buscadores del módulo
   (el de móvil y el de escritorio) a la vez. Las reimplementamos. */
.visible-phone {
    display: none !important;
}
.hidden-phone {
    display: inline-block !important;
}
@media (max-width: 767px) {
    .visible-phone {
        display: inline-block !important;
    }
    .hidden-phone {
        display: none !important;
    }
}

/* ==========================================================================
   FOOTER
   --------------------------------------------------------------------------
   El footer (mod_custom "Footer" -> token [position.footer]) está diseñado
   para fondo OSCURO: usa text-white y logo blanco. Sin fondo oscuro, esos
   textos quedaban invisibles sobre blanco. Reproducimos el footer del J3
   (.t3-footer): fondo #222, enlaces/títulos en amarillo corporativo #FFC200.
   ========================================================================== */
.sitasa-footer {
    background-color: #222222;
    color: #ffc200;
    margin-top: 0;           /* pegado a la info-bar: sin hueco blanco entre medias */
    padding: 60px 20px 20px; /* la separación es INTERNA (padding superior) */
}
/* El footer usa el grid col-md-* de Bootstrap 3; lo montamos con flex para que
   las 3 columnas (empresa / legales+enlaces / contacto) se repartan bien.
   A ancho completo (container-fluid): ocupa todo el ancho, sin max-width. */
.sitasa-footer > div {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    margin: 0;
}
.sitasa-footer [class*="col-md-4"] {
    flex: 1 1 300px;
    padding: 0 15px;
}
.sitasa-footer [class*="col-sm-6"] {
    flex: 1 1 140px;
}
/* Enlaces, títulos y textos del footer en amarillo (como el J3). */
.sitasa-footer,
.sitasa-footer a,
.sitasa-footer h4,
.sitasa-footer p,
.sitasa-footer .text-white,
.sitasa-footer .text-white a {
    color: #ffc200 !important;
}
.sitasa-footer a:hover {
    color: #fff !important;
}
/* Excepción: el párrafo del catálogo ("Descubre todos nuestros productos...")
   lleva class="text-white" y debe ir en BLANCO, no en el amarillo general. */
.sitasa-footer p.text-white,
.sitasa-footer p.text-white a {
    color: #fff !important;
}
.sitasa-footer h4 {
    margin-bottom: 10px;
}
.sitasa-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sitasa-footer ul li {
    margin-bottom: 4px;
}
/* Los triangulitos (►) de las listas del footer son el ::marker de la lista
   (.footer-list usa list-style-type: disclosure-closed). El marker hereda el
   color del texto (amarillo); lo forzamos a BLANCO. */
.sitasa-footer .footer-list li::marker {
    color: #fff;
}
/* Crédito "Creado por Xpanse Studio": fila a todo lo ancho, a la derecha. */
/* Fila del crédito (copyright izq. + Xpanse der.): en LÍNEA, repartidos a
   los extremos. flex-basis:100% para que ocupe todo el ancho del footer. */
.sitasa-footer .row:last-child {
    flex-basis: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 194, 0, 0.2);
}
.sitasa-footer .row:last-child [class*="col-"] {
    width: auto;            /* cada bloque solo su ancho -> van en línea */
    flex: 0 1 auto;
}
.sitasa-footer .row:last-child .text-left  { text-align: left; }
.sitasa-footer .row:last-child .text-right { text-align: right; }

/* ==========================================================================
   PÁGINA MARCAS (vista /marca -> template_marcas_portada.php)
   --------------------------------------------------------------------------
   Rediseño: tarjetas uniformes + buscador en vivo + índice alfabético A-Z.
   Bloque: sitasa-marcas
   Elementos: __controls, __search, __abc, __grid, __item, __card, __logo,
              __name, __noimg, __empty
   ========================================================================== */
.sitasa-marcas {
    padding-bottom: 50px;
}

/* --- Controles (buscador + índice A-Z) --- */
.sitasa-marcas__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}
.sitasa-marcas__search {
    position: relative;
    flex: 0 0 320px;
    max-width: 100%;
}
.sitasa-marcas__search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 16px;
    pointer-events: none;
}
.sitasa-marcas__search input {
    width: 100%;
    height: 44px;
    padding: 0 16px 0 40px;
    font-size: 15px;
    color: #333;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 24px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.sitasa-marcas__search input:focus {
    border-color: #FFC200;
    box-shadow: 0 0 0 3px rgba(255, 194, 0, 0.2);
}

.sitasa-marcas__abc {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1 1 auto;
}
.sitasa-marcas__abc button {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: #555;
    background: #f1f1f1;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
}
.sitasa-marcas__abc button:hover:not(:disabled) {
    background: #FFE98a;
    color: #1a1a1a;
}
.sitasa-marcas__abc button.is-active {
    background: #FFC200;
    color: #1a1a1a;
}
.sitasa-marcas__abc button:disabled {
    opacity: .35;
    cursor: default;
}

/* --- Rejilla de tarjetas --- */
.sitasa-marcas__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.sitasa-marcas__item {
    margin: 0;
}
.sitasa-marcas__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.sitasa-marcas__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    border-color: #FFC200;
}
/* El logo se contiene SIEMPRE en una caja de alto fijo -> tarjetas uniformes */
.sitasa-marcas__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    padding: 18px;
    background: #fff;
}
.sitasa-marcas__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .85;
    transition: filter .2s, opacity .2s;
}
.sitasa-marcas__card:hover .sitasa-marcas__logo img {
    filter: grayscale(0);
    opacity: 1;
}
/* Marcas sin logo: iniciales sobre fondo suave */
.sitasa-marcas__noimg {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #bbb;
    text-transform: uppercase;
}
.sitasa-marcas__name {
    display: block;
    padding: 10px 8px 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #333;
    border-top: 1px solid #f2f2f2;
}
.sitasa-marcas__card:hover .sitasa-marcas__name {
    color: #1a1a1a;
}

.sitasa-marcas__empty {
    text-align: center;
    color: #888;
    font-size: 15px;
    padding: 40px 0;
}

/* --- Responsive --- */
@media (max-width: 1200px) {
    .sitasa-marcas__grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 992px) {
    .sitasa-marcas__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    .sitasa-marcas__grid { grid-template-columns: repeat(3, 1fr); }
    .sitasa-marcas__search { flex-basis: 100%; }
}
@media (max-width: 480px) {
    .sitasa-marcas__grid { grid-template-columns: repeat(2, 1fr); }
    .sitasa-marcas__logo { height: 90px; }
}

/* ==========================================================================
   LISTADO DE PRODUCTOS (reutilizable: marca, categoría, búsqueda…)
   --------------------------------------------------------------------------
   Bloque: sitasa-productos (rejilla) + sitasa-producto (tarjeta)
   Tarjetas uniformes: imagen contenida en caja fija, nombre a 2 líneas,
   precio + botón COMPRAR siempre alineados al fondo. Botón favorito en hover.
   ========================================================================== */
.sitasa-productos {
    padding-bottom: 50px;
}
.sitasa-productos__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid #f0f0f0;
}
.sitasa-productos__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1a1a1a;
}
.sitasa-productos__count {
    font-size: 14px;
    color: #888;
    font-weight: 600;
}

.sitasa-productos__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* --- Tarjeta de producto --- */
.sitasa-producto {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    overflow: hidden;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.sitasa-producto:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
    border-color: #e2e2e2;
}

/* Media: imagen contenida en caja de alto fijo + labels + favorito */
.sitasa-producto__media {
    position: relative;
    height: 220px;
    padding: 16px;
    background: #fff;
}
.sitasa-producto__img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.sitasa-producto__img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;   /* integra fondos blancos de las fotos */
}
.sitasa-producto__labels {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Los labels del e-commerce traen sus clases (.label, badges); los normalizamos */
.sitasa-producto__labels .label,
.sitasa-producto__labels span {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    color: #fff;
}
/* Botón favorito: círculo arriba a la derecha, aparece/realza en hover */
.sitasa-producto__fav {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    color: #bbb;
    font-size: 15px;
    opacity: 0;
    transform: translateY(-4px);
    transition: all .18s;
}
.sitasa-producto:hover .sitasa-producto__fav {
    opacity: 1;
    transform: translateY(0);
}
.sitasa-producto__fav:hover {
    color: #d9230f;
    border-color: #d9230f;
}
.sitasa-producto__fav.is-active {
    opacity: 1;
    transform: none;
    color: #d9230f;
    border-color: #d9230f;
}

/* Body: nombre (2 líneas fijas) + footer (precio + botón) pegado al fondo */
.sitasa-producto__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 14px 16px 16px;
    border-top: 1px solid #f3f3f3;
}
.sitasa-producto__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;          /* 2 líneas -> tarjetas uniformes */
    margin-bottom: 12px;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}
.sitasa-producto__name:hover {
    color: #000;
}
.sitasa-producto__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;           /* precio+botón al fondo */
}
.sitasa-producto__price {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.sitasa-producto__price-old {
    font-size: 11px;
    color: #999;
    text-decoration: line-through;
    font-weight: 600;
}
.sitasa-producto__price-now {
    font-size: 19px;
    font-weight: 800;
    color: #1a1a1a;
}
/* Botón COMPRAR: amarillo corporativo */
.sitasa-producto__buy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    background: #FFC200 !important;
    color: #1a1a1a !important;
    border: none !important;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.sitasa-producto__buy:hover {
    background: #e6af00 !important;
}
.sitasa-producto__buy i { font-size: 15px; }

.sitasa-productos__iva {
    margin-top: 30px;
    text-align: center;
    font-size: 13px;
    color: #888;
}

/* --- Favoritos: botón "Quitar de favoritos" bajo el footer de la tarjeta --- */
.sitasa-favoritos .sitasa-producto__buy {
    flex: 1 1 auto;
    justify-content: center;
}
.sitasa-favoritos__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
    padding: 9px 12px;
    border: 1px solid #f0d6d2;
    border-radius: 6px;
    background: #fdf4f3;
    color: #c0392b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.sitasa-favoritos__remove:hover {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
}

/* --- Responsive --- */
@media (max-width: 1200px) {
    .sitasa-productos__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
    .sitasa-productos__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .sitasa-productos__grid { grid-template-columns: 1fr; }
    .sitasa-producto__media { height: 200px; }
}

/* ==========================================================================
   PÁGINA CATEGORÍAS (vista /categorias -> template_familiaportada_body.php)
   --------------------------------------------------------------------------
   Las categorías no tienen imagen: tarjetas con icono (por palabra clave) +
   nombre + flecha. Bloque: sitasa-categorias
   ========================================================================== */
.sitasa-categorias {
    padding-bottom: 50px;
}
.sitasa-categorias__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.sitasa-categorias__item { margin: 0; }

.sitasa-categorias__card {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    text-decoration: none;
    transition: transform .16s, box-shadow .16s, border-color .16s;
}
.sitasa-categorias__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1);
    border-color: #FFC200;
}

/* Icono en recuadro amarillo suave */
.sitasa-categorias__icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF4CC;
    border-radius: 10px;
    color: #1a1a1a;
    font-size: 22px;
    transition: background .16s, color .16s;
}
.sitasa-categorias__card:hover .sitasa-categorias__icon {
    background: #FFC200;
}

.sitasa-categorias__name {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2px;
    line-height: 1.25;
    color: #333;
}
.sitasa-categorias__card:hover .sitasa-categorias__name {
    color: #1a1a1a;
}

/* Flecha: aparece/desliza en hover */
.sitasa-categorias__arrow {
    flex: 0 0 auto;
    color: #ccc;
    font-size: 14px;
    opacity: 0;
    transform: translateX(-6px);
    transition: all .18s;
}
.sitasa-categorias__card:hover .sitasa-categorias__arrow {
    opacity: 1;
    transform: translateX(0);
    color: #FFC200;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .sitasa-categorias__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .sitasa-categorias__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Paginación (listados de productos por categoría)
   -------------------------------------------------------------------------- */
.sitasa-paginacion {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}
.sitasa-paginacion .pagination {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.sitasa-paginacion .pagination li {
    margin: 0;
}
.sitasa-paginacion .pagination li a,
.sitasa-paginacion .pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    text-decoration: none;
    transition: all .15s;
}
.sitasa-paginacion .pagination li a:hover {
    background: #FFF4CC;
    border-color: #FFC200;
    color: #1a1a1a;
}
.sitasa-paginacion .pagination li.active a,
.sitasa-paginacion .pagination li.active span {
    background: #FFC200;
    border-color: #FFC200;
    color: #1a1a1a;
}
.sitasa-paginacion .pagination li.disabled a,
.sitasa-paginacion .pagination li.disabled span {
    opacity: .4;
    pointer-events: none;
}

/* ==========================================================================
   FICHA DE PRODUCTO (vista /producto/<url> -> template_fichaarticulo.php)
   --------------------------------------------------------------------------
   Retoques de pulido sobre la estructura existente (galería + características +
   caja de compra). No se toca la lógica (zoom, owl, favoritos, comprar).
   ========================================================================== */
.sitasa-ficha {
    padding-bottom: 20px;
}

/* --- Layout 2 columnas: izquierda (galería+características) / derecha (compra+desc) --- */
.sitasa-ficha__left,
.sitasa-ficha__buy {
    margin-bottom: 20px;
}
/* La galería ocupa todo el ancho de su columna. */
.sitasa-ficha__gallery {
    width: 100%;
}

/* --- Galería --- */
.sitasa-ficha__gallery .thumbnail {
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 20px;
    background: #fff;
}
.sitasa-ficha__gallery .zoom img,
.sitasa-ficha__gallery .img-fluid {
    max-width: 100%;
    height: auto;
}
/* El blend-mode (integrar fondo blanco de la foto) SOLO en la imagen base.
   El plugin jquery.zoom inserta una 2ª <img> absoluta para el zoom; si esa
   también lleva blend-mode, se transparenta y se ve la de debajo -> doble
   imagen. La capa de zoom va opaca, con fondo blanco, por ENCIMA de la base. */
.sitasa-ficha__gallery .zoom > img:first-child,
.sitasa-ficha__gallery .img-fluid {
    mix-blend-mode: multiply;
}
.sitasa-ficha__gallery .zoom img.zoomImg {
    mix-blend-mode: normal !important;  /* sin blend -> no se transparenta */
    background: #fff !important;         /* fondo opaco -> tapa la imagen base */
    max-width: none !important;          /* el plugin la escala por encima de 100% */
}

/* Características: separadas de la galería, ocupando el ancho de la columna. */
.sitasa-ficha__info {
    margin-top: 24px;
}

/* Descripción corta en la columna derecha, bajo el aviso de envío. */
.sitasa-ficha__desc-corta {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}
.sitasa-ficha__desc-corta .text-description {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 8px;
}

/* --- Tabla de características --- */
.sitasa-ficha__info .caracteristicas-articulo {
    margin: 0 0 20px;
}
.sitasa-ficha__info .caracteristicas-articulo dt,
.sitasa-ficha__info .caracteristicas-articulo dd {
    padding: 10px 0;
    margin: 0 !important;
    border-bottom: 1px solid #f0f0f0;
    line-height: 1.4;
}
.sitasa-ficha__info .caracteristicas-articulo dt {
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .3px;
    width: 140px;
    clear: left;
}
.sitasa-ficha__info .caracteristicas-articulo dd {
    margin-left: 150px !important;
    font-size: 14px;
    color: #1a1a1a;
    font-weight: 600;
}
.sitasa-ficha__info .text-description {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
}

/* --- Caja de compra (panel de precio) --- */
.sitasa-ficha__buy .panel-price {
    border: 1px solid #ececec;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    background: #fff;
}
.sitasa-ficha__buy .panel-price .panel-body {
    padding: 22px 20px 16px;
}
.sitasa-ficha__buy .prize .fw-400 {
    color: #888;
    font-size: 13px;
    letter-spacing: .3px;
}
.sitasa-ficha__buy .prize h3 {
    font-size: 34px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 6px 0 2px;
}
.sitasa-ficha__buy .prize .line-through {
    color: #b00;
    opacity: .8;
    font-size: 14px;
}
.sitasa-ficha__buy .panel-footer {
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
    padding: 16px 20px 20px;
}
.sitasa-ficha__buy .panel-footer p {
    color: #555;
    font-size: 13px;
}
/* Botón COMPRAR grande, amarillo corporativo */
.sitasa-ficha__buy .btn-comprar {
    height: 52px;
    background: #FFC200 !important;
    color: #1a1a1a !important;
    border: none !important;
    border-radius: 8px;
    font-size: 17px !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: background .15s;
}
.sitasa-ficha__buy .btn-comprar:hover {
    background: #e6af00 !important;
}
/* Corazón de favoritos */
.sitasa-ficha__buy .add-wishlist {
    color: #ccc;
    font-size: 20px;
}
.sitasa-ficha__buy .add-wishlist:hover {
    color: #d9230f;
}
/* Aviso de envío */
.sitasa-ficha__buy + .alert,
.sitasa-ficha__buy .alert {
    margin-top: 14px;
    border: none;
    border-radius: 8px;
    background: #eaf6fb;
    color: #1a6b85;
    font-size: 13px;
    text-align: center;
}

/* --- Descripción larga --- */
.sitasa-ficha-descripcion {
    padding-bottom: 40px;
}
.sitasa-ficha-descripcion__title {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1a1a1a;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
}
.sitasa-ficha-descripcion__body {
    font-size: 14px;
    line-height: 1.7;
    color: #444;
    max-width: 900px;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .sitasa-ficha .col-md-4 {
        margin-bottom: 24px;
    }
}

/* ==========================================================================
   PÁGINA CONDICIONES (Aviso Legal / Protección de Datos / Cookies / Venta)
   --------------------------------------------------------------------------
   Menú lateral (<ul data-spy="affix">) en tarjeta + sticky. El contenido viene
   montado desde el core ($condiciones), así que estilamos por CSS acotado a
   la vista (body.view-condiciones).
   ========================================================================== */
.view-condiciones .container {
    padding-top: 20px;
    padding-bottom: 50px;
}
/* El .row como flex para que la columna del menú (.col-md-3) se ESTIRE a la
   altura de la columna de contenido (.col-md-9) -> align-items:stretch (default).
   Sin esto, el bloque contenedor del <ul> sticky mide solo lo que ocupa el menú
   (~200px) y el sticky deja de pegarse en cuanto scrolleas más de esa altura.
   Al estirarse la columna, el sticky tiene recorrido durante todo el contenido. */
.view-condiciones .container > .row {
    display: flex;
    flex-wrap: wrap;
}
.view-condiciones .container > .row > .col-md-3,
.view-condiciones .container > .row > .col-md-9 {
    float: none;   /* anulamos el float de BS3, usamos flex */
}

/* El menú lateral en tarjeta, pegado (sticky) al hacer scroll. */
.view-condiciones [data-spy="affix"] {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;                 /* se queda a 20px del borde superior */
    list-style: none;
    margin: 0;
    padding: 10px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.view-condiciones [data-spy="affix"] li {
    margin: 0;
}
.view-condiciones [data-spy="affix"] li + li {
    border-top: 1px solid #f2f2f2;
}
.view-condiciones [data-spy="affix"] li a {
    display: block;
    padding: 12px 14px;
    border-radius: 8px;
    color: #444;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all .15s;
}
.view-condiciones [data-spy="affix"] li a::before {
    content: "\f105";          /* chevron-right de Font Awesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 10px;
    color: #FFC200;
    transition: transform .15s;
    display: inline-block;
}
.view-condiciones [data-spy="affix"] li a:hover {
    background: #FFF4CC;
    color: #1a1a1a;
}
.view-condiciones [data-spy="affix"] li a:hover::before {
    transform: translateX(3px);
}
/* Enlace activo (Bootstrap affix añade .active al navegar). */
.view-condiciones [data-spy="affix"] li.active a {
    background: #FFC200;
    color: #1a1a1a;
}
.view-condiciones [data-spy="affix"] li.active a::before {
    color: #1a1a1a;
}

/* Contenido: títulos y texto legibles. */
.view-condiciones .col-md-9 h2 {
    font-size: 24px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid #FFC200;
}
.view-condiciones .col-md-9 h3,
.view-condiciones .col-md-9 h4 {
    color: #1a1a1a;
    margin-top: 26px;
}
.view-condiciones .col-md-9 p,
.view-condiciones .col-md-9 li {
    line-height: 1.7;
    color: #444;
}
.view-condiciones .col-md-9 > div {
    margin-bottom: 40px;
}

/* En móvil el sticky no tiene sentido (menú arriba, scroll normal). */
@media (max-width: 992px) {
    .view-condiciones [data-spy="affix"] {
        position: static;
        margin-bottom: 24px;
    }
}

/* ==========================================================================
   PÁGINA CONTACTO (vista /contacto -> template_formulario_contacto.php)
   --------------------------------------------------------------------------
   Formulario en tarjeta + panel de datos de empresa destacado.
   Bloque: sitasa-contacto
   ========================================================================== */
.sitasa-contacto {
    padding-bottom: 50px;
}

/* --- Tarjeta del formulario --- */
.sitasa-contacto__card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    padding: 32px;
}
.sitasa-contacto__title {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 800;
    color: #1a1a1a;
}
.sitasa-contacto__subtitle {
    margin: 0 0 26px;
    color: #888;
    font-size: 14px;
}
/* Dos campos por fila donde quepan (Nombre+Empresa, Correo+Teléfono). */
.sitasa-contacto__row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.sitasa-contacto__row .form-group {
    flex: 1 1 200px;
}
.sitasa-contacto .form-group {
    margin-bottom: 18px;
}
.sitasa-contacto label {
    display: block;
    margin-bottom: 7px;
    font-weight: 700;
    font-size: 13px;
    color: #333;
}
.sitasa-contacto .form-control {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font-size: 15px;
    color: #333;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.sitasa-contacto textarea.form-control {
    height: auto;
    min-height: 120px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}
.sitasa-contacto .form-control:focus {
    background: #fff;
    border-color: #FFC200;
    box-shadow: 0 0 0 3px rgba(255, 194, 0, 0.18);
}
.sitasa-contacto .form-control::placeholder {
    color: #aaa;
}

/* Checkboxes RGPD */
.sitasa-contacto__check {
    margin: 4px 0 16px;
}
.sitasa-contacto__check label,
.sitasa-contacto .m-20 label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 600;
    font-size: 13px;
    color: #444;
    cursor: pointer;
}
.sitasa-contacto input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: #FFC200;
    flex: 0 0 auto;
}

/* Botón ENVIAR */
.sitasa-contacto__submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 50px;
    justify-content: center;
    background: #FFC200 !important;
    color: #1a1a1a !important;
    border: none !important;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    transition: background .15s;
}
.sitasa-contacto__submit:hover {
    background: #e6af00 !important;
}

/* --- Panel de datos de empresa (tarjeta destacada oscura) --- */
.sitasa-contacto__info {
    background: #1a1a1a;
    color: #fff;
    border-radius: 14px;
    padding: 30px;
    position: sticky;
    top: 20px;
}
.sitasa-contacto__logo {
    display: block;
    width: auto;
    max-width: 180px;
    height: auto;
    margin-bottom: 22px;
}
.sitasa-contacto__info h3 {
    margin: 0 0 18px;
    font-size: 19px;
    font-weight: 800;
    color: #FFC200;
    line-height: 1.3;
}
.sitasa-contacto__info address {
    font-style: normal;
    line-height: 2;
    font-size: 15px;
    color: #ddd;
}
.sitasa-contacto__info a {
    color: #FFC200;
    text-decoration: none;
}
.sitasa-contacto__info a:hover {
    color: #fff;
}

/* Texto informativo RGPD (la tabla de "Información básica..."). */
.sitasa-contacto table {
    width: 100%;
    margin-top: 10px;
    font-size: 12px;
    color: #777;
    border-collapse: collapse;
}
.sitasa-contacto table td {
    padding: 6px 8px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .sitasa-contacto__info {
        position: static;
        margin-top: 24px;
    }
}
@media (max-width: 600px) {
    .sitasa-contacto__card { padding: 22px; }
    .sitasa-contacto__row { gap: 0; }
}

/* ==========================================================================
   PÁGINA CESTA (vista /cesta -> template_cestacompra_body.php)
   --------------------------------------------------------------------------
   Mejora de estilo SOLO por CSS (no se toca el HTML ni el JS de la cesta:
   cantidades, eliminar, dirección, tramitar siguen igual). Acotado a
   body.view-cesta. Bloques originales: #listItems, .itemCard, .toggle...
   ========================================================================== */
.view-cesta .container-fluid {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}
/* El .row de la cesta: las dos columnas (productos + resumen) en UNA fila,
   lado a lado. flex-wrap:nowrap para que el resumen NO se baje debajo; gap
   entre ambas. En móvil (abajo) se permite apilar. */
.view-cesta .container-fluid > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
    gap: 24px;
}

/* --- Columna de productos como tarjeta --- */
.view-cesta #listItems {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    padding: 24px;
}
/* Cabecera de la tabla (Producto / Cantidad / Total) */
.view-cesta #listItems > .col-sm-12:first-child,
.view-cesta #listItems > .col-md-6,
.view-cesta #listItems > .col-md-3 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .4px;
    color: #999;
    padding-bottom: 14px;
    border-bottom: 2px solid #f0f0f0;
}

/* Cada producto (fila) */
.view-cesta .itemCard {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 18px 6px !important;
    border-bottom: 1px solid #f2f2f2;
}
.view-cesta .itemCard:hover {
    background: #fafafa;
    border-radius: 8px;
}
.view-cesta .cart_img img {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 4px;
    background: #fff;
    max-height: 64px;
    width: auto !important;
    margin-right: 14px;
}
.view-cesta .product_name {
    text-decoration: none;
}
.view-cesta .product_name .text-darkgray {
    color: #1a1a1a;
    font-size: 15px;
    margin-bottom: 2px;
}
.view-cesta .product_name small {
    color: #FFC200;
    font-weight: 600;
}
/* Input de cantidad */
.view-cesta .qty input.MDCantidad {
    height: 40px;
    width: 72px !important;
    padding: 0 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    background: #fafafa;
}
.view-cesta .qty input.MDCantidad:focus {
    border-color: #FFC200;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 194, 0, 0.18);
}
.view-cesta .total-linea strong {
    font-size: 16px;
    color: #1a1a1a;
}
/* Icono eliminar */
.view-cesta .remove_item {
    color: #ccc;
    font-size: 17px;
    transition: color .15s;
}
.view-cesta .remove_item:hover {
    color: #d9230f;
}

/* Observaciones + cupón */
.view-cesta textarea.form-control {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    min-height: 80px;
}
.view-cesta input.form-control {
    height: 44px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0 14px;
}

/* --- Panel de resumen (derecha) --- */
/* OJO: hay DOS elementos con .col-lg-3 -> la celda de cabecera "Cantidad"
   (dentro de #listItems) y la COLUMNA DEL RESUMEN (hija directa del .row).
   Por eso todas las reglas del resumen usan ".row > .col-lg-3" (hijo directo),
   para no afectar a la cabecera.

   El .row es flex: damos ancho explícito a las columnas (productos crece,
   resumen fijo) porque las columnas col-* de BS3 no toman su % en flex. */
.view-cesta .row > #listItems,
.view-cesta .row > .col-lg-9 {
    flex: 1 1 auto;
    min-width: 0;
}
.view-cesta .row > .col-lg-3 {
    flex: 0 0 340px !important;
    width: 340px !important;
    max-width: 340px !important;
    position: sticky;
    top: 20px;
    align-self: flex-start;
}
/* Tarjeta SOLO en los bloques de primer nivel (hijos directos de la columna).
   El bloque de totales (.toggle-transparent) CONTIENE otro .toggle dentro; si
   ambos fueran tarjeta, saldrían dos tarjetas anidadas. Por eso el .toggle
   interno NO lleva tarjeta (se neutraliza más abajo). */
.view-cesta .row > .col-lg-3 > .toggle,
.view-cesta .row > .col-lg-3 > .toggle-transparent {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    padding: 18px 20px;
    margin-bottom: 16px;
}
/* El .toggle anidado dentro del bloque de totales: sin tarjeta ni padding. */
.view-cesta .toggle-transparent .toggle {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.view-cesta .toggle > label {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid #FFC200;
}
.view-cesta .toggle-content p {
    color: #666;
    font-size: 14px;
}
/* Líneas del resumen (subtotal, iva, total) */
/* Toda la cadena del panel de totales a ancho completo (eran inline/encogidos,
   por eso label y valor salían juntos en el centro en vez de a los extremos).
   Además quitamos el padding lateral y margen del .toggle / .toggle-content
   interiores: la tarjeta .toggle-transparent ya aporta su propio padding, y
   esos paddings anidados estrechaban el span (perdía ~80px). */
.view-cesta .toggle-transparent,
.view-cesta .toggle-transparent .toggle,
.view-cesta .toggle-transparent .toggle-content {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.view-cesta .toggle-transparent .toggle,
.view-cesta .toggle-transparent .toggle-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Cada fila del resumen es un <span class="clearfix"> (inline por defecto).
   Lo forzamos a flex de ancho completo: label (.pull-left) a la izquierda y
   valor (.pull-right, que va 1º en el DOM) a la derecha vía row-reverse. */
.view-cesta .toggle-transparent .toggle-content > span.clearfix {
    display: flex !important;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: baseline;
    width: 100% !important;
    box-sizing: border-box;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: #555;
}
.view-cesta .toggle-transparent .pull-left,
.view-cesta .toggle-transparent .pull-right {
    float: none !important;
    white-space: nowrap;       /* el "1.595,62 €" no se parte en 2 líneas */
}
.view-cesta .toggle-transparent .pull-left {
    text-align: left;
}
.view-cesta .toggle-transparent .pull-right {
    text-align: right;
}
/* Fila del Total destacada */
.view-cesta .toggle-transparent .size-20 {
    font-size: 22px !important;
    font-weight: 800;
    color: #1a1a1a;
}
.view-cesta .toggle-transparent hr {
    margin: 10px 0;
    border-color: #f0f0f0;
}

/* --- Botones: todos al amarillo corporativo --- */
.view-cesta .btn-primary,
.view-cesta .btn-theme,
.view-cesta .btn-success {
    background: #FFC200 !important;
    color: #1a1a1a !important;
    border: none !important;
    border-radius: 8px;
    font-weight: 700;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.view-cesta .btn-primary:hover,
.view-cesta .btn-theme:hover,
.view-cesta .btn-success:hover {
    background: #e6af00 !important;
    color: #1a1a1a !important;
}
.view-cesta .btn-block {
    width: 100%;
}
/* Botón tramitar deshabilitado (sin dirección/pago) */
.view-cesta .btn-primary[disabled],
.view-cesta .btn-primary:disabled {
    background: #e5e5e5 !important;
    color: #999 !important;
    cursor: not-allowed;
}

@media (max-width: 992px) {
    .view-cesta .container-fluid > .row {
        flex-wrap: wrap !important;   /* en móvil las columnas se apilan */
    }
    .view-cesta .row > .col-lg-3 {
        position: static;
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   PÁGINA REGISTRO DE CLIENTE (vista /nuevo-cliente -> template_altaclientes.php)
   --------------------------------------------------------------------------
   Mejora de estilo SOLO por CSS (no se toca el HTML ni la lógica del alta).
   Bloque acotado a body.view-nuevo-cliente. Estructura original: .control-group
   > .control-label + .controls > input.
   ========================================================================== */
.view-nuevo-cliente .sitasa-registro {
    padding-top: 24px;
    padding-bottom: 50px;
}
/* Las 3 columnas col-md-6 dentro de una tarjeta común, en rejilla de 2. */
.view-nuevo-cliente .sitasa-registro > .row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    padding: 16px 28px 28px;
}
.view-nuevo-cliente .sitasa-registro > .row > .col-md-6 {
    flex: 1 1 420px;
    min-width: 0;
    padding: 12px 18px;
}

/* Títulos de sección (Inicio de Sesión, Datos de contacto, RGPD...). */
.view-nuevo-cliente .sitasa-registro h3 {
    font-size: 17px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 18px 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #FFC200;
}

/* Grupos de campo */
.view-nuevo-cliente .control-group {
    margin-bottom: 16px;
}
.view-nuevo-cliente .control-label {
    display: block;
    margin-bottom: 7px;
    font-weight: 700;
    font-size: 13px;
    color: #333;
}
.view-nuevo-cliente .form-control {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font-size: 15px;
    color: #333;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.view-nuevo-cliente textarea.form-control {
    height: auto;
    min-height: 110px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}
.view-nuevo-cliente select.form-control {
    appearance: auto;
    cursor: pointer;
}
.view-nuevo-cliente .form-control:focus {
    background: #fff;
    border-color: #FFC200;
    box-shadow: 0 0 0 3px rgba(255, 194, 0, 0.18);
}

/* Separadores internos */
.view-nuevo-cliente .sitasa-registro hr {
    margin: 22px 0;
    border: none;
    border-top: 1px solid #f0f0f0;
}

/* Bloque RGPD (lista informativa) */
.view-nuevo-cliente .sitasa-registro ul {
    font-size: 12px;
    color: #777;
    line-height: 1.6;
    padding-left: 18px;
}

/* Checkboxes de condiciones/publicidad */
.view-nuevo-cliente .m-20 {
    margin: 10px 0 !important;
}
.view-nuevo-cliente .m-20 label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 600;
    font-size: 13px;
    color: #444;
    cursor: pointer;
}
.view-nuevo-cliente input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 1px 0 0;
    accent-color: #FFC200;
    flex: 0 0 auto;
}

/* Botón ACEPTAR */
.view-nuevo-cliente input[type="submit"]#boton,
.view-nuevo-cliente #boton {
    width: 100%;
    height: 50px;
    margin-top: 14px;
    background: #FFC200 !important;
    color: #1a1a1a !important;
    border: none !important;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    transition: background .15s;
}
.view-nuevo-cliente #boton:hover:not(:disabled) {
    background: #e6af00 !important;
}
.view-nuevo-cliente #boton:disabled {
    background: #e5e5e5 !important;
    color: #999 !important;
    cursor: not-allowed;
}

/* Aviso "campos obligatorios" */
.view-nuevo-cliente [class*="containertop"],
.view-nuevo-cliente .sitasa-registro > .alert:first-child {
    margin-bottom: 16px;
}

@media (max-width: 860px) {
    .view-nuevo-cliente .sitasa-registro > .row { padding: 12px 14px 20px; }
    .view-nuevo-cliente .sitasa-registro > .row > .col-md-6 { flex-basis: 100%; }
}

/* ==========================================================================
   MODALES (genérico): pago, dirección de envío, etc.
   --------------------------------------------------------------------------
   El shim de MDShop.js muestra/oculta el .modal; aquí le damos el aspecto.
   Estructura Bootstrap: .modal > .modal-dialog > .modal-content >
   .modal-header + .modal-body + .modal-footer.
   ========================================================================== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    overflow-y: auto;
    padding: 24px 16px;
}
.modal .modal-dialog {
    max-width: 560px;
    margin: 40px auto;
    width: 100%;
}
.modal .modal-content {
    background: #fff;
    border: none;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
/* Cabecera */
.modal .modal-header {
    position: relative;
    padding: 20px 24px;
    border-bottom: 3px solid #FFC200;
    background: #fafafa;
}
.modal .modal-header .modal-title,
.modal .modal-header h3,
.modal .modal-header h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #1a1a1a;
}
/* Botón cerrar (la "x") */
.modal .modal-header .close {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 24px;
    line-height: 1;
    color: #999;
    background: none;
    border: none;
    border-radius: 50%;
    opacity: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.modal .modal-header .close:hover {
    background: #f0f0f0;
    color: #d9230f;
}
/* Cuerpo */
.modal .modal-body {
    padding: 24px;
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}
/* Resaltar los datos de pago (líneas tipo TITULAR:/IBAN:). El texto viene como
   texto plano con <br>; no podemos marcar cada línea, pero mejoramos legibilidad
   envolviendo el bloque visualmente. */
.modal .modal-body strong,
.modal .modal-body b {
    color: #1a1a1a;
}
/* Pie con botones */
.modal .modal-footer {
    padding: 16px 24px 20px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.modal .modal-footer .btn {
    height: 44px;
    padding: 0 22px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border: none;
    transition: background .15s;
}
.modal .modal-footer .btn-default {
    background: #eee;
    color: #555;
}
.modal .modal-footer .btn-default:hover {
    background: #e0e0e0;
    color: #1a1a1a;
}
.modal .modal-footer .btn-primary {
    background: #FFC200;
    color: #1a1a1a;
}
.modal .modal-footer .btn-primary:hover {
    background: #e6af00;
}
.modal .modal-footer .btn-danger {
    background: #c0392b;
    color: #fff;
}
.modal .modal-footer .btn-danger:hover {
    background: #a93226;
    color: #fff;
}

/* El backdrop (fondo oscuro) lo crea el shim con z-index 1040. */
#sitasa-modal-backdrop {
    backdrop-filter: blur(2px);
}

/* Modal de confirmación (p. ej. borrar dirección de envío) */
.sitasa-confirm .modal-content {
    text-align: center;
}
.sitasa-confirm .modal-body {
    padding: 28px 24px 8px;
}
.sitasa-confirm__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fdecea;
    color: #c0392b;
    font-size: 30px;
}
.sitasa-confirm__text {
    margin: 0;
    font-size: 15px;
    color: #333;
    line-height: 1.6;
}
.sitasa-confirm__sub {
    color: #999;
    font-size: 13px;
}
.sitasa-confirm .modal-footer {
    justify-content: center;
}

/* Modal de dirección (cesta/perfil): formulario de 2 columnas dentro del modal.
   El HTML mezcla rejillas Bootstrap (.col-12, .col-md-6, .col-sm-12) y los
   inputs llevan ademas .col-12. Reconstruimos el layout con flex: los hijos
   DIRECTOS del .row son las columnas; cada input ocupa el 100% de su columna. */
.modal .modal-body .row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
}
/* Columnas de ancho completo (titulo "Enviar a") -> fila entera */
.modal .modal-body .row > .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
}
/* Columnas a media anchura (dos por fila, teniendo en cuenta el gap) */
.modal .modal-body .row > .col-md-6 {
    flex: 1 1 calc(50% - 7px);
    min-width: 200px;
    padding: 0;
}
/* Los inputs/selects llevan .col-12 pero deben ocupar su columna al 100% sin
   participar del flex del .row (no son hijos directos). Neutralizamos cualquier
   ancho heredado de la rejilla. */
.modal .modal-body .col-md-6 > .col-12,
.modal .modal-body input.col-12,
.modal .modal-body select.col-12 {
    width: 100%;
    max-width: 100%;
    flex: none;
    padding-left: 0;
    padding-right: 0;
}
.modal .modal-body input.fullwidth,
.modal .modal-body input[type="text"],
.modal .modal-body input[type="password"],
.modal .modal-body select {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-top: 4px;
    outline: none;
    box-sizing: border-box;
}
.modal .modal-body input:focus,
.modal .modal-body select:focus {
    border-color: #FFC200;
    box-shadow: 0 0 0 3px rgba(255, 194, 0, 0.18);
}
/* Título "Enviar a" dentro del modal de dirección */
.modal .modal-body .title {
    display: block;
    width: 100%;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}
/* Etiquetas de los campos */
.modal .modal-body label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin: 0;
}
.modal .modal-body .mt-20 {
    margin-top: 14px !important;
}
.modal .modal-body select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23888' d='M6 8L1 3h10z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}
/* Nota legal del pie, alineada a la izquierda */
.modal .modal-footer .float-left {
    margin-right: auto;
    font-size: 12px;
    color: #999;
}

@media (max-width: 600px) {
    .modal .modal-dialog { margin: 20px auto; }
    .modal .modal-body { padding: 18px; }
}

/* ==========================================================================
   IMPRESIÓN (@media print)
   --------------------------------------------------------------------------
   Al imprimir un pedido (boton Imprimir Pedido -> window.print()) solo debe
   salir el contenido del pedido (#printarea), como un documento limpio. Se
   oculta todo lo demas: topbar, footer, menus, widgets, cookies, botones.
   ========================================================================== */
@media print {
    /* Ocultar cromo del sitio */
    .sitasa-topbar,
    .sitasa-footer,
    .info-bar,
    .mod-mdcontactbuttons,
    [id*="mdcontactbuttons"],
    [class*="mdcontactbuttons"],
    [id*="cookiesck"],
    [class*="cookiesck"],
    #sidepanel,
    #sitasa-modal-backdrop,
    .modal,
    .hidden-print,
    .whatsapp,
    header.sitasa-topbar,
    .breadcrumb,
    /* Cabecera negra del contenido ([section-header]: logo + menu familias). */
    .sitasa-main section.dark,
    .sitasa-main section.header-color-theme,
    .nav-pills,
    .nav-second-main {
        display: none !important;
    }

    /* Reset del contenedor para que el pedido ocupe la hoja */
    html, body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .sitasa-main,
    .sitasa-main .container,
    .view-seguimiento .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    /* El area del pedido como documento */
    #printarea {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        color: #000;
        font-size: 12px;
    }
    #printarea .panel {
        border: none !important;
        box-shadow: none !important;
    }
    #printarea .panel-body {
        padding: 0 !important;
    }
    /* Tabla de productos legible al imprimir */
    #printarea table {
        width: 100%;
        border-collapse: collapse;
    }
    #printarea table th,
    #printarea table td {
        border-bottom: 1px solid #ddd;
        padding: 6px 4px;
    }
    #printarea strong {
        color: #000;
    }
    /* Que no se parta el bloque de totales */
    #printarea .panel { page-break-inside: avoid; }

    /* Links sin mostrar la URL entre parentesis */
    a[href]:after {
        content: "" !important;
    }
}

/* ==========================================================================
   PÁGINA MI CUENTA / PERFIL (vista /perfil -> template_perfil.php)
   --------------------------------------------------------------------------
   Diseño propio BEM acotado a .sitasa-cuenta. Dos columnas: menú lateral en
   tarjeta (modulepos md_menu_clientes) + contenido (datos, contraseña y
   direcciones de envío en tarjetas). Paleta corporativa: amarillo #FFC200.
   ========================================================================== */
.sitasa-cuenta {
    padding-bottom: 40px;
}
.sitasa-cuenta .row {
    margin-left: 0;
    margin-right: 0;
}

/* ---- Menú lateral (modulepos md_menu_clientes) -------------------------- */
.sitasa-cuenta__aside {
    padding-left: 0;
}
.sitasa-cuenta__aside > a {
    display: block;
    text-decoration: none;
    margin-bottom: 12px;
}
.sitasa-cuenta__aside > a h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px 16px;
    background: #222;
    color: #fff;
    border-radius: 10px 10px 0 0;
    font-size: 15px;
    font-weight: 700;
    word-break: break-word;
}
.sitasa-cuenta__aside > a h4 i {
    color: #FFC200;
}
.sitasa-cuenta__aside .bs-docs-sidebar {
    margin: 0;
}
.sitasa-cuenta__aside .list-group {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #ececec;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.sitasa-cuenta__aside .list-group-item {
    margin: 0;
    padding: 0;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
}
.sitasa-cuenta__aside .list-group-item:last-child {
    border-bottom: none;
}
.sitasa-cuenta__aside .list-group-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    color: #333 !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.sitasa-cuenta__aside .list-group-item a i {
    float: none !important;
    width: 22px;
    text-align: center;
    color: #9a9a9a;
    font-size: 16px !important;
    margin-left: auto;   /* icono a la derecha, como el original (float-right) */
    order: 2;
    transition: color .15s;
}
.sitasa-cuenta__aside .list-group-item a:hover {
    background: #fff7dc;
    color: #1a1a1a !important;
}
.sitasa-cuenta__aside .list-group-item a:hover i {
    color: #FFC200;
}
/* Cerrar sesión destacado */
.sitasa-cuenta__aside .list-group-item:last-child a {
    color: #c0392b !important;
}
.sitasa-cuenta__aside .list-group-item:last-child a i {
    color: #c0392b;
}
.sitasa-cuenta__aside .list-group-item:last-child a:hover {
    background: #fdecea;
}

/* ---- Tarjetas (datos, contraseña, direcciones) -------------------------- */
.sitasa-cuenta__main .card.sitasa-cuenta__card {
    min-height: 0;
    height: 100%;
    border: 1px solid #ececec;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    overflow: hidden;
    background: #fff;
    margin-bottom: 0;
    transition: box-shadow .15s, transform .15s;
}
.sitasa-cuenta__card .body {
    padding: 16px 18px !important;
}
.sitasa-cuenta__card-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 18px;
    background: #fafafa;
    border-bottom: 1px solid #efefef;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #444;
}
.sitasa-cuenta__card-head i {
    color: #FFC200;
    font-size: 15px;
}

/* Datos de facturación */
.sitasa-cuenta__address {
    font-style: normal;
    line-height: 1.7;
    color: #555;
    font-size: 14px;
}
.sitasa-cuenta__address strong {
    display: block;
    color: #1a1a1a;
    font-size: 16px;
    margin-bottom: 2px;
}
.sitasa-cuenta__muted {
    color: #9a9a9a;
    font-size: 13px;
}
.sitasa-cuenta__contact {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #666;
    font-size: 13px;
    margin-top: 4px;
    margin-right: 14px;
}
.sitasa-cuenta__contact i {
    color: #FFC200;
    width: 14px;
    text-align: center;
}

/* Cambiar contraseña */
.sitasa-cuenta__pass-form .form-control {
    height: 44px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    box-shadow: none;
    margin-bottom: 12px;
    font-size: 14px;
}
.sitasa-cuenta__pass-form .form-control:focus {
    border-color: #FFC200;
    box-shadow: 0 0 0 3px rgba(255,194,0,.18);
    outline: none;
}
.sitasa-cuenta__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
}
.sitasa-cuenta__btn-pass {
    background: #FFC200 !important;
    color: #1a1a1a !important;
    border: none !important;
    border-radius: 8px;
    font-weight: 700;
    height: 44px;
    letter-spacing: .3px;
    transition: background .15s;
}
.sitasa-cuenta__btn-pass:hover {
    background: #e6af00 !important;
    color: #1a1a1a !important;
}
.sitasa-cuenta__hint {
    margin: 10px 0 0;
    font-size: 12px;
    color: #9a9a9a;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Separador / título de sección "Direcciones de envío" */
.sitasa-cuenta__section-title {
    margin: 32px 0 16px;
    padding-top: 24px;
    border-top: 1px solid #ececec;
}
.sitasa-cuenta__section-title h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
}
.sitasa-cuenta__section-title h4 i {
    color: #FFC200;
}

/* Rejilla común (datos/contraseña y direcciones): todas las tarjetas con el
   mismo ancho y la misma separación. auto-fill + minmax reparte en columnas
   iguales y hace que cada tarjeta ocupe su celda completa. */
.sitasa-cuenta__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 8px;
}
.sitasa-cuenta__grid > .card,
.sitasa-cuenta__grid > a {
    margin: 0;
    width: 100%;
    text-decoration: none;
}
/* El enlace "Añadir dirección" es a su vez celda del grid: que estire su card */
.sitasa-cuenta__grid > .add-envio {
    display: flex;
}
.sitasa-cuenta__grid > .add-envio .card {
    width: 100%;
}
/* Tope de ancho para que en pantallas anchas no haya tarjetas gigantes */
@media (min-width: 1200px) {
    .sitasa-cuenta__grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 340px));
    }
}

/* Tarjeta "Añadir dirección" */
.sitasa-cuenta__card--add {
    border: 2px dashed #e0cf8f !important;
    box-shadow: none !important;
    background: #fffdf5 !important;
    min-height: 160px;
}
.sitasa-cuenta__card--add .body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
}
.sitasa-cuenta__add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #FFC200;
    color: #1a1a1a;
    font-size: 26px;
    transition: transform .15s, background .15s;
}
.sitasa-cuenta__add-text {
    font-size: 14px;
    font-weight: 700;
    color: #8a7320;
}
.sitasa-cuenta__add:hover .sitasa-cuenta__card--add {
    border-color: #FFC200 !important;
    background: #fff8e6 !important;
}
.sitasa-cuenta__add:hover .sitasa-cuenta__add-icon {
    transform: scale(1.08);
    background: #e6af00;
}

/* Tarjeta de dirección de envío */
.sitasa-cuenta__card--envio {
    position: relative;
    min-height: 150px;
}
.sitasa-cuenta__card--envio:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,.1);
    transform: translateY(-2px);
}
.sitasa-cuenta__card--envio .body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 16px !important;
}
.sitasa-cuenta__envio-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #f2f2f2;
    justify-content: flex-end;
}
.sitasa-cuenta__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: background .15s, color .15s;
}
.sitasa-cuenta__action i {
    margin: 0;
}
.sitasa-cuenta__action--edit {
    background: #fff7dc;
    color: #b8860b;
}
.sitasa-cuenta__action--edit:hover {
    background: #FFC200;
    color: #1a1a1a;
}
.sitasa-cuenta__action--delete {
    background: #fdecea;
    color: #c0392b;
}
.sitasa-cuenta__action--delete:hover {
    background: #c0392b;
    color: #fff;
}

/* Mensajes de éxito/error del perfil */
.sitasa-cuenta__main .alert {
    border-radius: 10px;
}

/* Responsive */
@media (max-width: 991px) {
    .sitasa-cuenta__aside {
        padding-left: 15px;
        margin-bottom: 24px;
    }
    .sitasa-cuenta__grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 16px;
    }
}
@media (max-width: 575px) {
    .sitasa-cuenta__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   PÁGINA MIS PEDIDOS (vista /mis-pedidos -> template_verpedidos_body.php)
   --------------------------------------------------------------------------
   Reutiliza el menú lateral de .sitasa-cuenta. La tabla original se sustituye
   por una lista tipo "tabla moderna" (grid) que en móvil pasa a tarjetas.
   ========================================================================== */
.sitasa-pedidos__list {
    border: 1px solid #ececec;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    background: #fff;
}
/* Rejilla común para cabecera y filas */
.sitasa-pedidos__head,
.sitasa-pedidos__row {
    display: grid;
    grid-template-columns: 1fr 140px 130px 120px;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
}
.sitasa-pedidos__head {
    background: #fafafa;
    border-bottom: 1px solid #efefef;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #888;
}
.sitasa-pedidos__row {
    border-bottom: 1px solid #f2f2f2;
    transition: background .15s;
}
.sitasa-pedidos__row:last-child {
    border-bottom: none;
}
.sitasa-pedidos__row:hover {
    background: #fffdf5;
}

/* Columna "Enviado a" */
.sitasa-pedidos__dest {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.sitasa-pedidos__icon {
    flex: none;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff7dc;
    color: #b8860b;
    font-size: 18px;
}
.sitasa-pedidos__dest-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sitasa-pedidos__nombre {
    font-weight: 700;
    color: #1a1a1a !important;
    text-decoration: none;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sitasa-pedidos__nombre:hover {
    color: #b8860b !important;
}
.sitasa-pedidos__domicilio {
    font-size: 13px;
    color: #777;
    margin-top: 1px;
}
.sitasa-pedidos__fecha {
    font-size: 12px;
    color: #9a9a9a;
    margin-top: 3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sitasa-pedidos__fecha i {
    color: #FFC200;
}

/* Columna total */
.sitasa-pedidos__total {
    font-weight: 700;
    color: #1a1a1a;
    font-size: 15px;
}
.sitasa-pedidos__label {
    display: none;   /* sólo visible en móvil */
}

/* Columna estado (badge) */
.sitasa-pedidos__badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
    line-height: 1;
}
.sitasa-pedidos__badge--success {
    background: #e3f6e8;
    color: #1e7e34;
}
.sitasa-pedidos__badge--warning {
    background: #fff3cd;
    color: #a07c00;
}

/* Columna acción */
.sitasa-pedidos__accion {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.sitasa-pedidos__btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    background: #fff;
    color: #555;
    font-size: 15px;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.sitasa-pedidos__btn:hover {
    background: #FFC200;
    border-color: #FFC200;
    color: #1a1a1a;
}

/* Estado vacío */
.sitasa-pedidos__empty {
    text-align: center;
    padding: 60px 20px;
    border: 1px solid #ececec;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.sitasa-pedidos__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff7dc;
    color: #FFC200;
    font-size: 36px;
    margin-bottom: 18px;
}
.sitasa-pedidos__empty h3 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
}
.sitasa-pedidos__empty p {
    margin: 0 0 20px;
    color: #888;
    font-size: 15px;
}
.sitasa-pedidos__empty-btn {
    background: #FFC200 !important;
    color: #1a1a1a !important;
    border: none !important;
    border-radius: 8px;
    font-weight: 700;
    height: 46px;
    padding: 0 28px;
    display: inline-flex;
    align-items: center;
}
.sitasa-pedidos__empty-btn:hover {
    background: #e6af00 !important;
}

/* Responsive: la tabla pasa a tarjetas apiladas */
@media (max-width: 767px) {
    .sitasa-pedidos__head {
        display: none;
    }
    .sitasa-pedidos__row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 18px;
    }
    .sitasa-pedidos__total {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #f2f2f2;
        padding-top: 10px;
    }
    .sitasa-pedidos__label {
        display: inline;
        font-weight: 600;
        color: #888;
    }
    .sitasa-pedidos__accion {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   PÁGINA NOTIFICACIONES (vista /notificaciones -> template_notificaciones.php)
   --------------------------------------------------------------------------
   Mismo patrón que Mis Pedidos: menú lateral de .sitasa-cuenta + lista tipo
   tabla moderna. Las filas son enlaces a cada notificación.
   ========================================================================== */
.sitasa-notif__list {
    border: 1px solid #ececec;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    background: #fff;
}
.sitasa-notif__head,
.sitasa-notif__row {
    display: grid;
    grid-template-columns: 1fr 200px 80px;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
}
.sitasa-notif__head {
    background: #fafafa;
    border-bottom: 1px solid #efefef;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #888;
}
.sitasa-notif__col-fecha,
.sitasa-notif__col-leer {
    text-align: right;
}
.sitasa-notif__row {
    border-bottom: 1px solid #f2f2f2;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.sitasa-notif__row:last-child {
    border-bottom: none;
}
.sitasa-notif__row:hover {
    background: #fffdf5;
}
/* No leídas: fondo sutil + barra lateral amarilla */
.sitasa-notif__row--unread {
    background: #fffdf3;
    box-shadow: inset 3px 0 0 #FFC200;
}

/* Columna asunto */
.sitasa-notif__asunto {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.sitasa-notif__icon {
    flex: none;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f1f1f1;
    color: #999;
    font-size: 17px;
}
.sitasa-notif__row--unread .sitasa-notif__icon {
    background: #fff7dc;
    color: #b8860b;
}
.sitasa-notif__texto {
    min-width: 0;
    font-size: 15px;
    color: #333;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.sitasa-notif__row--unread .sitasa-notif__texto {
    font-weight: 700;
    color: #1a1a1a;
}
.sitasa-notif__tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #a07c00;
    background: #fff3cd;
    padding: 2px 8px;
    border-radius: 999px;
}

/* Columna fecha */
.sitasa-notif__fecha {
    text-align: right;
    font-size: 13px;
    color: #888;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.sitasa-notif__fecha i {
    color: #FFC200;
}
.sitasa-notif__label {
    display: none;
}

/* Columna leer */
.sitasa-notif__leer {
    display: flex;
    justify-content: flex-end;
}
.sitasa-notif__btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    background: #fff;
    color: #555;
    font-size: 15px;
    transition: background .15s, color .15s, border-color .15s;
}
.sitasa-notif__row:hover .sitasa-notif__btn {
    background: #FFC200;
    border-color: #FFC200;
    color: #1a1a1a;
}

/* Responsive: tarjetas apiladas */
@media (max-width: 767px) {
    .sitasa-notif__head {
        display: none;
    }
    .sitasa-notif__row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .sitasa-notif__fecha {
        justify-content: space-between;
        border-top: 1px solid #f2f2f2;
        padding-top: 10px;
    }
    .sitasa-notif__label {
        display: inline;
        font-weight: 600;
        color: #888;
    }
    .sitasa-notif__leer {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   PÁGINA PEDIDO REALIZADO (template_pedidorealizado.php)
   --------------------------------------------------------------------------
   Confirmación tras completar el pedido: hero de éxito + documento tipo
   factura (#printarea, se conserva para la impresión) + botones de acción.
   ========================================================================== */
.sitasa-pedidook {
    padding-top: 24px;
    padding-bottom: 50px;
}
/* Hero de éxito */
.sitasa-pedidook__hero {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}
.sitasa-pedidook__check {
    flex: none;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e3f6e8;
    color: #1e7e34;
    font-size: 28px;
    box-shadow: 0 0 0 6px rgba(30,126,52,.08);
}
.sitasa-pedidook__title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #1a1a1a;
}
.sitasa-pedidook__subtitle {
    margin: 2px 0 0;
    color: #777;
    font-size: 15px;
}

/* Documento / factura */
.sitasa-pedidook__card {
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,.06);
    overflow: hidden;
    background: #fff;
}
.sitasa-pedidook__head {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    padding: 24px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}
.sitasa-pedidook__h {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #999;
}
.sitasa-pedidook__list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #555;
}
.sitasa-pedidook__list strong {
    color: #1a1a1a;
    font-size: 15px;
}
.sitasa-pedidook__list span {
    color: #999;
}
.sitasa-pedidook__block--meta {
    text-align: right;
}
.sitasa-pedidook__order {
    margin-bottom: 18px;
    padding: 12px 14px;
    background: #fff7dc;
    border-radius: 10px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 150px;
}
.sitasa-pedidook__order-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #8a7320;
    font-weight: 700;
}
.sitasa-pedidook__order-num {
    font-size: 24px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.1;
}
.sitasa-pedidook__order-date {
    font-size: 12px;
    color: #8a7320;
    margin-top: 2px;
}
.sitasa-pedidook__badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #fff3cd;
    color: #a07c00;
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
}

/* Tabla de líneas */
.sitasa-pedidook__table-wrap {
    overflow-x: auto;
}
.sitasa-pedidook__table {
    width: 100%;
    border-collapse: collapse;
}
.sitasa-pedidook__table th {
    padding: 14px 24px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #999;
    font-weight: 700;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}
.sitasa-pedidook__table td {
    padding: 16px 24px;
    font-size: 14px;
    color: #444;
    border-bottom: 1px solid #f5f5f5;
}
.sitasa-pedidook__table tr:last-child td {
    border-bottom: none;
}
.sitasa-pedidook__table .num {
    text-align: right;
    white-space: nowrap;
}
.sitasa-pedidook__table tbody td:first-child {
    font-weight: 600;
    color: #1a1a1a;
}

/* Pie: notas + totales */
.sitasa-pedidook__foot {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    padding: 24px;
    border-top: 1px solid #f0f0f0;
}
.sitasa-pedidook__notas p {
    margin: 0;
    color: #666;
    font-size: 14px;
}
.sitasa-pedidook__totales {
    align-self: start;
}
.sitasa-pedidook__total-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: #555;
}
.sitasa-pedidook__total-row--grand {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 2px solid #f0f0f0;
    font-size: 19px;
    font-weight: 800;
    color: #1a1a1a;
}
.sitasa-pedidook__total-row--grand span:last-child {
    color: #1e7e34;
}

/* Botones de acción */
.sitasa-pedidook__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 22px;
}
.sitasa-pedidook__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, transform .1s, box-shadow .15s;
}
.sitasa-pedidook__btn:hover { transform: translateY(-1px); }
.sitasa-pedidook__btn--pay {
    background: #FFC200;
    color: #1a1a1a;
    box-shadow: 0 4px 14px rgba(255,194,0,.4);
}
.sitasa-pedidook__btn--pay:hover { background: #e6af00; }
.sitasa-pedidook__btn--ghost {
    background: #fff;
    color: #333;
    border: 1px solid #e3e3e3;
}
.sitasa-pedidook__btn--ghost:hover { background: #f7f7f7; }
.sitasa-pedidook__btn--light {
    background: #f1f1f1;
    color: #444;
}
.sitasa-pedidook__btn--light:hover { background: #e6e6e6; }

/* Responsive */
@media (max-width: 860px) {
    .sitasa-pedidook__head {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .sitasa-pedidook__block--meta { text-align: left; }
    .sitasa-pedidook__order { align-items: flex-start; }
    .sitasa-pedidook__foot {
        grid-template-columns: 1fr;
    }
    .sitasa-pedidook__actions { justify-content: stretch; }
    .sitasa-pedidook__btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   ESTADO VACÍO GENÉRICO (categorías sin productos, etc.)
   Bloque: sitasa-vacio
   ========================================================================== */
.sitasa-vacio {
    padding: 40px 20px 70px;
}
.sitasa-vacio__box {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    padding: 50px 30px;
    border: 1px solid #ececec;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,.05);
}
.sitasa-vacio__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: #fff7dc;
    color: #FFC200;
    font-size: 40px;
}
.sitasa-vacio__box h3 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 800;
    color: #1a1a1a;
}
.sitasa-vacio__box p {
    margin: 0 auto 26px;
    max-width: 420px;
    color: #777;
    font-size: 15px;
    line-height: 1.6;
}
.sitasa-vacio__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.sitasa-vacio__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, transform .1s;
}
.sitasa-vacio__btn:hover { transform: translateY(-1px); }
.sitasa-vacio__btn--primary {
    background: #FFC200;
    color: #1a1a1a;
    box-shadow: 0 4px 14px rgba(255,194,0,.4);
}
.sitasa-vacio__btn--primary:hover { background: #e6af00; }
.sitasa-vacio__btn--ghost {
    background: #fff;
    color: #333;
    border: 1px solid #e3e3e3;
}
.sitasa-vacio__btn--ghost:hover { background: #f7f7f7; }