/*
 * Pantallas de stock y compras (inventario, compras, cuentas por pagar, pedido sugerido, órdenes de compra, toma de
 * inventario, vencimientos, mermas, transferencias y envases). Mismo estilo clásico de app.css: granate y blanco.
 */
.w3-modulo { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.w3-conteo { height: 100%; }
.w3-columna { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.w3-panel { flex: 1; padding-top: 6px; }
.w3-crece { flex: 1 1 220px !important; min-width: 160px; }
.w3-abajo { align-items: flex-end; }
.w3-abajo .campo { margin-bottom: 0; }
.w3-corto { width: 70px; text-align: right; }
.w3-cantidad { width: 110px; text-align: right; }
.w3-ajustado { white-space: pre-line; }
.w3-detalle { min-height: 54px; }
.w3-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.w3-tres { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 10px; }
.w3-lado { display: flex; gap: 8px; flex: 1; min-height: 0; }
.w3-lado > .w3-marco:first-child { flex: 1; }
.w3-desconocidos { width: 330px; flex: 0 0 330px; }
.w3-ultima { text-align: left; font-size: 20px; min-height: 30px; white-space: pre-line; }

/* Tablas: la principal de cada pantalla ocupa el alto disponible; en ventanas, un alto fijo con desplazamiento */
.w3-modulo > .w3-marco, .w3-panel > .w3-marco { flex: 1; min-height: 140px; }
.modal .w3-marco { max-height: 46vh; min-height: 120px; }
.w3-marco:focus { outline: 2px solid var(--c-acento); outline-offset: -2px; }
.w3-marco.w3-bajo { flex: 0 0 auto; max-height: 190px; min-height: 90px; }
.w3-renglones { min-height: 180px; }
.w3-tabla th { cursor: pointer; user-select: none; }
.w3-tabla th[data-orden="asc"]::after { content: " \25B2"; font-size: 10px; }
.w3-tabla th[data-orden="desc"]::after { content: " \25BC"; font-size: 10px; }
.w3-tabla tbody tr.w3-peligro td { color: var(--c-peligro); }
.w3-tabla tbody tr.w3-aviso td { color: var(--c-aviso); }
.w3-tabla tbody tr.sel td { color: #fff; }
.w3-tabla tbody tr.w3-total td { font-weight: bold; background: var(--c-acento-suave); border-top: 1px solid var(--c-borde); }
.w3-reporte { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.w3-reporte > .w3-marco { max-height: 52vh; }

/* Pestañas */
.w3-pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--c-borde); }
.w3-pestana {
    border: 1px solid var(--c-borde); border-bottom: 0; background: var(--c-panel); padding: 5px 14px; cursor: pointer;
    border-radius: 2px 2px 0 0; margin-bottom: -1px;
}
.w3-pestana.activa { background: #fff; font-weight: bold; color: var(--c-acento-oscuro); border-color: var(--c-acento); border-bottom: 1px solid #fff; }
.w3-pestana-contenido { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Recepción de una orden de compra: una planilla por renglón */
.w3-desplazable { max-height: 330px; overflow: auto; border: 1px solid var(--c-borde); padding: 6px; background: #fff; }
.w3-grilla-recepcion { display: grid; grid-template-columns: minmax(220px, 3fr) 70px 80px 100px 110px 100px 140px; gap: 5px 8px; align-items: center; }
.w3-grilla-recepcion input { width: 100%; }
.w3-grilla-recepcion input.derecha { text-align: right; }

textarea { border: 1px solid var(--c-borde); border-radius: 2px; padding: 5px 7px; background: #fff; width: 100%; resize: vertical; }
input[type=date] { border: 1px solid var(--c-borde); border-radius: 2px; padding: 4px 6px; background: #fff; }
input[type=date]:disabled, input:disabled { background: #f3eeee; }

@media (max-width: 900px) {
    .w3-dos, .w3-tres { grid-template-columns: 1fr; }
    .w3-desconocidos { display: none; }
}