/* =========================================================================
   TOKENS DE MARCA
   Unicos colores de acento del sitio: los dos colores de marca de Boann.
   No se introduce ningun color de acento nuevo.
   ========================================================================= */
:root {
    --brand-dark: #ac7527;
    --brand-dark-h: 33; /* hsl hue de #ac7527, usado para derivar tintas */
    --brand-light: #bc9969;

    --brand-dark-hover: #955f1c;
    --brand-dark-active: #7d4f18;
    --brand-dark-subtle: rgba(172, 117, 39, 0.08);
    --brand-dark-subtle-strong: rgba(172, 117, 39, 0.16);
    --brand-dark-border: rgba(172, 117, 39, 0.35);

    --brand-light-hover: #ab875a;
    --brand-light-subtle: rgba(188, 153, 105, 0.14);

    /* texto sobre los dos acentos: ambos son suficientemente oscuros para blanco */
    --on-brand: #fff8f0;

    /* estados semanticos, re-entonados hacia la calidez de la marca en vez
       del verde/rojo saturado por defecto de Bootstrap */
    --state-success: #4c7a3d;
    --state-success-subtle: rgba(76, 122, 61, 0.12);
    --state-danger: #a8402f;
    --state-danger-subtle: rgba(168, 64, 47, 0.1);

    /* neutrales - modo claro */
    --surface: #fffdfa;
    --surface-rgb: 255, 253, 250;
    --surface-raised: #ffffff;
    --surface-sunken: #f4efe7;
    --border-color: #e6dccb;
    --text-body: #2c2418;
    --text-muted: #7a6e5c;

    /* forma */
    --radius-sm: 0.375rem;
    --radius: 0.5rem;
    --radius-lg: 0.75rem;

    /* sombra tintada con la marca, no gris neutro */
    --shadow-sm: 0 1px 2px rgba(124, 79, 24, 0.08);
    --shadow: 0 4px 16px rgba(124, 79, 24, 0.1);
    --shadow-lg: 0 12px 32px rgba(124, 79, 24, 0.14);

    /* tipografia: sin fuentes externas (no hay build step ni activos
       auto-alojados en el proyecto), pila de sistema cuidada */
    --font-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    color-scheme: light;
}

body.dark-mode {
    color-scheme: dark;
    --surface: #1b1712;
    --surface-rgb: 27, 23, 18;
    --surface-raised: #241f18;
    --surface-sunken: #14110d;
    --border-color: #3a3225;
    --text-body: #f1e9db;
    --text-muted: #b6a98f;

    --brand-dark-subtle: rgba(188, 153, 105, 0.16);
    --brand-dark-subtle-strong: rgba(188, 153, 105, 0.26);
    --brand-dark-border: rgba(188, 153, 105, 0.4);
    --brand-light-subtle: rgba(188, 153, 105, 0.22);

    --state-success-subtle: rgba(76, 122, 61, 0.22);
    --state-danger-subtle: rgba(168, 64, 47, 0.2);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* =========================================================================
   OVERRIDE DE VARIABLES DE BOOTSTRAP
   Para que .btn-primary, .text-primary, focus rings, etc. hereden la marca
   automaticamente en vez del azul por defecto de Bootstrap.
   ========================================================================= */
:root,
body.dark-mode {
    --bs-primary: var(--brand-dark);
    --bs-primary-rgb: 172, 117, 39;
    --bs-secondary: var(--brand-light);
    --bs-secondary-rgb: 188, 153, 105;
    --bs-success: var(--state-success);
    --bs-success-rgb: 76, 122, 61;
    --bs-danger: var(--state-danger);
    --bs-danger-rgb: 168, 64, 47;
    --bs-link-color: var(--brand-dark);
    --bs-link-hover-color: var(--brand-dark-hover);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-body-font-family: var(--font-sans);
    --bs-body-bg: var(--surface);
    --bs-body-bg-rgb: var(--surface-rgb);
    --bs-body-color: var(--text-body);
    --bs-border-color: var(--border-color);
    --bs-border-color-translucent: var(--border-color);
}

body {
    font-family: var(--font-sans);
    background-color: var(--surface);
    color: var(--text-body);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* empuja el footer al fondo cuando el contenido de la pagina no llena el
   viewport, en vez de flotar a media altura */
body > .section {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
/* .container es el unico hijo directo de .section con contenido real en
   las vistas paginadas - se encadena el mismo truco de flex-column para
   que .pager-wrapper (ver mas abajo) pueda empujarse al fondo con
   margin-top:auto en vez de quedar a media pagina en listados cortos */
body > .section > .container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
body > footer {
    flex-shrink: 0;
}

a {
    color: var(--brand-dark);
}
a:hover {
    color: var(--brand-dark-hover);
}

/* tipografia: escala disciplinada, tracking mas cerrado en titulares.
   se reduce respecto al default de Bootstrap (h1 2.5rem/h2 2rem...), que
   resultaba desproporcionado para una app de trabajo, no una landing */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
}
h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.4rem; }
h3, .h3 { font-size: 1.2rem; }
h4, .h4 { font-size: 1.1rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }
.text-muted {
    color: var(--text-muted) !important;
}

/* botones: mismo radio en todo el sitio, feedback tactil consistente */
.btn {
    border-radius: var(--radius);
    transition: transform 0.08s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn:active {
    transform: translateY(1px);
}
.btn-primary {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: var(--on-brand);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-dark-hover);
    border-color: var(--brand-dark-hover);
    color: var(--on-brand);
}
.btn-primary:active {
    background-color: var(--brand-dark-active) !important;
    border-color: var(--brand-dark-active) !important;
}
.btn-outline-primary {
    color: var(--brand-dark);
    border-color: var(--brand-dark);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: var(--on-brand);
}
.btn-outline-secondary {
    color: var(--text-body);
    border-color: var(--border-color);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--surface-sunken);
    border-color: var(--brand-dark-border);
    color: var(--text-body);
}
.btn-success {
    background-color: var(--state-success);
    border-color: var(--state-success);
}
.btn-dark {
    background-color: var(--text-body);
    border-color: var(--text-body);
}
body.dark-mode .btn-dark {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: var(--on-brand);
}
/* .btn-close es un SVG oscuro fijo: invisible sobre superficies oscuras */
body.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* enfoque visible y consistente en todo elemento interactivo */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
a:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--brand-dark-subtle-strong);
    border-color: var(--brand-dark-border);
}

/* formularios */
.form-control,
.form-select {
    border-radius: var(--radius-sm);
    border-color: var(--border-color);
    background-color: var(--surface-raised);
    color: var(--text-body);
}
.form-control:disabled,
.form-select:disabled {
    background-color: var(--surface-sunken);
}
.form-floating > label {
    color: var(--text-muted);
}
.is-invalid,
.danger {
    color: var(--state-danger) !important;
}
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--state-danger);
}

/* cards */
.card {
    border-radius: var(--radius-lg);
    border-color: var(--border-color);
    background-color: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

/* tablas */
.table {
    color: var(--text-body);
    --bs-table-bg: var(--surface-raised);
}
.table > :not(caption) > * > * {
    border-color: var(--border-color);
}

/* paginacion (productos.php): separacion clara entre paginas + radio propio.
   Bootstrap fija --bs-pagination-active-bg/--bs-pagination-focus-box-shadow
   como valores azules literales (no heredan de --bs-primary), asi que se
   sobreescriben aqui directamente en vez de a traves de las variables. */
.pagination {
    gap: 0.25rem;
}
/* envoltorio de $pager->links() en toda vista paginada (tienda y admin):
   empuja la paginacion al fondo del bloque de contenido (que ya se
   estira a la altura disponible via .section/.container o
   .admin-content, ver arriba) en vez de quedar a media pagina en
   listados cortos - el padding-top mantiene un respiro minimo cuando el
   listado ya es lo bastante largo para no dejar hueco que empujar. */
.pager-wrapper {
    margin-top: auto;
    padding-top: 1.5rem;
}
.page-link {
    background-color: var(--surface-raised);
    border-radius: var(--radius-sm) !important;
    border-color: var(--border-color);
    color: var(--text-body);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.page-link:hover {
    background-color: var(--brand-dark-subtle);
    border-color: var(--brand-dark-border);
    color: var(--brand-dark);
}
.page-link:focus {
    background-color: var(--surface-raised);
    color: var(--text-body);
    border-color: var(--brand-dark-border);
    box-shadow: 0 0 0 0.2rem var(--brand-dark-subtle-strong);
}
.page-link:active {
    transform: translateY(1px);
}
.page-item.active .page-link {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: var(--on-brand);
    box-shadow: var(--shadow-sm);
}
.page-item.disabled .page-link {
    color: var(--text-muted);
    background-color: var(--surface-sunken);
    border-color: var(--border-color);
    opacity: 0.6;
}

/* accordion (home.php "Ultimas Noticias"): mismo problema que la paginacion
   de arriba, --bs-accordion-bg/--bs-accordion-active-* son literales fijos
   (blanco/azul), no heredan del tema, asi que en modo oscuro se veian
   paneles blancos con texto casi ilegible dentro de una pagina oscura. */
.accordion {
    --bs-accordion-color: var(--text-body);
    --bs-accordion-bg: var(--surface-raised);
    --bs-accordion-btn-focus-border-color: var(--brand-dark-border);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem var(--brand-dark-subtle-strong);
    --bs-accordion-active-color: var(--brand-dark);
    --bs-accordion-active-bg: var(--brand-dark-subtle);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var(--brand-dark)'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* =========================================================================
   CABECERA Y NAVEGACION
   ========================================================================= */
header {
    background-color: var(--brand-dark);
    box-shadow: var(--shadow);
}
.color-fondo {
    background-color: var(--brand-dark);
}
header .dropdown-toggle,
header .form-check-label {
    color: var(--on-brand);
}
header .form-check-input:checked {
    background-color: var(--brand-light);
    border-color: var(--brand-light);
}

.menu-principal {
    background-color: var(--brand-dark-active);
    margin-top: -1px;
    padding: 0 10px;
    width: 100%;
    min-height: 42px;
}
.menu-principal .navbar-nav {
    align-items: stretch;
}
.menu-principal .nav-link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255, 248, 240, 0.85);
    padding: 0.5rem 0.85rem;
    font-size: 0.875rem;
    line-height: 1.2;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.menu-principal .nav-link .fi {
    font-size: 0.95em;
}
.menu-principal .navbar-toggler {
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
}
.menu-principal .nav-link:hover {
    color: var(--on-brand);
    background-color: rgba(255, 255, 255, 0.08);
}
.menu-principal .nav-link.active {
    color: var(--on-brand);
    background-color: rgba(0, 0, 0, 0.18);
    font-weight: 600;
}
/* boton de acceso al panel de administracion: solo visible para roles con
   permiso (ver menu.php), se distingue del resto de enlaces del menu
   principal sin introducir un color de acento nuevo */
.menu-principal .nav-link-admin {
    font-weight: 600;
    border-radius: var(--radius-sm);
    margin: 0.25rem 0;
}
.menu-principal .nav-link-admin,
.menu-principal .nav-link-admin:hover {
    background-color: rgba(0, 0, 0, 0.18);
}
@media (min-width: 768px) {
    .menu-principal {
        background-color: var(--brand-light);
    }
    .menu-principal .nav-link {
        color: rgba(44, 36, 24, 0.75);
    }
    .menu-principal .nav-link:hover {
        color: var(--text-body);
        background-color: rgba(0, 0, 0, 0.06);
    }
    .menu-principal .nav-link.active {
        color: var(--text-body);
        background-color: rgba(0, 0, 0, 0.1);
    }
}

/* =========================================================================
   PANEL DE ADMINISTRACION (sidebar)
   ========================================================================= */
body > .admin-shell {
    flex: 1 0 auto;
    display: flex;
    align-items: stretch;
    width: 100%;
}
.admin-sidebar {
    width: 240px;
    flex-shrink: 0;
    /* Bootstrap's own .offcanvas-md rule forces background-color:transparent
       !important from the md breakpoint up (part of its responsive-offcanvas
       recipe) - must out-!important it here or the panel background
       disappears on desktop, taking all contrast with it in light mode. */
    background-color: var(--brand-dark-active) !important;
}
.admin-sidebar .offcanvas-body {
    /* Bootstrap only sets flex-direction:column on .offcanvas-md itself
       below the md breakpoint; from md up .offcanvas-body is left at the
       flexbox default (row), which lays the nav list and the "volver a
       tienda" link side by side and overflows the link out over the main
       content instead of stacking them. */
    flex-direction: column;
}
.admin-sidebar .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--on-brand);
}
.admin-sidebar .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
.admin-sidebar .admin-sidebar-title {
    color: rgba(255, 248, 240, 0.6);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1rem 1.25rem 0.5rem;
}
.admin-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255, 248, 240, 0.85);
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.admin-sidebar .nav-link:hover {
    color: var(--on-brand);
    background-color: rgba(255, 255, 255, 0.08);
}
.admin-sidebar .nav-link.active {
    color: var(--on-brand);
    background-color: rgba(0, 0, 0, 0.18);
    border-left-color: var(--on-brand);
    font-weight: 600;
}
.admin-sidebar-back {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
/* a partir de md el sidebar deja de ser un cajon movil y pasa a ser la
   columna estatica visible en todo momento junto al menu-principal de
   tienda - se le da el mismo tratamiento de color que ese menu en
   escritorio (fondo claro + texto oscuro) en vez del oscuro pensado para
   el cajon movil, para que ambos menus del sitio luzcan consistentes. */
@media (min-width: 768px) {
    .admin-sidebar {
        background-color: var(--brand-light) !important;
    }
    .admin-sidebar .admin-sidebar-title {
        color: rgba(44, 36, 24, 0.55);
    }
    .admin-sidebar .nav-link {
        color: rgba(44, 36, 24, 0.75);
    }
    .admin-sidebar .nav-link:hover {
        color: var(--text-body);
        background-color: rgba(0, 0, 0, 0.06);
    }
    .admin-sidebar .nav-link.active {
        color: var(--text-body);
        background-color: rgba(0, 0, 0, 0.1);
        border-left-color: var(--text-body);
    }
    .admin-sidebar-back {
        border-top-color: rgba(0, 0, 0, 0.12);
    }
}
.admin-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
/* footer.php trae su propio margin-top (mt-5) para separarse del
   contenido en las paginas de tienda - en admin ese hueco fijo quedaba
   por debajo de .admin-shell (que ya se estira a la altura disponible,
   ver mas abajo) dejando la barra lateral "flotando" antes de llegar al
   pie. Se anula aqui para que el sidebar llegue pegado al pie; el
   respiro visual lo da el padding de .admin-content en su lugar. */
.admin-shell + footer {
    /* footer.php trae la clase Bootstrap mt-5, y las utilidades de
       Bootstrap son !important por diseno - sin !important aqui esta
       regla pierde siempre contra esa clase, sin importar el orden o
       la especificidad. */
    margin-top: 0 !important;
}

/* =========================================================================
   PIE DE PAGINA
   ========================================================================= */
footer {
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--surface-sunken);
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
}
footer a {
    color: var(--brand-dark);
}

/* =========================================================================
   MODO OSCURO / CLARO (compatibilidad con las clases ya usadas en template.php)
   ========================================================================= */
.dark-mode {
    background-color: var(--surface);
    color: var(--text-body);
}
.light-mode {
    background-color: var(--surface);
    color: var(--text-body);
}

/* =========================================================================
   PANEL DE CONTROL (home.php)
   Las 5 tarjetas del dashboard comparten un unico lenguaje visual (misma
   superficie/radio/sombra que .producto-card y .mensaje-card) en vez de
   bordes de distinto color/estilo por tarjeta.
   ========================================================================= */
.dashboard-card {
    background-color: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* =========================================================================
   MENSAJES (mensajes.php)
   Tablon tipo blog: tarjeta horizontal (imagen + texto), mismo lenguaje
   visual que las tarjetas de producto/pedido (superficie, radio, sombra).
   ========================================================================= */
.mensajes-filtros {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.mensajes-filtro-busqueda {
    flex: 1 1 220px;
    min-width: 180px;
}
.mensajes-filtros input[type="date"] {
    flex: 0 0 auto;
    width: auto;
}
.mensajes-blog {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.mensaje-card {
    display: flex;
    background-color: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.mensaje-card:hover {
    box-shadow: var(--shadow);
    border-color: var(--brand-dark-border);
}
.mensaje-img-wrap {
    position: relative;
    flex: 0 0 220px;
    background-color: var(--surface-sunken);
    border: none;
    padding: 0;
    display: block;
    cursor: zoom-in;
}
.mensaje-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 160px;
    object-fit: cover;
}
.mensaje-card.mensaje-leido .mensaje-img {
    opacity: 0.45;
}
.mensaje-img-zoom-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(44, 36, 24, 0);
    color: transparent;
    font-size: 1.4rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.mensaje-img-wrap:hover .mensaje-img-zoom-hint {
    background-color: rgba(44, 36, 24, 0.25);
    color: var(--on-brand);
}
.mensaje-leido-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem;
    background-color: rgba(44, 36, 24, 0.5);
    color: var(--on-brand);
    font-weight: 600;
    font-size: 0.9rem;
}
.mensaje-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
}
.mensaje-card.mensaje-leido .mensaje-body {
    opacity: 0.65;
}
.mensaje-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}
.mensaje-titulo {
    margin-bottom: 0.5rem;
}
.mensaje-texto {
    color: var(--text-body);
    margin-bottom: 0.75rem;
}
.btnLeerMensaje {
    align-self: flex-start;
}

@media (max-width: 767.98px) {
    .mensaje-card {
        flex-direction: column;
    }
    .mensaje-img-wrap {
        flex-basis: auto;
        width: 100%;
        height: 160px;
    }
}

/* lightbox de la imagen de un mensaje: solo la foto, sin chrome de tarjeta */
.mensaje-imagen-modal-content {
    background-color: transparent;
    border: none;
    box-shadow: none;
}
.mensaje-imagen-modal-img {
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    background-color: var(--surface-sunken);
}
/* el circulo de fondo va en un wrapper aparte: .btn-close en modo oscuro se
   invierte via filter (ver body.dark-mode .btn-close mas abajo), y ese
   filter tambien afectaria a un background-color puesto directamente sobre
   el propio boton, "quemando" el icono a blanco solido junto al fondo */
.mensaje-imagen-modal-close-wrap {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    z-index: 1;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-raised);
    border-radius: 50%;
    box-shadow: var(--shadow);
}
.mensaje-imagen-modal-close-wrap .btn-close {
    position: static;
    margin: 0;
    padding: 0.35em;
    opacity: 1;
}

.btnDisabled {
    pointer-events: none;
    opacity: 0.5;
}

/* ESTILO PARA LOS INPUT NUMBER */
input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    width: 2.5em;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    width: 2.5em;
}

/* =========================================================================
   CATALOGO DE PRODUCTOS (productos.php)
   Tarjeta clicable: la fila superior (imagen, info, precio) despliega hacia
   abajo un panel con los select de combinacion, al estilo de "Hacer Pedido".
   ========================================================================= */
.producto-card {
    margin-bottom: 0.75rem;
    background-color: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.producto-card:hover {
    box-shadow: var(--shadow);
    border-color: var(--brand-dark-border);
}
.producto-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1rem;
    padding: 0.85rem 1.25rem;
    cursor: pointer;
    user-select: none;
}
.producto-card-header:hover {
    background-color: var(--surface-sunken);
}
.producto-img-wrap {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: var(--radius);
    overflow: hidden;
    background-color: var(--surface-sunken);
}
.producto-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.producto-info {
    flex: 2 1 220px;
    min-width: 0;
}
.producto-nombre {
    margin-bottom: 0.15rem;
}
.producto-ref {
    font-size: 0.8rem;
}
.producto-precio {
    flex: 0 0 auto;
    padding-left: 1.1rem;
    border-left: 1px solid var(--border-color);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--brand-dark);
    white-space: nowrap;
}
.producto-toggle-icon {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}
.producto-card-header[aria-expanded="true"] .producto-toggle-icon {
    transform: rotate(180deg);
}
.producto-card-body {
    border-top: 1px solid var(--border-color);
    background-color: var(--surface-sunken);
    padding: 1rem 1.25rem;
}
.miniPedido {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.divGruposCatalogo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.selectGrupoCatalogo {
    width: auto;
    min-width: 130px;
}
.camposFinalesCatalogo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.camposFinalesCatalogo input[name="txtPersonalizacion"] {
    min-width: 160px;
}

@media (max-width: 767.98px) {
    .producto-precio {
        border-left: none;
        padding-left: 0;
        margin-left: auto;
    }
}

/* =========================================================================
   CARRITO FLOTANTE (productos.php)
   Panel anclado a la esquina inferior derecha, visible durante el scroll.
   ========================================================================= */
.carrito-flotante {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}
.carrito-flotante-toggle {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background-color: var(--brand-dark);
    color: var(--on-brand);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: background-color 0.15s ease, transform 0.08s ease;
}
.carrito-flotante-toggle:hover {
    background-color: var(--brand-dark-hover);
}
.carrito-flotante-toggle:active {
    transform: translateY(1px);
}
.carrito-flotante-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 11px;
    background-color: var(--state-success);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--surface-raised);
}
.carrito-flotante-panel {
    width: 380px;
    max-width: calc(100vw - 2rem);
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    background-color: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
/* misma especificidad que .collapse.show de bootstrap (display:block);
   al cargar despues en el cascade, esta gana y mantiene el panel en flex */
.carrito-flotante-panel.show {
    display: flex;
}
.carrito-flotante-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    background-color: var(--surface-sunken);
    border-bottom: 1px solid var(--border-color);
}
.carrito-flotante-body {
    padding: 0.25rem 1rem;
    overflow-y: auto;
}
.carrito-flotante-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
}

/* lineas del carrito (lineas-pedido.php): fila flexible, se usa tanto en el
   panel flotante estrecho como en el resumen a ancho completo de pedido.php */
.linea-pedido {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-color);
}
.linea-pedido:last-child {
    border-bottom: none;
}
.linea-pedido-img {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background-color: var(--surface-sunken);
}
.linea-pedido-info {
    flex: 1 1 140px;
    min-width: 0;
}
.linea-pedido-nombre {
    font-weight: 600;
    font-size: 0.9rem;
}
.linea-pedido-detalle {
    font-size: 0.8rem;
}
.linea-pedido-cantidad {
    flex: 0 0 auto;
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.linea-pedido-total {
    flex: 0 0 auto;
    min-width: 64px;
    text-align: right;
    font-weight: 700;
}
.linea-pedido-eliminar {
    flex: 0 0 auto;
    color: var(--state-danger);
}
.linea-pedido-eliminar:hover {
    color: var(--state-danger);
    opacity: 0.75;
}

/* pie de totales del resumen (subtotal/portes/IVA/recargo/total), ver
   PedidosService::calcularTotales() */
.pedido-totales {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-color);
}
.pedido-totales-fila {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 0.15rem 0;
}
.pedido-totales-total {
    margin-top: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    font-weight: 700;
    font-size: 1rem;
}

/* =========================================================================
   HACER PEDIDO (pedido.php)
   Formulario de linea en una unica fila flex (evita el desajuste vertical
   que producia el grid de Bootstrap con columnas de distinta altura) mas
   la miniatura de vista previa del producto elegido.
   ========================================================================= */
.pedido-form-card,
.pedido-resumen-card {
    background-color: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.25rem;
}
.pedido-linea-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.pedido-img-wrap {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    overflow: hidden;
    background-color: var(--surface-sunken);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pedido-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pedido-img-placeholder {
    font-size: 1.4rem;
    color: var(--text-muted);
}
.pedido-campo-producto {
    flex: 1 1 200px;
    min-width: 180px;
}
.pedido-combinaciones {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.pedido-grupo .selectize-control {
    min-width: 150px;
}

/* Selectize (selectize.bootstrap5.css) hardcodes its own colors as literal
   hex values, not CSS variables - it never picks up the brand/surface token
   remap, so every Selectize-wrapped <select> (product/combination pickers
   in the order wizard and catalog) stayed a bright white box in dark mode. */
body.dark-mode .selectize-input,
body.dark-mode .selectize-input input,
body.dark-mode .selectize-dropdown {
    color: var(--text-body);
}
body.dark-mode .selectize-input,
body.dark-mode .selectize-input.full,
body.dark-mode .selectize-control.single .selectize-input.input-active,
body.dark-mode .selectize-control .selectize-input.disabled {
    background: var(--surface-raised);
}
body.dark-mode .selectize-input {
    border-color: var(--border-color);
}
body.dark-mode .selectize-dropdown,
body.dark-mode .selectize-dropdown.form-control {
    background: var(--surface-raised);
    border-color: var(--border-color);
}
body.dark-mode .selectize-dropdown .optgroup-header {
    background: var(--surface-raised);
    color: var(--text-muted);
}
body.dark-mode .selectize-dropdown .active {
    background-color: var(--brand-dark-subtle-strong);
    color: var(--text-body);
}
body.dark-mode .selectize-dropdown .create {
    color: var(--text-muted);
}
body.dark-mode .selectize-input.dropdown-active::before {
    background: var(--surface-raised);
}
body.dark-mode .selectize-control.single .selectize-input:after {
    border-color: var(--text-body) transparent transparent transparent;
}
body.dark-mode .selectize-control.single .selectize-input.dropdown-active:after {
    border-color: transparent transparent var(--text-body) transparent;
}
.pedido-campo-personalizacion {
    flex: 1 1 180px;
    min-width: 160px;
}
#btnAnadirLinea {
    flex: 0 0 auto;
}
.pedido-resumen-card h4 {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .pedido-campo-producto,
    .pedido-combinaciones,
    .pedido-campo-personalizacion {
        flex-basis: 100%;
    }
}

/* movimiento reducido: cualquier transicion anadida se desactiva */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}