/*
 * It is advised not to edit the smartadmin_production.css
 * as this will override any changes you make in the
 * later versions of this theme.
 *
 * We advise that you use use this CSS to override
 * SmartAdmin styles.
 *
 * Rename the stylesheet to whatever your liking so it will stay
 * unique to you with each update of SmartAdmin.
 */

/*
 * INDEX
 *
 * - HTML
 * - BODY
 * - CUSTOM STYLES
 */

html{
    //background: #fff !important;
}

#pre-load-web {
    width:100%;position:absolute;background:#92def8;left:0px;top:0px;z-index:100000;
}
/*aqui centramos la imagen si coloco margin left -30 es por que la imagen mide 60 */
#pre-load-web #imagen-load{
    left:50%;margin-left:-30px;position:absolute;
}

/** Custom tooltips **/
.tooltip{
    color: #fff;
    opacity: 1 !important;
    background: transparent !important;
}

.tooltip .tooltip-inner{
    background: #3276b1 !important;
    opacity: 1 !important;
    font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
    font-weight: 100 !important;
    font-size: 12px !important;
    text-align: left !important;
    letter-spacing: 0 !important;
}

.tooltip.top .tooltip-arrow, .tooltip.top-left .tooltip-arrow, .tooltip.top-right .tooltip-arrow{
    border-top-color:#3276b1 !important;
}

.tooltip.bottom .tooltip-arrow, .tooltip.bottom-left .tooltip-arrow, .tooltip.bottom-right .tooltip-arrow{
    border-bottom-color: #3276b1 !important;
}

.tooltip.left .tooltip-arrow{
    border-left-color:#3276b1 !important;
}

.tooltip.right .tooltip-arrow{
    border-right-color: #3276b1 !important;
}

/* END custom tooltips */


 /* Custom styles */
 .no-margensup{
     margin-top: 0 !important;
 }

.margen-05x{
    margin: 0.5em !important;
 }

 .margen-1x{
    margin: 1em !important;
 }

 .margen-der-05x{
    margin-right: 0.5em !important;
 }

 .margen-der-1x{
    margin-right: 1em !important;
 }

 .margen-izq-05x{
    margin-left: 0.5em !important;
 }

 .margen-izq-1x{
    margin-left: 1em !important;
 }

 .margen-sup-05x{
    margin-top: 0.5em !important;
 }

 .margen-sup-1x{
    margin-top: 1em !important;
 }

 .margen-sup-2x{
     margin-top: 2em !important;
 }

 .margen-inf-05x{
    margin-bottom: 0.5em !important;
 }

 .margen-inf-1x{
    margin-bottom: 1em !important;
 }

 .margen-inf-2x{
    margin-bottom: 2em !important;
 }
 
 .margen-inf-3x{
    margin-bottom: 3em !important;
 }

 .margen-der-2x{
    margin-right: 2em !important;
 }

 .margen-izq-2x{
    margin-left: 2em !important;
 }

 .padding-1x{
     padding: 1em !important;
 }

 .padding-2x{
     padding: 2em !important;
 }

 .padding-4x{
     padding: 4em !important;
 }


 .padding-05x{
     padding: 0.5em !important;
 }

 .padding-sup-1x{
    padding-top: 1em !important;
 }

 .padding-sup-2x{
    padding-top: 2em !important;
 }

 .padding-inf-1x{
    padding-bottom: 1em !important;
 }

 .padding-inf-2x{
    padding-bottom: 2em !important;
 }

 .padding-izq-1x{
    padding-left: 1em !important;
 }

 .padding-der-1x{
    padding-right: 1em !important;
 }

 .separador-nav{
    border-top: 2px solid #e5e5e5;
    width:auto;
 }

 .ancho-completo{
     width: 100% !important;
 }

 .ancho-90{
     width: 90% !important;
 }


.page-footer{
    height: auto !important;
    margin-bottom: 0px !important;
    padding-bottom: 0.6em !important;
}

//FORMULARIOS
form input[disabled]{
    background: #F2F2F2 !important;
}

form input[readonly]{
    background: #FAFAFA !important;
}

form input[disabled]:hover, form select[disabled]:hover, form textarea[disabled]:hover, form button[class="disabled"]:hover, form a[class="disabled"]:hover{
    cursor: not-allowed !important;
}

input.form-control[placeholder]{
    font-weight: 200 !important;
    //background: url('../img/search-icon-24.png') white no-repeat right center;
}


form .obligatorio{
    color: #D56161 !important;
    font-style: italic;
}

/* Fondo de las filas de sesiones según el mecánico (con opacidad para
   legibilidad). Se aplica a los td para ganar al table-striped. */
#tabla-sesiones-or tbody tr[data-mec="A"] > td{
    background-color: rgba(86,138,137,0.132) !important;   /* teal (Antonio) */
}
#tabla-sesiones-or tbody tr[data-mec="J"] > td{
    background-color: rgba(176,155,91,0.132) !important;   /* dorado (Juanjo) */
}
#tabla-sesiones-or tbody tr[data-mec="C"] > td{
    background-color: rgba(110,88,122,0.132) !important;   /* morado (Checkir) */
}

form select.select-lista{
    min-width: 150px !important;
    overflow-y: scroll !important;
}


.img-tarjeta{
    vertical-align: middle !important;
    margin-right: 1em !important;
    margin-left: 0.5em !important;
}

.titulo-tarjeta{
    font-size: 1.6em !important;
}


.dataTables_wrapper{
    width: 100% !important;
}


table.tablas{
    overflow-x: scroll !important;
}

table.tabla-interna thead tr{
    background: #EFFBF8 !important;
}


.importe_parcial{
    font-size: 1.2em !important;
    font-weight: 500 !important;
    color: #666666 !important;
}
.importe_total_negativo{
    font-size: 1.2em !important;
    font-weight: bolder !important;
    color: #D56161 !important;
}

.importe_total_positivo{
    font-size: 1.2em !important;
    font-weight: bolder !important;
    color: #468847 !important;
}

.importe_total_neutro{
    font-size: 1.2em !important;
    font-weight: bolder !important;
    color: #666666 !important;
}

.input-sin-formato{
    background: inherit !important;
    border: 0 !important;
    width: auto !important;
}


//Ajustamos contenido de tablas en pantallas pequeñas
@media screen and (max-width: 767px){
    .tablas{
        overflow-x: scroll !important;
    }
    /*
    .dt-toolbar, .dt-header, .dt-toolbar-footer{
        width: 100% !important;
    }
    */
}


table.listado-tabla tr{
    font-size: 0.9em !important;
}


.nav.nav-tabs li:not(.active) a{
    //background: #fefefe !important;
    color: #4387bf!important;
}

.font-size-06em{
    font-size: 0.6em !important;
}

.font-size-07em{
    font-size: 0.7em !important;
}

.font-size-08em{
    font-size: 0.8em !important;
}

.font-size-09em{
    font-size: 0.9em !important;
}

.font-size-1-2em{
    font-size: 1.2em !important;
}

.font-size-1-5em{
    font-size: 1.5em !important;
}

.font-size-2em{
    font-size: 2em !important;
}

.subtotal_factura_titulo{
    font-size: 1.1em !important;
    font-weight: 500 !important;
    color: #666666 !important;
}

.subtotal_factura{
    font-size: 1.1em !important;
    font-weight: 600 !important;
    color: #666666 !important;
}

.subtotal_factura_negativa{
    font-size: 1.1em !important;
    font-weight: 600 !important;
    color: #D56161 !important;
}


.total_factura_titulo{
    font-size: 1.2em !important;
    font-weight: 500 !important;
    color: #666666 !important;
}

.total_factura{
    font-size: 1.3em !important;
    font-weight: bolder !important;
    color: #666666 !important;
}

.total_factura_pagado{
    font-size: 1.3em !important;
    font-weight: bolder !important;
    color: #468847 !important;
}

.total_factura_pendiente{
    font-size: 1.3em !important;
    font-weight: bolder !important;
    color: #D56161 !important;
}

.smart-form-modified{
    background: #fff !important;
}

.smart-form-modified fieldset{
    background: #fff !important;
}

.smart-form-modified fieldset input{
    background: #fff !important;
}

.bg-color-form{
    background: #fff !important;
    border: 1px solid rgb(204, 204, 204) !important;
}

.border-radius-circle{
    border-radius: 50% 50% 50% 50% !important;
    -webkit-border-radius: 50% 50% 50% 50% !important;
    -moz-border-radius: 50% 50% 50% 50% !important;
    -ms-border-radius: 50% 50% 50% 50% !important;
    -o-border-radius: 50% 50% 50% 50% !important;
}

.texto-no-cursivo{
    font-style: normal !important;
}

.texto-cursivo{
    font-style: italic !important;
}

.texto-nota{
    font-style: italic !important;
    color: #999 !important;
}

.text-yellow{
    color: #b09b5b!important;
}

#left-panel{
    width: 210px !important;
    padding-right: 3px !important;
    padding-left: 2px !important;
}

.fixed-navigation nav ul{
    width: 100% !important;
}

.fixed-navigation nav {
    padding-left: 0px !important;
    padding-right: 15px !important;
    width: 114% !important;
}

.ajax-dropdown{
    width: 370px !important;
    overflow-y: auto !important;
}

.ajax-dropdown label{
    font-weight: 400 !important;
}

.dropdown-menu{
    min-width: 280px !important;
}

#form-reportar-incidencia header{
    color: #4387C2 !important;
    font-weight: 400 !important;
}


h4.modal-title{
   color: #57889c !important;
   font-weight: 400 !important;
}


img.media-object-custom{
    border: 0 !important;
    width: 40px !important;
    height: 40px !important;
}

#bloque-error-db{

}

.titulo-error-acceso{
    font-size: 5em !important;
}

    .titulo-error-acceso i{
        font-size: 2em !important;
    }

.texto-error-acceso{
    text-align: justify !important;
    font-size: 1.5em !important;
    font-weight: 300 !important;
    line-height: 1.5em !important;
}

.clase-incidencia{
    background: #F7F8E0 !important;
}


#nombre_usuario_sesion{
    font-size: 0.9em !important;
    color: #fff !important;
}

#usuario-topbar{
    margin: 0 10px;
    line-height: 49px;
}
#usuario-topbar{
    position: relative;
}
#usuario-topbar > a{
    color: #fff;
    text-decoration: none;
}
#usuario-topbar img{
    width: 28px;
    height: 28px;
    margin-right: 6px;
}

//Formulario login, clases validación
em.invalid{
    color: #D56161 !important;
    font-size: 11px !important;
    font-style: normal !important;
    line-height: 15px !important;
}


.bloque-paginacion{
    margin-top: 1em !important;
    padding-top: 1em !important;
    border-top: 2px solid #eee !important;
}


/****************************************
    Estilos autocomplete
****************************************/
ul.lista-autocompletado{
    width: 99%;
    position: absolute;
    z-index: 9;
    background: white;
    list-style: none;
    border: 1px solid #BDBDBD;
    display: none;
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

    ul.lista-autocompletado li{
        padding: 5px;
    }

    ul.lista-autocompletado li:hover,
    ul.lista-autocompletado li.ac-activo{
        background: #3276b1;
        color: #fff;
        cursor: pointer;
    }


/****************************************
    Píldoras de estado de la orden (iguales que en la app)
****************************************/
.estado-vehiculo-1{ background-color: #6B7280; }  /* Cita (gris) */
.estado-vehiculo-2{ background-color: var(--z-est-rec, #1F5FBF); }  /* Recepcionado (azul) */
.estado-vehiculo-3{ background-color: var(--z-est-cur, #FFC107); color: var(--z-sobre-marca, #14171C); }  /* En curso (amarillo) */
.estado-vehiculo-4{ background-color: var(--z-est-pie, #EF8018); color: var(--z-sobre-marca, #14171C); }  /* Pdte. piezas (naranja) */
.estado-vehiculo-5{ background-color: var(--z-est-lis, #157A3E); }  /* Finalizado / Listo (verde) */
.estado-vehiculo-6{ background-color: #4B5563; }  /* Entregado (gris oscuro) */
.pildora-estado.estado-vehiculo-3, .pildora-estado.estado-vehiculo-4{ color: var(--z-sobre-marca, #14171C); }

/* Píldora grande de la ficha de orden: redondeada y en mayúsculas, como en la app */
.pildora-estado{
    display: inline-block;
    padding: 9px 22px;
    border-radius: 999px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}


/****************************************
    Píldoras de origen de una sesión de la orden (iguales que en la app)
****************************************/
.label.label-origen-app{ background-color: #EF8018; background-color: var(--z-marca, #EF8018); }  /* fichada desde la app (naranja de Zuricar) */
.label.label-origen-web{ background-color: #739E73; }  /* introducida desde el CRM */


/****************************************
    Estilos gráficas
****************************************/
.chart{
    //min-height: 500px !important;
    //height: auto !important;
    //overflow-x: auto !important;
}
/* Contadores del menú lateral: a la derecha de la opción, sin saltar a una segunda línea cuando el texto es largo */
#left-panel nav ul li a{
    position: relative;
}
#left-panel nav ul li a .badge.pull-right{
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -9px;
    float: none;
}


/* ===================== Campana de recordatorios (barra superior de todas las páginas) =====================
   Las piezas de la bandeja (recordatorios/index.php) están en css/modulos/recordatorios.css. Aquí quedan solo la campana
   y las que su desplegable reutiliza (avatar, matrícula e iconos de adjunto), que se cargan en todas las vistas. */
/* Avatares, matrícula e iconos de adjunto */
.rec-av{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 38px; width:38px; height:38px; border-radius:50%; color:#FFFFFF; font-weight:700; font-size:13px; }
.rec-av-s{ flex-basis:26px; width:26px; height:26px; font-size:10px; }
.rec-ic{ color:var(--z-texto-suave); font-size:13px; margin-left:6px; }
.rec-ic-pdf{ position:relative; display:inline-block; width:14px; height:17px; vertical-align:middle; }
.rec-ic-pdf .fa{ font-size:17px; line-height:17px; }
.rec-ic-pdf b{ position:absolute; left:0; right:0; top:6px; text-align:center; font-size:5px; line-height:5px; color:var(--z-error); font-weight:900; }

/* ===================== Campana de recordatorios (topbar) ===================== */
#campana-recordatorios{ position:relative; margin:0 4px; line-height:49px; }
#campana-recordatorios > a{ color:var(--z-cab-texto); text-decoration:none; display:inline-block; padding:0 12px; font-size:18px; }
#campana-recordatorios > a:hover{ color:var(--z-marca); }
#campana-recordatorios .fa-bell-o{ display:inline-block; transform-origin:50% 0; }
#campana-recordatorios .badge{ position:absolute; top:8px; right:2px; font-size:10px; line-height:14px; padding:2px 5px; border-radius:9px; }
#campana-recordatorios.ring .fa-bell-o{ animation:zc-ring 1.6s ease-in-out infinite; }
@keyframes zc-ring{
    0%, 55%, 100%{ transform:rotate(0); }
    10%{ transform:rotate(16deg); }
    20%{ transform:rotate(-14deg); }
    30%{ transform:rotate(10deg); }
    40%{ transform:rotate(-8deg); }
    50%{ transform:rotate(4deg); }
}
@media (prefers-reduced-motion: reduce){
    #campana-recordatorios.ring .fa-bell-o{ animation:none; }
}
#campana-recordatorios .campana-menu{ top:100%; right:0; left:auto; width:340px; max-width:92vw; padding:0; line-height:1.4; overflow:hidden; }
#campana-recordatorios .campana-cab{ padding:10px 14px; font-weight:700; color:var(--z-texto); border-bottom:1px solid var(--z-borde); background:var(--z-superficie-alta); }
#campana-recordatorios .campana-lista{ max-height:380px; overflow-y:auto; }
#campana-recordatorios .campana-item{ display:flex; gap:10px; padding:10px 14px; border-bottom:1px solid var(--z-borde); color:var(--z-texto); text-decoration:none; }
#campana-recordatorios .campana-item:hover{ background:var(--z-superficie-alta); }
#campana-recordatorios .campana-item-cuerpo{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
#campana-recordatorios .campana-item-quien{ font-weight:700; font-size:12px; }
#campana-recordatorios .campana-item-resumen{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--z-texto-suave); }
#campana-recordatorios .campana-item-pie{ display:flex; align-items:center; }
#campana-recordatorios .campana-item-pie .rec-ic:first-child{ margin-left:0; }
#campana-recordatorios .campana-vacio{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:28px 16px; text-align:center; color:var(--z-texto-suave); }
#campana-recordatorios .campana-vacio .fa{ font-size:34px; color:var(--z-ok); margin-bottom:6px; }
#campana-recordatorios .campana-vacio strong{ color:var(--z-texto-suave); }
#campana-recordatorios .campana-pie{ display:block; padding:10px 14px; text-align:center; font-weight:700; color:var(--z-marca-texto); border-top:1px solid var(--z-borde); background:var(--z-superficie-alta); }
#campana-recordatorios .campana-pie:hover{ background:var(--z-marca-suave); text-decoration:none; }

/*Botón de sonido de la campana*/
#campana-recordatorios .campana-cab{ display:flex; align-items:center; justify-content:space-between; }
.campana-sonido{ border:0; background:transparent; color:var(--z-texto-suave); padding:2px 6px; border-radius:4px; cursor:pointer; font-size:14px; }
.campana-sonido:hover, .campana-sonido:focus{ background:var(--z-superficie-alta); color:var(--z-marca); outline:0; }