/* Stock real de depósito en el Análisis (web/js/analisis-stock.js). */
.qs-d { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 7px; border-radius: 6px; border: 1px solid transparent; font: 700 10.5px/1.45 var(--sans, inherit); white-space: nowrap; font-variant-numeric: tabular-nums; }
button.qs-d { cursor: pointer; }
button.qs-d:hover { text-decoration: underline; }
button.qs-d:focus-visible, .qs-bl-tog:focus-visible, .qs-x:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 2px; }
.qs-d--dep { background: var(--go-ink); border-color: var(--go-ink); color: var(--card); }
.qs-d--sin { background: color-mix(in oklch, var(--ink-2) 14%, transparent); color: var(--ink-2); font-weight: 500; }
/* Un nombre largo baja de renglón: no puede pisar los precios de al lado. */
[id^="page-analisis-"] .ap-table tbody td.ap-col-modelo { white-space: normal; overflow-wrap: anywhere; }

/* Columna STOCK FÍSICO: el número se toca y lleva raya abajo, así se distingue también sin color. */
[id^="page-analisis-"] .ap-table th.ap-col-stock { white-space: nowrap; text-align: right; }
[id^="page-analisis-"] .ap-table td.ap-col-stock { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
button.qs-num { margin: 0; padding: 0 2px; background: transparent; border: 0; border-bottom: 2px solid var(--go-ink); border-radius: 0; color: var(--ink); font-size: 13px; font-weight: 800; }
td.qs-sin { color: var(--ink-2); font-style: italic; font-size: 11px; }
/* La fila con stock: se pinta opaca porque Modelo y Precio A quedan fijas al correr la tabla; y la raya no depende del color. */
[id^="page-analisis-"] .ap-table tbody tr.qs-fila-dep > td:not(.ap-col-edit) { background: color-mix(in srgb, var(--go) 30%, var(--bg-card, var(--card))) !important; }
[id^="page-analisis-"] .ap-table tbody tr.qs-fila-dep > td.ap-col-modelo { box-shadow: inset 4px 0 0 var(--go-ink); }
body.qc-skin-glass [id^="page-analisis-"] .ap-table tbody tr.qs-fila-dep:not(.ap-row-serie):not(.ap-row-sep) > td.ap-col-modelo,
body.qc-skin-glass [id^="page-analisis-"] .ap-table tbody tr.qs-fila-dep:not(.ap-row-serie):not(.ap-row-sep) > td.ap-col-precio-a { background: color-mix(in srgb, var(--go) 30%, var(--bg-card, var(--card))) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
.mi-gm-t.qs-fila-dep { border-left: 4px solid var(--go-ink); background: color-mix(in srgb, var(--go) 26%, var(--card)); }
.mi-gm-t > .qs-d { margin: 0; align-self: flex-start; min-height: 28px; line-height: 26px; padding: 0 10px; font-size: 12px; }

.qs-pop { position: fixed; z-index: 9000; width: min(620px, calc(100vw - 16px)); max-height: 60vh; overflow: auto; background: var(--card); color: var(--ink); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px; box-shadow: 0 10px 32px rgb(0 0 0 / .28); font: 500 12.5px/1.4 var(--sans, inherit); }
.qs-pop:focus { outline: none; }
.qs-pop-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-size: 13.5px; overflow-wrap: anywhere; }
.qs-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer; }
.qs-res { margin: 6px 0; } .qs-pie { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-2); }
.qs-tabla { overflow-x: auto; }
.qs-tabla table { width: 100%; border-collapse: collapse; font-size: 12px; }
.qs-tabla th { text-align: left; font-weight: 700; color: var(--ink-2); border-bottom: 1px solid var(--line-2); padding: 4px 8px 4px 0; white-space: nowrap; }
.qs-tabla td { border-bottom: 1px solid var(--line); padding: 4px 8px 4px 0; vertical-align: top; }
.qs-tabla .qs-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.qs-bl { width: 100%; box-sizing: border-box; border: 1px solid var(--line-2); border-left: 4px solid var(--go-ink); border-radius: 10px; background: var(--card); color: var(--ink); margin: 6px 0; }
.qs-bl[hidden] { display: none; }
.qs-bl-tog { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 4px 10px; border: 0; background: transparent; color: inherit; font: 700 12.5px var(--sans, inherit); text-align: left; cursor: pointer; }
.qs-bl-n { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; } .qs-bl-ch { margin-left: auto; transition: transform .15s; } .qs-bl.abierto .qs-bl-ch { transform: rotate(180deg); }
.qs-bl-cuerpo { padding: 0 10px 8px; max-height: 38vh; overflow: auto; font-size: 12.5px; } .qs-bl-cuerpo[hidden] { display: none; }

@media (max-width: 600px) {
    .qs-pop { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 70vh; }
    .qs-x { width: 44px; height: 44px; }
    .qs-bl-tog { min-height: 44px; flex-wrap: wrap; }
    /* El detalle en el celular: una tarjeta por línea, con la cantidad siempre a la vista. */
    .qs-pop thead { display: none; }
    .qs-pop tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
    .qs-pop td { display: block; border: 0; padding: 0; grid-column: 1; color: var(--ink-2); }
    .qs-pop td:nth-child(2) { order: -1; grid-column: 1 / -1; color: var(--ink); font-weight: 700; }
    .qs-pop td.qs-n { grid-column: 2; grid-row: 2 / span 3; align-self: center; color: var(--ink); font-size: 16px; font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) { .qs-bl-ch { transition: none; } }