/*
    orden-servicio.css
    Estilos propios del modulo Ordenes de Servicio (Taller).

    Usa exclusivamente los tokens --t-* de theme-tokens.css, de modo que el
    modo oscuro sale solo: no hay ningun color literal fuera del mapa de
    colores de estado, que necesita tonos propios para distinguir las etapas
    del taller de un vistazo.

    Ver docs/OS/diseno-y-plan-de-trabajo.md
*/

/* ============================ COLORES DE ESTADO ============================
   Los seis colores que puede tener un estado en fac_os_estado. Cada uno
   define fondo, texto y punto, y se aplican con la clase os-c-<color>.
   ========================================================================= */
.os-c-gris    { --os-color: var(--t-text-muted); --os-bg: rgba(100, 116, 139, 0.12); }
.os-c-azul    { --os-color: var(--t-primary);    --os-bg: var(--t-primary-soft); }
.os-c-ambar   { --os-color: var(--t-warning);    --os-bg: var(--t-warning-bg); }
.os-c-violeta { --os-color: #7C3AED;             --os-bg: rgba(124, 58, 237, 0.12); }
.os-c-verde   { --os-color: var(--t-success);    --os-bg: var(--t-success-bg); }
.os-c-rojo    { --os-color: var(--t-danger);     --os-bg: var(--t-danger-bg); }

html.dark-mode .os-c-violeta { --os-color: #A78BFA; --os-bg: rgba(167, 139, 250, 0.16); }

.os-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: var(--t-fs-sm);
    font-weight: 600;
    color: var(--os-color, var(--t-text-muted));
    background: var(--os-bg, rgba(100, 116, 139, 0.12));
    white-space: nowrap;
}

.os-badge i { font-size: var(--t-fs-sm); }

/* ============================== TIRA DE CHIPS ==============================
   Resumen por estado en el listado. Hace de contador y de filtro rapido.
   ========================================================================= */
.os-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--t-space-2);
    margin-bottom: var(--t-space-3);
}

.os-chip {
    display: flex;
    align-items: center;
    gap: var(--t-space-2);
    padding: 8px 14px;
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-sm);
    background: var(--t-card);
    cursor: pointer;
    transition: var(--t-transition);
    box-shadow: var(--t-shadow-sm);
}

.os-chip:hover { box-shadow: var(--t-shadow); transform: translateY(-1px); }

.os-chip.is-active {
    border-color: var(--os-color, var(--t-primary));
    background: var(--os-bg, var(--t-primary-soft));
}

.os-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--os-color, var(--t-text-muted));
    flex: 0 0 auto;
}

.os-chip-txt { font-size: var(--t-fs-sm); color: var(--t-text); }

.os-chip-num {
    font-size: var(--t-fs-md);
    font-weight: 700;
    color: var(--os-color, var(--t-text));
}

/* ============================== FILTROS ================================= */
.os-filtros-check {
    display: flex;
    gap: var(--t-space-4);
    align-items: center;
    padding-top: 4px;
}

.os-filtros-check .checkbox { margin: 0; }

/* ============================== RECEPCION ==============================
   Pie del formulario de recepcion.
   ===================================================================== */
.os-wizard-foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--t-space-2);
    align-items: center;
    padding: var(--t-space-3) 0;
}

.os-inline-field { display: flex; gap: var(--t-space-2); align-items: flex-start; }
.os-inline-field > div:last-child { flex: 0 0 auto; }

/* chosen fija su ancho segun el <select>: al lado de un boton se quedaba
   en una fraccion de la columna */
.os-inline-field .chosen-container { width: 100% !important; }

/* boton de solo icono (el nombre queda como titulo) */
.os-btn-icono .btn { width: 34px; height: 32px; padding: 0 !important; font-size: 0; }
.os-btn-icono .btn i { font-size: 14px; margin: 0; }

/* Documento y contacto del cliente elegido en la recepcion */
.os-cliente-info:not(:empty) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 14px;
    margin-top: 22px;
    padding: 8px 12px;
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-sm);
    background: var(--t-bg);
    font-size: var(--t-fs-sm);
    color: var(--t-text);
}

.os-cliente-info > span,
.os-cliente-info-cab > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-cliente-info i { width: 14px; margin-right: 4px; text-align: center; color: var(--t-text-muted); }
.os-cliente-info .is-falta { color: var(--t-text-muted); font-style: italic; }
.os-cliente-info-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; }
.os-cliente-info-cab .btn { flex: 0 0 auto; margin: 0; }

/* Lo que se ve al recibir el equipo: una fila de pastillas que se marcan de
   un clic, igual que los accesorios */
.os-condicion { display: flex; flex-wrap: wrap; gap: var(--t-space-2); padding-top: 4px; }

.smart-form .os-condicion .checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 7px 14px 7px 32px !important;
    border: 1px solid var(--t-border);
    border-radius: 999px;
    background: var(--t-card);
    font-size: var(--t-fs-sm);
    cursor: pointer;
    transition: var(--t-transition);
    user-select: none;
}

/* el cuadrito de SmartAdmin va dentro de la pastilla, no pegado al borde */
.smart-form .os-condicion .checkbox i { top: 50%; left: 10px; margin-top: -9px; }

.smart-form .os-condicion .checkbox.is-on {
    border-color: var(--t-primary);
    background: var(--t-primary-soft);
    color: var(--t-primary);
    font-weight: 600;
}

/* ============================== ACCESORIOS ============================== */
.os-accesorios {
    display: flex;
    flex-wrap: wrap;
    gap: var(--t-space-2);
}

.os-acc-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--t-border);
    border-radius: 999px;
    cursor: pointer;
    font-size: var(--t-fs-sm);
    background: var(--t-card);
    transition: var(--t-transition);
    user-select: none;
}

.os-acc-item.is-on {
    border-color: var(--t-primary);
    background: var(--t-primary-soft);
    color: var(--t-primary);
    font-weight: 600;
}

.os-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.os-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--t-primary-soft);
    color: var(--t-primary);
    font-size: var(--t-fs-xs);
}

.os-tag a { color: inherit; opacity: .7; }
.os-tag a:hover { opacity: 1; }

/* ================================ FOTOS ================================ */
.os-fotos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--t-space-2);
    margin-bottom: var(--t-space-2);
}

.os-foto {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--t-radius-sm);
    overflow: hidden;
    border: 1px solid var(--t-border);
    background: var(--t-bg);
}

.os-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.os-foto a.os-foto-del {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(15, 23, 42, .65);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

/* =============================== CABECERA ===============================
   Numero de orden y estado, equipo, cliente e ingreso; a la derecha el
   total y el saldo. Todo en la tipografia del sistema (Inter), con cifras
   tabulares para que los importes no bailen.
   ======================================================================= */
.os-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--t-space-4);
    flex-wrap: wrap;
    background: var(--t-card);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    padding: var(--t-space-4);
    box-shadow: var(--t-shadow-sm);
    margin-bottom: var(--t-space-3);
}

.os-header-main { min-width: 0; }

.os-header-id { display: flex; align-items: center; gap: var(--t-space-3); flex-wrap: wrap; margin-bottom: 6px; }

.os-header-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--t-primary-soft);
    color: var(--t-primary);
    font-size: 18px;
}

.os-header-id h2 {
    margin: 0;
    font-family: var(--t-font);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--t-text);
    font-variant-numeric: tabular-nums;
}

/* En que paso va la orden, al lado del estado y con menos peso que el */
.os-paso {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--t-border);
    border-radius: 999px;
    font-size: var(--t-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--t-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.os-header-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    font-size: var(--t-fs-sm);
    color: var(--t-text-muted);
    margin-top: 6px;
}

.os-header-sub strong { color: var(--t-text); font-weight: 600; }
.os-dato i { width: 16px; margin-right: 6px; text-align: center; color: var(--t-text-muted); }

.os-header-money {
    display: grid;
    grid-template-columns: auto;
    justify-items: end;
    gap: 2px;
    min-width: 190px;
    padding: var(--t-space-3) var(--t-space-4);
    border-radius: var(--t-radius);
    background: var(--t-bg);
    text-align: right;
}

.os-money-label {
    font-size: var(--t-fs-xs);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--t-text-muted);
}

.os-money-value {
    font-family: var(--t-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--t-text);
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
}

/* Botones de una accion puntual (el PDF del comprobante, por ejemplo) */
.os-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--t-space-2);
}

/* ======================== DOS COLUMNAS (70 / 30) ========================
   Izquierda: lo que paso y lo que se hizo. Derecha: el siguiente paso,
   avisar al cliente y los documentos. En pantallas angostas, una debajo
   de la otra, con las acciones primero.
   ======================================================================= */
.os-det-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
    gap: var(--t-space-3);
    align-items: start;
}

.os-det-main > .modern-form-card { margin-bottom: 0; }
.os-det-side { display: flex; flex-direction: column; gap: var(--t-space-3); }

.os-panel {
    background: var(--t-card);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-sm);
    padding: var(--t-space-3);
}

.os-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--t-space-3);
    font-size: var(--t-fs-md);
    font-weight: 700;
    color: var(--t-text);
}

.os-panel-title i { color: var(--t-primary); }

/* acciones: una por fila, la primera destacada */
.os-det-side .os-acciones { flex-direction: column; flex-wrap: nowrap; }

.os-accion {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-sm);
    background: var(--t-card);
    color: var(--t-text);
    font-weight: 600;
    text-align: left;
    transition: background .15s, border-color .15s;
}

.os-accion > span { flex: 1; }
.os-accion > i:first-child { width: 18px; text-align: center; color: var(--t-primary); }
.os-accion > .fa-angle-right { color: var(--t-text-muted); }
.os-accion:hover { background: var(--t-primary-soft); border-color: var(--t-primary); }

.os-accion.is-principal { background: var(--t-primary); border-color: var(--t-primary); color: #fff; }
.os-accion.is-principal > i { color: #fff !important; }
.os-accion.is-principal:hover { filter: brightness(1.08); }

.os-accion.is-peligro { color: var(--t-danger); }
.os-accion.is-peligro > i:first-child { color: var(--t-danger); }
.os-accion.is-peligro:hover { background: var(--t-danger-bg); border-color: var(--t-danger); }

/* comunicar al cliente */
.os-com-cliente { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-fs-sm); color: var(--t-text); margin-bottom: 10px; }
.os-com-cliente i { margin-right: 4px; color: var(--t-text-muted); }
.os-com-cliente .fa-whatsapp { color: #25D366; }
.os-com-sub { font-size: var(--t-fs-sm); color: var(--t-text-muted); margin-bottom: 6px; }
.os-com-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }

.os-com-op {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-sm);
    font-size: var(--t-fs-sm);
    color: var(--t-text);
    cursor: pointer;
}

.os-com-op > span { flex: 1; }
.os-com-op > i { width: 16px; text-align: center; color: var(--t-text-muted); }
.os-com-op small { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--t-success); }
.os-com-op:hover { border-color: var(--t-primary); }
.os-com-op.is-on { border-color: var(--t-primary); background: var(--t-primary-soft); font-weight: 600; }
.os-com-op.is-on > i { color: var(--t-primary); }

.os-com-texto { resize: vertical; margin-bottom: 8px; font-size: var(--t-fs-sm); }
.os-com-envio { display: flex; gap: 6px; }
.os-com-envio input { flex: 0 0 120px; }
.os-com-envio .btn { flex: 1; margin: 0; }

/* documentos */
.os-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }

.os-doc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-sm);
    background: var(--t-card);
    color: var(--t-text);
    font-size: var(--t-fs-xs);
    line-height: 1.25;
}

.os-doc i {
    width: 34px;
    height: 34px;
    line-height: 34px;
    border-radius: 8px;
    font-size: 16px;
    color: var(--os-color);
    background: var(--os-bg);
}

.os-doc:hover { border-color: var(--os-color); }

/* PDF de la orden en ventana emergente */
.os-pdf iframe { display: block; width: 100%; height: 70vh; border: 0; border-radius: var(--t-radius-sm); background: #fff; }

.os-nota { margin: 10px 0 0; font-size: var(--t-fs-sm); }

@media (max-width: 1100px) {
    .os-det-grid { grid-template-columns: minmax(0, 1fr); }
    .os-det-side { order: -1; }
}

/* ============================ LINEA DE TIEMPO ============================
   El elemento central del modulo.
   ======================================================================= */
.os-timeline { position: relative; padding: var(--t-space-2) 0 var(--t-space-2) 34px; }

.os-timeline:before {
    content: '';
    position: absolute;
    left: 11px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: var(--t-border);
}

.os-tl-item { position: relative; padding-bottom: var(--t-space-5); }
.os-tl-item:last-child { padding-bottom: 0; }

.os-tl-dot {
    position: absolute;
    left: -34px;
    top: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--os-bg, var(--t-bg));
    color: var(--os-color, var(--t-text-muted));
    border: 2px solid var(--os-color, var(--t-border));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 0 0 4px var(--t-card);
}

.os-tl-head {
    display: flex;
    align-items: baseline;
    gap: var(--t-space-3);
    flex-wrap: wrap;
}

.os-tl-title {
    font-weight: 600;
    color: var(--t-text);
    font-size: var(--t-fs-base);
}

.os-tl-fecha {
    font-size: var(--t-fs-xs);
    color: var(--t-text-muted);
    font-variant-numeric: tabular-nums;
}

.os-tl-user { font-size: var(--t-fs-xs); color: var(--t-text-muted); }
.os-tl-user i { margin-right: 4px; }

.os-tl-body {
    margin-top: 6px;
    font-size: var(--t-fs-sm);
    color: var(--t-text);
    background: var(--t-bg);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-sm);
    padding: 10px 12px;
    white-space: pre-line;
}

.os-tl-fotos { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

.os-tl-fotos img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--t-radius-sm);
    border: 1px solid var(--t-border);
    cursor: pointer;
}

/* Cada paso de la ruta. El punto y la linea son los mismos de la version
   plana; lo que cambia es que ahora cuelgan eventos de cada paso. */
.os-paso-item { position: relative; padding-bottom: var(--t-space-5); }
.os-paso-item:last-child { padding-bottom: 0; }

.os-paso-head {
    display: flex;
    align-items: baseline;
    gap: var(--t-space-3);
    flex-wrap: wrap;
}

.os-paso-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--os-color, var(--t-text-muted));
    color: #fff;
    font-size: var(--t-fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* El paso que todavia no ocurre: presente pero apagado, para que se vea
   cuanto falta. */
.os-paso-item.is-pendiente { opacity: .45; }
.os-paso-item.is-pendiente .os-paso-n { background: var(--t-text-muted); }
.os-paso-item.is-pendiente .os-tl-fecha { font-style: italic; }

.os-paso-eventos {
    margin-top: var(--t-space-2);
    padding-left: var(--t-space-3);
    border-left: 2px solid var(--t-border);
    display: flex;
    flex-direction: column;
    gap: var(--t-space-3);
}

.os-tl-ev-head {
    display: flex;
    align-items: baseline;
    gap: var(--t-space-2);
    flex-wrap: wrap;
}

.os-tl-ev-head > i { color: var(--t-text-muted); font-size: var(--t-fs-xs); }

.os-tl-ev-title {
    font-size: var(--t-fs-sm);
    font-weight: 600;
    color: var(--t-text);
}

.os-tl-vacio {
    color: var(--t-text-muted);
    font-size: var(--t-fs-sm);
    padding: var(--t-space-4);
}

/* ============================ FICHAS DE DATOS ============================ */
.os-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--t-space-3);
}

.os-card {
    background: var(--t-card);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    padding: var(--t-space-4);
}

.os-card h4 {
    margin: 0 0 var(--t-space-3);
    font-size: var(--t-fs-sm);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--t-text-muted);
    font-weight: 700;
}

.os-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--t-space-3); }
.os-dl dt { font-size: var(--t-fs-sm); color: var(--t-text-muted); font-weight: 400; }
.os-dl dd { font-size: var(--t-fs-sm); color: var(--t-text); margin: 0; font-weight: 600; }

/* ================================ TABLAS ================================
   Las tablas de detalle usan las clases Bootstrap del ERP (table
   table-hover), igual que el detalle de una venta, para que el modulo no
   se vea como un sistema aparte. Aqui solo van los dos anadidos que esas
   clases no cubren: la fila de totales y el estado vacio.
   ======================================================================= */
.os-detalle .table tfoot td { font-weight: 700; border-top: 2px solid var(--t-border); }

.os-vacio {
    text-align: center;
    color: var(--t-text-muted);
    font-size: var(--t-fs-sm);
    padding: var(--t-space-5);
}

/* Un dato que viene de otra parte del proceso y aqui solo se lee (la falla
   que reporto el cliente dentro del diagnostico) */
.os-lectura {
    min-height: 74px;
    padding: 8px 12px;
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-sm);
    background: var(--t-bg);
    color: var(--t-text-muted);
    font-size: var(--t-fs-sm);
    white-space: pre-wrap;
}

/* ============================== CHECKLIST ============================== */
.os-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px; }

/* Titulo del checklist dentro de la ventana de control de calidad, con el
   boton de marcarlo todo a la derecha */
.os-cc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--t-space-3);
    margin-bottom: 8px;
}

/* .label fuera de un smart-form es la pastilla oscura de Bootstrap: aqui se
   quiere el rotulo en versalitas del resto del modulo */
.os-cc-head .label {
    margin: 0;
    padding: 0;
    background: none;
    font-size: var(--t-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--t-text-muted);
}

.os-check-item {
    display: flex;
    align-items: center;
    gap: var(--t-space-2);
    padding: 8px 12px;
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-sm);
    font-size: var(--t-fs-sm);
    cursor: pointer;
    transition: var(--t-transition);
    user-select: none;
}

.os-check-item.is-on {
    border-color: var(--t-success);
    background: var(--t-success-bg);
    color: var(--t-success);
    font-weight: 600;
}

/* ================================ AVISOS ================================
   En el detalle van lado a lado, como una franja, para no empujar hacia
   abajo la linea de tiempo.
   ======================================================================= */
.os-avisos:not(:empty) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--t-space-2);
    margin-bottom: var(--t-space-3);
}

.os-avisos .os-aviso { margin-bottom: 0; }

.os-aviso {
    display: flex;
    align-items: center;
    gap: var(--t-space-2);
    padding: 10px 14px;
    border-radius: var(--t-radius-sm);
    font-size: var(--t-fs-sm);
    margin-bottom: var(--t-space-2);
    border: 1px solid transparent;
}

.os-aviso-info    { background: var(--t-info-bg);    color: var(--t-info);    border-color: var(--t-info); }
.os-aviso-ok      { background: var(--t-success-bg); color: var(--t-success); border-color: var(--t-success); }
.os-aviso-warn    { background: var(--t-warning-bg); color: var(--t-warning); border-color: var(--t-warning); }
.os-aviso-danger  { background: var(--t-danger-bg);  color: var(--t-danger);  border-color: var(--t-danger); }

/* ============================ FIRMA DIGITAL ============================ */
.os-firma-wrap { border: 1px dashed var(--t-border); border-radius: var(--t-radius-sm); background: #fff; }
.os-firma-wrap canvas { display: block; width: 100%; height: 160px; touch-action: none; cursor: crosshair; }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 768px) {
    .os-header { flex-direction: column; }
    .os-header-money { width: 100%; justify-items: start; text-align: left; }
    .os-timeline { padding-left: 28px; }
    .os-tl-dot { left: -28px; }
}

/* ========================= SELECTOR DE GRUPO =========================
   Las nueve secciones de la orden se agrupan en tres. El control es del
   tipo "segmentado": una sola pieza con fondo gris y el grupo activo en
   azul. Debajo van las pestañas normales del sistema (.nav-tabs), asi que
   la navegacion fina sigue siendo la misma del resto del ERP.
   ===================================================================== */
.os-seg {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    margin-bottom: var(--t-space-3);
    background: var(--t-bg);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
}

.os-seg-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 7px 16px;
    border-radius: var(--t-radius-sm);
    font-family: inherit;
    font-size: var(--t-fs-sm);
    font-weight: 600;
    color: var(--t-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-transition), color var(--t-transition);
}

.os-seg-btn:hover {
    color: var(--t-text);
}

.os-seg-btn.is-active {
    background: var(--t-primary);
    color: #ffffff;
}

html.dark-mode .os-seg-btn.is-active {
    background: #8ab4f8;
    color: #0f172a;
}

/* ventana de item: del catalogo o manual */
.os-item-origen { margin-bottom: var(--t-space-2); }

/* presupuesto dentro del diagnostico */
.os-diag-items-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--t-space-2);
    margin-bottom: 6px;
}

.os-diag-items-head .btn { margin: 0 0 0 4px; }
.os-items-wrap { overflow-x: auto; }
.os-items { margin-bottom: 0; min-width: 640px; }
.os-items td:not(:nth-child(2)), .os-items th { white-space: nowrap; }
.os-items td { vertical-align: middle !important; }
.os-items tfoot td { font-weight: 700; }

/* El saldo va en pastilla, como en el resto de importes destacados */
.os-money-saldo {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--t-radius-sm);
}

.os-money-saldo.is-pendiente { background: var(--t-danger-bg); color: var(--t-danger); }
.os-money-saldo.is-cancelado { background: var(--t-success-bg); color: var(--t-success); }

/* ===================== MODAL DE REPUESTO/SERVICIO =====================
   Encabezado con icono en pastilla, titulo y una segunda linea que dice
   en que orden y en que etapa se esta trabajando; etiquetas en versalitas
   y el total resaltado con el desglose debajo.
   ===================================================================== */
.os-modal-head {
    display: flex;
    align-items: center;
    gap: var(--t-space-3);
}

.os-modal-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--t-radius-sm);
    background: var(--t-primary-soft);
    color: var(--t-primary);
    font-size: 17px;
}

.os-modal-titulo {
    font-size: var(--t-fs-lg, 16px);
    font-weight: 700;
    color: var(--t-text);
    line-height: 1.25;
}

.os-modal-sub {
    font-size: var(--t-fs-sm);
    color: var(--t-text-muted);
    line-height: 1.3;
}

/* Etiquetas de campo en versalitas, como en el mockup */
.os-form .label,
.os-form label.label {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: var(--t-fs-xs);
    font-weight: 700;
    color: var(--t-text-muted);
}

/* Campo de importe con el simbolo de moneda dentro, a la izquierda */
.os-money-field { position: relative; }

.os-money-field > .os-money-simbolo {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--t-fs-sm);
    font-weight: 600;
    color: var(--t-text-muted);
    pointer-events: none;
}

.os-money-field input {
    padding-left: 38px !important;
    font-weight: 600;
}

/*
 * Total: no se edita, se muestra resaltado. El selector incluye .smart-form
 * porque SmartAdmin pinta el fondo del campo con ".smart-form .input input",
 * que es mas especifico que una sola clase.
 */
.smart-form.os-form .os-total-field input,
.os-form .os-total-field input {
    background: var(--t-primary-soft) !important;
    border-color: transparent !important;
    color: var(--t-primary) !important;
    font-weight: 700;
    font-size: var(--t-fs-md, 15px);
}

.os-total-hint {
    margin-top: 4px;
    font-size: var(--t-fs-xs);
    color: var(--t-text-muted);
    text-align: right;
}


/* ======================= RECEPCION EN UNA PANTALLA =======================
   Arriba lo que hace falta para abrir la orden; el resto detras de "Mas
   detalles", que casi nunca se toca en el mostrador.
   ===================================================================== */

/* Asterisco de campo obligatorio */
.os-req {
    color: var(--t-danger);
    margin-left: 2px;
    font-weight: 700;
}

.os-mas-card { padding: 0 !important; overflow: hidden; }

.os-mas-toggle {
    display: flex;
    align-items: center;
    gap: var(--t-space-2);
    width: 100%;
    padding: 14px 18px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--t-fs-base);
    font-weight: 600;
    color: var(--t-text);
    text-align: left;
    cursor: pointer;
    transition: background var(--t-transition);
}

.os-mas-toggle:hover { background: var(--t-bg); }

.os-mas-toggle > i {
    color: var(--t-text-muted);
    font-size: 12px;
    width: 12px;
}

.os-mas-toggle > small {
    color: var(--t-text-muted);
    font-weight: 400;
    font-size: var(--t-fs-sm);
}

.os-mas-toggle.is-open { border-bottom: 1px solid var(--t-border); }

.os-mas-cuerpo { padding: var(--t-space-2) 0 var(--t-space-3); }

@media (max-width: 640px) {
    .os-mas-toggle > small { display: none; }
}