body {
    background-color: #fafafa;
}

.card-title {
    font-size: 1rem;
}

.navbar-brand {
    font-size: 1.4rem;
}

.btn-carrito-principal {
    background-color: var(--color-acento);
    color: var(--color-primario);
    border: none;
}

.btn-carrito-principal:hover,
.btn-carrito-principal:focus {
    background-color: color-mix(in srgb, var(--color-acento) 85%, black);
    color: var(--color-primario);
}

.btn-agregar-carrito {
    background-color: var(--color-acento, var(--color-primario));
    color: var(--color-primario);
    border: none;
}

.btn-agregar-carrito:hover,
.btn-agregar-carrito:focus {
    background-color: color-mix(in srgb, var(--color-acento, var(--color-primario)) 85%, black);
    color: var(--color-primario);
}

.btn-agregar-carrito:disabled {
    background-color: #ccc;
    color: #777;
}


/* ---------- Banner de portada ---------- */
.hero-banner {
    text-align: center;
    border-bottom: 1px solid color-mix(in srgb, var(--color-acento) 35%, white);
}
.hero-banner-img {
    display: block;
    width: 100%;
    max-width: 1100px;
    height: auto;
    margin: 0 auto;
}

/* ---------- Barra superior clara (se activa con NAVBAR_CLARA en config) ---------- */
.navbar-clara {
    border-bottom: 1px solid color-mix(in srgb, var(--color-acento) 35%, white);
}
.navbar-clara .btn-outline-light {
    color: var(--color-primario);
    border-color: var(--color-primario);
}
.navbar-clara .btn-outline-light:hover,
.navbar-clara .btn-outline-light:focus {
    background-color: var(--color-primario);
    color: #fff;
}
.navbar-clara .navbar-brand {
    color: var(--color-primario);
}
.navbar-clara .btn-carrito-principal {
    background-color: var(--color-primario) !important;
    color: #fff !important;
    border: none !important;
}
.navbar-clara .btn-carrito-principal:hover,
.navbar-clara .btn-carrito-principal:focus {
    background-color: color-mix(in srgb, var(--color-primario) 85%, black) !important;
}

/* ---------- Botones y pestañas con los colores de la marca ---------- */
.btn-primary {
    --bs-btn-bg: var(--color-primario);
    --bs-btn-border-color: var(--color-primario);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-primario) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-primario) 85%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-primario) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-primario) 75%, black);
    --bs-btn-disabled-bg: var(--color-primario);
    --bs-btn-disabled-border-color: var(--color-primario);
}
.nav-tabs .nav-link {
    color: var(--color-primario);
}
.nav-tabs .nav-link.active {
    color: #212529;
}


/* ---------- Adaptación a celulares y tablets ---------- */
.nav-logo { height: 80px; width: 80px; }
img { max-width: 100%; }
.table-responsive { -webkit-overflow-scrolling: touch; }

@media (max-width: 991.98px) {
    .nav-logo { height: 56px; width: 56px; }
    .navbar .btn { font-size: 1rem !important; padding: .4rem .8rem !important; }
}

@media (max-width: 575.98px) {
    .nav-logo { height: 44px; width: 44px; }
    .navbar { padding-top: .5rem !important; padding-bottom: .5rem !important; }
    .navbar .btn { font-size: .9rem !important; padding: .35rem .65rem !important; }
    .nav-acciones { width: 100%; justify-content: flex-end; }
    main.container h1 { font-size: 1.6rem; }
    #orden-select { width: 100% !important; }
    .card-img-top { height: 150px !important; }
    .card-body { padding: .75rem; }
    .modal-dialog { margin: .5rem; }
    .modal-body { padding: .75rem; }
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
    .nav-tabs .nav-link { padding: .5rem .75rem; }
    .table { font-size: .85rem; }
    #aviso-cookies .btn { width: 100%; }
    footer a { display: inline-block; margin: .15rem .5rem; }
}