/* ══════════════════════════════════════════════════════════════════════════
   Tema «Obra» — amarillo construcción + carbón
   Se carga DESPUÉS de style.css (las variables --ob-* están al inicio de style.css).
   Para cambiar el estilo de toda la app basta editar esas variables.
   ══════════════════════════════════════════════════════════════════════════ */

/* Botones ─────────────────────────────────────────────────────────────── */
.btn-primary {
    --bs-btn-color: var(--ob-on-primary);
    --bs-btn-bg: var(--ob-primary);
    --bs-btn-border-color: var(--ob-primary);
    --bs-btn-hover-color: var(--ob-on-primary);
    --bs-btn-hover-bg: var(--ob-primary-hover);
    --bs-btn-hover-border-color: var(--ob-primary-hover);
    --bs-btn-focus-shadow-rgb: 255,179,0;
    --bs-btn-active-color: var(--ob-on-primary);
    --bs-btn-active-bg: #CC8F00;
    --bs-btn-active-border-color: #CC8F00;
    --bs-btn-disabled-color: var(--ob-on-primary);
    --bs-btn-disabled-bg: var(--ob-primary);
    --bs-btn-disabled-border-color: var(--ob-primary);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(255,179,0,0.35);
}
.btn-primary:hover { box-shadow: 0 4px 16px rgba(255,179,0,0.45); }
.btn-outline-primary {
    --bs-btn-color: var(--ob-primary-ink);
    --bs-btn-border-color: var(--ob-primary);
    --bs-btn-hover-color: var(--ob-on-primary);
    --bs-btn-hover-bg: var(--ob-primary);
    --bs-btn-hover-border-color: var(--ob-primary);
    --bs-btn-focus-shadow-rgb: 255,179,0;
    --bs-btn-active-color: var(--ob-on-primary);
    --bs-btn-active-bg: var(--ob-primary-hover);
    --bs-btn-active-border-color: var(--ob-primary-hover);
    --bs-btn-disabled-color: var(--ob-primary-ink);
    --bs-btn-disabled-border-color: var(--ob-primary);
}
.btn-outline-primary:hover { box-shadow: 0 2px 10px rgba(255,179,0,0.25); }
.btn:active::after { background: rgba(0,0,0,0.10); }

.btn-icon-primary { border-color: var(--ob-primary); color: var(--ob-primary-ink); }
.btn-icon-primary:hover { background: var(--ob-primary); color: var(--ob-on-primary); }
.btn-icon-warning { border-color: var(--ob-accent); color: var(--ob-accent); }
.btn-icon-warning:hover { background: var(--ob-accent); color: #fff; }

/* Utilidades de color primario (Bootstrap las fuerza con !important) ──── */
.text-primary { color: var(--ob-primary-ink) !important; }
.bg-primary,
.text-bg-primary { background-color: var(--ob-primary) !important; color: var(--ob-on-primary) !important; }
.border-primary { border-color: var(--ob-primary) !important; }
.link-primary { color: var(--ob-primary-ink) !important; }
.badge.text-bg-light.text-primary { background-color: var(--ob-primary-soft) !important; }

/* Pestañas (pills), checks, paginación, barras ────────────────────────── */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ob-dark);
    --bs-nav-pills-link-active-color: var(--ob-primary);
}
.nav-pills .nav-link { font-weight: 600; border-radius: 50px; color: var(--bs-body-color); }
.nav-pills .nav-link.active { box-shadow: 0 2px 8px rgba(28,31,36,0.25); }
.form-check-input:checked,
.form-switch .form-check-input:checked { background-color: var(--ob-primary); border-color: var(--ob-primary); }
.form-check-input:focus { border-color: var(--ob-primary); box-shadow: 0 0 0 .25rem rgba(255,179,0,0.25); }
.page-link { color: var(--ob-primary-ink); }
.progress-bar { background-color: var(--ob-primary); color: var(--ob-on-primary); }
.form-control:focus { border-color: var(--ob-primary); box-shadow: 0 0 0 3px rgba(255,179,0,0.20); }

/* Tarjetas: borde superior amarillo ───────────────────────────────────── */
.card {
    --bs-card-bg: var(--ob-surface);
    background: var(--ob-surface);
    border-top: 3px solid var(--ob-primary);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(28,31,36,0.06), 0 6px 18px rgba(28,31,36,0.06);
}
.card:hover { box-shadow: 0 2px 6px rgba(28,31,36,0.08), 0 10px 26px rgba(28,31,36,0.10); }
.card-header { border-bottom: 1px solid var(--ob-border); }
.avatar { border-color: var(--ob-primary); }
.modal-content { background: var(--ob-surface); }

/* Cabecera de pantalla: carbón con franja amarilla ────────────────────── */
.hero-obra {
    position: relative;
    background: linear-gradient(135deg, var(--ob-dark) 0%, var(--ob-dark-2) 100%);
    color: #fff;
    border-bottom: 4px solid var(--ob-primary);
    overflow: hidden;
}
.hero-obra::after {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 140px;
    height: 140px;
    background: var(--ob-primary);
    opacity: .14;
    border-radius: 50%;
    pointer-events: none;
}
/* Cinta de precaución reutilizable */
.franja-obra {
    height: 6px;
    background: repeating-linear-gradient(-45deg, var(--ob-primary) 0 10px, var(--ob-dark) 10px 20px);
}
.header {
    background: linear-gradient(135deg, var(--ob-dark) 0%, var(--ob-dark-2) 100%);
    border-bottom: 4px solid var(--ob-primary);
    box-shadow: 0 2px 14px rgba(28,31,36,0.35);
}

/* Barra de navegación: carbón + indicador amarillo ────────────────────── */
.tab-nav {
    background-color: var(--ob-dark);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.25);
}
.sucursal-bar {
    background: var(--ob-dark-2);
    color: #B8BDC4;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sucursal-bar i { color: var(--ob-primary); }
.tab-item { color: #9AA0A8; font-weight: 500; }
.tab-item:hover { color: #fff; }
.tab-item.active { color: var(--ob-primary); font-weight: 700; }
.tab-item.active::before { background: rgba(255,179,0,0.16); }

/* Laptop y PC: la barra pasa a ser lateral izquierda ──────────────────── */
@media (min-width: 1280px) {
    body:has(#nav_inferior .tab-row) { padding-left: var(--ob-sidebar-w); }
    .tab-nav {
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--ob-sidebar-w);
        max-width: none;
        transform: none;
        border-radius: 0;
        overflow: hidden;
        box-shadow: 4px 0 24px rgba(0,0,0,0.18);
    }
    .sucursal-bar {
        order: -1;
        padding: 18px 16px;
        text-align: left;
        font-size: 13px;
        font-weight: 700;
        color: #fff;
        border-bottom: 3px solid var(--ob-primary);
    }
    .tab-row {
        flex-direction: column;
        flex: 1;
        overflow-x: hidden;
        overflow-y: auto;
        justify-content: flex-start;
        padding: 10px 10px 16px;
        gap: 2px;
        scrollbar-width: thin;
    }
    .tab-item {
        flex: none;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
        padding: 11px 14px;
        font-size: 14px;
        border-radius: 12px;
    }
    .tab-item i { display: inline-block; margin: 0; width: 22px; text-align: center; font-size: 17px; }
    .tab-item:hover { background: rgba(255,255,255,0.06); }
    .tab-item.active { background: var(--ob-primary); color: var(--ob-on-primary); }
    .tab-item.active::before { display: none; }
    .container { padding-bottom: 40px; }
}

/* Sin sesión (login) la barra no tiene contenido: se oculta en todos los tamaños */
.tab-nav:not(:has(.tab-row)) { display: none; }

/* Formularios y pasos con el nuevo acento ─────────────────────────────── */
.android-input.form-floating > .form-control:focus ~ label,
.android-input.form-floating > .form-control:not(:placeholder-shown) ~ label,
.android-input.form-floating > .form-select ~ label { color: var(--ob-primary-ink); }
.android-input.form-floating::after { background: var(--ob-primary); }
.wz-step.is-active .wz-step-circle { background: var(--ob-primary); border-color: var(--ob-primary); color: var(--ob-on-primary); }
#_oc-pago-general ._chip-pago-general.btn-primary,
#_oc-pago-general ._chip-delivery-general.btn-primary { background: var(--ob-primary); color: var(--ob-on-primary); box-shadow: 0 4px 10px rgba(255,179,0,.35); }

/* Lista desplegable propia de los select (selectPanel.js): el texto largo salta de línea ───── */
.sel-panel {
    position: fixed;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-top: 3px solid var(--ob-primary);
    border-radius: 12px;
    box-shadow: 0 10px 34px rgba(28,31,36,0.22);
    overflow: hidden;
}
.sel-buscar {
    border: 0;
    border-bottom: 1px solid var(--ob-border);
    padding: 10px 14px;
    font-size: 15px;
    outline: none;
    background: transparent;
    color: inherit;
}
.sel-lista { overflow-y: auto; overscroll-behavior: contain; }
.sel-item {
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    border-bottom: 1px solid rgba(28,31,36,0.05);
}
.sel-item:last-child { border-bottom: 0; }
.sel-item:hover { background: var(--ob-primary-soft); }
.sel-activo { background: var(--ob-primary-soft); font-weight: 700; }
.sel-activo::after { content: '\2713'; float: right; margin-left: 8px; color: var(--ob-primary-ink); }
.sel-off { opacity: .45; cursor: default; }
.sel-off:hover { background: transparent; }
.sel-grupo { padding: 8px 14px 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ob-primary-ink); }