/*
 * Productos, Catálogos, Clientes y Fidelidad: mismo estilo clásico de la etapa 1 (granate y blanco, app.css).
 * Sólo agrega lo propio de estas pantallas; los colores salen de las variables de app.css.
 */

/* ---------- Pantalla ---------- */
.w2-vista { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.w2-vista > .w2-marco { flex: 1; min-height: 160px; }
.w2-filtro { flex: 1 1 260px !important; min-width: 180px; }
.w2-num { text-align: right; }
.w2-derecha { text-align: right; }
.w2-crece { flex: 1; min-width: 0; }
.w2-angosto { flex: 0 0 120px !important; }
.w2-pregunta { white-space: pre-line; max-width: 440px; }
.w2-alerta { color: var(--c-peligro); font-weight: bold; }
.tabla tbody tr.sel .w2-alerta { color: #fff; }

/* ---------- Tabla con orden y selección ---------- */
.w2-marco { outline: none; }
.w2-marco:focus-visible { outline: 2px solid var(--c-acento); outline-offset: -2px; }
.w2-tabla th { cursor: pointer; user-select: none; white-space: nowrap; }
.w2-tabla th:hover { background: var(--c-seleccion-suave); }
.w2-tabla th:focus-visible { outline: 2px solid var(--c-acento); outline-offset: -2px; }
.w2-orden { font-size: 10px; }
.w2-tabla tbody tr:hover:not(.sel) { background: var(--c-panel); }
.w2-tabla tbody tr.w2-cursor:not(.sel) { box-shadow: inset 0 0 0 1px var(--c-acento); }
.w2-tabla-chica { height: 128px; }
.w2-crece-alto { flex: 1; min-height: 160px; max-height: 40vh; }

/* ---------- Formularios ---------- */
.w2-fila-campos { display: flex; gap: 8px; align-items: flex-start; }
.w2-fila-campos > .campo { flex: 1; min-width: 0; }
.w2-fila-form { flex-wrap: nowrap; }
.w2-fila-form > input { flex: 1 1 60px !important; min-width: 40px; }
.w2-fila-form > select { flex: 2 1 120px !important; min-width: 80px; }
.w2-con-boton { display: flex; gap: 4px; }
.w2-con-boton > select { flex: 1; min-width: 0; }
.w2-checks { gap: 12px; min-height: 30px; flex-wrap: nowrap; }
.w2-checks .chequeo { white-space: nowrap; }
.w2-paneles { display: flex; gap: 8px; align-items: stretch; }
.w2-panel { display: flex; flex-direction: column; gap: 6px; }
.w2-precios { display: grid; grid-template-columns: auto 110px auto; gap: 5px 8px; align-items: center; }
.w2-precios input { width: 110px; }
.w2-grilla3 { display: grid; grid-template-columns: 1fr auto 150px; gap: 5px 12px; align-items: center; }
.w2-bloque { display: flex; flex-direction: column; gap: 6px; }
textarea.w2-mensaje { width: 100%; resize: vertical; font-family: inherit; }
input[type=date] { border: 1px solid var(--c-borde); border-radius: 2px; padding: 4px 6px; background: #fff; }
input[type=radio] { accent-color: var(--c-acento); }
input[type=checkbox] { accent-color: var(--c-acento); }
.modal-cuerpo .chequeo { margin: 2px 0; }

/* ---------- Pestañas de Catálogos ---------- */
.w2-pestanas { display: flex; gap: 2px; border-bottom: 2px solid var(--c-acento); flex-wrap: wrap; }
.w2-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; color: var(--c-texto);
}
.w2-pestana:hover { background: var(--c-acento-suave); }
.w2-pestana.activa { background: var(--c-acento); color: #fff; font-weight: bold; border-color: var(--c-acento-oscuro); }
.w2-pestana:focus-visible { outline: 2px solid var(--c-acento-oscuro); outline-offset: 1px; }
.w2-area-pestana { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---------- Importación ---------- */
.w2-importar { display: flex; flex-direction: column; gap: 8px; min-height: 440px; }
.w2-importar .fila > input[type=text] { flex: 1; }
.w2-asociacion { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px 8px; }
.w2-asociacion .campo { margin-bottom: 2px; }
.w2-vista-previa { max-height: 260px; min-height: 120px; }
.w2-progreso { width: 100%; height: 26px; accent-color: var(--c-acento); }
.w2-resumen { display: grid; grid-template-columns: auto 80px; gap: 4px 24px; width: max-content; }

@media (max-width: 900px) {
    .w2-paneles, .w2-fila-campos { flex-direction: column; align-items: stretch; }
    .w2-asociacion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}