/*
 * Tema La Nota POS — color primario #ffb101.
 *
 * Sobreescribe las variables Bootstrap del template Modernize. Cargar
 * DESPUÉS de /modernize/css/styles.css. Usa la misma especificidad que
 * Modernize ([data-color-theme]:root) para ganar.
 */
:root,
[data-bs-theme="light"],
[data-color-theme]:root {
    --bs-primary: #ffb101;
    --bs-primary-rgb: 255, 177, 1;
    --bs-primary-text-emphasis: #664700;
    --bs-primary-bg-subtle: #fff4dc;
    --bs-primary-border-subtle: #ffd99a;

    --bs-link-color: #ffb101;
    --bs-link-hover-color: #d99700;
    --bs-link-color-rgb: 255, 177, 1;
    --bs-link-hover-color-rgb: 217, 151, 0;
}

/* Botón primario: misma especificidad que Modernize. */
[data-color-theme]:root .btn-primary,
.btn-primary {
    --bs-btn-color: #2a3547 !important;
    --bs-btn-bg: #ffb101 !important;
    --bs-btn-border-color: #ffb101 !important;
    --bs-btn-hover-color: #2a3547 !important;
    --bs-btn-hover-bg: #e69f00 !important;
    --bs-btn-hover-border-color: #e69f00 !important;
    --bs-btn-focus-shadow-rgb: 255, 177, 1 !important;
    --bs-btn-active-color: #2a3547 !important;
    --bs-btn-active-bg: #cc8d00 !important;
    --bs-btn-active-border-color: #cc8d00 !important;
    --bs-btn-disabled-color: #2a3547 !important;
    --bs-btn-disabled-bg: #ffd382 !important;
    --bs-btn-disabled-border-color: #ffd382 !important;
}

[data-color-theme]:root .btn-outline-primary,
.btn-outline-primary {
    --bs-btn-color: #ffb101 !important;
    --bs-btn-border-color: #ffb101 !important;
    --bs-btn-hover-color: #2a3547 !important;
    --bs-btn-hover-bg: #ffb101 !important;
    --bs-btn-hover-border-color: #ffb101 !important;
    --bs-btn-active-color: #2a3547 !important;
    --bs-btn-active-bg: #ffb101 !important;
    --bs-btn-active-border-color: #ffb101 !important;
}

/* Sidebar: item activo y hover usan el primario. */
[data-color-theme]:root .sidebar-link.active,
.sidebar-link.active {
    background-color: #fff4dc !important;
    color: #664700 !important;
}
[data-color-theme]:root .sidebar-link.active > span > i,
.sidebar-link.active > span > i {
    color: #ffb101 !important;
}

/* Text utilities */
[data-color-theme]:root .text-primary,
.text-primary {
    color: #ffb101 !important;
}
[data-color-theme]:root .bg-primary,
.bg-primary {
    background-color: #ffb101 !important;
    color: #2a3547 !important;
}
[data-color-theme]:root .bg-primary-subtle,
.bg-primary-subtle {
    background-color: #fff4dc !important;
}
[data-color-theme]:root .text-primary-emphasis,
.text-primary-emphasis {
    color: #664700 !important;
}
[data-color-theme]:root .border-primary,
.border-primary {
    border-color: #ffb101 !important;
}

/* Badges */
[data-color-theme]:root .badge.bg-primary,
.badge.bg-primary {
    background-color: #ffb101 !important;
    color: #2a3547 !important;
}

/* Form controls: focus ring amarillo */
[data-color-theme]:root .form-control:focus,
[data-color-theme]:root .form-select:focus,
[data-color-theme]:root .form-check-input:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #ffb101 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 177, 1, 0.25) !important;
}

[data-color-theme]:root .form-check-input:checked,
.form-check-input:checked {
    background-color: #ffb101 !important;
    border-color: #ffb101 !important;
}

/* Spinner color */
[data-color-theme]:root .spinner-border.text-primary,
.spinner-border.text-primary,
[data-color-theme]:root .spinner-grow.text-primary,
.spinner-grow.text-primary {
    color: #ffb101 !important;
}

/* Paginación */
[data-color-theme]:root .page-item.active .page-link,
.page-item.active .page-link {
    background-color: #ffb101 !important;
    border-color: #ffb101 !important;
    color: #2a3547 !important;
}
[data-color-theme]:root .page-link,
.page-link {
    color: #ffb101;
}
[data-color-theme]:root .page-link:hover,
.page-link:hover {
    color: #d99700;
    background-color: #fff4dc;
}

/* Links: en cards y body, no en botones que ya tienen otro color */
[data-color-theme]:root a:not(.btn):not(.nav-link):not(.dropdown-item),
a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: #ffb101;
}
[data-color-theme]:root a:not(.btn):not(.nav-link):not(.dropdown-item):hover,
a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: #d99700;
}

/* Toolbars y elementos con bg-light-info del template */
[data-color-theme]:root .bg-light-info,
.bg-light-info {
    background-color: #fff4dc !important;
}

/* Breadcrumb item activo */
[data-color-theme]:root .breadcrumb-item.active,
.breadcrumb-item.active {
    color: #664700;
}

/* Alert primary (por si se usa) */
[data-color-theme]:root .alert-primary,
.alert-primary {
    --bs-alert-bg: #fff4dc;
    --bs-alert-border-color: #ffd99a;
    --bs-alert-color: #664700;
}

/* Nav tabs / nav pills activos */
[data-color-theme]:root .nav-pills .nav-link.active,
.nav-pills .nav-link.active {
    background-color: #ffb101 !important;
    color: #2a3547 !important;
}

/* ============================================================
   Sidebar full-width en móvil (como app nativa)
   ============================================================ */
@media (max-width: 575.98px) {
    /* Sidebar ocupa 100% del ancho */
    .left-sidebar { width: 100vw !important; max-width: 100vw !important; left: -100vw !important; }
    .show-sidebar .left-sidebar { left: 0 !important; }

    /* Logo del brand más grande en móvil */
    .left-sidebar .brand-logo { padding: 18px 24px; min-height: 70px; }
    .left-sidebar .brand-logo .logo-img img { height: 44px; }

    /* Botón X de cerrar más visible */
    .left-sidebar .sidebartoggler {
        position: absolute !important;
        top: 18px; right: 18px;
        font-size: 1.5rem;
        background: rgba(255,177,1,0.12);
        border-radius: 50%;
        width: 40px; height: 40px;
        display: flex !important;
        align-items: center; justify-content: center;
        color: #ffb101;
    }
    .left-sidebar .sidebartoggler i { font-size: 1.4rem; }

    /* Items del menú más grandes para touch */
    .left-sidebar .sidebar-nav .sidebar-link {
        padding: 14px 20px !important;
        font-size: 1rem;
    }
    .left-sidebar .sidebar-nav .sidebar-link i { font-size: 1.4rem; }
    .left-sidebar .nav-small-cap {
        padding: 16px 20px 6px !important;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        opacity: 0.55;
    }

    /* Overlay oscuro al lado: en móvil full no se ve */
    .show-sidebar + .dark-transparent { display: none; }

    /* Topbar móvil: ajustar logo */
    .topbar .d-block.d-lg-none img { max-height: 30px; }
}