/* ==========================================================================
   BodegaFlex POS — «Compré productos» (31-oct-2026). Estilos base (Claude).
   El aspecto final (estilo B) lo da css/estilo-b.css, que se carga después.
   ========================================================================== */

.inv-acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn-open-compre {
  min-height: 44px; padding: 10px 18px; border-radius: 8px; font-weight: 700; cursor: pointer;
  background: #0066db; color: #ffffff; border: none; font-size: 0.95rem;
}

.compre-card { max-width: 560px; width: 100%; }
.compre-subtitulo { margin: 2px 0 0; font-size: 0.85rem; color: #5b6472; }
.compre-paso { display: flex; flex-direction: column; gap: 10px; padding: 6px 16px 16px; }
.compre-paso[hidden], .compre-bloque[hidden], .compre-nuevo[hidden], .compre-elegido[hidden] { display: none; }
.compre-paso .form-label { margin: 4px 0 2px; font-weight: 600; font-size: 0.88rem; }
.compre-paso .form-input { min-height: 44px; }

.compre-fila-buscar { display: flex; gap: 8px; }
.compre-fila-buscar .form-input { flex: 1; min-width: 0; }

.compre-resultados { display: flex; flex-direction: column; gap: 6px; }
.compre-resultado {
  display: flex; justify-content: space-between; gap: 10px; align-items: center; text-align: left;
  min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid #e2e8f0; background: #ffffff;
  cursor: pointer; font-size: 0.9rem; color: #111827;
}
.compre-resultado small { color: #5b6472; }
.compre-resultado-nuevo { border-style: dashed; color: #0066db; font-weight: 700; justify-content: center; }

.compre-elegido, .compre-nuevo, .compre-costo-box, .compre-resumen, .compre-guardara {
  border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; background: #f8fafc;
}
.compre-elegido { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.compre-elegido strong { display: block; font-size: 1rem; }
.compre-elegido small { color: #5b6472; display: block; }
.compre-nuevo { display: flex; flex-direction: column; gap: 4px; }
.compre-nota { margin: 0; font-size: 0.85rem; color: #5b6472; }

.compre-grupo { display: flex; flex-direction: column; gap: 6px; }
.compre-etiqueta { font-weight: 700; font-size: 0.92rem; color: #111827; }
.compre-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.compre-opcion {
  min-height: 48px; padding: 8px 10px; border-radius: 10px; border: 1.5px solid #cbd5e1; background: #ffffff;
  color: #1e293b; font-weight: 700; font-size: 0.88rem; cursor: pointer; line-height: 1.2;
}
.compre-opcion[aria-pressed="true"] { background: #1a3a6b; border-color: #1a3a6b; color: #ffffff; }

.compre-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.compre-check { display: flex; gap: 8px; align-items: center; min-height: 44px; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.compre-check input { width: 20px; height: 20px; }

.compre-resumen, .compre-costo-box { font-size: 0.92rem; line-height: 1.45; }
.compre-resumen:empty { display: none; }
.compre-grande { font-size: 1.5rem; font-weight: 800; color: #111827; display: block; }

.compre-sugeridos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.compre-sugerido {
  min-height: 56px; padding: 6px 4px; border-radius: 10px; border: 1.5px solid #cbd5e1; background: #ffffff;
  color: #1e293b; cursor: pointer; font-size: 0.82rem; font-weight: 700; line-height: 1.25;
}
.compre-sugerido small { display: block; font-weight: 600; color: #5b6472; }
.compre-sugerido[aria-pressed="true"] { background: #1a3a6b; border-color: #1a3a6b; color: #ffffff; }
.compre-sugerido[aria-pressed="true"] small { color: #dbe6ff; }

.compre-frase { font-size: 0.9rem; color: #0f7b4f; font-weight: 600; line-height: 1.4; }
.compre-frase.perdida { color: #b45309; }
.compre-frase:empty, .compre-avisos:empty, .compre-error:empty { display: none; }
.compre-avisos { display: flex; flex-direction: column; gap: 6px; }
.compre-aviso { padding: 8px 12px; border-radius: 8px; background: #fff7e6; color: #92400e; font-size: 0.85rem; line-height: 1.4; }

.compre-guardara { display: flex; flex-direction: column; gap: 6px; background: #eaf7f0; border-color: #a7f3d0; }
.compre-guardara h4 { margin: 0 0 2px; font-size: 0.95rem; color: #0f7b4f; }
.compre-guardara-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 0.9rem; }
.compre-guardara-fila span:last-child { font-weight: 700; text-align: right; }

.compre-error { padding: 8px 12px; border-radius: 8px; background: #fee2e2; color: #b91c1c; font-size: 0.88rem; font-weight: 600; }

.compre-botones { display: flex; gap: 10px; margin-top: 4px; }
.compre-boton-principal {
  flex: 1; min-height: 52px; border-radius: 12px; border: none; background: #0066db; color: #ffffff;
  font-weight: 800; font-size: 1rem; cursor: pointer;
}
.compre-boton-secundario {
  min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 1.5px solid #cbd5e1; background: #ffffff;
  color: #1e293b; font-weight: 700; cursor: pointer;
}

@media (max-width: 420px) {
  .compre-sugeridos { grid-template-columns: repeat(2, 1fr); }
  .compre-dos { grid-template-columns: 1fr; }
}

/* Modo noche (js/tema.js pone data-tema="noche") */
html[data-tema="noche"] .compre-subtitulo,
html[data-tema="noche"] .compre-nota,
html[data-tema="noche"] .compre-elegido small,
html[data-tema="noche"] .compre-resultado small,
html[data-tema="noche"] .compre-sugerido small { color: #a3aec2; }
html[data-tema="noche"] .compre-etiqueta,
html[data-tema="noche"] .compre-grande { color: #f5f7fa; }
html[data-tema="noche"] .compre-resultado,
html[data-tema="noche"] .compre-opcion,
html[data-tema="noche"] .compre-sugerido,
html[data-tema="noche"] .compre-boton-secundario { background: #171f2e; border-color: #253047; color: #f5f7fa; }
html[data-tema="noche"] .compre-opcion[aria-pressed="true"],
html[data-tema="noche"] .compre-sugerido[aria-pressed="true"] { background: #3d6fd6; border-color: #3d6fd6; color: #ffffff; }
html[data-tema="noche"] .compre-elegido,
html[data-tema="noche"] .compre-nuevo,
html[data-tema="noche"] .compre-costo-box,
html[data-tema="noche"] .compre-resumen { background: #111a2e; border-color: #253047; color: #f5f7fa; }
html[data-tema="noche"] .compre-guardara { background: #10291f; border-color: #1f5c43; color: #f5f7fa; }
html[data-tema="noche"] .compre-guardara h4, html[data-tema="noche"] .compre-frase { color: #4ade9b; }
html[data-tema="noche"] .compre-frase.perdida { color: #f5b54a; }
html[data-tema="noche"] .compre-aviso { background: #33260f; color: #f5b54a; }
html[data-tema="noche"] .compre-error { background: #3b1219; color: #ff6b6b; }
html[data-tema="noche"] .btn-open-compre, html[data-tema="noche"] .compre-boton-principal { background: #4c8dff; }

/* Teléfono: «Compré productos» y «Agregar producto» lado a lado, del mismo tamaño */
@media (max-width: 767px) {
  .inv-acciones { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .inv-acciones > button { width: 100%; min-height: 48px; justify-content: center; text-align: center; }
}

/* Carga de existencias: estilos aislados del formulario de compras. */
#modal-ya-tengo .modal-header { align-items: flex-start; }
#modal-ya-tengo .ya-tengo-card { max-height: 90vh; overflow-y: auto; background: var(--b-tarjeta, #ffffff); color: var(--b-texto, #172033); }
#modal-ya-tengo .compre-paso { padding-top: 12px; }
#modal-ya-tengo .compre-fila-buscar > input { min-width: 0; }
#modal-ya-tengo .compre-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#modal-ya-tengo .form-label, #modal-ya-tengo .compre-etiqueta { color: var(--b-texto, #172033); }
#modal-ya-tengo .compre-nota, #modal-ya-tengo .compre-subtitulo { color: var(--b-texto-2, #5b6472); }
#modal-ya-tengo .compre-opcion { min-width: 0; }
#modal-ya-tengo .compre-boton-secundario { min-height: 48px; }