/* ===========================================================================
   Precision Automotive UI — tema del panel (web)
   Doble tema sobre Bootstrap 5.3:
     [data-bs-theme="dark"]  → command center oscuro, acento teal (original)
     [data-bs-theme="light"] → paleta Material 3 de los diseños Stitch, acento azul
   Toda la UI lee tokens --pa-*; cambiar de tema solo redefine esos tokens.
   =========================================================================== */

:root {
    /* Radios (agnósticos del tema) */
    --pa-radius:    0.75rem;  /* 12px estándar */
    --pa-radius-sm: 0.25rem;
    --pa-radius-lg: 1rem;
}

/* ---------- TEMA OSCURO (default original) ---------- */
[data-bs-theme="dark"] {
    --pa-bg:               #10141a;
    --pa-surface-lowest:   #0a0e14;
    --pa-surface-low:      #181c22;
    --pa-surface:          #1c2026;
    --pa-surface-high:     #262a31;
    --pa-surface-highest:  #31353c;

    --pa-on-surface:         #dfe2eb;
    --pa-on-surface-variant: #bfc9c5;
    --pa-on-surface-strong:  #ffffff;
    --pa-muted:              #8a93a0;
    --pa-placeholder:        #6b7480;

    --pa-primary:        #a3e4d7;  /* teal pastel — acciones "Go" */
    --pa-primary-br:     #c8fff3;
    --pa-primary-hover:  #b8ede2;
    --pa-primary-active: #92d3c6;
    --pa-on-primary:     #003731;
    --pa-secondary:      #a4cce6;  /* azul pastel — secundario/links */
    --pa-link-hover:     #c5e7ff;
    --pa-success:        #7fd6c6;
    --pa-error:          #ffb4ab;
    --pa-amber:          #e8c07a;

    --pa-border:        rgba(255, 255, 255, 0.08);
    --pa-border-strong: rgba(255, 255, 255, 0.12);
    --pa-divider:       rgba(255, 255, 255, 0.05);
    --pa-input-border:  rgba(255, 255, 255, 0.10);
    --pa-hover:         rgba(255, 255, 255, 0.03);
    --pa-focus-ring:    rgba(164, 204, 230, 0.20);
    --pa-selection:     rgba(163, 228, 215, 0.30);

    /* Chips/badges: fondo + texto por semántica */
    --pa-badge-primary-bg:   rgba(163, 228, 215, 0.15);
    --pa-badge-primary-fg:   #a3e4d7;
    --pa-badge-secondary-bg: rgba(255, 255, 255, 0.08);
    --pa-badge-secondary-fg: #bfc9c5;
    --pa-badge-info-bg:      rgba(164, 204, 230, 0.15);
    --pa-badge-info-fg:      #a4cce6;
    --pa-badge-success-bg:   rgba(163, 228, 215, 0.15);
    --pa-badge-success-fg:   #7fd6c6;
    --pa-badge-warning-bg:   rgba(232, 192, 122, 0.18);
    --pa-badge-warning-fg:   #e8c07a;
    --pa-badge-danger-bg:    rgba(255, 180, 171, 0.15);
    --pa-badge-danger-fg:    #ffb4ab;
    --pa-badge-dark-bg:      rgba(255, 255, 255, 0.10);
    --pa-badge-dark-fg:      #dfe2eb;

    /* Alertas */
    --pa-alert-success-bg: rgba(163, 228, 215, 0.10);
    --pa-alert-success-fg: #c8fff3;
    --pa-alert-success-bd: rgba(163, 228, 215, 0.25);
    --pa-alert-danger-bg:  rgba(255, 180, 171, 0.10);
    --pa-alert-danger-fg:  #ffdad6;
    --pa-alert-danger-bd:  rgba(255, 180, 171, 0.25);

    /* Sidebar */
    --pa-sidebar-active-bg: rgba(163, 228, 215, 0.12);
    --pa-sidebar-active-fg: #c8fff3;
    --pa-sidebar-disabled:  #545d68;

    /* Login glow */
    --pa-login-glow: rgba(163, 228, 215, 0.08);

    /* Mapeo a Bootstrap (valores literales que difieren por tema) */
    --bs-primary-rgb: 163, 228, 215;
    --bs-link-color-rgb: 164, 204, 230;
}

/* ---------- TEMA CLARO (paleta Stitch / Material 3) ---------- */
[data-bs-theme="light"] {
    --pa-bg:               #f7f9fb;
    --pa-surface-lowest:   #ffffff;
    --pa-surface-low:      #f2f4f6;
    --pa-surface:          #ffffff;
    --pa-surface-high:     #e6e8ea;
    --pa-surface-highest:  #e0e3e5;

    --pa-on-surface:         #191c1e;
    --pa-on-surface-variant: #434655;
    --pa-on-surface-strong:  #000000;
    --pa-muted:              #6a6f7a;
    --pa-placeholder:        #9aa0aa;

    --pa-primary:        #004ac6;  /* azul Stitch — acciones primarias */
    --pa-primary-br:     #003ea8;
    --pa-primary-hover:  #0a57d8;
    --pa-primary-active: #003ea8;
    --pa-on-primary:     #ffffff;
    --pa-secondary:      #1b6b4f;  /* verde — secundario/links */
    --pa-link-hover:     #003ea8;
    --pa-success:        #247155;
    --pa-error:          #ba1a1a;
    --pa-amber:          #8a5a00;

    --pa-border:        #e0e3e5;
    --pa-border-strong: #c3c6d7;
    --pa-divider:       #eceef0;
    --pa-input-border:  #c3c6d7;
    --pa-hover:         rgba(0, 0, 0, 0.03);
    --pa-focus-ring:    rgba(0, 74, 198, 0.18);
    --pa-selection:     rgba(0, 74, 198, 0.18);

    --pa-badge-primary-bg:   #dbe1ff;
    --pa-badge-primary-fg:   #004ac6;
    --pa-badge-secondary-bg: #eceef0;
    --pa-badge-secondary-fg: #434655;
    --pa-badge-info-bg:      #dbe1ff;
    --pa-badge-info-fg:      #004ac6;
    --pa-badge-success-bg:   #a6f2cf;
    --pa-badge-success-fg:   #247155;
    --pa-badge-warning-bg:   #fdeccb;
    --pa-badge-warning-fg:   #8a5a00;
    --pa-badge-danger-bg:    #ffdad6;
    --pa-badge-danger-fg:    #93000a;
    --pa-badge-dark-bg:      #e0e3e5;
    --pa-badge-dark-fg:      #191c1e;

    --pa-alert-success-bg: #d8f5e6;
    --pa-alert-success-fg: #0c5a3c;
    --pa-alert-success-bd: #a6f2cf;
    --pa-alert-danger-bg:  #ffdad6;
    --pa-alert-danger-fg:  #93000a;
    --pa-alert-danger-bd:  #f5b3ad;

    --pa-sidebar-active-bg: #dbe1ff;
    --pa-sidebar-active-fg: #004ac6;
    --pa-sidebar-disabled:  #aab0bb;

    --pa-login-glow: rgba(0, 74, 198, 0.06);

    --bs-primary-rgb: 0, 74, 198;
    --bs-link-color-rgb: 27, 107, 79;
}

/* ---------- Mapeo a Bootstrap común (lee tokens --pa-*) ---------- */
[data-bs-theme="dark"],
[data-bs-theme="light"] {
    --bs-body-bg: var(--pa-bg);
    --bs-body-color: var(--pa-on-surface);
    --bs-emphasis-color: var(--pa-on-surface-strong);
    --bs-border-color: var(--pa-border);
    --bs-border-radius: var(--pa-radius);
    --bs-border-radius-sm: var(--pa-radius-sm);
    --bs-border-radius-lg: var(--pa-radius-lg);
    --bs-primary: var(--pa-primary);
    --bs-link-color: var(--pa-secondary);
    --bs-link-hover-color: var(--pa-link-hover);
}

body {
    background-color: var(--pa-bg);
    color: var(--pa-on-surface);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Tipografía "engineered" */
h1, h2, h3, h4, h5, .headline {
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* ---------- Cards / Paneles (Level 1) ---------- */
.card {
    --bs-card-bg: var(--pa-surface);
    --bs-card-border-color: var(--pa-border);
    --bs-card-border-radius: var(--pa-radius-lg);
    --bs-card-cap-bg: transparent;
}
[data-bs-theme="dark"] .card { box-shadow: none !important; }
[data-bs-theme="light"] .card { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
.card-header {
    border-bottom: 1px solid var(--pa-border);
    color: var(--pa-on-surface-variant);
    font-weight: 600;
}

/* ---------- Tablas: sin líneas verticales, divisores 1px ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--pa-on-surface);
    --bs-table-border-color: var(--pa-divider);
    margin-bottom: 0;
}
.table > :not(caption) > * > * {
    border-bottom: 1px solid var(--pa-divider);
    border-top: 0;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background-color: transparent;
}
.table thead th,
.table-light,
thead.table-light th {
    background: transparent !important;
    color: var(--pa-on-surface-variant) !important;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--pa-border-strong) !important;
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--pa-hover);
}

/* ---------- Tablas como TARJETAS en móvil (legibilidad sin scroll lateral) ----------
   Se activa por la clase .table-cards que el layout añade a las tablas de listado.
   Las tablas de captura (con inputs) y las marcadas .table-keep conservan su scroll. */
@media (max-width: 991.98px) {
    .table-cards thead { display: none; }
    .table-cards, .table-cards tbody { display: block; width: 100%; }
    .table-cards tr {
        display: block;
        border: 1px solid var(--pa-border);
        border-radius: var(--pa-radius);
        background: var(--pa-surface);
        padding: 0.25rem 0.65rem 0.4rem;
        margin-bottom: 0.6rem;
    }
    .table-cards td {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        border: 0 !important;
        padding: 0.4rem 0 !important;
        text-align: right;
        white-space: normal;
    }
    .table-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--pa-on-surface-variant);
        text-align: left;
        margin-right: auto;
    }
    /* Primera celda = título de la tarjeta (ancho completo, sin etiqueta) */
    .table-cards td:first-child {
        display: block; text-align: left;
        font-size: 1rem; font-weight: 700;
        border-bottom: 1px solid var(--pa-divider) !important;
        margin-bottom: 0.2rem; padding-bottom: 0.4rem !important;
    }
    .table-cards td:first-child::before { content: ""; margin: 0; }
    /* Celda a todo lo ancho (estado vacío "Sin resultados") */
    .table-cards td[colspan] { display: block; text-align: center; }
    .table-cards td[colspan]::before { content: ""; }
}
code, .font-mono {
    color: var(--pa-secondary);
    background: transparent;
}

/* ---------- Inputs (más oscuros que la card; foco azul) ---------- */
.form-control,
.form-select,
.input-group-text,
.form-control:disabled {
    background-color: var(--pa-surface-low);
    border-color: var(--pa-input-border);
    color: var(--pa-on-surface);
    border-radius: var(--pa-radius);
}
.input-group-text { color: var(--pa-on-surface-variant); }
.form-control:focus,
.form-select:focus {
    background-color: var(--pa-surface-low);
    border-color: var(--pa-secondary);
    box-shadow: 0 0 0 0.15rem var(--pa-focus-ring);
    color: var(--pa-on-surface);
}
.form-control::placeholder { color: var(--pa-placeholder); }
.form-label { color: var(--pa-on-surface-variant); font-weight: 500; }
.form-text { color: var(--pa-muted); }
.form-check-input:checked {
    background-color: var(--pa-primary);
    border-color: var(--pa-primary);
}
.form-check-input:focus {
    border-color: var(--pa-secondary);
    box-shadow: 0 0 0 0.15rem var(--pa-focus-ring);
}

/* ---------- Botones ---------- */
.btn { border-radius: var(--pa-radius); font-weight: 600; }
.btn-primary {
    --bs-btn-bg: var(--pa-primary);
    --bs-btn-border-color: var(--pa-primary);
    --bs-btn-color: var(--pa-on-primary);
    --bs-btn-hover-bg: var(--pa-primary-hover);
    --bs-btn-hover-border-color: var(--pa-primary-hover);
    --bs-btn-hover-color: var(--pa-on-primary);
    --bs-btn-active-bg: var(--pa-primary-active);
    --bs-btn-active-border-color: var(--pa-primary-active);
    --bs-btn-active-color: var(--pa-on-primary);
    --bs-btn-disabled-bg: var(--pa-primary);
    --bs-btn-disabled-border-color: var(--pa-primary);
    --bs-btn-disabled-color: var(--pa-on-primary);
}
.btn-outline-secondary {
    --bs-btn-color: var(--pa-secondary);
    --bs-btn-border-color: var(--pa-border);
    --bs-btn-hover-bg: var(--pa-surface-high);
    --bs-btn-hover-border-color: var(--pa-secondary);
    --bs-btn-hover-color: var(--pa-on-surface-strong);
}
.btn-outline-primary {
    --bs-btn-color: var(--pa-primary);
    --bs-btn-border-color: color-mix(in srgb, var(--pa-primary) 40%, transparent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--pa-primary) 12%, transparent);
    --bs-btn-hover-border-color: var(--pa-primary);
    --bs-btn-hover-color: var(--pa-primary-br);
}
.btn-light {
    --bs-btn-bg: var(--pa-surface-high);
    --bs-btn-border-color: var(--pa-border);
    --bs-btn-color: var(--pa-on-surface);
    --bs-btn-hover-bg: var(--pa-surface-highest);
    --bs-btn-hover-color: var(--pa-on-surface-strong);
}
.btn-outline-warning {
    --bs-btn-color: var(--pa-amber);
    --bs-btn-border-color: color-mix(in srgb, var(--pa-amber) 40%, transparent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--pa-amber) 12%, transparent);
    --bs-btn-hover-border-color: var(--pa-amber);
    --bs-btn-hover-color: var(--pa-amber);
}
.btn-outline-success {
    --bs-btn-color: var(--pa-success);
    --bs-btn-border-color: color-mix(in srgb, var(--pa-success) 40%, transparent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--pa-success) 12%, transparent);
    --bs-btn-hover-border-color: var(--pa-success);
    --bs-btn-hover-color: var(--pa-success);
}
.btn-outline-danger {
    --bs-btn-color: var(--pa-error);
    --bs-btn-border-color: color-mix(in srgb, var(--pa-error) 40%, transparent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--pa-error) 12%, transparent);
    --bs-btn-hover-border-color: var(--pa-error);
    --bs-btn-hover-color: var(--pa-error);
}

/* ---------- Chips de estado (low-sat bg, high-sat text) ---------- */
.badge { font-weight: 600; border-radius: var(--pa-radius-sm); padding: 0.4em 0.65em; }
.badge.bg-primary   { background-color: var(--pa-badge-primary-bg) !important;   color: var(--pa-badge-primary-fg) !important; }
.badge.bg-secondary { background-color: var(--pa-badge-secondary-bg) !important; color: var(--pa-badge-secondary-fg) !important; }
.badge.bg-info      { background-color: var(--pa-badge-info-bg) !important;      color: var(--pa-badge-info-fg) !important; }
.badge.bg-success   { background-color: var(--pa-badge-success-bg) !important;   color: var(--pa-badge-success-fg) !important; }
.badge.bg-warning   { background-color: var(--pa-badge-warning-bg) !important;   color: var(--pa-badge-warning-fg) !important; }
.badge.bg-danger    { background-color: var(--pa-badge-danger-bg) !important;    color: var(--pa-badge-danger-fg) !important; }
.badge.bg-dark      { background-color: var(--pa-badge-dark-bg) !important;      color: var(--pa-badge-dark-fg) !important; }
/* Variantes *-subtle ya usadas en las vistas */
.bg-primary-subtle     { background-color: var(--pa-badge-primary-bg) !important; }
.text-primary-emphasis { color: var(--pa-badge-primary-fg) !important; }
.bg-info-subtle        { background-color: var(--pa-badge-info-bg) !important; }
.text-info-emphasis    { color: var(--pa-badge-info-fg) !important; }
.bg-success-subtle     { background-color: var(--pa-badge-success-bg) !important; }
.text-success-emphasis { color: var(--pa-badge-success-fg) !important; }
.bg-warning-subtle     { background-color: var(--pa-badge-warning-bg) !important; }
.text-warning-emphasis { color: var(--pa-badge-warning-fg) !important; }
.bg-secondary-subtle     { background-color: var(--pa-badge-secondary-bg) !important; }
.text-secondary-emphasis { color: var(--pa-badge-secondary-fg) !important; }

/* ---------- Alertas ---------- */
.alert { border-radius: var(--pa-radius); border: 1px solid var(--pa-border); }
.alert-success { background-color: var(--pa-alert-success-bg); color: var(--pa-alert-success-fg); border-color: var(--pa-alert-success-bd); }
.alert-danger  { background-color: var(--pa-alert-danger-bg);  color: var(--pa-alert-danger-fg);  border-color: var(--pa-alert-danger-bd); }

/* ---------- Sidebar (command center) ---------- */
.sidebar {
    background-color: var(--pa-surface-lowest) !important;
    border-right: 1px solid var(--pa-border);
}
/* Ancho del panel deslizante en móvil (offcanvas) */
.sidebar.offcanvas-lg { --bs-offcanvas-width: 280px; }
/* En escritorio (≥lg) la barra es fija a la izquierda con scroll propio */
@media (min-width: 992px) {
    .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
    .sidebar .offcanvas-body { height: 100%; overflow-y: auto; }
}

/* ---------- Barra superior móvil (hamburguesa, solo < lg) ---------- */
.mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--pa-surface-lowest);
    border-bottom: 1px solid var(--pa-border);
}
.mobile-topbar .brand { color: var(--pa-primary-br); font-weight: 700; }

/* ---------- Barra de navegación inferior (móvil, solo < lg) ---------- */
.bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1035;
    display: flex;
    background-color: var(--pa-surface-lowest);
    border-top: 1px solid var(--pa-border);
    padding-bottom: env(safe-area-inset-bottom); /* respeta la barra del iPhone */
}
.bottom-nav .bn-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 60px;            /* objetivo táctil cómodo (Fitts) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 2px 7px;
    border: 0;
    background: none;
    color: var(--pa-on-surface-variant);
    font-size: 0.72rem;
    line-height: 1.1;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
}
.bottom-nav .bn-item .bi { font-size: 1.5rem; line-height: 1; }
.bottom-nav .bn-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bottom-nav .bn-item.active { color: var(--pa-primary-br); }
.bottom-nav .bn-item:active { background-color: var(--pa-surface); }

@media (max-width: 991.98px) {
    /* espacio para que la barra no tape el contenido */
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
    /* el toggle de tema pasa al top-right (la barra inferior ocupa el fondo) */
    .theme-toggle { top: 0.6rem; bottom: auto; right: 0.6rem; }
}
@media (min-width: 992px) {
    .bottom-nav { display: none !important; }
}

/* Encabezados de página: que envuelvan en pantallas chicas */
main .d-flex.justify-content-between.align-items-center { flex-wrap: wrap; gap: 0.5rem; }
.sidebar .brand { color: var(--pa-primary-br); font-weight: 700; letter-spacing: 0.3px; }

/* Logo de empresa en la marca: dos variantes que se intercambian por tema
   (igual que los íconos sol/luna). Default oscuro → se ve el logo de fondo oscuro. */
.brand .brand-logo { display: inline-flex; align-items: center; }
.brand .brand-img { width: auto; max-width: 100%; vertical-align: middle; }
[data-bs-theme="dark"]  .brand .logo-light { display: none !important; }
[data-bs-theme="dark"]  .brand .logo-dark  { display: inline-block; }
[data-bs-theme="light"] .brand .logo-dark  { display: none !important; }
[data-bs-theme="light"] .brand .logo-light { display: inline-block; }
.sidebar .nav-link {
    color: var(--pa-on-surface-variant);
    border-radius: var(--pa-radius);
    font-weight: 500;
    padding: 0.55rem 0.85rem;
    transition: background-color 0.15s, color 0.15s;
}
.sidebar .nav-link:hover { background-color: var(--pa-surface); color: var(--pa-on-surface-strong); }
.sidebar .nav-link.active {
    background-color: var(--pa-sidebar-active-bg);
    color: var(--pa-sidebar-active-fg);
}
.sidebar .nav-link.disabled { color: var(--pa-sidebar-disabled); }
.sidebar .border-top { border-color: var(--pa-border) !important; }
/* Encabezados de grupo del menú */
.sidebar .nav-section {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pa-muted);
    padding: 0.85rem 0.85rem 0.2rem;
}
.sidebar .nav-section:first-child { padding-top: 0.2rem; }

/* ---------- Toggle de tema (botón fijo abajo a la derecha) ---------- */
.theme-toggle {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1080;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--pa-border);
    background-color: var(--pa-surface);
    color: var(--pa-on-surface-variant);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: background-color 0.15s, color 0.15s, transform 0.1s;
}
.theme-toggle:hover { color: var(--pa-primary); background-color: var(--pa-surface-high); }
.theme-toggle:active { transform: scale(0.94); }
/* Muestra el ícono correcto según el tema activo */
.theme-toggle .icon-sun, .theme-toggle .icon-moon { font-size: 1.15rem; line-height: 1; }
[data-bs-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-bs-theme="dark"] .theme-toggle .icon-sun  { display: inline; }
[data-bs-theme="light"] .theme-toggle .icon-sun  { display: none; }
[data-bs-theme="light"] .theme-toggle .icon-moon { display: inline; }

/* ---------- Job card (status stripe) — Kanban ---------- */
.job-card { position: relative; overflow: hidden; }
.job-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--stripe, var(--pa-outline, #899390));
}

/* ---------- Misc ---------- */
.list-group-item { background-color: var(--pa-surface); border-color: var(--pa-border); color: var(--pa-on-surface); }
.list-group-item-action:hover { background-color: var(--pa-surface-high); }
hr { border-color: var(--pa-border); opacity: 1; }
.text-muted { color: var(--pa-muted) !important; }
::selection { background: var(--pa-selection); }

/* ---------- Ticket de cobro ---------- */
.ticket { max-width: 720px; }

/* ---------- Impresión: solo el comprobante, sin chrome ---------- */
@media print {
    /* Oculta sidebar, navegación y cualquier elemento marcado no-print */
    .sidebar, .no-print, .theme-toggle { display: none !important; }
    /* El contenedor principal ocupa todo el ancho */
    main, .col-md-10 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding: 0 !important; }
    body { background: #fff !important; color: #000 !important; }
    /* Tarjeta del ticket plana, sin fondo oscuro */
    .ticket { max-width: 100% !important; border: none !important; }
    .ticket .card-body { padding: 0 !important; }
    .card { background: #fff !important; color: #000 !important; border: none !important; }
    .text-muted { color: #555 !important; }
    .table { color: #000 !important; }
    .table thead th, thead.table-light th { color: #000 !important; border-bottom: 1px solid #000 !important; }
    .table > :not(caption) > * > * { border-color: #ccc !important; }
    .badge { border: 1px solid #999; color: #000 !important; background: transparent !important; }
    .border-top, .border-bottom { border-color: #000 !important; }
    a[href]::after { content: none !important; }
}

/* ---------- Tarjetas de foto guiadas (recepción / entrega) ----------
   Objetivo grande tocable que abre la cámara de un toque; al tomar la foto
   muestra miniatura + ✓. Pensado para mecánicos en celular (manos con grasa). */
.foto-card { position: relative; }
.foto-target {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 100%; aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer; text-align: center;
    border: 2px dashed var(--pa-outline, #c3c6d7); border-radius: .75rem;
    background: var(--pa-surface-low, #f2f4f6); transition: border-color .15s, background .15s;
}
.foto-target:hover, .foto-target:focus-within { border-color: var(--pa-primary, #004ac6); background: var(--pa-surface-high, #e6e8ea); }
.foto-empty { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .5rem; color: var(--pa-on-surface-variant, #434655); }
.foto-empty > .bi { font-size: 1.9rem; line-height: 1; }
.foto-action { font-size: .8rem; font-weight: 600; color: var(--pa-primary, #004ac6); }
.foto-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.foto-check {
    position: absolute; top: .4rem; left: .4rem; width: 1.7rem; height: 1.7rem; border-radius: 50%;
    background: var(--pa-success, #247155); color: #fff; display: none; align-items: center; justify-content: center;
    font-size: 1rem; box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.foto-quitar {
    position: absolute; top: .4rem; right: .4rem; width: 1.8rem; height: 1.8rem; border: 0; border-radius: 50%;
    background: var(--pa-error, #ba1a1a); color: #fff; display: none; align-items: center; justify-content: center;
    line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer;
}
.foto-card.is-done .foto-target { border-style: solid; border-color: var(--pa-success, #247155); }
.foto-card.is-done .foto-thumb,
.foto-card.is-done .foto-check,
.foto-card.is-done .foto-quitar { display: flex; }
.foto-card.is-done .foto-empty { display: none; }
.foto-caption {
    margin-top: .35rem; font-size: .8rem; font-weight: 600; text-align: center;
    color: var(--pa-on-surface-variant, #434655); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.foto-add {
    width: 100%; aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    border: 2px dashed var(--pa-outline, #c3c6d7); border-radius: .75rem; background: transparent; cursor: pointer;
    color: var(--pa-on-surface-variant, #434655); font-size: .85rem; font-weight: 600; transition: border-color .15s, color .15s;
}
.foto-add:hover { border-color: var(--pa-primary, #004ac6); color: var(--pa-primary, #004ac6); }
.foto-add > .bi { font-size: 1.7rem; line-height: 1; }
.foto-add:disabled { opacity: .5; cursor: not-allowed; }