/*Login*/

:root {
    --negro:#181818;
    --gris:#666;
}

html, body, * {
    font-family: 'Raleway', sans-serif;
    box-sizing: border-box;
}


.small {
    font-size: 12px;
}


.softlink{
	color: #555;
	font-size: 14px;
}

.bold{
	font-weight: bold;
}

.form-login input[type='text'],.form-login input[type='password']{
	padding: 10px;
}

.mt-5vh {
    margin-top:5vh;
}

.mt-10vh {
    margin-top:10vh;
}

.mt-15vh {
    margin-top:15vh;
}

.mt-20vh {
    margin-top:20vh;
}

.mt-25vh {
    margin-top:25vh;
}

.wmax-650{
	max-width: 650px !important;
}

.lh-15{
	line-height: 1.5;
}

.pointer{
	cursor: pointer;
}

header {
    background-color: var(--negro);
}

.navbar-brand {
    margin-right:0px;
}

.navbar-brand img {
    width: 100%;
    max-width: 200px;
}

.logo-header img{
	width: 150px;
}

.logo-footer img {
    width: 100px;
}

.navbar-dark .navbar-nav .nav-link {
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
}

@media screen and (max-width:991px) {
    .navbar > div {
        width: 90vw;
        flex-direction: row !important;
    }
}

.navbar-dark .navbar-toggler-icon {
    background-image: url(/images/ux/menu-icon.svg);
}

.navbar-dark .navbar-toggler {
    border:0px;
    color: rgba(0,0,0,0);
}

.content {
    position: relative;
}

.content:before {
    content: '';
    background: url(/images/ux/pattern-bg.png);
    background-repeat: repeat;
    background-size: auto;
    opacity: .02;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

form input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]) {
    height: 45px;
    border: solid 1px #666;
    background-color: #ffffff;
}

form label {
    margin-top: 16px;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
}

.btn-main, .btn-default {
    border: 0px;
    background-color: var(--negro);
    color: #ffffff;
    max-width: 350px;
    margin:32px auto;
    padding: 12px 32px;
    font-weight: 700;
    font-size: 19px;
    text-transform: uppercase;
    transition: .3s ease-in;
    box-shadow: 0px 4px 4px rgba(0,0,0,.15);
}

.btn-main {
    text-decoration: none;
    text-align: center;
    display: block;
}

.btn-main.disabled, .btn-main.disabled:hover {
    opacity: .2;
    cursor: not-allowed;
}

.btn-main.enabled {
    opacity: 1;
    cursor: pointer;
}

.btn-main:hover {
    text-decoration: none;
    color:#bbb;
}

td .btn-main {
    margin:0px auto;
    font-size:16px;
}

/* td .btn-main i {
    margin:0px auto;
    font-size:16px;
} */

.btn-venta i, a i, button i {
    margin-right: 8px;
}




.link-registro a {
    font-size: 14px;
    color: var(--negro);
    text-decoration: none;
}

.link-registro a:hover {
    color: var(--gris);
    text-decoration: underline;
}





/*Alta farmacia*/

.help-block {
    font-size: 13px;
}

input[type="checkbox"] + label {
    text-transform: none;
    font-weight: 400;
    font-size: 14px;
    margin-top: 0px;
    margin-left: 8px;
}

.container-farmacia {
    background-color: #fff;
    padding: 6px;
    box-shadow: 0px 4px 4px rgba(0,0,0,.15);
}

.container-farmacia p {
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    margin-bottom: 0;
    text-transform: uppercase;
}


/*Cliente*/

.container-cliente {
    padding: 8px 16px;
    text-align: right;
    color: var(--gris);
    font-size: 13px;
    
}

.container-cliente .nombre-cliente {
    font-weight: 400;
}

.btn-cambiar {
    padding:4px;
    background-color: var(--gris);
    color: #fff;
    text-decoration: none;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
}

.btn-cambiar:hover {
    color:#fff;
}



.captura-ticket {
    border: var(--negro) dashed 2px;
    border-radius: 16px;
}


.seleccionar-promo i, .seleccionar-ptos i {
    font-size: 24px;
}

i.bi-check-circle-fill {
    color:mediumseagreen;
}

i.bi-exclamation-triangle-fill {
    color:darkred;
}

.error-promo, .error-ptos {
    color:darkred;
    text-align: center;
    font-size: 11px;
    margin-top: -16px;
}

.captura-ticket > i {
    font-size: 43px;
    text-align: center;
    display: block;
}



/*Modal promos*/

.modal-promos {
    position: absolute;
    top: 20px;
    z-index: 2;
    background-color: #fff;
    max-width: 350px;
    left: 5vw;  
  }
  
  .modal-title {
    text-align:center;
    font-weight: 600;
    text-transform: uppercase;
    color:#ffffff;
    padding-left: 16px;
  }
  
  .modal-header {
    background-color: var(--negro);
    padding: 8px;
  }
  
  ul.list-promos {
    list-style: none;
    padding-left: 0px !important;
  }
  
  ul.list-promos li {
    padding: 16px;
    border-bottom: solid thin #363636;
    display: flex;
    flex-direction: column;
    font-size: 13px;
  }
  
  ul.list-promos li:active {
    background-color: var(--negro);
    color: #fff;
  }
  
  span.fechas-promo {
    font-size: 10px;
    color: #666;
    font-weight: 600;
  }


  .modal .close {
    color: #fff;
    border: 0px;
    background: transparent;
    font-size: 35px;
    padding: 0px 10px;
    line-height: 36px;
}

.container-promos-selec ul, .container-ptos-selec {
    list-style: none;
    text-align: center;
}

.modal input[type="search"] {
    height: 32px !important;
    width: 100%;
    margin-bottom: 16px;
}

.modal input[type="search"]::placeholder {
    font-size: 12px;
}

.cod-pto, .titulo-cod-pto {
    flex: 0 0 20%;
    font-size: 13px;
    line-height: 19px;
    font-weight: 500;
}

.nombre-pto, .titulo-nombre-pto {
    flex: 1 0 min-content;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 19px;
    font-weight: 500;
    padding: 0px 5px;
}

.btn-anadir-pto {
    flex: 0 0 30px;
}

.btn-anadir-pto i {
    font-size: 18px;
}

.titulo-seleccionados {
    font-weight: 600;
    font-size: 13px;
    background-color: var(--negro);
    color: #fff;
    text-align: center;
    padding: 4px;
    text-transform: uppercase;
    position: relative;
}

i.bi-dash-square-fill {
    color: rgb(168, 168, 168);
}

.modal .btn-main, .modal .btn-sec {
    max-width: 350px;
    margin: auto;
    padding: 10px;
    font-size: 14px;
}

.modal .btn-sec {
    max-width: 350px;
    margin: auto;
    padding: 9px;
    font-size: 14px;
    background: transparent;
    border: solid thin var(--negro);
}


.contador-ptos {
    background-color: #eee;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -6px;
    right: 8px;
    color: darkred;
    box-shadow: 0px 4px 4px rgba(0,0,0,.15);
}

.contador-ptos.correcto {
    background-color:rgb(76, 209, 136);
    color: var(--negro);
}






/*Acordeon promos*/

.accordion .card-header {
    background-color: var(--negro);
    border-radius: 0px;
}

.accordion .btn.btn-link {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
    text-align: left;
}

.accordion.promos .card-body {
    padding: 0px;
}

.tabla-promos tr td, .tabla-promos thead th {
 padding: 16px 32px;
}

.tabla-promos thead {
    text-transform: uppercase;
    font-size: 15px;
    background-color: #f9f9f9;
}

.tabla-promos tr {
    border-bottom: rgb(230, 230, 230) solid 1px;
}
/* .tabla-promos tbody tr:nth-child(2n+1) {
    background-color: #f9f9f9;
} */

.tabla-promos i {
    font-size: 24px;
}

.tabla-promos tr td:not(:first-child), .tabla-promos thead th:not(:first-child), .tabla-promos.tabla-detalle-promo, .tabla-promos.tabla-detalle-promo-realizadas {
    text-align: center;
}

.tabla-promos .btn-check:focus + .btn, .btn:focus {
    box-shadow:0px 0px 0px 0px;
}

.tabla-promos tr td:first-child {
    font-weight: 600;
    font-size: 15px;
    line-height: 21px;
}

.tabla-promos tbody tr {
    background-color: #fff;
}

.tabla-promos.tabla-detalle-promo-realizadas a i {
    margin-right: 0px;
    color:var(--negro);
}



@media screen and (min-width:760px) and (max-width:1024px) {

    .tabla-promos tr td, .tabla-promos thead th {
        padding: 16px;
    }

    .tabla-promos thead th {
        font-size: 14px;
    }
}



@media screen and (max-width: 760px) {

   	.tabla-promos table, .tabla-promos thead, .tabla-promos tbody, .tabla-promos th, .tabla-promos td, .tabla-promos tr { 
		display: block; 
	}
	
	.tabla-promos thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.tabla-promos tr { border: 1px solid #ccc; }
	
	.tabla-promos td { 
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	.tabla-promos td:before { 
        position: absolute;
        top: 19px;
        left: 13px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 13px;
        text-align: left;
	}


    .tabla-promos tr td:first-child {
        text-align:center;
        background-color: #f9f9f9;
        font-weight: 600;
    }

    .tabla-detalle-promo tr td:first-child, .tabla-detalle-promo-realizadas tr td:first-child {
    text-align:right;
    }
	
    .tabla-promos tr td:not(:first-child), .tabla-promos thead th:not(:first-child) {
        text-align: right;
    }

	.tabla-promos td:nth-of-type(1):before { content: ''; }
	.tabla-promos td:nth-of-type(2):before { content: "Operaciones"; }
	.tabla-promos td:nth-of-type(3):before { content: "Total venta neta *"; }
	.tabla-promos td:nth-of-type(4):before { content: "Total a abonar"; }
	.tabla-promos td:nth-of-type(5):before { content: "Acciones"; }


    #proximas .tabla-promos td:nth-of-type(1):before { content: ''; }
	#proximas .tabla-promos td:nth-of-type(2):before { content: "Operaciones"; }
	#proximas .tabla-promos td:nth-of-type(3):before { content: "Total venta neta *"; }
	#proximas .tabla-promos td:nth-of-type(4):before { content: "Total a abonar"; }
	#proximas .tabla-promos td:nth-of-type(5):before { content: "Estado"; }
    #proximas .tabla-promos td:nth-of-type(6):before { content: "Acciones"; }

    .tabla-detalle-promo td:nth-of-type(1):before { content: 'Operaciones'; }
	.tabla-detalle-promo td:nth-of-type(2):before { content: "Ventas netas"; }
	.tabla-detalle-promo td:nth-of-type(3):before { content: "A abonar"; }
	.tabla-detalle-promo td:nth-of-type(4):before { content: "Estado"; }
	.tabla-detalle-promo td:nth-of-type(5):before { content: ""; }

    .tabla-detalle-promo-realizadas td:nth-of-type(1):before { content: 'Fecha'; }
	.tabla-detalle-promo-realizadas td:nth-of-type(2):before { content: "Venta neta"; }
	.tabla-detalle-promo-realizadas td:nth-of-type(3):before { content: "A abonar"; }
	.tabla-detalle-promo-realizadas td:nth-of-type(4):before { content: "Ticket"; }
	.tabla-detalle-promo-realizadas td:nth-of-type(5):before { content: "Acceder"; }
}



h1.pag-title {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 32px;
    border-bottom: solid 3px var(--negro);
    padding-bottom: 8px;
}

td[class^='estado-']{
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px !important;
}

.estado-abierta {
    background-color: rgba(76, 209, 136, .2);
    color: rgb(34, 134, 79);
}

.estado-tickets {
    background-color: #ffc10747;
    color: #ae8407;
}

.estado-cerrada {
    background-color: #dfdfdf66;
    color: #b0b0b0;
}

.siblings-estado-cerrada {
    color: #b0b0b0 !important;
}

.logo img {
    max-width: 150px;
    margin: 32px auto;
}

.img-promo img {
    max-width: 250px;
    margin: 32px auto;
}

.titulo-resumen {
    background-color: var(--negro);
    padding: 12px;
}

.titulo-resumen h2 {
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-size: 20px !important;
    font-weight: 700;
}