:root{
    --verde:#2f6f4e;
    --verde-oscuro:#214d38;
    --verde-suave:#eff8f3;
    --texto:#1f2937;
    --borde:#d7e8dd;
    --sombra:0 10px 30px rgba(33,77,56,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:Arial, Helvetica, sans-serif;
    color:var(--texto);
    background:#f8fbf9;
}

.nav-verde{
    background:linear-gradient(90deg, var(--verde-oscuro), var(--verde));
    box-shadow:0 2px 15px rgba(0,0,0,.08);
}

.navbar-brand{letter-spacing:.2px}
.navbar .nav-link{color:rgba(255,255,255,.9)}
.navbar .nav-link:hover{color:#fff}
.navbar .btn{white-space:nowrap}

.hero-local {
    position: relative;
    min-height: 86vh;
    display: flex;
    align-items: center;
    background:
        linear-gradient(rgba(12,29,20,.55), rgba(12,29,20,.55)),
        url('../Fotos/local.png') center center/cover no-repeat;
}
.hero-overlay{display:none}
.hero-content{
    position:relative;
    z-index:1;
    padding:5rem 0;
}

.section-title{
    font-weight:700;
    color:var(--verde-oscuro);
}

.card-producto{
    border:1px solid var(--borde);
    box-shadow:var(--sombra);
    border-radius:18px;
    transition:transform .2s ease, box-shadow .2s ease;
}
.card-producto:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 36px rgba(33,77,56,.12);
}
.producto-badge{
    display:inline-flex;
    width:max-content;
    border-radius:999px;
    padding:.35rem .75rem;
    font-size:.78rem;
    font-weight:700;
}
.precio{
    color:var(--verde-oscuro);
    font-size:1.08rem;
}

.contact-box,
.panel-card,
.login-card,
.stat-box{
    background:#fff;
    border:1px solid var(--borde);
    border-radius:18px;
    box-shadow:var(--sombra);
}

.contact-box,
.panel-card{padding:1.25rem}
.login-wrap{
    min-height:calc(100vh - 80px);
    display:flex;
    align-items:center;
    background:linear-gradient(180deg, #f6fbf8, #ffffff);
    padding:2rem 0;
}

.stat-box{
    text-align:center;
    padding:1.2rem .8rem;
}
.stat-box span{
    display:block;
    font-size:2rem;
    font-weight:700;
    color:var(--verde-oscuro);
}
.stat-box small{
    color:#64748b;
    font-weight:600;
}

.lista-logs{
    display:grid;
    gap:.75rem;
}
.log-item{
    padding:.75rem;
    border:1px solid var(--borde);
    border-radius:12px;
    background:#fbfdfb;
}

.footer-verde{
    background:var(--verde-oscuro);
    color:#fff;
    margin-top:3rem;
}

.form-control,
.form-select{
    border-radius:12px;
    border-color:#cfe0d5;
}
.form-control:focus,
.form-select:focus{
    border-color:var(--verde);
    box-shadow:0 0 0 .2rem rgba(47,111,78,.15);
}

.btn{
    border-radius:12px;
}

.modal-content{
    border-radius:18px;
    border:1px solid var(--borde);
}

.alert-auto{
    border-radius:14px;
}

@media (max-width: 768px){
    .hero-local{
        min-height:72vh;
        background-position:center center;
    }
    .hero-content{
        padding:4rem 0;
    }
}

.sticky-cat {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
}

.cat-pill {
    border-radius: 999px;
    white-space: nowrap;
    font-size: .82rem;
    font-weight: 600;
    padding: .3rem .85rem;
    transition: background .15s, color .15s;
}
.cat-pill:hover,
.cat-pill.active {
    background: var(--verde);
    color: #fff;
    border-color: var(--verde);
}

.cat-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--borde);
}

.cat-icono {
    font-size: 2.4rem;
    line-height: 1;
}

.seccion-cat:nth-child(even) {
    background: var(--verde-suave);
}

.card-agotado {
    opacity: .72;
}
.card-agotado .precio {
    color: #94a3b8;
}


.sticky-cat .d-flex::-webkit-scrollbar {
    height: 4px;
}
.sticky-cat .d-flex::-webkit-scrollbar-thumb {
    background: var(--borde);
    border-radius: 99px;
}
.envio-box {
    background: #f0faf4;
    border: 1.5px solid var(--verde);
    border-radius: 14px;
    padding: 1rem 1.25rem;
}

.envio-box .form-check-input:checked {
    background-color: var(--verde);
    border-color: var(--verde);
}

.total-preview {
    background: #fff;
    border: 1.5px solid var(--borde);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    animation: fadeIn .2s ease;
}

.total-grande {
    font-size: 1.5rem;
    color: var(--verde-oscuro);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cart-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #ef4444;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--verde-oscuro);
}
.btn-add-cart {
    font-size: .8rem;
    padding: .3rem .75rem;
    border-radius: 10px;
    white-space: nowrap;
}
.qty-ctrl button {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 8px;
    line-height: 1;
}
.cart-table th,
.cart-table td {
    vertical-align: middle;
}
.checkout-card {
    background: #fff;
    border: 1.5px solid var(--borde);
    border-radius: 18px;
    box-shadow: var(--sombra);
    padding: 1.5rem;
}
.pago-opt input:checked + label {
    background: var(--verde-suave);
    border-color: var(--verde);
    color: var(--verde-oscuro);
    font-weight: 700;
}
.pago-opt label {
    border: 1.5px solid var(--borde);
    border-radius: 12px;
    padding: .55rem 1rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.pago-opt input { display: none; }
.total-grande-cart {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--verde-oscuro);
}
.confirm-icon {
    font-size: 4rem;
}
.confirm-card {
    max-width: 520px;
    margin: 0 auto;
    background: #fff;
    border: 1.5px solid var(--borde);
    border-radius: 22px;
    box-shadow: var(--sombra);
    padding: 2.5rem 2rem;
    text-align: center;
}