/* =====================================================================
   Colores institucionales de zatarra (los mismos del logo):
     café    #754E30  → principal: botones, menú activo, enlaces
     naranja #F79741  → acento (y enlaces en modo oscuro, donde el café no se lee)
   La plantilla trae su color en varias variables; aquí se cambian todas.
   ===================================================================== */
:root,
[data-bs-theme=dark] {
    --zat-cafe: #754E30;
    --zat-cafe-oscuro: #5C3D25;
    --zat-naranja: #F79741;
    --bs-primary: #754E30;
    --bs-primary-rgb: 117, 78, 48;
    --bs-primary-bg-subtle: rgba(117, 78, 48, .12);
    --bs-primary-border-subtle: rgba(117, 78, 48, .35);
    --bs-primary-text-emphasis: #5C3D25;
    --bs-link-color: #754E30;
    --bs-link-color-rgb: 117, 78, 48;
    --bs-link-hover-color: #5C3D25;
    --bs-link-hover-color-rgb: 92, 61, 37;
    --bs-focus-ring-color: rgba(117, 78, 48, .25);
}

[data-bs-theme=dark] {
    --bs-primary-text-emphasis: #F9AE6A;
    --bs-link-color: #F79741;
    --bs-link-color-rgb: 247, 151, 65;
    --bs-link-hover-color: #F9AE6A;
    --bs-link-hover-color-rgb: 249, 174, 106;
}

/* En modo oscuro el menú activo va en naranja: el café se pierde sobre gris oscuro */
[data-bs-theme=dark] #sidebar-menu ul li.mm-active > a,
[data-bs-theme=dark] #sidebar-menu ul li a.active,
[data-bs-theme=dark] #sidebar-menu ul li.mm-active > a i,
[data-bs-theme=dark] #sidebar-menu ul li a.active i {
    color: var(--zat-naranja) !important;
}

/* Logo de zatarra en la barra superior (es vertical: se le da su espacio) */
.navbar-brand-box .logo img {
    object-fit: contain;
}

a {
    color: var(--bs-link-color);
}

    a:hover {
        color: var(--bs-link-hover-color);
    }

/* ---------- Botones ---------- */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        filter: brightness(.9);
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
    }

.btn-soft-primary {
    color: var(--bs-primary);
    background-color: rgba(117, 78, 48, .1);
    border-color: transparent;
}

    .btn-soft-primary:hover, .btn-soft-primary:focus, .btn-soft-primary:active {
        color: #fff !important;
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
    }

.btn-outline-primary {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

    .btn-outline-primary:hover {
        color: #fff;
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
    }

/* ---------- Colores de apoyo ---------- */
.bg-primary {
    background-color: var(--bs-primary) !important;
}

.text-primary {
    color: var(--bs-primary) !important;
}

.bg-primary-subtle {
    background-color: var(--bs-primary-bg-subtle) !important;
}

.border-primary {
    border-color: var(--bs-primary) !important;
}

.alert-primary {
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
}

/* ---------- Formularios ---------- */
.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .15rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .15rem var(--bs-focus-ring-color);
}

/* ---------- Tablas (DataTables) ---------- */
.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.page-link {
    color: var(--bs-primary);
}

/* ---------- Menú lateral ---------- */
#sidebar-menu ul li a:hover,
#sidebar-menu ul li a:hover i,
#sidebar-menu ul li.mm-active > a, #sidebar-menu ul li a.active,
#sidebar-menu ul li.mm-active > a i, #sidebar-menu ul li a.active i,
#sidebar-menu ul li ul.sub-menu li a:hover,
#sidebar-menu ul li ul.sub-menu li.mm-active > a {
    color: var(--bs-primary) !important;
}


/* ---------- Tarjetas de pendientes en Inicio ---------- */
.tz-pendiente {
    display: block;
    transition: transform .15s, box-shadow .15s;
}

    .tz-pendiente:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    }

.tz-pendiente-cifra {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.tz-pendiente.con-pendientes {
    border-left: 4px solid var(--bs-warning);
}

.tz-pendiente.urgente {
    border-left: 4px solid var(--bs-danger);
}

/* ---------- Detalle del pedido ---------- */
.tz-datos dt {
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.tz-datos dd {
    margin-bottom: .6rem;
    word-break: break-word;
}

.tz-copiable {
    cursor: pointer;
    border-bottom: 1px dashed currentColor;
}

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