/* ------------------------------------------------------------------------------------------------
   AJUSTES SOBRE EL TEMA (main.css)

   Se carga DESPUES de main.css, que se queda sin tocar. Si algo no convence se quita el <link>
   de comunes/pf_head.cshtml y todo vuelve a estar como estaba.

   1. Barra superior mas estrecha: pasa de 80 px a 56 px de alto.
   2. Remates del menu lateral que no se pueden hacer desde el HTML.
   ------------------------------------------------------------------------------------------------ */

/* ---------------------------------------------------------------- 1. BARRA SUPERIOR ---- */

/* el alto de la barra lo marcan los paddings de sus piezas, no una altura fija */
.navbar-default .brand {
    padding: 12px 24px;
}

.navbar-nav > li > a {
    padding: 12px 14px;
}

/* Bootstrap 3 le pone a .navbar-btn un margen de 8px arriba y abajo: con eso y su contenido
   era la pieza que marcaba el alto de la barra */
.navbar-btn {
    padding: 4px 0;
    margin: 0;
}

    .navbar-btn button {
        font-size: 18px;
        padding: 2px 6px;
    }

.navbar-nav > li > a > i {
    font-size: 18px;
}

/* las piezas de la barra, en pixeles: si van en em heredan la letra del equipo y vuelven a
   descuadrar el alto */
.navbar-default .brand,
.navbar-default .navbar-nav > li > a {
    font-size: 14px;
    line-height: 20px;
}

.navbar-default .navbar-nav > li,
.navbar-default .navbar-btn,
.navbar-default .brand {
    display: flex;
    align-items: center;
    height: var(--alto-barra);
}

/* El menu lateral va fijo, pero sin un "top" propio tomaba el del flujo normal: en las pantallas
   que llevan "body { margin: 100px auto }" para los saltos de ancla (pedidos, por ejemplo) se
   descolgaba 100 px y quedaba un hueco blanco entre la barra superior y el menu. */
#wrapper .sidebar {
    top: 0;
}

/* El alto de la barra y el hueco que le dejan el menu lateral y el contenido salen de la MISMA
   variable, porque antes eran dos numeros sueltos y se desincronizaban: en los equipos con la
   letra del sistema mas grande (o con zoom de letra, no de pagina) la barra crecia de 51 a 54 o
   59 px mientras el hueco seguia clavado en 51, y la primera opcion del menu, Ventas, se quedaba
   escondida debajo de la franja azul.

   Ademas la barra lleva ahora un alto fijo y su contenido va centrado y medido en pixeles, para
   que no sea la letra del equipo la que decida cuanto ocupa. */
:root {
    --alto-barra: 51px;
}

.navbar-default {
    height: var(--alto-barra);
    min-height: var(--alto-barra);
}

/* el contenido y el menu lateral empiezan donde acaba la barra */
#wrapper #sidebar-nav,
#wrapper .main {
    padding-top: var(--alto-barra);
}

.navbar + .main-content {
    padding-top: 70px;
}

@media screen and (max-width: 767px) {
    #wrapper #sidebar-nav,
    #wrapper .main {
        padding-top: 98px;
    }

    .navbar + .main-content {
        padding-top: 120px;
    }
}

/* la foto y el nombre del usuario, al tamano de la barra nueva */
.navbar-nav > li > a img {
    width: 20px;
}

/* El contenido arrancaba 28 px por debajo de la barra en todas las pantallas (lo pone el tema
   en .main-content). Se aprieta un poco: se gana media fila de datos sin que quede apretado.
   Los laterales se dejan como estaban, que ya eran estrechos y aprovechan el ancho. */
.main-content {
    padding: 14px 12px 24px 12px;
}

/* ---------------------------------------------------------------- 2. MENU LATERAL ---- */

/* el menu desplegable: la flecha de la derecha */
.sidebar .nav > li > a .icon-submenu-propio {
    float: right;
    font-size: 10px;
    margin: 5px 0 0 0;
    opacity: .45;
    transition: transform .2s ease-out;
}

.sidebar .nav > li > a.active .icon-submenu-propio {
    opacity: .9;
    transform: rotate(180deg);
}

/* un poco menos de alto por opcion: entran todos los modulos sin tener que hacer scroll */
.sidebar .nav > li > a {
    padding: 12px 24px;
}

.sidebar .nav i {
    font-size: 16px;
}

.sidebar .nav .nav > li > a {
    padding-left: 50px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 13px;
}

/* El menu se desplaza solo. Antes lo manejaba slimScroll (klorofil-common.js), que le ponia
   overflow:hidden y un alto del 95%: al desplegar un modulo con muchas opciones, lo de abajo
   quedaba cortado y sin forma de llegar. Por eso la clase ya no es .sidebar-scroll. */
.menu-scroll {
    height: calc(100vh - 51px);
    overflow-y: auto;
    overflow-x: hidden;
}

    .menu-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .menu-scroll::-webkit-scrollbar-thumb {
        background-color: #46505e;
        border-radius: 3px;
    }

    .menu-scroll::-webkit-scrollbar-track {
        background-color: transparent;
    }

/* ------------------------------------------------------------------ PEDIDOS E INCURRIDOS ----
   Cada dia se pinta en dos columnas: a la izquierda la fecha con los contadores de operarios y
   los iconos del dia, y a la derecha la tabla con los pedidos. La izquierda se llevaba el 16,6 %
   del ancho (222 px en una pantalla normal) y 48 de esos pixeles eran relleno, mientras que la
   tabla de la derecha iba tan apretada que la columna de Operarios, que pide 400 px, se quedaba
   en 99. Se le deja a la izquierda el ancho justo que necesita su contenido y lo que sobra se lo
   queda la tabla.

   Por debajo de 768 px no se aplica: ahi las dos columnas van una debajo de otra a todo lo ancho,
   que es lo que hace col-md-* de serie. */
@media (min-width: 768px) {
    .col-dia {
        flex: 0 0 170px;
        max-width: 170px;
    }

    .col-dia-resto {
        flex: 0 0 calc(100% - 170px);
        max-width: calc(100% - 170px);
    }
}

/* El tema le mete a cada celda 25 px de relleno por la izquierda y la pantalla otros 10 por su
   cuenta; como la tablita de contadores tiene cuatro columnas, 140 de los 205 px que ocupaba
   eran relleno y se salia de su columna montandose encima de la tabla de pedidos. Con el relleno
   ajustado cabe de sobra. El selector va asi de largo para ganarle al <style> que la propia
   pantalla lleva dentro (.main-content table.table > tbody > tr > td), que es mas concreto. */
.main-content .col-dia table.table > tbody > tr > td {
    padding: 3px 6px;
}

/* La fecha y el dia de la semana van en dos celdas de una tabla, y las celdas de una tabla no
   parten linea: "26/10/2026" y "(miercoles)" pedian 209 px juntos y el dia se quedaba cortado.
   Pasandolas a bloques en linea se colocan seguidas si caben y una debajo de otra si no. */
.col-dia > table:first-of-type,
.col-dia > table:first-of-type > tbody,
.col-dia > table:first-of-type > tbody > tr {
    display: block;
}

    .col-dia > table:first-of-type > tbody > tr > td {
        display: inline-block;
        vertical-align: bottom;
        padding: 0;
    }

.col-dia h3,
.col-dia h4 {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------ TRAZABILIDAD ----
   La fila que cuelga el detalle de tarifas de cada incurrido esta vacia mientras no se
   despliega, pero el relleno de celda del tema (8px 10px) le daba cuerpo y dejaba una banda
   de color vacia debajo de cada linea. Sin relleno no ocupa nada; al desplegarse, el contenido
   trae el suyo. */
.main-content table.table > tbody > tr.fila-detalle > td {
    padding: 0;
    border-top: 0;
}

/* ------------------------------------------------------------------ GESTION DE TARIFAS ----
   La ventana de economico de consultas, pedidos e incurridos.

   Antes el panel llevaba la clase "small" de Bootstrap, que es un 80 % de lo que herede: se
   quedaba en 12 px y costaba leerlo. Ahora lleva su propia clase con un tamano fijo.

   Y el relleno: la linea de alta traia las celdas con p-1 (4 px) y las lineas ya guardadas no
   traian nada, asi que les caia el del tema (12 px). Resultado: en las lineas de abajo los
   desplegables se quedaban en 60 px en vez de 76 y la fila crecia de 47 a 61 px de alto, que es
   lo que hacia que no cuadrara una linea con otra. Con el mismo relleno para todas, cuadran. */
.economico-tarifas {
    font-size: 13px;
}

.economico-tarifas .table > thead > tr > th,
.economico-tarifas .table > tbody > tr > td {
    padding: 4px 5px;
    vertical-align: middle;
}