/* Los campos del modulo de Orden de Compra.

   Tres componentes distintos conviven en la misma fila -`Input`, `Dropdown` y
   `DatePickerSingle`- y cada uno se dimensiona a su manera: el primero por su
   padding, el segundo por su control interno y el tercero por el suyo. Sin las
   reglas de abajo salen de tres alturas distintas y la fila se ve desalineada.

   La altura de referencia es `_ALTO_CAMPO_FORMULARIO` en layouts/compras.py, y
   la de la rejilla de partidas es `_ALTO_CAMPO`, mas compacta. Si una cambia
   aqui y alla no, `tests/test_compras_captura_partidas.py` lo caza.

   Tambien le quita a react-select y a react-dates los azules que traen por
   omision, que no combinan con el verde del portal. */

/* ── Campos de formulario (Fecha requerida, Prioridad, Proveedor…) ────────── */

.compras-campo .Select-control {
  height: 40px;
  border-color: #d1d5db;
  border-radius: 8px;
}

.compras-campo .Select--single > .Select-control .Select-value,
.compras-campo .Select-placeholder {
  line-height: 38px;
}

.compras-campo .Select-input {
  height: 38px;
}

.compras-campo .is-open .Select-control,
.compras-campo .is-focused .Select-control {
  border-color: #0b6b3a;
  box-shadow: 0 0 0 2px rgba(11, 107, 58, 0.15);
}

.compras-campo .Select-arrow {
  border-top-color: #0b6b3a;
}

.compras-campo .Select-option.is-focused {
  background-color: #e8f2ea;
  color: #004d1a;
}

.compras-campo .Select-option.is-selected {
  background-color: #0b6b3a;
  color: #ffffff;
  font-weight: 700;
}

/* ── Fecha requerida ──────────────────────────────────────────────────────── */
/* `DatePickerSingle` viene de react-dates con un campo de 130 px fijos: el
   texto de ayuda salia cortado en "Cuando lo ne" y el campo se veia mas angosto
   que sus vecinos. Las reglas de `responsive.css` que lo tocaban viven dentro
   de un `@media (max-width: 768px)`, asi que en escritorio no aplicaban. */

#compras-req-fecha,
#compras-req-fecha .SingleDatePicker,
#compras-req-fecha .SingleDatePickerInput,
#compras-req-fecha .DateInput {
  width: 100%;
}

#compras-req-fecha .SingleDatePickerInput {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
}

/* 38 px mas el borde de arriba y el de abajo del contenedor = los 40 de los
   demas campos. */
#compras-req-fecha .DateInput_input {
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 400;
  line-height: 38px;
  /* react-dates marca el foco con una franja azul gruesa abajo; el portal usa
     el borde completo en verde, como el resto de sus campos. */
  border-bottom: none;
}

#compras-req-fecha .DateInput_input__focused {
  border-bottom: none;
}

#compras-req-fecha .SingleDatePickerInput:focus-within {
  border-color: #0b6b3a;
  box-shadow: 0 0 0 2px rgba(11, 107, 58, 0.15);
}

#compras-req-fecha .CalendarDay__selected,
#compras-req-fecha .CalendarDay__selected:active,
#compras-req-fecha .CalendarDay__selected:hover {
  background: #0b6b3a;
  border-color: #0b6b3a;
}

#compras-req-fecha .CalendarDay__today {
  font-weight: 700;
  color: #0b6b3a;
}

/* ── Rejilla de partidas ──────────────────────────────────────────────────── */
/* Campos mas compactos que los del formulario: son seis por renglon y diez
   renglones. */

#compras-req-partidas-cont .Select-control {
  height: 34px;
  border-color: #d1d5db;
  border-radius: 6px;
}

#compras-req-partidas-cont .Select--single > .Select-control .Select-value,
#compras-req-partidas-cont .Select-placeholder {
  line-height: 32px;
  padding-left: 9px;
  padding-right: 24px;
}

#compras-req-partidas-cont .Select-input {
  height: 32px;
}

#compras-req-partidas-cont .Select-arrow-zone {
  padding-right: 6px;
}

#compras-req-partidas-cont .Select-menu-outer {
  border: 1px solid #d9e2d9;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

#compras-req-partidas-cont .Select-option {
  color: #1f2937;
  font-size: 12px;
  padding: 6px 10px;
}

#compras-req-partidas-cont .Select-option.is-focused {
  background-color: #e8f2ea;
  color: #004d1a;
}

#compras-req-partidas-cont .Select-option.is-selected {
  background-color: #0b6b3a;
  color: #ffffff;
  font-weight: 700;
}

#compras-req-partidas-cont .is-open .Select-control,
#compras-req-partidas-cont .is-focused .Select-control {
  border-color: #0b6b3a;
  box-shadow: 0 0 0 2px rgba(11, 107, 58, 0.15);
}

#compras-req-partidas-cont .Select-value-label,
#compras-req-partidas-cont .Select-placeholder {
  color: #1f2937;
  font-size: 12px;
}

#compras-req-partidas-cont .Select-arrow {
  border-top-color: #0b6b3a;
}

/* El campo de texto y el numerico, al foco, con el mismo verde que el
   desplegable: sin esto cada tipo de campo se marcaba distinto. */
#compras-req-partidas-cont input:focus,
.compras-campo input:focus {
  outline: none;
  border-color: #0b6b3a;
  box-shadow: 0 0 0 2px rgba(11, 107, 58, 0.15);
}