/* ===========================================================================
   public/css/quotation-form.css
   Formulario de cotizacion: zona de arrastre, tabla de items, panel de totales y buscador de cliente.

   Parte 10 de 12 de la hoja de estilos. El orden de carga IMPORTA:
   se enlazan en este mismo orden desde index.html y dashboard.html.
   =========================================================================== */
/* ===== 18. DRAG & DROP ZONE ===== */
.drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  position: relative;
}

.drop-zone:hover,
.drop-zone.dragover {
  border-color: var(--clr-green);
  background: rgba(16,185,129,.05);
}

.drop-zone input[type="file"] {
  position: absolute; top: 0; left: 0; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

/* La zona de la planilla se distingue de la del PDF por el borde verde de
   Excel — mismo token que el botón de descarga, ver tokens.css. */
.drop-zone-excel { border-color: var(--clr-excel); }

.drop-zone-icon { margin-bottom: .5rem; color: var(--text-muted); }
.drop-zone-icon .empty-icon { width: 32px; height: 32px; }
.drop-zone-text { font-size: .875rem; color: var(--text-muted); }
.drop-zone-hint { font-size: .75rem; color: var(--text-muted); margin-top: .25rem; }
.drop-zone-file { font-size: .82rem; color: var(--clr-green); margin-top: .4rem; font-weight: 600; }

/* ===== 19. LINE ITEMS TABLE (Quotation Form) ===== */
.line-items-section { margin: 1.25rem 0; }

.line-items-section h4 {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: .65rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL FORMULARIO DE COTIZACIÓN — clases que salieron de sus estilos inline

   formTemplate.js tenía 25 atributos style="". Cada clase de acá lleva el
   nombre de PARA QUÉ es, no de qué hace: .fg-doble y no .flex-2. La diferencia
   importa cuando dentro de un año alguien quiera cambiar el ancho del campo de
   cliente y tenga que decidir si toca esta regla o si se lleva puesto otro
   panel que casualmente usaba el mismo flex.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La marca «(Opcional)» que acompaña a las etiquetas no obligatorias. */
.label-opcional {
  color: var(--clr-gray-soft);
  font-size: .8rem;
  font-weight: 400;
}

/* Chip con el próximo número de correlativo.
   Tenía el nombre de clase puesto pero NINGUNA regla detrás: todo el aspecto
   estaba en un style inline con tres colores a mano (#EFF6FF, #BFDBFE,
   #1D4ED8). Eran colores de tema claro fijos, así que en los temas oscuros
   quedaba una tarjeta blanca. Ahora usa la receta de aviso azul que el
   proyecto ya tenía (.form-alert.alert-info), que sí sigue al tema. */
.correlativo-preview {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .75rem;
  margin-bottom: .75rem;
  background: var(--alert-bg-blue);
  border: 1px solid var(--alert-br-blue);
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-weight: 600;
  color: var(--clr-blue-soft);
}

.correlativo-preview-label { color: var(--text-muted); font-weight: 400; }

/* Un .form-group que ocupa el doble que sus hermanos de fila. El de cliente
   y los de forma de pago: campos donde el texto es largo y partirlo en dos
   renglones hace perder de vista con qué cliente se está cotizando. */
.fg-doble     { flex: 2; }
.fg-doble-min { flex: 2; min-width: 220px; }

/* La fila de campos que va dentro de un <details> desplegable (Solicitante,
   Equipo): necesita aire respecto del resumen que la abre. */
.form-row-seccion { margin-top: .75rem; }

/* La última fila del formulario: forma de pago y opciones del PDF. Se alinea
   por abajo porque sus campos tienen alturas distintas — un <select> y una
   casilla— y alineados por arriba la casilla queda flotando. */
.form-row-pie {
  margin-top: 1rem;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Grupo cuyo control es una casilla de verificación en vez de un campo. */
.fg-casilla {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-bottom: .25rem;
}

.casilla       { width: 16px; height: 16px; cursor: pointer; }
.label-casilla { margin: 0; cursor: pointer; }

/* Descuento manual, dentro del panel de totales. */
.totals-discount-label { font-size: .85rem; color: var(--text-secondary); }

.totals-discount-input {
  width: 120px;
  text-align: right;
  padding: .25rem .5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: .9rem;
}

.line-items-section .table-wrapper { border-radius: var(--radius-sm); }

.line-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
}

/* ANCHOS DE COLUMNA — los diez juntos, a propósito.
   Estaban como style="width:22%" en cada <th>. Sacarlos de a uno no servía de
   nada: un ancho solo no significa nada sin los otros nueve, porque lo que se
   reparte es el 100%. O se migra la tabla entera o no se toca.
   Si se agrega o saca una columna hay que revisar TODA esta lista — los
   nth-child se corren solos y en silencio. */
.line-items-table th:nth-child(1)  { width: 22%; }  /* Descripción   */
.line-items-table th:nth-child(2)  { width: 10%; }  /* Cód. Parte    */
.line-items-table th:nth-child(3)  { width: 10%; }  /* Cód. Alt.     */
.line-items-table th:nth-child(4)  { width: 11%; }  /* Marca         */
.line-items-table th:nth-child(5)  { width:  7%; }  /* UM            */
.line-items-table th:nth-child(6)  { width:  7%; }  /* Cantidad      */
.line-items-table th:nth-child(7)  { width: 11%; }  /* Precio Unit.  */
.line-items-table th:nth-child(8)  { width: 10%; }  /* Subtotal      */
.line-items-table th:nth-child(9)  { width: 10%; }  /* T. Entrega    */
.line-items-table th:nth-child(10) { width:  2%; }  /* quitar ítem   */

.line-items-table th {
  background: var(--bg-raised);
  padding: .5rem .6rem;
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--border);
}

.line-items-table td {
  padding: .35rem .4rem;
  border-bottom: 1px solid rgba(51,65,85,.5);
  vertical-align: middle;
}

.line-items-table .item-input {
  width: 100%;
  padding: .3rem .45rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: .83rem;
  font-family: inherit;
}

.line-items-table .item-input:focus {
  outline: none;
  border-color: var(--clr-green);
  box-shadow: 0 0 0 2px var(--alert-bg-green);
}

.item-subtotal {
  font-weight: 600;
  color: var(--clr-green);
  white-space: nowrap;
  padding: .35rem .6rem;
  font-variant-numeric: tabular-nums;
}

.btn-remove-item {
  background: none;
  border: none;
  color: var(--clr-red);
  cursor: pointer;
  padding: .2rem .4rem;
  border-radius: 4px;
  font-size: .9rem;
  opacity: .7;
  transition: opacity var(--transition), background var(--transition);
}

.btn-remove-item:hover { opacity: 1; background: rgba(239,68,68,.1); }

.btn-add-item {
  margin-top: .6rem;
  font-size: .8rem;
}

.line-items-actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

/* ===== 20. TOTALS PANEL ===== */
.totals-panel {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-top: 1rem;
}

.totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .3rem 0;
  font-size: .875rem;
}

.totals-row + .totals-row { border-top: 1px solid var(--border); }

.totals-row.total-final {
  border-top: 2px solid var(--border);
  padding-top: .6rem;
  margin-top: .2rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--clr-green);
}

.totals-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ===== 21. CLIENT SELECTOR / AUTOCOMPLETE ===== */
.client-select-wrapper {
  position: relative;
}

.client-search-group {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.client-search-group .form-control {
  flex: 1;
  min-width: 0;
}

/* "Outline Green" variant — less prominent than btn-success */
.btn-outline-green {
  background: transparent;
  color: var(--clr-green);
  border-color: var(--clr-green);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-outline-green:hover:not(:disabled) {
  background: rgba(16,185,129,.12);
  transform: translateY(-1px);
}

/* Autocomplete dropdown */
.client-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  width: 100%;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 500;
  display: none;
}

.client-dropdown.open { display: block; }

.client-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .85rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

.client-dropdown-item:last-child { border-bottom: none; }

.client-dropdown-item:hover,
.client-dropdown-item:focus {
  background: var(--bg-hover);
  outline: none;
}

.cdi-name {
  flex: 1;
  font-size: .875rem;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cdi-nit {
  font-size: .75rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.cdi-edit {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .8rem;
  color: var(--text-muted);
  padding: .15rem .4rem;
  border-radius: 4px;
  line-height: 1;
}

.cdi-edit:hover,
.cdi-edit:focus {
  color: var(--text-primary);
  background: var(--bg-hover);
  outline: none;
}

.client-dropdown-empty {
  padding: .75rem 1rem;
  font-size: .85rem;
  color: var(--text-muted);
  text-align: center;
}

/* Campos dentro de una fila de ítems. Los anchos estaban inline en siete
   lugares de lineItemsComponent.js con cinco valores distintos. */
.item-full   { width: 100%; font-size: .8rem; }
.item-marca  { flex: 1; min-width: 0; font-size: .8rem; padding: 2px 4px; }
.item-unidad { width: 80px; font-size: .8rem; padding: 2px 4px; }
.item-cant   { width: 72px; }
.item-precio { width: 100px; }

/* El grupo marca + botón de alta rápida. */
.item-marca-grupo { display: flex; gap: 4px; align-items: center; }