/* Estado de Compras.
 *
 * TODO cuelga de `.ec`, la clase raiz de la pantalla: en esta aplicacion el CSS
 * es global y sin aislamiento, asi que una regla suelta se filtra a las demas.
 *
 * Criterio de diseno: esto es una herramienta de triaje. La farmacia entra a
 * responder una sola pregunta -"salio bien mi pedido, y si no, que hago"- sobre
 * una lista donde la mayoria de las filas estan bien. Por eso lo que salio bien
 * se apaga y lo que exige accion destaca; antes el rayado cebra, la rejilla de
 * bordes y un badge saturado en CADA fila hacian que nada resaltara.
 */

/* Header alineado como el resto de las pantallas (mismo truco de margin que
   inventarios para quedar flush con el navbar). */
#botones2.botones-estado-compras {
  margin-top: -20px;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#botones2.botones-estado-compras .tituloBotones,
#botones2.botones-estado-compras .btn-acciones {
  float: none;
  position: static;
  transform: none;
  margin: 0;
  width: auto;
}
.ec .filtro-estado .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}
.ec .filtro-estado .form-control,
.ec .filtro-estado .btn {
  margin-left: 6px;
}

/* ---- Tabla ------------------------------------------------------------- */

.ec .tabla-ec {
  background-color: #fff;
  border-top: 1px solid #e3e8ee;
}

/* Solo lineas horizontales finas: la rejilla completa competia con el color de
   estado, que es la informacion que de verdad importa aqui. */
.ec .tabla-ec > tbody > tr > td {
  border-top: 1px solid #eef1f5;
  padding: 10px 12px;
  vertical-align: middle;
}

.ec .tabla-ec > thead > tr > th {
  border-bottom: 2px solid #e3e8ee;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a94a3;
  white-space: nowrap;
}

/* Cifras alineadas por columna: sin esto los montos bailan y cuesta
   compararlos de un vistazo. */
.ec .col-numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ec .col-centro {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- Peso visual segun el estado --------------------------------------- */

/* Franja de color a la izquierda: se lee antes que cualquier texto y permite
   recorrer la lista sin leerla. */
.ec .tabla-ec > tbody > tr.fila-click > td:first-child {
  border-left: 3px solid transparent;
}
.ec .fila-ok > td:first-child       { border-left-color: #cfe3d4 !important; }
.ec .fila-aviso > td:first-child    { border-left-color: #f0ad4e !important; }
.ec .fila-problema > td:first-child { border-left-color: #d9534f !important; }
.ec .fila-cola > td:first-child     { border-left-color: #d3d9e0 !important; }

/* El unico estado que exige accion del usuario se resalta ademas con fondo. */
.ec .fila-credenciales > td {
  background-color: #fdf5f4 !important;
}

.ec .accion-credenciales {
  color: #a94442;
  font-weight: bold;
}
.ec .accion-credenciales .glyphicon {
  margin-right: 4px;
}

/* ---- Etiqueta de estado ------------------------------------------------ */

/* El .label de Bootstrap va al 75% del texto del padre y aqui era ilegible. */
.ec .etiqueta-estado {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 9px;
  border-radius: 3px;
  white-space: nowrap;
}
.ec .etiqueta-estado .glyphicon {
  margin-right: 4px;
  top: 1px;
  font-size: 11px;
}

/* "Enviado" es el caso normal y no necesita gritar: contorno suave en vez de
   bloque saturado. Los problemas conservan el relleno solido. */
.ec .fila-ok .etiqueta-estado.label-success {
  background-color: #f1f8f3;
  color: #3c763d;
  box-shadow: inset 0 0 0 1px #cfe3d4;
}
.ec .fila-cola .etiqueta-estado {
  background-color: #f4f6f8;
  color: #6c7687;
  box-shadow: inset 0 0 0 1px #dfe4ea;
}

/* ---- Celda de la compra ------------------------------------------------ */

/* El codigo de compra lleva el color de la drogueria: antes se pintaba el
   codigo en negrita y ademas una etiqueta de color debajo con el nombre de la
   drogueria, que ya venia dentro del propio codigo (Farma24-6). */
.ec .codigoDrogueria {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 3px;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.01em;
  /* Neutro cuando la drogueria no tiene color configurado; ng-style lo pisa. */
  background-color: #777;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.ec .texto-error {
  color: #a94442;
}
.ec .detalle-lineas {
  margin-top: 4px;
  font-size: 12px;
}
.ec .linea-detalle {
  white-space: nowrap;
}
.ec .col-fecha {
  white-space: nowrap;
  color: #8a94a3;
  font-size: 12px;
}

/* ---- Interaccion ------------------------------------------------------- */

.ec .fila-click {
  cursor: pointer;
}
.ec .tabla-ec > tbody > tr.fila-click:hover > td {
  background-color: #f7f9fb;
}
.ec .caret-detalle {
  color: #b6bec9;
  margin-right: 6px;
  font-size: 11px;
}
.ec .fila-click:hover .caret-detalle {
  color: #5b6472;
}

.ec .btn-eliminar-pedido {
  margin-left: 4px;
}

/* ---- Panel de detalle --------------------------------------------------- */

.ec .fila-detalle > td {
  background-color: #f7f9fb;
  padding: 16px 20px;
  border-top: 0;
}
.ec .panel-detalle .dl-detalle {
  margin-bottom: 0;
}
.ec .panel-detalle .dl-detalle dt {
  color: #8a94a3;
  font-weight: normal;
}
.ec .panel-detalle h5 {
  margin-top: 14px;
  margin-bottom: 6px;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6c7687;
}
.ec .panel-detalle .tabla-detalle {
  background-color: #fff;
  margin-bottom: 6px;
}
.ec .panel-detalle .detalle-alerta {
  margin-top: 12px;
  margin-bottom: 6px;
  padding: 8px 12px;
}
.ec .ubicacion-detalle {
  word-break: break-all;
  font-size: 12px;
  color: #8a94a3;
}

/* ---- Carga y listas vacias --------------------------------------------- */

/* La caja de datos quedaba pegada a la barra del titulo: .box-sc es global
   (app.css) y define margin left/right/bottom pero no top. Se le da aqui el
   mismo hueco de 5px que separa los paneles en el resto de las pantallas.
   Acotado a .ec porque .box-sc la comparten Entradas, Inventarios y Especial. */
.ec .box-sc {
  margin-top: 5px;
}

.ec .box-sc .cargando-estado {
  padding: 30px;
  color: #8a94a3;
}
.ec .sin-datos {
  padding: 44px 20px;
  text-align: center;
  color: #8a94a3;
  background-color: #fff;
  border: 1px dashed #dfe4ea;
  border-radius: 4px;
}
.ec .sin-datos .glyphicon {
  font-size: 30px;
  display: block;
  margin-bottom: 10px;
  color: #c7cdd6;
}