/* ============================================================
   Dark Mode — ServiceLab Print Orders
   Todos los overrides para [data-theme="dark"]
   Carga DESPUÉS de app.css, cliente.css, etc.
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────────── */

[data-theme="dark"] {
    --color-bg:           #0A0A0A;
    --color-bg-subtle:    #111111;
    --color-bg-muted:     #1A1A1A;
    --color-bg-panel:     #1A1A1A;
    --color-bg-panel2:    #141414;

    --color-text-primary:   #F5F5F5;
    --color-text-secondary: #A3A3A3;
    --color-text-muted:     #737373;
    --color-text-disabled:  #404040;

    --color-border:        rgba(255,255,255,0.08);
    --color-border-strong: rgba(255,255,255,0.14);

    --color-brand:         #FAFAFA;
    --color-brand-hover:   #E5E5E5;

    --color-success:        #4ADE80;
    --color-success-bg:     #052E16;
    --color-success-border: #166534;

    --color-warning:        #FBBF24;
    --color-warning-bg:     #451A03;
    --color-warning-border: #78350F;

    --color-error:          #F87171;
    --color-error-bg:       #5C1010;
    --color-error-border:   #991B1B;

    --color-info:           #60A5FA;
    --color-info-bg:        #082F49;
    --color-info-border:    #1E40AF;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.5);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.6);
    --shadow-xl: 0 20px 50px rgba(0,0,0,0.7);

    --badge-pendiente-color:  #FBBF24;
    --badge-pendiente-bg:     #451A03;
    --badge-pendiente-border: #78350F;

    --badge-proceso-color:    #60A5FA;
    --badge-proceso-bg:       #082F49;
    --badge-proceso-border:   #1E40AF;

    --badge-listo-color:      #4ADE80;
    --badge-listo-bg:         #052E16;
    --badge-listo-border:     #166534;

    --badge-entregado-color:  #737373;
    --badge-entregado-bg:     #1A1A1A;
    --badge-entregado-border: #262626;

    --badge-cancelado-color:  #F87171;
    --badge-cancelado-bg:     #5C1010;
    --badge-cancelado-border: #991B1B;

    --bg-dots: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23FFFFFF' fill-opacity='0.08'/%3E%3C/svg%3E");
}

/* ── Print guard ────────────────────────────────────────────── */

@media print {
    [data-theme="dark"] {
        --color-bg:           #FFFFFF !important;
        --color-bg-subtle:    #F9FAFB !important;
        --color-bg-muted:     #F3F4F6 !important;
        --color-bg-panel:     #F3F4F6 !important;
        --color-bg-panel2:    #FAFAFA !important;

        --color-text-primary:   #111827 !important;
        --color-text-secondary: #374151 !important;
        --color-text-muted:     #6B7280 !important;
        --color-text-disabled:  #D1D5DB !important;

        --color-border:        #E5E7EB !important;
        --color-border-strong: #D1D5DB !important;

        --color-brand:         #111827 !important;
        --color-brand-hover:   #374151 !important;

        --shadow-xs: none !important;
        --shadow-sm: none !important;
        --shadow-md: none !important;
        --shadow-lg: none !important;
        --shadow-xl: none !important;
    }
}

/* ── Theme transitions ──────────────────────────────────────── */

.theme-transitions-ready [data-theme] *,
.theme-transitions-ready [data-theme] *::before,
.theme-transitions-ready [data-theme] *::after {
    transition: background-color 200ms ease,
                color 200ms ease,
                border-color 200ms ease,
                box-shadow 200ms ease;
}

/* ── Toggle button ──────────────────────────────────────────── */

.theme-toggle-icon--light { display: none; }
[data-theme="dark"] .theme-toggle-icon--dark { display: none; }
[data-theme="dark"] .theme-toggle-icon--light { display: inline-block; }

/* ── Bento cards ────────────────────────────────────────────── */

[data-theme="dark"] .bento-card--accent {
    color: var(--color-bg);
}
[data-theme="dark"] .bento-card--accent .bento-card-eyebrow { color: rgba(0,0,0,0.55); }
[data-theme="dark"] .bento-card--accent .bento-card-label   { color: rgba(0,0,0,0.7); }
[data-theme="dark"] .bento-card--accent .bento-card-value   { color: var(--color-bg); }
[data-theme="dark"] .bento-card--accent .bento-card-icon    { color: rgba(0,0,0,0.15); }

[data-theme="dark"] .bento-card--info .bento-card-icon { color: rgba(96,165,250,0.12); }
[data-theme="dark"] .bento-card--success .bento-card-icon { color: rgba(74,222,128,0.12); }

[data-theme="dark"] .bento-card-icon {
    color: var(--color-text-disabled);
}

/* ── Botón primario ─────────────────────────────────────────── */

[data-theme="dark"] .btn-primary {
    color: var(--color-bg);
}
[data-theme="dark"] .btn-primary:hover:not(:disabled) {
    color: var(--color-bg);
}

/* ── Danger hover ───────────────────────────────────────────── */

[data-theme="dark"] .btn-danger:hover:not(:disabled) {
    background-color: #7F1D1D;
    border-color: rgba(248,113,113,0.3);
}

/* ── Toolbar filter active ──────────────────────────────────── */

[data-theme="dark"] .toolbar-filter.active {
    color: var(--color-bg);
}
[data-theme="dark"] .toolbar-filter.active svg {
    color: rgba(0,0,0,0.7);
}

/* ── Toolbar focus ──────────────────────────────────────────── */

[data-theme="dark"] .toolbar-search:focus-within {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}

/* ── Form focus ─────────────────────────────────────────────── */

[data-theme="dark"] .form-input:focus {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}

/* ── DataTables filter focus ────────────────────────────────── */

[data-theme="dark"] .dataTables_filter input:focus {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}

/* ── Table selected row ─────────────────────────────────────── */

[data-theme="dark"] table.dataTable tbody tr.selected {
    background-color: #1E3A5F;
}

/* ── Pagination active ──────────────────────────────────────── */

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--color-bg) !important;
}

/* ── Sidebar icons on brand bg ──────────────────────────────── */

[data-theme="dark"] .sidebar-logo-icon {
    background-color: var(--color-text-primary);
    color: var(--color-bg);
}
[data-theme="dark"] .sidebar-user-avatar {
    background-color: var(--color-text-primary);
    color: var(--color-bg);
}

/* ── Header avatar ──────────────────────────────────────────── */

[data-theme="dark"] .header-avatar {
    background-color: var(--color-text-primary);
    color: var(--color-bg);
}

/* ── DataTables ─────────────────────────────────────────────── */

[data-theme="dark"] .dataTables_length select {
    background-color: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ── Badges (láser states con hardcoded colors) ─────────────── */

[data-theme="dark"] .badge-en_cola {
    color: #60A5FA;
    background-color: #082F49;
    border-color: #1E40AF;
}
[data-theme="dark"] .badge-en_proceso {
    color: #60A5FA;
    background-color: #082F49;
    border-color: #1E40AF;
}
[data-theme="dark"] .badge-pausado {
    color: #FBBF24;
    background-color: #451A03;
    border-color: #78350F;
}
[data-theme="dark"] .badge-finalizado {
    color: #4ADE80;
    background-color: #052E16;
    border-color: #166534;
}
[data-theme="dark"] .badge-recogido {
    color: #737373;
    background-color: #1A1A1A;
    border-color: #262626;
}

/* ── SweetAlert2 ────────────────────────────────────────────── */
/* SWAL se monta en <body>, hereda [data-theme] del html */

[data-theme="dark"] .swal2-popup {
    background: var(--color-bg) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .swal2-title {
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .swal2-html-container {
    color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--color-success) !important;
}

[data-theme="dark"] .swal2-icon.swal2-error {
    border-color: var(--color-error) !important;
}
[data-theme="dark"] .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: var(--color-error) !important;
}

[data-theme="dark"] .swal2-icon.swal2-warning {
    border-color: var(--color-warning) !important;
    color: var(--color-warning) !important;
}

[data-theme="dark"] .swal2-icon.swal2-info {
    border-color: var(--color-info) !important;
    color: var(--color-info) !important;
}

[data-theme="dark"] .swal2-icon.swal2-question {
    border-color: var(--color-text-muted) !important;
    color: var(--color-text-muted) !important;
}

[data-theme="dark"] .swal2-cancel {
    color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .swal2-confirm {
    color: var(--color-bg) !important;
}

[data-theme="dark"] .swal2-confirm:hover {
    color: var(--color-bg) !important;
}

[data-theme="dark"] .swal2-timer-progress-bar {
    background: var(--color-border-strong) !important;
}

[data-theme="dark"] .toast-popup {
    background: var(--color-bg-muted) !important;
}
[data-theme="dark"] .toast-title {
    color: var(--color-text-primary) !important;
}

/* ── Alertas ────────────────────────────────────────────────── */

[data-theme="dark"] .alert {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

/* ── Header search ──────────────────────────────────────────── */

[data-theme="dark"] .header-search-kbd {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
}

/* ── Empty state ────────────────────────────────────────────── */

[data-theme="dark"] .empty-state-icon {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
}

/* ── Alert warning text ─────────────────────────────────────── */

[data-theme="dark"] .alert--warning,
[data-theme="dark"] .alert--warning a {
    color: var(--color-warning);
}
[data-theme="dark"] .alert--info {
    color: var(--color-info);
}
[data-theme="dark"] .config-impresion-aviso {
    color: var(--color-warning);
}

/* ── Landing page: overrides dark ───────────────────────────── */

[data-theme="dark"] .l2-header-sticky {
    background-color: rgba(10,10,10,0.85);
}
[data-theme="dark"] .cliente-header.is-scrolled {
    background-color: rgba(10,10,10,0.8);
}

/* ── Modal overlay más opaco ─────────────────────────────────── */

[data-theme="dark"] .modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .auth-overlay {
    background: rgba(0, 0, 0, 0.7);
}

/* ── Preview overlay más opaco ───────────────────────────────── */

[data-theme="dark"] .preview-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* ── Badge en_cola (hardcodeado en app.css) ─────────────────── */

[data-theme="dark"] .badge-en_cola {
    color: var(--color-info);
    background-color: var(--color-info-bg);
    border-color: var(--color-info-border);
}

/* ── Sidebar badge live sobre brand ──────────────────────────── */

[data-theme="dark"] .sidebar-nav-badge--live {
    color: var(--color-bg) !important;
}

/* ── Form toggle knob ───────────────────────────────────────── */

[data-theme="dark"] .form-toggle-track::after {
    background-color: var(--color-bg);
}

/* ── Info banner icon bg (rgba hardcodeado) ─────────────────── */

[data-theme="dark"] .c-info-banner__icon {
    background: rgba(251, 191, 36, 0.15);
}

[data-theme="dark"] .c-info-banner__cta:hover {
    color: var(--color-bg);
}

/* ── Landing page: color invertido sobre brand ──────────────── */

[data-theme="dark"] .l2-btn-login,
[data-theme="dark"] .l2-btn-primary,
[data-theme="dark"] .l2-step-badge {
    color: var(--color-bg);
}

/* ── Dashboard bento actions hover ──────────────────────────── */

[data-theme="dark"] .bento-accion:hover {
    color: var(--color-bg);
}

[data-theme="dark"] .bento-accion:hover .bento-accion-icon svg {
    stroke: var(--color-bg);
}

/* ── Configuración: tarifa hover ────────────────────────────── */

[data-theme="dark"] .tarifa-precio-activo:hover {
    color: var(--color-bg);
}

/* ── Cliente panel: texto invertido sobre brand ─────────────── */

[data-theme="dark"] .cliente-logo-icon,
[data-theme="dark"] .cliente-btn-primary {
    color: var(--color-bg);
}

[data-theme="dark"] .step-indicator.active .step-number,
[data-theme="dark"] .step-indicator.completed .step-number {
    color: var(--color-bg);
}

/* ── Checked config option sobre brand ─────────────────────── */

[data-theme="dark"] .config-option input:checked + .config-option-label {
    color: var(--color-bg);
}

/* ── Auth modal button primario sobre brand ────────────────── */

[data-theme="dark"] .auth-btn-primary {
    color: var(--color-bg);
}

/* ── Cliente: archivo item borders (estados) ───────────────── */

[data-theme="dark"] .archivo-item.is-uploading { border-color: var(--color-info); }
[data-theme="dark"] .archivo-item.is-success   { border-color: var(--color-success); }
[data-theme="dark"] .archivo-item.is-error     { border-color: var(--color-error); }

/* ── Cliente: status icon success ─────────────────────────── */

[data-theme="dark"] .status-icon.success { color: var(--color-success); }

/* ── Cliente: config impresion aviso ──────────────────────── */

[data-theme="dark"] .config-impresion-aviso {
    border-color: var(--color-warning);
    color: var(--color-warning);
}

[data-theme="dark"] .config-section-badge {
    color: var(--color-info);
}

/* ── Cliente: pago WA link y boton ────────────────────────── */

[data-theme="dark"] .pago-wa-link { color: var(--color-success); }
[data-theme="dark"] .btn-wa { background-color: var(--color-success); color: var(--color-bg); }
[data-theme="dark"] .btn-wa:hover { background-color: #22C55E; color: var(--color-bg); }

/* ── Cliente: color badge ─────────────────────────────────── */

[data-theme="dark"] .color-badge {
    color: var(--color-text-secondary);
    background: var(--color-bg-muted);
}

[data-theme="dark"] .tamano-autodetectado-badge {
    color: var(--color-text-muted);
    background: var(--color-bg-muted);
}

/* ── Cliente: resumen row badge ───────────────────────────── */

[data-theme="dark"] .resumen-row-badge {
    border-color: var(--color-border);
}

/* ── Auth input focus shadow ──────────────────────────────── */

[data-theme="dark"] .auth-input:focus {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}

/* ── Chat: delete button — !important para vencer inline style ── */

[data-theme="dark"] .chat-delete-btn {
    background: var(--color-bg-muted) !important;
    color: var(--color-brand) !important;
}

/* ── Chat: zoom overlay close button ────────────────────── */

[data-theme="dark"] .chat-zoom-close {
    background: var(--color-bg-muted) !important;
    color: var(--color-brand) !important;
}

[data-theme="dark"] .chat-zoom-close:hover {
    background: var(--color-bg-subtle) !important;
}

/* ── Chat: delete button dark ────────────────────────────── */

[data-theme="dark"] .chat-delete-btn {
    background: rgba(0, 0, 0, 0.6) !important;
}

/* ── Chat: zoom overlay más opaco ────────────────────────── */

[data-theme="dark"] .chat-zoom-overlay {
    background: rgba(0, 0, 0, 0.9) !important;
}

/* ── Laser create: dropzone icon visible en dark ─────────── */

[data-theme="dark"] .dropzone-icon-modern {
    background: var(--color-bg-muted);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

/* ── Laser create: toggle checkmark visible ─────────────── */

[data-theme="dark"] .material-toggle__checkmark {
    color: var(--color-bg);
}

[data-theme="dark"] .empaque-card__check {
    color: var(--color-text-primary);
}

/* ── Laser create: empaque card icon visible ────────────── */

[data-theme="dark"] .empaque-card__icon {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .empaque-card input:checked + label .empaque-card__icon {
    color: var(--color-bg);
}

/* ── Laser create: toggle / empaque checked state ────────── */

[data-theme="dark"] .material-toggle input:checked + .material-toggle-label {
    background: var(--color-brand);
    color: var(--color-bg);
    border-color: var(--color-bg);
}

[data-theme="dark"] .material-toggle input:checked + .material-toggle-label .material-toggle-title {
    color: var(--color-bg);
}

[data-theme="dark"] .material-toggle input:checked + .material-toggle-label .material-toggle__icon {
    background-color: var(--color-bg-muted);
    color: var(--color-text-primary);
}

[data-theme="dark"] .empaque-card input:checked + label {
    background-color: var(--color-bg-muted);
}

/* ── Footer social hover: icono sobre brand ──────────────── */

[data-theme="dark"] .footer-social a:hover {
    color: var(--color-bg);
}

/* ── Text selection ─────────────────────────────────────────── */

[data-theme="dark"] ::selection {
    background-color: var(--color-brand);
    color: var(--color-bg);
}