/* ═══════════════════════════════════════════════════════════════════════
 * PedidosHub Admin — sistema de diseño propio
 * ───────────────────────────────────────────────────────────────────────
 * Este archivo no “ajusta” la plantilla Vuexy: la trata como un motor de
 * grid/utilidades y como base funcional para los plugins (DataTables,
 * Select2, Flatpickr, SweetAlert2, dropzone, filepond) y les impone un
 * lenguaje visual propio con reglas explícitas (no con las variables de
 * tema de Vuexy, que es lo que hacía que todo se sintiera "de plantilla"
 * sin importar la paleta). Las clases de Bootstrap/Vuexy (.card, .btn,
 * .table, .menu-link…) se conservan como enganches porque el HTML/JS de
 * cada página ya depende de ellas — lo que cambia es cómo se ven.
 *
 * Dirección: panel serio y denso, tipo Stripe/dashboard financiero — lo
 * usa a diario el dueño de una tienda para revisar pedidos y plata, no
 * un visitante ocasional. Fondo neutro casi blanco, tinta casi negra,
 * un único acento (el coral real del isotipo de PedidosHub) reservado
 * para acciones primarias y estados activos, cifras en monoespaciada
 * tabular como en un extracto bancario, cero sombras de "app juguete".
 * Se carga al final; algunas reglas llevan !important solo para ganarle
 * a los !important que ya trae overwrite.css.
 * ═══════════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
    --ph-sans:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        sans-serif;
    --ph-mono:
        "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas,
        monospace;

    --ph-coral: #e23c5e;
    --ph-coral-dark: #b52c49;
    --ph-coral-tint: #fdecef;

    --ph-ink: #17171a;
    --ph-ink-soft: #6b6b74;
    --ph-line: #e4e4e8;
    --ph-canvas: #f7f7f8;
    --ph-paper: #ffffff;

    --ph-ink-dark: #f2f2f4;
    --ph-ink-soft-dark: #9a99a3;
    --ph-line-dark: #29292f;
    --ph-canvas-dark: #0c0c0e;
    --ph-paper-dark: #16161a;
}

/* ── Variables Bootstrap/Vuexy remapeadas a la nueva paleta neutra ── */
:root,
[data-bs-theme="light"] {
    --bs-body-bg: var(--ph-canvas) !important;
    --bs-body-bg-rgb: 247, 247, 248 !important;
    --bs-body-color: var(--ph-ink) !important;
    --bs-heading-color: var(--ph-ink) !important;
    --bs-paper-bg: var(--ph-paper) !important;
    --bs-paper-bg-rgb: 255, 255, 255 !important;
    --bs-border-color: var(--ph-line) !important;
    --bs-border-color-translucent: rgba(23, 23, 26, 0.08) !important;
    --bs-base-color: var(--ph-ink) !important;
    --bs-bg-label-tint-amount: 92% !important;

    --bs-primary: var(--ph-coral) !important;
    --bs-primary-rgb: 226, 60, 94 !important;
    --bs-primary-contrast: #ffffff !important;
    --bs-primary-text-emphasis: var(--ph-coral-dark) !important;
    --bs-primary-bg-subtle: var(--ph-coral-tint) !important;
    --bs-primary-border-subtle: #f6c1cb !important;

    --bs-secondary: #71717a !important;
    --bs-secondary-rgb: 113, 113, 122 !important;
    --bs-secondary-contrast: #ffffff !important;

    --bs-success: #15803d !important;
    --bs-success-rgb: 21, 128, 61 !important;
    --bs-success-contrast: #ffffff !important;

    --bs-info: #0e6ba8 !important;
    --bs-info-rgb: 14, 107, 168 !important;
    --bs-info-contrast: #ffffff !important;

    --bs-warning: #b45309 !important;
    --bs-warning-rgb: 180, 83, 9 !important;
    --bs-warning-contrast: #ffffff !important;

    --bs-danger: #b91c1c !important;
    --bs-danger-rgb: 185, 28, 28 !important;
    --bs-danger-contrast: #ffffff !important;

    --bs-dark: var(--ph-ink) !important;
    --bs-dark-rgb: 23, 23, 26 !important;
    --bs-dark-contrast: #ffffff !important;

    --bs-light: #eeeef0 !important;
    --bs-light-rgb: 238, 238, 240 !important;
    --bs-light-contrast: var(--ph-ink) !important;

    --bs-border-radius: 0.5rem !important;
    --bs-border-radius-sm: 0.375rem !important;
    --bs-border-radius-lg: 0.625rem !important;
    --bs-border-radius-xl: 0.75rem !important;
    --bs-box-shadow: 0 1px 2px rgba(23, 23, 26, 0.06) !important;
    --bs-box-shadow-sm: 0 1px 2px rgba(23, 23, 26, 0.05) !important;
    --bs-box-shadow-lg: 0 12px 32px rgba(23, 23, 26, 0.12) !important;

    --bs-font-sans-serif: var(--ph-sans) !important;
    --bs-body-font-family: var(--ph-sans) !important;
    --bs-link-color: var(--bs-primary) !important;
    --bs-link-color-rgb: var(--bs-primary-rgb) !important;
    --bs-link-hover-color: var(--ph-coral-dark) !important;
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.28) !important;

    --bs-menu-bg: var(--ph-paper) !important;
    --bs-menu-color: var(--ph-ink-soft) !important;
    --bs-menu-color-rgb: 107, 107, 116 !important;
    --bs-menu-hover-bg: var(--ph-canvas) !important;
    --bs-menu-hover-color: var(--ph-ink) !important;
    --bs-menu-sub-active-bg: transparent !important;
    --bs-menu-sub-active-color: var(--ph-coral) !important;
    --bs-menu-active-color: var(--ph-ink) !important;
    --bs-menu-header-color: #b3b3ba !important;
    --bs-menu-divider-color: var(--ph-line) !important;
    --bs-menu-box-shadow: none !important;
    --bs-navbar-bg: var(--ph-paper) !important;
}

[data-bs-theme="dark"] {
    --bs-body-bg: var(--ph-canvas-dark) !important;
    --bs-body-bg-rgb: 12, 12, 14 !important;
    --bs-body-color: var(--ph-ink-dark) !important;
    --bs-heading-color: #ffffff !important;
    --bs-paper-bg: var(--ph-paper-dark) !important;
    --bs-paper-bg-rgb: 22, 22, 26 !important;
    --bs-border-color: var(--ph-line-dark) !important;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.08) !important;
    --bs-base-color: #ffffff !important;
    --bs-bg-label-tint-amount: 80% !important;

    --bs-primary: #f0637f !important;
    --bs-primary-rgb: 240, 99, 127 !important;
    --bs-primary-contrast: #1c0810 !important;
    --bs-primary-text-emphasis: #f6a3b4 !important;
    --bs-primary-bg-subtle: color-mix(
        in sRGB,
        var(--bs-primary) 18%,
        var(--ph-paper-dark)
    ) !important;
    --bs-primary-border-subtle: color-mix(
        in sRGB,
        var(--bs-primary) 40%,
        var(--ph-paper-dark)
    ) !important;

    --bs-secondary: #a1a1aa !important;
    --bs-secondary-rgb: 161, 161, 170 !important;
    --bs-secondary-contrast: #1c0810 !important;

    --bs-success: #4ade80 !important;
    --bs-success-rgb: 74, 222, 128 !important;
    --bs-success-contrast: #06210f !important;

    --bs-info: #67b8e8 !important;
    --bs-info-rgb: 103, 184, 232 !important;
    --bs-info-contrast: #05202f !important;

    --bs-warning: #f5a742 !important;
    --bs-warning-rgb: 245, 167, 66 !important;
    --bs-warning-contrast: #241505 !important;

    --bs-danger: #f16565 !important;
    --bs-danger-rgb: 241, 101, 101 !important;
    --bs-danger-contrast: #240a05 !important;

    --bs-dark: #0a0a0b !important;
    --bs-dark-rgb: 10, 10, 11 !important;
    --bs-dark-contrast: #ffffff !important;

    --bs-light: #2a2a30 !important;
    --bs-light-rgb: 42, 42, 48 !important;
    --bs-light-contrast: #ffffff !important;

    --bs-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    --bs-box-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55) !important;

    --bs-link-color: var(--bs-primary) !important;
    --bs-link-color-rgb: var(--bs-primary-rgb) !important;
    --bs-link-hover-color: var(--bs-primary-text-emphasis) !important;
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.32) !important;

    --bs-menu-bg: var(--ph-paper-dark) !important;
    --bs-menu-color: var(--ph-ink-soft-dark) !important;
    --bs-menu-color-rgb: 154, 153, 163 !important;
    --bs-menu-hover-bg: var(--ph-canvas-dark) !important;
    --bs-menu-hover-color: #ffffff !important;
    --bs-menu-sub-active-bg: transparent !important;
    --bs-menu-sub-active-color: var(--bs-primary) !important;
    --bs-menu-active-color: #ffffff !important;
    --bs-menu-header-color: #4d4d55 !important;
    --bs-menu-divider-color: var(--ph-line-dark) !important;
    --bs-navbar-bg: var(--ph-paper-dark) !important;
}

/* ── Compatibilidad con restos hardcodeados de overwrite.css / app-darkmode.css ── */
[data-bs-theme="dark"] body {
    background-color: var(--bs-body-bg);
}
[data-bs-theme="dark"] .layout-navbar {
    background-color: var(--bs-navbar-bg) !important;
}
[data-bs-theme="dark"] .menu {
    background-color: var(--bs-menu-bg);
}
[data-bs-theme="dark"] .card {
    --bs-card-bg: var(--bs-paper-bg);
}
[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: var(--bs-paper-bg);
}
[data-bs-theme="dark"] .modal-content {
    background-color: var(--bs-paper-bg);
}
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .select2-dropdown {
    background-color: var(--bs-paper-bg);
}
[data-bs-theme="dark"] .swal2-popup.swal2-toast {
    background: var(--bs-paper-bg);
}
[data-bs-theme="dark"] .swal2-container .swal2-popup .swal2-title {
    color: var(--bs-heading-color);
}
[data-bs-theme="dark"] .filepond--drop-label {
    background-color: var(--bs-paper-bg);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .filepond--panel-root {
    background-color: var(--bs-paper-bg);
}
[data-bs-theme="dark"] .tab-content {
    background: var(--bs-paper-bg);
}
[data-bs-theme="dark"] .welcome-text {
    color: var(--ph-ink-soft-dark);
}
[data-bs-theme="dark"] img.logo {
    filter: brightness(0) invert(1);
}
.bg-success {
    background-color: var(--bs-success) !important;
}

/* ═══════════════════ Tipografía ═══════════════════ */
body {
    font-family: var(--ph-sans) !important;
    font-weight: 400;
    letter-spacing: -0.006em;
    font-feature-settings: "cv05", "cv11";
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.modal-title {
    font-family: var(--ph-sans) !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bs-heading-color);
}

.app-brand-text {
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* cifras, IDs, fechas — monoespaciada tabular, como un extracto */
.table td,
.table th,
input[type="number"],
.debt-amount,
.breadcrumb,
.badge,
.menu-header,
.dataTables_info {
    font-variant-numeric: tabular-nums;
}

.table th,
.menu-header,
.dropdown-header {
    font-family: var(--ph-mono) !important;
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ph-ink-soft);
}
[data-bs-theme="dark"] .table th,
[data-bs-theme="dark"] .menu-header,
[data-bs-theme="dark"] .dropdown-header {
    color: var(--ph-ink-soft-dark);
}

.breadcrumb {
    font-family: var(--ph-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.breadcrumb-item.active {
    color: var(--bs-primary);
    font-weight: 600;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-border-color);
    content: "/";
}

/* ═══════════════════ Botones — planos, compactos, sin brillo ═══════════════════ */
.btn {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: none !important;
    transition:
        background-color 0.12s ease,
        border-color 0.12s ease,
        color 0.12s ease;
}
.btn-sm {
    --bs-btn-padding-y: 0.35rem;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-font-size: 0.8125rem;
}
.btn-lg {
    --bs-btn-padding-y: 0.65rem;
    --bs-btn-padding-x: 1.25rem;
}

.btn-primary {
    --bs-btn-hover-bg: var(--ph-coral-dark);
    --bs-btn-active-bg: var(--ph-coral-dark);
}
.btn-primary:hover,
.btn-primary:focus-visible {
    transform: none;
}

.btn-icon {
    --bs-btn-padding-x: 0.5rem;
}

/* ═══════════════════ Tarjetas — filete fino, sin sombra de juguete ═══════════════════ */
.card {
    --bs-card-box-shadow: none;
    border: 1px solid var(--bs-border-color);
}
.card-header {
    padding-block: 1rem;
    background: transparent;
}
.card-title {
    font-size: 1.0625rem;
}

.modal-content {
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--bs-box-shadow-lg);
}

/* ═══════════════════ Formularios — compactos ═══════════════════ */
.form-control,
.form-select {
    padding-block: 0.45rem;
    padding-inline: 0.75rem;
    font-size: 0.875rem;
    border-radius: var(--bs-border-radius-sm);
}
/* .form-select nativo (sin select2) necesita más padding a la derecha para
   no tapar la flecha del <select> con el texto — la mayoría de los selects
   de este admin usan select2 (que dibuja su propia flecha y oculta el
   <select> nativo), así que este bug solo se nota en selects nativos como
   el selector de tipo de enlace del navbar (ver preferences.js). */
.form-select {
    padding-inline-end: 2.25rem;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px var(--bs-primary-bg-subtle);
}
.form-label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--bs-heading-color);
    margin-bottom: 0.35rem;
}

/* ═══════════════════ Estados — pastillas con borde, no rellenas ═══════════════════ */
.badge {
    border-radius: var(--bs-border-radius-sm);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    padding: 0.28em 0.6em;
}
.badge.bg-label-primary,
.badge.bg-label-secondary,
.badge.bg-label-success,
.badge.bg-label-info,
.badge.bg-label-warning,
.badge.bg-label-danger {
    background: var(--bs-paper-bg) !important;
    border: 1px solid currentColor;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}
.badge.bg-label-primary::before,
.badge.bg-label-secondary::before,
.badge.bg-label-success::before,
.badge.bg-label-info::before,
.badge.bg-label-warning::before,
.badge.bg-label-danger::before {
    content: "";
    inline-size: 0.4em;
    block-size: 0.4em;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* ═══════════════════ Riel lateral — plano, denso, monocromo con acento fino ═══════════════════ */
.menu-vertical .menu-inner > .menu-item {
    margin-block-end: 0.05rem;
}
.menu-vertical .menu-item .menu-link {
    border-radius: var(--bs-border-radius-sm);
    padding-block: 0.55rem;
    font-size: 0.875rem;
    font-weight: 500;
}
.menu-vertical .menu-icon {
    color: var(--ph-ink-soft);
    opacity: 0.85;
}
[data-bs-theme="dark"] .menu-vertical .menu-icon {
    color: var(--ph-ink-soft-dark);
}

.menu-item.active > .menu-link:not(.menu-toggle) {
    background: var(--bs-primary-bg-subtle) !important;
    box-shadow: inset 2px 0 0 var(--bs-primary);
    color: var(--bs-primary) !important;
    font-weight: 600;
}
.menu-item.active > .menu-link:not(.menu-toggle) .menu-icon {
    color: var(--bs-primary);
    opacity: 1;
}

.menu-inner-shadow {
    display: none;
}
.app-brand {
    border-bottom: 1px solid var(--bs-border-color);
}

/* ═══════════════════ Navbar ═══════════════════ */
.layout-navbar {
    border-block-end: 1px solid var(--bs-border-color);
}
.dropdown-user .avatar img {
    border: 1px solid transparent;
}

/* ═══════════════════ Aviso de deuda — franja fina, no bloque de color ═══════════════════ */
.debt-notification-bar {
    background: var(--bs-paper-bg) !important;
    border-bottom: none !important;
    border-block-end: 1px solid var(--bs-border-color) !important;
    box-shadow: none !important;
    color: var(--bs-body-color) !important;
    font-size: 0.8125rem;
    position: relative;
}
.debt-notification-bar::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    inline-size: 3px;
    background: var(--bs-danger);
}
.debt-notification-bar.debt-active::before {
    background: var(--bs-warning);
}
.debt-notification-bar strong,
.debt-notification-bar span,
.debt-notification-bar i {
    color: var(--bs-body-color) !important;
}
.debt-notification-bar.debt-overdue .debt-headline {
    color: var(--bs-danger) !important;
}
.debt-notification-bar.debt-active .debt-headline {
    color: var(--bs-warning) !important;
}
.debt-notification-bar .debt-headline {
    font-weight: 700;
}
.debt-notification-bar .debt-amount {
    font-family: var(--ph-mono);
    font-weight: 600;
}
.debt-notification-bar i {
    animation: none;
    font-size: 1rem !important;
}
.debt-notification-bar .btn-close {
    filter: none;
    opacity: 0.5;
}
.debt-notification-bar .btn-close:hover {
    opacity: 1;
}

/* ═══════════════════ Tablas ═══════════════════ */
table.dataTable tbody tr:hover {
    background-color: var(--ph-canvas);
}
[data-bs-theme="dark"] table.dataTable tbody tr:hover {
    background-color: var(--ph-canvas-dark);
}
.table > :not(caption) > * > * {
    padding-block: 0.65rem;
}

/* ═══════════════════ Accesibilidad ═══════════════════ */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.menu-link:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .btn,
    .menu-link {
        transition: none !important;
    }
}

/* ═══════════════════ Login — panel partido, serio ═══════════════════ */
.ph-auth {
    min-block-size: 100vh;
    display: flex;
}
.ph-auth-brand {
    flex: 0 0 42%;
    background: var(--ph-ink);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}
.ph-auth-brand::after {
    content: "";
    position: absolute;
    inset-inline-end: -6rem;
    inset-block-end: -6rem;
    inline-size: 18rem;
    block-size: 18rem;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(226, 60, 94, 0.35),
        transparent 70%
    );
}
.ph-auth-brand img {
    block-size: 1.75rem;
    inline-size: auto;
    align-self: flex-start;
    flex: none;
    margin-block-end: 2.5rem;
    filter: brightness(0) invert(1);
    position: relative;
    z-index: 1;
}
.ph-auth-brand-copy {
    position: relative;
    z-index: 1;
    max-inline-size: 26rem;
}
.ph-auth-brand-copy h1 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    margin-block-end: 0.75rem;
}
.ph-auth-brand-copy p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9375rem;
    line-height: 1.6;
}
.ph-auth-brand-foot {
    position: absolute;
    inset-inline-start: 3rem;
    inset-block-end: 3rem;
    z-index: 1;
    font-family: var(--ph-mono);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ph-auth-form {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--bs-body-bg);
}
.ph-auth-form-inner {
    inline-size: 100%;
    max-inline-size: 22rem;
}
.ph-auth-form-inner h2 {
    font-size: 1.375rem;
    margin-block-end: 0.25rem;
}
.ph-auth-form-inner .ph-auth-sub {
    color: var(--ph-ink-soft);
    font-size: 0.875rem;
    margin-block-end: 1.75rem;
}
[data-bs-theme="dark"] .ph-auth-form-inner .ph-auth-sub {
    color: var(--ph-ink-soft-dark);
}

@media (max-width: 900px) {
    .ph-auth {
        flex-direction: column;
    }
    .ph-auth-brand {
        flex: 0 0 auto;
        padding: 2rem;
    }
    .ph-auth-brand::after {
        display: none;
    }
    .ph-auth-brand-foot {
        display: none;
    }
}