:root {
    --naranjo: #ea580c;
    --naranjo-oscuro: #c2410c;
    --oscuro: #1f2937;
    --bs-primary: #ea580c;
    --bs-primary-rgb: 234, 88, 12;
    --bs-link-color: #c2410c;
    --bs-link-color-rgb: 194, 65, 12;
    --bs-link-hover-color: #9a3412;
    --bs-primary-bg-subtle: #ffedd5;
    --bs-primary-text-emphasis: #9a3412;
}
body { background: #f4f5f7; }
.btn-primary {
    --bs-btn-bg: var(--naranjo); --bs-btn-border-color: var(--naranjo);
    --bs-btn-hover-bg: var(--naranjo-oscuro); --bs-btn-hover-border-color: var(--naranjo-oscuro);
    --bs-btn-active-bg: #9a3412; --bs-btn-active-border-color: #9a3412;
    --bs-btn-disabled-bg: var(--naranjo); --bs-btn-disabled-border-color: var(--naranjo);
}
.btn-outline-primary {
    --bs-btn-color: var(--naranjo-oscuro); --bs-btn-border-color: var(--naranjo);
    --bs-btn-hover-bg: var(--naranjo); --bs-btn-hover-border-color: var(--naranjo);
    --bs-btn-active-bg: var(--naranjo-oscuro); --bs-btn-active-border-color: var(--naranjo-oscuro);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--naranjo); --bs-nav-link-color: var(--naranjo-oscuro); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #fdba74; box-shadow: 0 0 0 .2rem rgba(234,88,12,.2); }
.form-check-input:checked { background-color: var(--naranjo); border-color: var(--naranjo); }
.text-bg-info { background-color: #0ea5e9 !important; color: #fff !important; }

/* Estructura: menú lateral en PC, barra superior en celular */
.app { display: flex; flex-direction: column; min-height: 100vh; }
.sidebar { background: var(--oscuro); padding: .5rem 1rem; }
.sidebar .navbar-brand { font-weight: 600; min-width: 0; max-width: calc(100% - 60px); }
.sidebar .nav-link { color: rgba(255,255,255,.75); border-radius: .5rem; padding: .55rem .75rem; display: flex; gap: .6rem; align-items: center; }
.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar .nav-link.active { color: #fff; background: var(--naranjo); }
.user-box { border-top: 1px solid rgba(255,255,255,.1); padding-bottom: 1rem; }
.contenido { flex: 1; padding: 1rem; min-width: 0; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }

@media (max-width: 400px) { .pasos li { font-size: .7rem; } }
@media (min-width: 992px) {
    .app { flex-direction: row; }
    .sidebar { width: 250px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; align-items: stretch; padding: 1rem; overflow-y: auto; }
    .sidebar .navbar-brand { max-width: 100%; margin-right: 0; }
    .sidebar .navbar-collapse { flex-grow: 1; }
    .contenido { padding: 2rem; }
}

/* Patente estilo placa chilena, siempre en una línea */
.patente {
    display: inline-block; white-space: nowrap; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-weight: 700; letter-spacing: .05em; background: #fff; color: #111; border: 2px solid #111; border-radius: .35rem;
    padding: .05rem .45rem; font-size: .95rem; line-height: 1.4;
}
.patente-sm { font-size: .8rem; padding: 0 .3rem; border-width: 1px; }
.patente-input { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .1em; }
.estado { font-weight: 500; }
.min-w-0 { min-width: 0; }
.fila-link { cursor: pointer; }
.kpi:hover { transform: translateY(-1px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08) !important; }
.kpi-ventas { background: linear-gradient(135deg, var(--oscuro), #374151); }
.login-bg { background: radial-gradient(circle at 15% 10%, rgba(29,78,216,.45), transparent 45%), radial-gradient(circle at 90% 95%, rgba(220,38,38,.35), transparent 45%), #0b1120; }
.login-logo { background: #0b1120; border-radius: .75rem; padding: 1rem 1.25rem; }

/* Pasos del estado de la orden */
.pasos { display: flex; list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: paso; gap: .25rem; overflow-x: auto; }
.pasos li { flex: 1; min-width: 0; text-align: center; font-size: .8rem; color: #6b7280; position: relative; padding-top: 2rem; counter-increment: paso; }
.pasos li::before {
    content: counter(paso); position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #e5e7eb; color: #6b7280; line-height: 1.6rem; font-weight: 600;
}
.pasos li.hecho::before { content: "✓"; background: #16a34a; color: #fff; }
.pasos li.actual { color: #111; font-weight: 600; }
.pasos li.actual::before { background: var(--naranjo); color: #fff; }

/* Fotos de inspección */
.foto-slot {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
    aspect-ratio: 4 / 3; border: 2px dashed #d1d5db; border-radius: .75rem; background: #fafafa; cursor: pointer;
    overflow: hidden; position: relative; color: #9ca3af; text-align: center;
}
.foto-slot i { font-size: 1.8rem; }
.foto-slot span { font-size: .8rem; color: #374151; position: relative; z-index: 1; background: rgba(255,255,255,.85); border-radius: .25rem; padding: 0 .3rem; }
.foto-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-slot img:not(.d-none) ~ span { position: absolute; bottom: .35rem; }
.foto-slot.cargando { opacity: .6; }
.miniatura { width: 64px; height: 48px; object-fit: cover; border-radius: .35rem; }
.barra-guardar { position: sticky; bottom: 0; background: linear-gradient(transparent, #f4f5f7 30%); padding: 1rem 0; }

/* Aviso de instalación iPhone */
.aviso-ios { position: fixed; left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 1080; background: #fff; border-radius: .75rem; padding: .75rem 1rem; box-shadow: 0 .5rem 2rem rgba(0,0,0,.2); max-width: 420px; margin: 0 auto; }

/* Informe imprimible */
.informe { background: #e5e7eb; }
.informe .hoja { background: #fff; max-width: 820px; margin: 1rem auto 2rem; padding: 2rem; box-shadow: 0 .25rem 1rem rgba(0,0,0,.1); }
.barra-informe { display: flex; justify-content: space-between; max-width: 820px; margin: 1rem auto 0; padding: 0 .5rem; gap: .5rem; }
.foto-informe { width: 140px; height: 105px; object-fit: cover; border-radius: .25rem; border: 1px solid #ddd; }
.check-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: #d1d5db; }
.check-ok { background: #16a34a; } .check-obs { background: #f59e0b; } .check-malo { background: #dc2626; }
@media (max-width: 576px) { .informe .hoja { padding: 1rem; margin: .5rem; } }
@media print {
    .no-print { display: none !important; }
    .informe { background: #fff; }
    .informe .hoja { box-shadow: none; margin: 0; padding: 0; max-width: none; }
    .evitar-corte, .firmas { break-inside: avoid; }
    @page { margin: 1.5cm; }
}

/* Rueda de carga (js/cargando.js) */
.cargando { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; background: rgba(244,245,247,.75); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; }
.cargando.visible { opacity: 1; visibility: visible; }
.cargando .rueda { width: 72px; height: 72px; animation: rueda-gira .9s linear infinite; filter: drop-shadow(0 .25rem .5rem rgba(0,0,0,.2)); }
.cargando-texto { font-weight: 600; color: #374151; }
@keyframes rueda-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cargando .rueda { animation-duration: 3s; } }

/* Marca de agua del logo al centro del informe impreso */
.marca-agua { position: relative; }
.marca-agua::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: url("../img/marca-agua.png") center 45% / 55% auto no-repeat;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.marca-agua > * { position: relative; z-index: 1; }
.marca-agua .table { --bs-table-bg: transparent; }

/* Galería de fotos en la orden de trabajo */
.foto-ot { display: block; position: relative; border-radius: .5rem; overflow: hidden; background: #e5e7eb; aspect-ratio: 4 / 3; }
.foto-ot img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.foto-ot:hover img { transform: scale(1.03); }
.foto-ot span { position: absolute; left: 0; right: 0; bottom: 0; padding: .25rem .5rem; font-size: .75rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); }