/* ============================================================
   1. CABECERA DE LA SECCIÓN VENTAS
   (Título + botón buscar + nuevo + menú)
=========================================================== */

.ventas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

.ventas-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

/* Contenedor de los 3 iconos (lupa, +, menú) */
.ventas-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  position: relative;
}

/* Botones redondos SOLO dentro de la cabecera de ventas */
.ventas-header .icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.18);
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.ventas-header .icon-btn img {
  width: 20px;
  height: 20px;
  filter: invert(1);   /* iconos blancos */
  opacity: 0.9;
}

/* Pequeño efecto al presionar */
.ventas-header .icon-btn:active {
  transform: scale(0.95);
}

/* Menú desplegable */
.ventas-menu{
  position:absolute;
  top:46px;
  right:0;
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,0.16);
  padding:8px;
  display:none;
  min-width:210px;
  z-index:40;
}
.ventas-menu.show{display:flex;flex-direction:column;gap:6px;}
.ventas-menu button{
  width:100%;
  padding:10px 12px;
  border:none;
  border-radius:10px;
  background:#f7f7f9;
  color:#1f2937;
  text-align:left;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
}
.ventas-menu hr{border:none;border-top:1px solid #e5e7eb;margin:4px 0;}
.ventas-menu button:hover{background:#eef2ff}


/* ============================================================
   2. CABECERA DE FECHA Y TABS DE ESTADO (LISTA DE VENTAS)
   (Barra de mes + filtros Todos / Pendiente / En Proceso / Cerrado)
=========================================================== */

/* Barra de mes:  « Diciembre de 2025 »  */
.ventas-month-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 14px 10px;
  background: #eef2ff;
  border-bottom: 1px solid #e5e7eb;
}

/* Flechas izquierda / derecha del mes */
.month-arrow {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: #dbe4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  cursor: pointer;
  color: #1e293b;
  box-shadow: 0 2px 6px rgba(15,23,42,.18);
}

.month-arrow:active {
  transform: scale(0.95);
}

/* Texto del mes actual */
#v-monthLabel {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

/* Tabs de estado (Todos / Pendiente / En Proceso / Cerrado) */
.ventas-tabs {
  display: flex;
  gap: 8px;
  padding: 8px 10px 10px;
  background: #eef2ff;
}

/* Cada tab como pastilla */
.v-tab {
  flex: 1;
  padding: 7px 6px;
  border-radius: 999px;
  border: 1px solid #c7d2fe;
  background: #ffffff;
  font-size: 13px;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.18s ease;
}

.v-tab:active {
  transform: scale(0.97);
}

/* Tab activo (azul) */
.v-tab.active {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 5px 14px rgba(37,99,235,0.35);
}



/* ============================================================
   3. CAMPOS FLOTANTES – NUEVO DISEÑO PREMIUM
=========================================================== */

.field {
  position: relative;
  margin-bottom: 18px;
  width: 100%;
}

/* INPUT + TEXTAREA + SELECT (estilo base) */
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 18px 14px 10px; /* más alto */
  font-size: 15px;
  border-radius: 14px; /* bordes bien redondeados */
  border: 1.6px solid #d1d5db;
  background: #f9fafb;
  transition: border-color .2s, background-color .2s;
  outline: none;
  box-sizing: border-box;
}

/* Hover / enfocado */
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: #4f46e5;
  background: #ffffff;
}

/* LABEL flotante */
.field label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: #6b7280;
  pointer-events: none;
  background: transparent;
  padding: 0 4px;
  transition: all 0.18s ease;
}

/* Cuando escribes o haces foco, el label sube */
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field input:focus + label,
.field textarea:focus + label {
  top: -7px;
  left: 12px;
  background: #fff;
  font-size: 12px;
  color: #4f46e5;
  transform: none;
  padding: 0 6px;
}

/* Textarea más redondeado */
.field textarea {
  min-height: 90px;
  resize: none;
  border-radius: 14px;
}

/* Labels en textarea también flotan correctamente */
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  top: -7px !important;
}

/* Placeholder vacío (para activar floating label correctamente) */
.field input::placeholder,
.field textarea::placeholder {
  color: transparent;
}




/* ============================================================
   4. LISTA DE VENTAS (CARDS) + ESTADO VISUAL
=========================================================== */

.ventas-list {
  padding: 10px 10px 80px;
}

/* Tarjeta de una venta */
.venta-item {
  background: #ffffff;
  border-radius: 18px;
  padding: 11px 12px;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
  cursor: pointer;
}

/* Layout: info izquierda / precio+estado derecha */
.venta-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.venta-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.venta-cliente {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.venta-fecha {
  font-size: 12px;
  color: #9ca3af;
}

.venta-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.venta-total {
  font-size: 15px;
  font-weight: 700;
  color: #2563eb;
}

/* Chip de estado debajo del precio */
.venta-status {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.venta-status.pendiente {
  background: rgba(251, 191, 36, .18);
  color: #92400e;
}

.venta-status.proceso {
  background: rgba(59, 130, 246, .18);
  color: #1d4ed8;
}

.venta-status.cerrado {
  background: rgba(16, 185, 129, .18);
  color: #047857;
}

/* Estado vacío (cuando no hay ventas) */
#ventasEmpty {
  text-align: center;
  padding: 18px 8px;
  color: #9ca3af;
}

#ventasEmpty img {
  width: 80px;
  opacity: .6;
  margin-bottom: 6px;
}
/* ============================================================
   4B. SUGERENCIAS DE CLIENTES EN EL MODAL
=========================================================== */

#ventasModal .field .cliente-sug {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 180px;
  overflow-y: auto;
  z-index: 600;
}

/* ajustamos un poco las filas para clientes */
#ventasModal .cliente-sug .picker-item {
  padding: 7px 11px;
}



/* ============================================================
   5. MODAL DE VENTAS: CONTENEDOR Y CABECERA
=========================================================== */

#ventasModal .modal-content {
  max-width: 480px;
  width: 92%;
  border-radius: 22px;
  background: #ffffff;
  padding: 16px 16px 18px;
  box-shadow: 0 25px 55px rgba(15, 23, 42, .35);
  position: relative;
}

.venta-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.venta-head-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.venta-head-actions {
  position: relative;
}

.venta-opt-btn {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: none;
  background: #f3f4f6;
  color: #1f2937;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.venta-opt-btn:active {
  transform: scale(0.96);
}

.venta-options-menu {
  position: absolute;
  top: 40px;
  right: 0;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  padding: 8px;
  display: none;
  min-width: 220px;
  z-index: 700;
}

.venta-options-menu.show {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.venta-options-menu button {
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: #f7f7f9;
  color: #1f2937;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.venta-options-menu hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 4px 0;
}

.venta-options-menu button:hover {
  background: #eef2ff;
}

.venta-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

.venta-head small {
  font-size: 13px;
  color: #9ca3af;
}

/* Etiqueta pequeña (por ejemplo "Estado") */
.lbl {
  display: block;
  font-size: 11px;
  color: #9ca3af;
  margin-bottom: 4px;
}

/* ============================================================
   6. CAMPOS FLOTANTES DEL MODAL (INPUTS, TEXTAREAS, SELECTS)
=========================================================== */

#ventasModal .field {
  position: relative;
  margin-bottom: 12px;
}

/* Inputs más estilizados y redondeados */
#ventasModal form input,
#ventasModal form textarea,
#ventasModal form select {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 13px 7px;
  border-radius: 16px;
  border: 1px solid #d1d5db;
  font-size: 13px;
  background: #f9fafb;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#ventasModal form textarea {
  min-height: 70px;
  resize: vertical;
}

/* Efecto al enfocar */
#ventasModal form input:focus,
#ventasModal form textarea:focus,
#ventasModal form select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, .28);
  background: #ffffff;
}

/* Label flotante centrado vertical */
#ventasModal .field label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #9ca3af;
  pointer-events: none;
  transition: all .15s ease;
  background: transparent;
  padding: 0 4px;
}

/* Cuando hay texto o foco → sube a la mitad de la línea superior */
#ventasModal .field input:not(:placeholder-shown) + label,
#ventasModal .field textarea:not(:placeholder-shown) + label,
#ventasModal .field input:focus + label,
#ventasModal .field textarea:focus + label {
  top: -7px;
  transform: none;
  font-size: 11px;
  color: #4f46e5;
  background: #f9fafb;
}

#ventasModal #v-cliente {
  padding-right: 40px;
}

#ventasModal .cliente-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: #e5e7eb;
  color: #374151;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
}

#ventasModal .cliente-toggle.open {
  transform: translateY(-50%) rotate(180deg);
}

#ventasModal .cliente-toggle:active {
  transform: translateY(-50%) scale(0.95);
}

#ventasModal .cliente-toggle.open:active {
  transform: translateY(-50%) rotate(180deg) scale(0.95);
}

/* Select y date siempre flotantes en la parte superior */
#ventasModal .field select + label,
#ventasModal .field input[type="date"] + label {
  top: -7px;
  transform: none;
  font-size: 11px;
  background: #f9fafb;
  color: #6b7280;
}

#ventasModal .field select:focus + label,
#ventasModal .field input[type="date"]:focus + label {
  color: #4f46e5;
}

/* ============================================================
   7. DISTRIBUCIÓN EN COLUMNAS (FECHA/MÉTODO, DESCUENTOS, ETC.)
=========================================================== */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* En móviles: todo a una columna para evitar choques */
@media (max-width: 480px) {
  #ventasModal .grid-2,
  #ventasModal .grid-3 {
    grid-template-columns: 1fr;
  }

  .vi-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

/* ============================================================
   8. BUSCADOR DE PRODUCTOS + BOTÓN DE ESCÁNER
=========================================================== */

.picker-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.picker-input input {
  flex: 1;
}
.picker-input input::placeholder {
  color: rgba(107, 114, 128, 0.55);
}

/* Botón del icono de código de barras/QR */
.scan-btn {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  border: none;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.scan-btn img {
  width: 22px !important;
  height: 22px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
}

/* Lista de resultados de productos */
.picker-resultados {
  margin-top: 4px;
  max-height: 190px;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  display: none;
  box-shadow: 0 12px 25px rgba(15, 23, 42, .18);
}

.picker-item {
  padding: 6px 11px;
  cursor: pointer;
}

.picker-item:hover {
  background: #eef2ff;
}

.pi-name {
  font-size: 13px;
  font-weight: 600;
}

.pi-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #6b7280;
}

/* ============================================================
   9. ITEMS DE LA VENTA (LISTA DENTRO DEL MODAL)
=========================================================== */

.venta-items {
  margin: 10px 0;
  padding: 9px 10px;
  border-radius: 14px;
  background: #f3f4f6;
  font-size: 13px;
}

.venta-items.muted {
  color: #9ca3af;
}

.venta-item-row {
  border-bottom: 1px dashed #d1d5db;
  padding: 6px 0;
}

.venta-item-row:last-child {
  border-bottom: none;
}

.vi-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vi-nombre {
  font-weight: 600;
}

.vi-precio {
  font-size: 12px;
  color: #6b7280;
}

.vi-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.vi-cant {
  display: flex;
  align-items: center;
  gap: 4px;
}

.vi-btn {
  border: none;
  background: #e5e7eb;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 13px;
  cursor: pointer;
}

.vi-btn.vi-del {
  background: #fee2e2;
  color: #b91c1c;
}

.vi-qty {
  min-width: 18px;
  text-align: center;
}

.vi-sub {
  font-weight: 600;
}

/* ============================================================
   10. BLOQUE DE TOTALES (PRODUCTOS, TOTAL, PAGADO, CAMBIO)
=========================================================== */

.totales {
  margin: 12px 0;
  padding: 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef2ff, #ede9fe);
  border: 1px solid #c7d2fe;
}

.totales .row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 13px;
}

.totales .row.total {
  font-size: 15px;
  font-weight: 700;
}

/* ============================================================
   11. ESTADO (CHIPS: PENDIENTE / EN CURSO / CERRADO)
=========================================================== */

.estado-tabs {
  display: flex;
  gap: 10px;
  margin: 14px 0;
  width: 100%;
}

.estado-tabs .chip {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
  color: #374151;
  transition: all 0.18s ease;
  user-select: none;
}

.estado-tabs .chip.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  box-shadow: 0px 3px 12px rgba(37, 99, 235, 0.35);
}

.estado-tabs .chip:active {
  transform: scale(0.96);
}

/* En móviles se apilan uno debajo del otro */
@media (max-width: 480px) {
  .estado-tabs {
    flex-direction: column;
  }
}

/* ============================================================
   12. BOTÓN "GUARDAR VENTA"
=========================================================== */

#v-guardar.btn-save {
  width: 100%;
  padding: 15px;
  border-radius: 18px;
  border: none;
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  box-shadow: 0 10px 25px rgba(37, 99, 235, .35);
}

#v-guardar.btn-save:active {
  transform: scale(.98);
}

/* ============================================================
   13. OVERLAY DEL ESCÁNER (BarcodeDetector)
=========================================================== */

.scanner-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1500;
}

.scanner-overlay.show {
  display: flex;
}

.scanner-box {
  width: 90%;
  max-width: 420px;
  border-radius: 18px;
  background: #111827;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
  position: relative;
}

.scanner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #e5e7eb;
  font-size: 13px;
  margin-bottom: 6px;
}

.scanner-close {
  background: none;
  border: none;
  color: #e5e7eb;
  font-size: 18px;
  cursor: pointer;
}

.scanner-video {
  width: 100%;
  border-radius: 14px;
  background: #000;
}

.scanner-tip {
  margin-top: 6px;
  font-size: 11px;
  color: #9ca3af;
  text-align: center;
}


/* ============================================================
   17. BOTÓN ELIMINAR VENTA (EN EL MODAL)
=========================================================== */

#v-eliminar.btn-danger {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border-radius: 16px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  background: #fee2e2;
  color: #b91c1c;
  box-shadow: 0 2px 6px rgba(248, 113, 113, 0.35);
  cursor: pointer;
}

#v-eliminar.btn-danger:active {
  transform: scale(0.97);
}


/* ============================================================
   18. MODAL VENTAS: SCROLL SOLO INTERNO
=========================================================== */

/* El overlay del modal de ventas no hace scroll, solo centra */
#ventasModal {
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;      /* centra vertical */
  overflow: hidden;         /* evita que todo el modal se mueva */
}

/* Solo la caja blanca interna scrollea si es muy larga */
#ventasModal .venta-modal {
  max-height: 88vh;         /* un poco menos que la altura de la pantalla */
  overflow-y: auto;
}



/* ============================================================
   19. BOTONES GUARDAR / ELIMINAR (TAMAÑO AJUSTADO)
=========================================================== */

/* Guardar venta – un poco más compacto */
#ventasModal .btn-save {
  padding: 10px 12px;      /* antes era más alto */
  font-size: 14px;
  border-radius: 14px;
}

/* Eliminar venta – igual de compacto */
#v-eliminar.btn-danger {
  padding: 9px 12px;
  font-size: 13px;
  border-radius: 14px;
  margin-top: 6px;
}