From 180d9b86093de2232c54d1aca4cd5d02f3cd2035 Mon Sep 17 00:00:00 2001
From: Jose Pinto <ejosepintog@gmail.com>
Date: Fri, 14 Dec 2018 11:05:37 -0300
Subject: [PATCH] =?UTF-8?q?Nuevo=20dise=C3=B1o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/controller.js    |  17 +-
 src/views/cobranza.html | 886 ++++++++++++++++++++++++------------------------
 2 files changed, 460 insertions(+), 443 deletions(-)

diff --git a/src/js/controller.js b/src/js/controller.js
index 1cd9a59..96e3bb9 100644
--- a/src/js/controller.js
+++ b/src/js/controller.js
@@ -12,14 +12,17 @@ angular.module('focaCrearCobranza') .controller('cobranzaController',
             $cookies, focaSeguimientoService)
         {
             $scope.botonera = [
-                {texto: 'Cliente', accion: function() {$scope.seleccionarCliente();}},
-                {texto: 'Cobrador', accion: function() {$scope.seleccionarCobrador();}},
-                {texto: 'Comprobantes', accion: function() {$scope.swichDeuda();}},
-                {texto: 'Cobros', accion: function() {$scope.swichCobro();}},
-                {texto: 'Moneda', accion: function() {$scope.seleccionarMoneda();}},
+                {texto: 'Cliente', imagen: '../img/abmPrecios.png',
+                    accion: function() {$scope.seleccionarCliente();}},
+                {texto: 'Cobrador', imagen: '../img/abmPrecios.png',
+                    accion: function() {$scope.seleccionarCobrador();}},
+                {texto: 'Comprobantes', imagen: '../img/abmPrecios.png',
+                    accion: function() {$scope.swichDeuda();}},
+                {texto: 'Cobros', imagen: '../img/abmPrecios.png',
+                    accion: function() {$scope.swichCobro();}},
+                {texto: 'Moneda', imagen: '../img/abmPrecios.png',
+                    accion: function() {$scope.seleccionarMoneda();}},
                 {texto: '', accion: function() {}},
-                {texto: '', accion: function() {}},
-                {texto: '', accion: function() {}}
             ];
             $scope.datepickerAbierto = false;
             $scope.cobroDeuda = true;
diff --git a/src/views/cobranza.html b/src/views/cobranza.html
index 46081d2..1c29820 100644
--- a/src/views/cobranza.html
+++ b/src/views/cobranza.html
@@ -1,28 +1,28 @@
-<div class="crear-nota-pedido">
-    <form name="formCrearNota" ng-submit="crearNotaPedido()" class="mb-0">
+<div class="crear-nota-pedido foca-crear one-row row">
+    <form name="formCrearNota" ng-submit="crearNotaPedido()" class="mb-0 col-lg-12">
         <div class="row">
-            <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
-                <div class="row p-1 panel-informativo">
+            <div class="col-md-10 col-lg-12">
+                <div class="row panel-informativo">
                     <div class="col-12">
-                        <div class="row">
-                            <div class="col-12 col-sm-4 nota-pedido">
-                                <strong>RECIBO DE COBRANZA</strong>
+                        <div class="row titulares">
+                            <div class="col-12 col-sm-3 nota-pedido border border-left-0 border-white align-middle">
+                                <h5 class="mb-0">RECIBO DE COBRANZA</h5>
                             </div>
-                            <div class="col-5 col-sm-4 numero-pedido"
+                            <div class="col-12 col-sm-3 numero-pedido text-center text-md-left border border-white align-middle"
                                 >Nº {{puntoVenta}}-{{comprobante}}
                                 <button
-                                class="btn btn-xs btn-outline-dark"
+                                class="btn btn-xs btn-outline-light float-right"
                                 type="button"
                                 ng-click="seleccionarCobranza()"
                             >
                                 <i class="fa fa-search"></i>
                             </button>
                             </div>
-                            <div class="col-7 col-sm-4 text-right">
+                            <div class="col-7 col-sm-3 border border-white align-middle">
                                 Fecha:
                                 <span
                                     ng-show="!datepickerAbierto"
-                                    ng-bind="fecha | date:'dd/MM/yyyy HH:mm'"
+                                    ng-bind="fecha | date:'dd/MM/yyyy'"
                                     ng-click="datepickerAbierto = true"
                                 >
                                 </span>
@@ -37,8 +37,17 @@
                                     hasta-hoy
                                 />
                             </div>
+                            <div class="col-5 col-sm-3 border border-white border-right-0 align-middle">
+                                Hora:
+                                <span
+                                    ng-show="!datepickerAbierto"
+                                    ng-bind="fecha | date:'HH:mm'"
+                                    ng-click="datepickerAbierto = true"
+                                >
+                                </span>
+                            </div>
                         </div>
-                        <div class="row">
+                        <div class="row py-2">
                             <div class="col-auto" ng-repeat="cab in cabecera" ng-show="showCabecera">
                                 <span class="label" ng-bind="cab.label"></span>
                                 <span class="valor" ng-bind="cab.valor"></span>
@@ -63,470 +72,475 @@
                         </div>
                     </div>
                 </div>
-                <div class="row p-1 botonera-secundaria">
+            </div>
+        </div>
+    </form>
+    <div class="col-lg-12">
+        <div class="row mt-4">
+            <div class="col-12 col-md-10 border border-light rounded">
+                <div class="row px-5 py-2 botonera-secundaria">
                     <div class="col-12">
                         <div class="row">
-                            <div class="col-6 col-sm-3 px-0 py-0" ng-repeat="boton in botonera">
+                            <div 
+                                class="col-6 col-sm-2 px-1 py-1 m-auto m-md-0" 
+                                ng-repeat="boton in botonera"
+                                ng-class="{'d-none d-md-grid': boton.texto == ''}">
                                 <button
                                     type="button"
-                                    class="btn btn-default btn-block btn-xs text-left py-2"
+                                    class="btn btn-default btn-block btn-xs text-center py-1 rounded border border-light"
                                     ng-click="boton.accion()"
-                                    ng-class="{'d-none d-sm-block': boton.texto == ''}"
+                                    ng-class="{'d-sm-block h-100': boton.texto == ''}"
                                 >
-                                    <i
-                                        class="fa fa-arrow-circle-right"
-                                        ng-show="boton.texto != ''"
-                                    ></i>
-                                    &nbsp;
-                                    {{boton.texto}}
+                                    <img src="{{boton.imagen}}" alt="" ng-if="boton.imagen">
+                                    <span>{{boton.texto}}</span>
                                 </button>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
-        </div>
-    </form>
-    <div class="row">
-        <div class="col-12 col-md-10 col-lg-8 offset-md-1 offset-lg-2">
-            <!-- PC -->
-            <div class="row grilla-articulo align-items-end d-none d-sm-flex" ng-show="cobroDeuda">
-                <table class="table tabla-articulo table-striped table-sm table-dark">
-                    <thead>
-                        <tr class="d-flex">
-                            <th class="col-auto">#</th>
-                            <th class="col">Comprobante</th>
-                            <th class="col">Fecha</th>
-                            <th class="col">Importe</th>
-                            <th class="col-auto">
-                                <button
-                                    class="btn btn-outline-secondary selectable"
-                                    ng-click="show = !show; masMenos()"
-                                >
-                                    <i
-                                        class="fa fa-chevron-down"
-                                        ng-show="show"
-                                        aria-hidden="true"
-                                    >
-                                    </i>
-                                    <i
-                                        class="fa fa-chevron-up"
-                                        ng-hide="show"
-                                        aria-hidden="true">
-                                    </i>
-                                </button>
-                            </th>
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody class="tabla-articulo-body">
-                        <tr
-                            ng-repeat="(key, factura) in facturaTabla"
-                            class="d-flex"
-                            ng-show="show || key == facturaTabla.length - 1"
-                        >
-                            <td ng-bind="key + 1" class="col-auto"></td>
-                            <td class="col" ng-bind="factura.numeroFactura"
-                            ></td>
-                            <td class="col" ng-bind="factura.FEP | date : 'dd/MM/yyyy'"></td>
-                            <td
-                                class="col"
-                                ng-bind="(factura.IPA / cobranza.cotizacion.VENDEDOR) |
-                                    currency: cobranza.moneda.SIMBOLO : 4"></td>
-                            <td class="text-center col-auto">
-                                <button
-                                    class="btn btn-outline-secondary"
-                                    ng-click="quitarFactura(key)"
-                                >
-                                    <i class="fa fa-trash"></i>
-                                </button>
-                            </td>
-                        </tr>
-                    </tbody>
-                    <tfoot>
-                        <tr ng-show="cargando" class="d-flex">
-                            <td class="col-2">
-                                <a
-                                    class="form-control form-control-sm btn btn-secondary"
-                                    ng-click="seleccionarFactura()"
-                                >Pendientes</a>
-                            </td>
-                        </tr>
-                        <tr class="d-flex">
-                            <td class="col-auto px-1">
-                                <strong>Comprobantes:</strong>
-                                <a ng-bind="facturaTabla.length"></a>
-                            </td>
-                            <td class="text-right ml-auto table-celda-total no-border-top">
-                                <strong>Cancela:</strong>
-                            </td>
-                            <td class="table-celda-total text-right no-border-top">
-                                <strong>{{(getTotalDeuda() / cobranza.cotizacion.VENDEDOR) |
-                                    currency: cobranza.moneda.SIMBOLO}}</strong>
-                            </td>
-                            <td class="text-right ml-auto table-celda-total no-border-top">
-                                <strong>Total Cobrado:</strong>
-                            </td>
-                            <td class="table-celda-total text-right no-border-top">
-                                <strong>{{(getTotalCobrado() / cobranza.cotizacion.VENDEDOR) |
-                                    currency: cobranza.moneda.SIMBOLO}}</strong>
-                            </td>
-                            <td class="text-right ml-auto table-celda-total no-border-top">
-                                <strong>DF:</strong>
-                            </td>
-                            <td class="table-celda-total text-right no-border-top mr-1">
-                                <strong>{{((getTotalCobrado() + getTotalDeuda()) /
-                                    cobranza.cotizacion.VENDEDOR) | currency: cobranza.moneda.SIMBOLO}}
-                                </strong>
-                            </td>
-                        </tr>
-                    </tfoot>
-                </table>
-            </div>
-            <div class="row grilla-articulo align-items-end d-none d-sm-flex" ng-show="!cobroDeuda">
-                <table class="table tabla-articulo table-striped table-sm table-dark">
-                    <thead>
-                        <tr class="d-flex">
-                            <th class="col-auto">#</th>
-                            <th class="col">Cobro</th>
-                            <th class="col">Fecha</th>
-                            <th class="col">Importe</th>
-                            <th class="col-auto">
-                                <button
-                                    class="btn btn-outline-secondary selectable"
-                                    ng-click="show = !show; masMenos()"
-                                >
-                                    <i
-                                        class="fa fa-chevron-down"
-                                        ng-show="show"
-                                        aria-hidden="true"
+                <!-- PC -->
+                <div class="row grilla-articulo align-items-end d-none d-sm-flex" ng-show="cobroDeuda">
+                    <table class="table tabla-articulo table-striped table-sm mb-0 rounded-bottom">
+                        <thead>
+                            <tr class="d-flex">
+                                <th class="col-auto">#</th>
+                                <th class="col">Comprobante</th>
+                                <th class="col">Fecha</th>
+                                <th class="col">Importe</th>
+                                <th class="col-auto">
+                                    <button
+                                        class="btn btn-outline-secondary selectable"
+                                        ng-click="show = !show; masMenos()"
                                     >
-                                    </i>
-                                    <i
-                                        class="fa fa-chevron-up"
-                                        ng-hide="show"
-                                        aria-hidden="true">
-                                    </i>
-                                </button>
-                            </th>
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody class="tabla-articulo-body">
-                        <tr
-                            ng-repeat="(key, cobro) in cobrosTabla"
-                            class="d-flex"
-                            ng-show="show || key == cobrosTabla.length - 1"
-                        >
-                            <td ng-bind="key + 1" class="col-auto"></td>
-                            <td class="col" ng-bind="cobro.tipo"></td>
-                            <td class="col" ng-bind="cobro.fecha | date : 'dd/MM/yyyy'"></td>
-                            <td
-                                class="col"
-                                ng-bind="(cobro.importe / cobranza.cotizacion.VENDEDOR) |
-                                    currency: cobranza.moneda.SIMBOLO : 4"></td>
-                            <td class="text-center col-auto">
-                                <button
-                                    class="btn btn-outline-secondary"
-                                    ng-click="quitarCobro(key)"
-                                >
-                                    <i class="fa fa-trash"></i>
-                                </button>
-                            </td>
-                        </tr>
-                    </tbody>
-                    <tfoot>
-                        <tr ng-show="cargando" class="d-flex">
-                            <td class="col-2">
-                                <a
-                                    class="form-control form-control-sm btn btn-secondary"
-                                    ng-click="seleccionarCheque()"
-                                >Cheque</a>
-                            </td>
-                            <td class="col-2">
-                                <a
-                                    class="form-control form-control-sm btn btn-secondary"
-                                    ng-click="seleccionarEfectivo()"
-                                >Efectivo</a>
-                            </td>
-                        </tr>
-                        <tr class="d-flex">
-                            <td class="col-auto px-1">
-                                <strong>Cobros:</strong>
-                                <a ng-bind="cobrosTabla.length"></a>
-                            </td>
-                            <td class="text-right ml-auto table-celda-total no-border-top">
-                                <strong>Cancela:</strong>
-                            </td>
-                            <td class="table-celda-total text-right no-border-top">
-                                <strong>{{(getTotalDeuda() / cobranza.cotizacion.VENDEDOR) |
-                                    currency: cobranza.moneda.SIMBOLO}}</strong>
-                            </td>
-                            <td class="text-right ml-auto table-celda-total no-border-top">
-                                <strong>Total Cobrado:</strong>
-                            </td>
-                            <td class="table-celda-total text-right no-border-top">
-                                <strong>{{(getTotalCobrado() / cobranza.cotizacion.VENDEDOR) |
-                                    currency: cobranza.moneda.SIMBOLO}}</strong>
-                            </td>
-                            <td class="text-right ml-auto table-celda-total no-border-top">
-                                <strong>DF:</strong>
-                            </td>
-                            <td class="table-celda-total text-right no-border-top mr-1">
-                                <strong>{{((getTotalCobrado() + getTotalDeuda()) /
-                                    cobranza.cotizacion.VENDEDOR) | currency: cobranza.moneda.SIMBOLO}}
-                                </strong>
-                            </td>
-                        </tr>
-                    </tfoot>
-                </table>
-            </div>
-            <!-- MOBILE -->
-            <div class="row d-sm-none mb-5">
-                <!-- FACTURAS -->
-                <table class="table table-sm table-striped table-dark mb-5" ng-show="cobroDeuda">
-                    <thead>
-                        <tr class="d-flex">
-                            <th class="">#</th>
-                            <th class="col px-0">
-                                <div class="d-flex">
-                                    <div class="col-4 px-1">Factura</div>
-                                    <div class="col-4 px-1">Fecha</div>
-                                    <div class="col-4 px-1">Importe</div>
-                                </div>
-                            </th>
-                            <th class="text-center tamaño-boton">
-                                &nbsp;
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr 
-                            ng-repeat="(key, factura) in facturaTabla"
-                            ng-show="show || key == facturaTabla.length - 1"
-                        >
-                            <td class="w-100 align-middle d-flex p-0">
-                                <div class="align-middle p-1">
-                                    <span ng-bind="key+1" class="align-middle"></span>
-                                </div>
-                                <div class="col px-0">
-                                    <div class="d-flex">
-                                        <div class="col-4 px-1">
-                                            <span ng-bind="factura.numeroFactura"
-                                            ></span>
-                                        </div>
-                                        <div class="col-4 px-1">
-                                            <span ng-bind="factura.FEP | date : 'dd/MM/yyyy'"></span>
-                                        </div>
-                                        <div class="col-4 px-1">
-                                            <span
-                                                ng-bind="(factura.IPA / cobranza.cotizacion.VENDEDOR) |
-                                                    currency:cobranza.moneda.SIMBOLO : 4"></span>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="align-middle p-1">
+                                        <i
+                                            class="fa fa-chevron-down"
+                                            ng-show="show"
+                                            aria-hidden="true"
+                                        >
+                                        </i>
+                                        <i
+                                            class="fa fa-chevron-up"
+                                            ng-hide="show"
+                                            aria-hidden="true">
+                                        </i>
+                                    </button>
+                                </th>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody class="tabla-articulo-body">
+                            <tr
+                                ng-repeat="(key, factura) in facturaTabla"
+                                class="d-flex"
+                                ng-show="show || key == facturaTabla.length - 1"
+                            >
+                                <td ng-bind="key + 1" class="col-auto"></td>
+                                <td class="col" ng-bind="factura.numeroFactura"
+                                ></td>
+                                <td class="col" ng-bind="factura.FEP | date : 'dd/MM/yyyy'"></td>
+                                <td
+                                    class="col"
+                                    ng-bind="(factura.IPA / cobranza.cotizacion.VENDEDOR) |
+                                        currency: cobranza.moneda.SIMBOLO : 4"></td>
+                                <td class="text-center col-auto">
                                     <button
                                         class="btn btn-outline-secondary"
                                         ng-click="quitarFactura(key)"
                                     >
                                         <i class="fa fa-trash"></i>
                                     </button>
-                                </div>
-                            </td>
-                        </tr>
-                    </tbody>
-                    <tfoot>
-                        <!-- SELECCIONAR PRODUCTO -->
-                        <tr ng-show="cargando" class="d-flex">
-                            <td class="col-12">
-                                <input
-                                    placeholder="Seleccione Factura"
-                                    class="form-control form-control-sm"
-                                    readonly
-                                    ng-click="seleccionarFactura()"
-                                />
-                            </td>
-                        </tr>
-                        <!-- TOOGLE EXPANDIR -->
-                        <tr>
-                            <td class="col">
-                                <button
-                                    class="btn btn-outline-secondary selectable w-100"
-                                    ng-click="show = !show; masMenos()"
-                                    ng-show="facturaTabla.length > 0"
-                                >
-                                    <i
-                                        class="fa fa-chevron-down"
-                                        ng-hide="show"
-                                        aria-hidden="true"
+                                </td>
+                            </tr>
+                        </tbody>
+                        <tfoot>
+                            <tr ng-show="cargando" class="d-flex">
+                                <td class="col-2 border-top-0">
+                                    <a
+                                        class="form-control form-control-sm btn btn-secondary"
+                                        ng-click="seleccionarFactura()"
+                                    >Pendientes</a>
+                                </td>
+                            </tr>
+                            <tr class="d-flex">
+                                <td class="col-auto px-1 border-top-0">
+                                    <strong>Comprobantes:</strong>
+                                    <a ng-bind="facturaTabla.length"></a>
+                                </td>
+                                <td class="text-right ml-auto table-celda-total no-border-top">
+                                    <strong>Cancela:</strong>
+                                </td>
+                                <td class="table-celda-total text-right no-border-top">
+                                    <strong>{{(getTotalDeuda() / cobranza.cotizacion.VENDEDOR) |
+                                        currency: cobranza.moneda.SIMBOLO}}</strong>
+                                </td>
+                                <td class="text-right ml-auto table-celda-total no-border-top">
+                                    <strong>Total Cobrado:</strong>
+                                </td>
+                                <td class="table-celda-total text-right no-border-top">
+                                    <strong>{{(getTotalCobrado() / cobranza.cotizacion.VENDEDOR) |
+                                        currency: cobranza.moneda.SIMBOLO}}</strong>
+                                </td>
+                                <td class="text-right ml-auto table-celda-total no-border-top">
+                                    <strong>DF:</strong>
+                                </td>
+                                <td class="table-celda-total text-right no-border-top mr-1">
+                                    <strong>{{((getTotalCobrado() + getTotalDeuda()) /
+                                        cobranza.cotizacion.VENDEDOR) | currency: cobranza.moneda.SIMBOLO}}
+                                    </strong>
+                                </td>
+                            </tr>
+                        </tfoot>
+                    </table>
+                </div>
+                <div class="row grilla-articulo align-items-end d-none d-sm-flex" ng-show="!cobroDeuda">
+                    <table class="table tabla-articulo table-striped table-sm mb-0 rounded-bottom">
+                        <thead>
+                            <tr class="d-flex">
+                                <th class="col-auto">#</th>
+                                <th class="col">Cobro</th>
+                                <th class="col">Fecha</th>
+                                <th class="col">Importe</th>
+                                <th class="col-auto">
+                                    <button
+                                        class="btn btn-outline-secondary selectable"
+                                        ng-click="show = !show; masMenos()"
                                     >
-                                    </i>
-                                    <i
-                                        class="fa fa-chevron-up"
-                                        ng-show="show"
-                                        aria-hidden="true">
-                                    </i>
-                                </button>
-                            </td>
-                        </tr>
-                        <!-- FOOTER -->
-                        <tr class="d-flex">
-                            <td class="align-middle no-border-top" colspan="2">
-                                <strong>Cantidad Items:</strong>
-                                <a ng-bind="facturaTabla.length"></a>
-                            </td>
-                        </tr>
-                    </tfoot>
-                </table>
-                <!-- COBROS -->
-                <table class="table table-sm table-striped table-dark mb-5" ng-show="!cobroDeuda">
-                    <thead>
-                        <tr class="d-flex">
-                            <th class="">#</th>
-                            <th class="col px-0">
-                                <div class="d-flex">
-                                    <div class="col-4 px-1">Cobro</div>
-                                    <div class="col-4 px-1">Fecha</div>
-                                    <div class="col-4 px-1">Importe</div>
-                                </div>
-                            </th>
-                            <th class="text-center tamaño-boton">
-                                &nbsp;
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr 
-                            ng-repeat="(key, cobro) in cobrosTabla"
-                            ng-show="show || key == cobrosTabla.length - 1"
-                        >
-                            <td class="w-100 align-middle d-flex p-0">
-                                <div class="align-middle p-1">
-                                    <span ng-bind="key+1" class="align-middle"></span>
-                                </div>
-                                <div class="col px-0">
-                                    <div class="d-flex">
-                                        <div class="col-4 px-1">
-                                            <span ng-bind="cobro.tipo"
-                                            ></span>
-                                        </div>
-                                        <div class="col-4 px-1">
-                                            <span ng-bind="cobro.fecha | date : 'dd/MM/yyyy'"></span>
-                                        </div>
-                                        <div class="col-4 px-1">
-                                            <span
-                                                ng-bind="(cobro.importe / cobranza.cotizacion.VENDEDOR) |
-                                                    currency: cobranza.moneda.SIMBOLO : 4"></span>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="align-middle p-1">
+                                        <i
+                                            class="fa fa-chevron-down"
+                                            ng-show="show"
+                                            aria-hidden="true"
+                                        >
+                                        </i>
+                                        <i
+                                            class="fa fa-chevron-up"
+                                            ng-hide="show"
+                                            aria-hidden="true">
+                                        </i>
+                                    </button>
+                                </th>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody class="tabla-articulo-body">
+                            <tr
+                                ng-repeat="(key, cobro) in cobrosTabla"
+                                class="d-flex"
+                                ng-show="show || key == cobrosTabla.length - 1"
+                            >
+                                <td ng-bind="key + 1" class="col-auto"></td>
+                                <td class="col" ng-bind="cobro.tipo"></td>
+                                <td class="col" ng-bind="cobro.fecha | date : 'dd/MM/yyyy'"></td>
+                                <td
+                                    class="col"
+                                    ng-bind="(cobro.importe / cobranza.cotizacion.VENDEDOR) |
+                                        currency: cobranza.moneda.SIMBOLO : 4"></td>
+                                <td class="text-center col-auto">
                                     <button
                                         class="btn btn-outline-secondary"
                                         ng-click="quitarCobro(key)"
                                     >
                                         <i class="fa fa-trash"></i>
                                     </button>
-                                </div>
-                            </td>
-                        </tr>
-                    </tbody>
-                    <tfoot>
-                        <!-- SELECCIONAR PRODUCTO -->
-                        <tr ng-show="cargando" class="d-flex">
-                            <td class="col-6">
-                                <input
-                                    placeholder="Cheque"
-                                    class="form-control form-control-sm"
-                                    readonly
-                                    ng-click="seleccionarCheque()"
-                                />
-                            </td>
-                            <td class="col-6">
-                                <input
-                                    placeholder="Efectivo"
-                                    class="form-control form-control-sm"
-                                    readonly
-                                    ng-click="seleccionarEfectivo()"
-                                />
-                            </td>
-                        </tr>
-                        <!-- TOOGLE EXPANDIR -->
-                        <tr>
-                            <td class="col">
-                                <button
-                                    class="btn btn-outline-secondary selectable w-100"
-                                    ng-click="show = !show; masMenos()"
-                                    ng-show="cobrosTabla.length > 0"
-                                >
-                                    <i
-                                        class="fa fa-chevron-down"
-                                        ng-hide="show"
-                                        aria-hidden="true"
+                                </td>
+                            </tr>
+                        </tbody>
+                        <tfoot>
+                            <tr ng-show="cargando" class="d-flex">
+                                <td class="col-2 border-top-0">
+                                    <a
+                                        class="form-control form-control-sm btn btn-secondary"
+                                        ng-click="seleccionarCheque()"
+                                    >Cheque</a>
+                                </td>
+                                <td class="col-2 border-top-0">
+                                    <a
+                                        class="form-control form-control-sm btn btn-secondary"
+                                        ng-click="seleccionarEfectivo()"
+                                    >Efectivo</a>
+                                </td>
+                            </tr>
+                            <tr class="d-flex">
+                                <td class="col-auto px-1 border-top-0">
+                                    <strong>Cobros:</strong>
+                                    <a ng-bind="cobrosTabla.length"></a>
+                                </td>
+                                <td class="text-right ml-auto table-celda-total no-border-top">
+                                    <strong>Cancela:</strong>
+                                </td>
+                                <td class="table-celda-total text-right no-border-top">
+                                    <strong>{{(getTotalDeuda() / cobranza.cotizacion.VENDEDOR) |
+                                        currency: cobranza.moneda.SIMBOLO}}</strong>
+                                </td>
+                                <td class="text-right ml-auto table-celda-total no-border-top">
+                                    <strong>Total Cobrado:</strong>
+                                </td>
+                                <td class="table-celda-total text-right no-border-top">
+                                    <strong>{{(getTotalCobrado() / cobranza.cotizacion.VENDEDOR) |
+                                        currency: cobranza.moneda.SIMBOLO}}</strong>
+                                </td>
+                                <td class="text-right ml-auto table-celda-total no-border-top">
+                                    <strong>DF:</strong>
+                                </td>
+                                <td class="table-celda-total text-right no-border-top mr-1">
+                                    <strong>{{((getTotalCobrado() + getTotalDeuda()) /
+                                        cobranza.cotizacion.VENDEDOR) | currency: cobranza.moneda.SIMBOLO}}
+                                    </strong>
+                                </td>
+                            </tr>
+                        </tfoot>
+                    </table>
+                </div>
+                <!-- MOBILE -->
+                <div class="row d-sm-none mb-5">
+                    <!-- FACTURAS -->
+                    <table class="table table-sm table-striped table-dark mb-5" ng-show="cobroDeuda">
+                        <thead>
+                            <tr class="d-flex">
+                                <th class="">#</th>
+                                <th class="col px-0">
+                                    <div class="d-flex">
+                                        <div class="col-4 px-1">Factura</div>
+                                        <div class="col-4 px-1">Fecha</div>
+                                        <div class="col-4 px-1">Importe</div>
+                                    </div>
+                                </th>
+                                <th class="text-center tamaño-boton">
+                                    &nbsp;
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr 
+                                ng-repeat="(key, factura) in facturaTabla"
+                                ng-show="show || key == facturaTabla.length - 1"
+                            >
+                                <td class="w-100 align-middle d-flex p-0">
+                                    <div class="align-middle p-1">
+                                        <span ng-bind="key+1" class="align-middle"></span>
+                                    </div>
+                                    <div class="col px-0">
+                                        <div class="d-flex">
+                                            <div class="col-4 px-1">
+                                                <span ng-bind="factura.numeroFactura"
+                                                ></span>
+                                            </div>
+                                            <div class="col-4 px-1">
+                                                <span ng-bind="factura.FEP | date : 'dd/MM/yyyy'"></span>
+                                            </div>
+                                            <div class="col-4 px-1">
+                                                <span
+                                                    ng-bind="(factura.IPA / cobranza.cotizacion.VENDEDOR) |
+                                                        currency:cobranza.moneda.SIMBOLO : 4"></span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="align-middle p-1">
+                                        <button
+                                            class="btn btn-outline-secondary"
+                                            ng-click="quitarFactura(key)"
+                                        >
+                                            <i class="fa fa-trash"></i>
+                                        </button>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                        <tfoot>
+                            <!-- SELECCIONAR PRODUCTO -->
+                            <tr ng-show="cargando" class="d-flex">
+                                <td class="col-12">
+                                    <input
+                                        placeholder="Seleccione Factura"
+                                        class="form-control form-control-sm"
+                                        readonly
+                                        ng-click="seleccionarFactura()"
+                                    />
+                                </td>
+                            </tr>
+                            <!-- TOOGLE EXPANDIR -->
+                            <tr>
+                                <td class="col">
+                                    <button
+                                        class="btn btn-outline-secondary selectable w-100"
+                                        ng-click="show = !show; masMenos()"
+                                        ng-show="facturaTabla.length > 0"
                                     >
-                                    </i>
-                                    <i
-                                        class="fa fa-chevron-up"
-                                        ng-show="show"
-                                        aria-hidden="true">
-                                    </i>
-                                </button>
-                            </td>
-                        </tr>
-                        <!-- FOOTER -->
-                        <tr class="d-flex">
-                            <td class="align-middle no-border-top col-6">
-                                <strong>Cantidad Items:</strong>
-                                <a ng-bind="cobrosTabla.length"></a>
-                            </td>
-                    </tfoot>
-                </table>
-            </tr>
-            <!-- DEUDA, COBRADO, DIFERENCIA -->
-            <table class="table-responsive fixed-bottom mb-5">
-                <tr class="d-flex row">
-                    <td class="text-center ml-auto table-celda-total no-border-top col-4">
-                        <strong>Cancela:</strong>
-                    </td>
-                    <td class="text-center ml-auto table-celda-total no-border-top col-4">
-                        <strong>Cobrado:</strong>
-                    </td>
-                    <td class="text-center ml-auto table-celda-total no-border-top col-4">
-                        <strong>Diferencia:</strong>
-                    </td>
-                    <td class="table-celda-total text-center no-border-top col-4">
-                        <strong>{{(getTotalDeuda() / cobranza.cotizacion.VENDEDOR) | currency: cobranza.moneda.SIMBOLO}}</strong>
-                    </td>
-                    <td class="table-celda-total text-center no-border-top col-4">
-                        <strong>{{(getTotalCobrado() / cobranza.cotizacion.VENDEDOR) | currency: cobranza.moneda.SIMBOLO}}</strong>
-                    </td>
-                    <td class="table-celda-total text-center no-border-top col-4">
-                        <strong>{{((getTotalCobrado() + getTotalDeuda()) / cobranza.cotizacion.VENDEDOR) | currency: cobranza.moneda.SIMBOLO}}</strong>
-                    </td>
+                                        <i
+                                            class="fa fa-chevron-down"
+                                            ng-hide="show"
+                                            aria-hidden="true"
+                                        >
+                                        </i>
+                                        <i
+                                            class="fa fa-chevron-up"
+                                            ng-show="show"
+                                            aria-hidden="true">
+                                        </i>
+                                    </button>
+                                </td>
+                            </tr>
+                            <!-- FOOTER -->
+                            <tr class="d-flex">
+                                <td class="align-middle no-border-top" colspan="2">
+                                    <strong>Cantidad Items:</strong>
+                                    <a ng-bind="facturaTabla.length"></a>
+                                </td>
+                            </tr>
+                        </tfoot>
+                    </table>
+                    <!-- COBROS -->
+                    <table class="table table-sm table-striped table-dark mb-5" ng-show="!cobroDeuda">
+                        <thead>
+                            <tr class="d-flex">
+                                <th class="">#</th>
+                                <th class="col px-0">
+                                    <div class="d-flex">
+                                        <div class="col-4 px-1">Cobro</div>
+                                        <div class="col-4 px-1">Fecha</div>
+                                        <div class="col-4 px-1">Importe</div>
+                                    </div>
+                                </th>
+                                <th class="text-center tamaño-boton">
+                                    &nbsp;
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr 
+                                ng-repeat="(key, cobro) in cobrosTabla"
+                                ng-show="show || key == cobrosTabla.length - 1"
+                            >
+                                <td class="w-100 align-middle d-flex p-0">
+                                    <div class="align-middle p-1">
+                                        <span ng-bind="key+1" class="align-middle"></span>
+                                    </div>
+                                    <div class="col px-0">
+                                        <div class="d-flex">
+                                            <div class="col-4 px-1">
+                                                <span ng-bind="cobro.tipo"
+                                                ></span>
+                                            </div>
+                                            <div class="col-4 px-1">
+                                                <span ng-bind="cobro.fecha | date : 'dd/MM/yyyy'"></span>
+                                            </div>
+                                            <div class="col-4 px-1">
+                                                <span
+                                                    ng-bind="(cobro.importe / cobranza.cotizacion.VENDEDOR) |
+                                                        currency: cobranza.moneda.SIMBOLO : 4"></span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="align-middle p-1">
+                                        <button
+                                            class="btn btn-outline-secondary"
+                                            ng-click="quitarCobro(key)"
+                                        >
+                                            <i class="fa fa-trash"></i>
+                                        </button>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                        <tfoot>
+                            <!-- SELECCIONAR PRODUCTO -->
+                            <tr ng-show="cargando" class="d-flex">
+                                <td class="col-6">
+                                    <input
+                                        placeholder="Cheque"
+                                        class="form-control form-control-sm"
+                                        readonly
+                                        ng-click="seleccionarCheque()"
+                                    />
+                                </td>
+                                <td class="col-6">
+                                    <input
+                                        placeholder="Efectivo"
+                                        class="form-control form-control-sm"
+                                        readonly
+                                        ng-click="seleccionarEfectivo()"
+                                    />
+                                </td>
+                            </tr>
+                            <!-- TOOGLE EXPANDIR -->
+                            <tr>
+                                <td class="col">
+                                    <button
+                                        class="btn btn-outline-secondary selectable w-100"
+                                        ng-click="show = !show; masMenos()"
+                                        ng-show="cobrosTabla.length > 0"
+                                    >
+                                        <i
+                                            class="fa fa-chevron-down"
+                                            ng-hide="show"
+                                            aria-hidden="true"
+                                        >
+                                        </i>
+                                        <i
+                                            class="fa fa-chevron-up"
+                                            ng-show="show"
+                                            aria-hidden="true">
+                                        </i>
+                                    </button>
+                                </td>
+                            </tr>
+                            <!-- FOOTER -->
+                            <tr class="d-flex">
+                                <td class="align-middle no-border-top col-6">
+                                    <strong>Cantidad Items:</strong>
+                                    <a ng-bind="cobrosTabla.length"></a>
+                                </td>
+                        </tfoot>
+                    </table>
                 </tr>
-            </table>
+                <!-- DEUDA, COBRADO, DIFERENCIA -->
+                <table class="table-responsive fixed-bottom mb-5">
+                    <tr class="d-flex row">
+                        <td class="text-center ml-auto table-celda-total no-border-top col-4">
+                            <strong>Cancela:</strong>
+                        </td>
+                        <td class="text-center ml-auto table-celda-total no-border-top col-4">
+                            <strong>Cobrado:</strong>
+                        </td>
+                        <td class="text-center ml-auto table-celda-total no-border-top col-4">
+                            <strong>Diferencia:</strong>
+                        </td>
+                        <td class="table-celda-total text-center no-border-top col-4">
+                            <strong>{{(getTotalDeuda() / cobranza.cotizacion.VENDEDOR) | currency: cobranza.moneda.SIMBOLO}}</strong>
+                        </td>
+                        <td class="table-celda-total text-center no-border-top col-4">
+                            <strong>{{(getTotalCobrado() / cobranza.cotizacion.VENDEDOR) | currency: cobranza.moneda.SIMBOLO}}</strong>
+                        </td>
+                        <td class="table-celda-total text-center no-border-top col-4">
+                            <strong>{{((getTotalCobrado() + getTotalDeuda()) / cobranza.cotizacion.VENDEDOR) | currency: cobranza.moneda.SIMBOLO}}</strong>
+                        </td>
+                    </tr>
+                </table>
+                </div>
             </div>
-        </div>
-        <div class="col-auto my-2 col-lg-2 botonera-lateral d-none d-md-block">
-            <div class="row align-items-end">
-                <div class="col-12">
+            <div class="col-auto my-2 col-lg-2 botonera-lateral d-none d-md-block">
+                <div class="col-12 mt-auto">
                     <button
                         ladda="saveLoading"
                         data-spinner-color="#FF0000"
                         ng-click="crearCobranza()"
                         title="Crear nota pedido"
-                        class="btn btn-default btn-block mb-2"
+                        class="btn btn-default btn-block mb-2 border border-dark"
                         ng-disabled="editando"
                         >
-                        Guardar
+                        <strong>GUARDAR</strong>
+                    </button>
+                    <button
+                        type="button"
+                        title="Salir"
+                        class="btn btn-default btn-block border border-dark">
+                        <strong>PAUSAR</strong>
                     </button>
                     <button
                         ng-click="salir()"
                         type="button"
                         title="Salir"
-                        class="btn btn-default btn-block">
-                        Salir
+                        class="btn btn-default btn-block border border-dark">
+                        <strong>SALIR</strong>
                     </button>
                 </div>
             </div>
-- 
1.9.1