/*
    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; }

/* ============================== ASISTENTE ==============================
   Los tres pasos de la recepcion.
   ===================================================================== */
.os-wizard {
    display: flex;
    gap: var(--t-space-2);
    margin-bottom: var(--t-space-3);
}

.os-step {
    display: flex;
    align-items: center;
    gap: var(--t-space-2);
    padding: 10px 18px;
    border-radius: var(--t-radius-sm);
    background: var(--t-card);
    border: 1px solid var(--t-border);
    color: var(--t-text-muted);
    font-size: var(--t-fs-sm);
    flex: 1;
    cursor: pointer;
    transition: var(--t-transition);
}

.os-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--t-border);
    color: var(--t-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--t-fs-xs);
    flex: 0 0 auto;
}

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

.os-step.is-active .os-step-num { background: var(--t-primary); color: #fff; }
.os-step.is-done .os-step-num { background: var(--t-success); color: #fff; }

.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; }

.os-condicion { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }

/* ============================== 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 =============================== */
.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-id { display: flex; align-items: center; gap: var(--t-space-3); flex-wrap: wrap; }

.os-header-id h2 {
    margin: 0;
    font-size: var(--t-fs-xl);
    font-weight: 700;
    color: var(--t-text);
    font-family: var(--t-font-mono);
    letter-spacing: -.5px;
}

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

.os-header-sub strong { color: var(--t-text); font-weight: 600; }

.os-header-money { display: flex; gap: var(--t-space-5); }

.os-money-item { text-align: right; }

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

.os-money-value {
    display: block;
    font-size: var(--t-fs-lg);
    font-weight: 700;
    color: var(--t-text);
    font-family: var(--t-font-mono);
}

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

/* Botones contextuales: solo los que el estado permite y el rol autoriza */
.os-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--t-space-2);
    margin-bottom: var(--t-space-3);
}

/* ============================ 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-family: var(--t-font-mono);
}

.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;
}

.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);
}

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

.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 ================================ */
.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); }

/* Cartel grande de "listo para recoger" */
.os-listo {
    text-align: center;
    padding: var(--t-space-4);
    border-radius: var(--t-radius);
    background: var(--t-success-bg);
    color: var(--t-success);
    border: 2px dashed var(--t-success);
    font-size: var(--t-fs-md);
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: var(--t-space-3);
}

/* ============================ 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-content: space-between; }
    .os-wizard { flex-direction: column; }
    .os-timeline { padding-left: 28px; }
    .os-tl-dot { left: -28px; }
}

/* ============================ TABLERO ============================
   Tarjetas de conteo y contenedores de grafico del modulo Taller.
   =============================================================== */
.os-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--t-space-3);
    margin-bottom: var(--t-space-4);
}

.os-tarjeta {
    background: var(--t-card);
    border: 1px solid var(--t-border);
    border-left: 4px solid var(--os-color, var(--t-primary));
    border-radius: var(--t-radius);
    padding: var(--t-space-4);
    box-shadow: var(--t-shadow-sm);
    position: relative;
    transition: var(--t-transition);
}

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

/* La cifra a la izquierda y el icono en pastilla a la derecha, en una fila */
.os-tarjeta-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--t-space-2);
}

.os-tarjeta-ico {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--t-radius-sm);
    background: var(--os-bg, var(--t-primary-soft));
    color: var(--os-color, var(--t-primary));
    font-size: 14px;
}

.os-tarjeta-num {
    font-size: var(--t-fs-2xl);
    font-weight: 700;
    line-height: 1.1;
    color: var(--t-text);
    font-family: var(--t-font-mono);
}

.os-tarjeta-money .os-tarjeta-num { font-size: var(--t-fs-lg); }

.os-tarjeta-lbl {
    font-size: var(--t-fs-xs);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--t-text-muted);
    margin-top: var(--t-space-3);
    line-height: 1.35;
}

/* Titulo de cada bloque del tablero */
.os-seccion-tit {
    font-size: var(--t-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--t-text-muted);
    margin: var(--t-space-5) 0 var(--t-space-3);
}

.os-seccion-tit:first-of-type { margin-top: var(--t-space-4); }

.os-graficos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--t-space-3);
}

.os-chart { position: relative; height: 240px; }

@media (max-width: 768px) {
    .os-tarjetas { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    .os-graficos { grid-template-columns: 1fr; }
}


/*
 * Modo oscuro: el azul del tema (--t-primary, #3B82F6) sobre su propio
 * tinte queda apenas en 3:1 -- legible pero por debajo del resto de los
 * textos, que van practicamente en blanco. Se sube a un azul mas claro
 * solo en oscuro, con el mismo criterio que ya se aplico al violeta.
 * Afecta al chip de estado azul y al paso activo del asistente de
 * recepcion, que son los dos sitios que lo usan como color de texto.
 */
html.dark-mode .os-c-azul {
    --os-color: #8AB4F8;
}

html.dark-mode .os-step.is-active {
    color: #8AB4F8;
}


/* ========================= 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;
}

/* 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;
}


/* ===================== TABLERO: GRAFICOS Y LEYENDAS =====================
   Los tres graficos que resumen el rango van en una fila propia, con el
   anillo y su leyenda al costado, y cada tarjeta cierra con una nota que
   explica lo que se esta viendo.
   ===================================================================== */
.os-graficos-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.os-chart-sm { height: 170px; }

/* Anillo a la izquierda, leyenda a la derecha */
.os-chart-donut {
    display: flex;
    align-items: center;
    gap: var(--t-space-4);
}

.os-chart-donut > .os-chart { flex: 0 0 170px; width: 170px; }

.os-leyenda { flex: 1 1 auto; min-width: 0; }

.os-leyenda-fila {
    display: flex;
    align-items: center;
    gap: var(--t-space-2);
    padding: 3px 0;
    font-size: var(--t-fs-sm);
}

.os-leyenda-punto {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.os-leyenda-txt {
    flex: 1 1 auto;
    color: var(--t-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.os-leyenda-num { font-weight: 700; color: var(--t-text); }

.os-leyenda-pct {
    width: 42px;
    text-align: right;
    color: var(--t-text-muted);
}

/* Nota al pie de la tarjeta */
.os-card-pie {
    margin-top: var(--t-space-3);
    padding-top: var(--t-space-3);
    border-top: 1px solid var(--t-border);
    font-size: var(--t-fs-xs);
    color: var(--t-text-muted);
    line-height: 1.45;
}

.os-card-pie:empty { display: none; }

/* Subtitulo y cifra destacada (tarjeta de ingresos) */
.os-card-sub {
    font-size: var(--t-fs-sm);
    color: var(--t-text-muted);
    margin-top: -4px;
}

.os-card-dato {
    display: flex;
    align-items: baseline;
    gap: var(--t-space-2);
    flex-wrap: wrap;
    margin: var(--t-space-2) 0 var(--t-space-1);
}

.os-card-dato-num {
    font-size: var(--t-fs-2xl);
    font-weight: 700;
    color: var(--t-text);
    font-family: var(--t-font-mono);
}

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

@media (max-width: 640px) {
    .os-chart-donut { flex-direction: column; align-items: stretch; }
    .os-chart-donut > .os-chart { flex: 0 0 auto; width: 100%; }
}


/* ======================= 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; }
}