/*
    chrome-refresh.css
    Retoque visual de la barra superior y del menu lateral de SmartAdmin.

    CONTRATO DE ESTA HOJA
    ---------------------
    Solo se tocan propiedades que NO participan del calculo de la maqueta:
    color, background, border-color, box-shadow, tipografia, opacidad y
    transiciones.

    Queda PROHIBIDO en #header, #left-panel, #main, #logo y #logo-group:
    height, width, padding, margin, position, top/left, float y display.

    El motivo es que esas medidas estan encadenadas a mano en your_style.css:
    #header mide 75px (no los 49px de SmartAdmin) y #left-panel compensa con
    padding-top: 80px. Cambiar una descuadra la otra, y ademas el menu
    minificado se calcula en JavaScript sobre esas alturas.

    Para el acento del item activo se usa box-shadow inset en vez de
    border-left, justamente porque el borde si cambiaria el ancho de la caja.

    Se carga despues de ui-refresh.css.
*/

/* ------------------------------------------------------------ barra superior */

/* Antes era un verde plano. Un degradado corto y una sombra bajo la barra
   bastan para separarla del contenido sin mover nada. */
#header {
    background: linear-gradient(180deg, #34d17d 0%, #2ba966 100%);
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .12);
}

/* Botones de icono de la cabecera.

   SmartAdmin los deja en 30x30 con line-height 24px y padding 2px, asi que son
   cuadrados chicos: el radio va al 50% para que salgan circulos exactos, sin
   tocar la medida.

   El fondo es un velo OSCURO, no claro. Con blanco translucido sobre el verde
   quedaba un contraste minimo y el icono blanco desaparecia. Tampoco llevan
   borde: sobre una caja de 30px con el icono ya centrado por line-height, una
   linea mas solo ensucia.

   OJO con background-image: none. El tema no pinta el fondo con background-color
   sino con un degradado (#f8f8f8 a #f1f1f1) en background-image, y la imagen se
   dibuja ENCIMA del color. Sin anularla, el degradado blanco tapa el velo por
   mucho que gane la especificidad del color, y el boton queda como un circulo
   blanco con el icono blanco encima: invisible. */
#header .btn-header a,
#header #hide-menu a,
#header #logout a,
#header #fullscreen a,
#header #search-mobile a {
    color: #fff;
    background-color: rgba(0, 0, 0, .10);
    background-image: none;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    transition: background-color .15s ease;
    /* El tema centra el icono con text-align y un line-height de 24px dentro de
       una caja de 30px, asi que queda un poco alto y descentrado. Con flex se
       centra en los dos ejes sin tocar la medida del boton. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#header .btn-header a:hover,
#header #hide-menu a:hover,
#header #logout a:hover,
#header #fullscreen a:hover,
#header #search-mobile a:hover {
    color: #fff;
    background-color: rgba(0, 0, 0, .22);
    background-image: none;
    border: 0;
    box-shadow: none;
}

/* El icono manda sobre cualquier color heredado del tema. */
#header .btn-header a i {
    color: #fff;
    opacity: 1;
}

/* Los botones quedaban unos pixeles mas arriba que el buscador aunque los dos
   arrancan con margin-top:10px. La causa es el hueco de descendente: el <a> es
   inline-block dentro de un <span>, asi que se apoya en la linea base y debajo
   se reserva espacio para las colas de las letras, lo que lo empuja hacia
   arriba. El input, en cambio, es display:block y no pasa por la linea base.

   Anular el line-height del span envolvente elimina ese hueco. No se toca
   ninguna medida de #header ni de los botones. */
#header .btn-header > span {
    display: block;
    line-height: 0;
}

/* Buscador */
/* Mismo velo oscuro que los botones, para que la barra se lea como un solo
   juego de controles. */
#header .header-search input {
    color: #fff;
    background-color: rgba(0, 0, 0, .12);
    border: 0;
    border-radius: 999px;
    transition: background-color .15s ease;
}

#header .header-search input::placeholder {
    color: rgba(255, 255, 255, .8);
}

#header .header-search input:focus {
    color: #fff;
    background-color: rgba(0, 0, 0, .22);
    box-shadow: none;
    outline: 0;
}

#header .header-search button {
    color: rgba(255, 255, 255, .85);
    background: transparent;
    border: 0;
}

#header .header-search button:hover {
    color: #fff;
}

/* El logo del emisor sobre verde: cuando es un PNG oscuro se perdia. */
#logo img {
    border-radius: 4px;
}

/* Reemplazo de texto cuando el emisor no tiene logo cargado. */
#logo .logo-texto {
    display: inline-block;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

/* -------------------------------------------------------------- menu lateral */

#left-panel {
    background: linear-gradient(180deg, #363d47 0%, #2b313a 100%);
    border-right: 1px solid rgba(0, 0, 0, .25);
}

/* Ficha del usuario */
#left-panel .login-info {
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

#left-panel .login-info a {
    color: #cfd6de;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: color .15s ease;
}

#left-panel .login-info a:hover {
    color: #fff;
    text-decoration: none;
}

/* Marca del usuario: circulo con las iniciales al lado del nombre.

   Antes era un <img> con id='redondo', que your_style.css fija en 120x120 y
   ocupaba media barra lateral para no mostrar nada, porque en la practica nadie
   carga una foto. Ese id ya no se emite. Si algun usuario si tiene avatar
   propio, la imagen se pinta con esta misma clase y queda del mismo tamano. */
#left-panel .avatar-mini {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    vertical-align: middle;
    /* La imagen de SmartAdmin trae un borde blanco a la izquierda. */
    border: 0;
    border-radius: 50%;
    object-fit: cover;
}

#left-panel .avatar-iniciales {
    line-height: 30px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #fff;
    background: linear-gradient(135deg, #34d17d 0%, #22a86c 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

/* your_style.css reserva 150px de alto aqui, medida a ojo para el circulo de
   120 que ya no existe: de ahi el hueco vacio bajo el nombre. Se deja que la
   caja se ajuste a su contenido.

   Es la unica medida que toca esta hoja, y es segura: no entra en ningun
   calculo encadenado. El padding-top de #left-panel compensa la altura del
   HEADER, no la de este bloque, y el menu se limita a quedar debajo. */
#left-panel .login-info,
#left-panel .login-info > span {
    height: auto;
}

/* Aire debajo, o el circulo queda pegado al primer item del menu. Arriba ya lo
   da el padding-top de #left-panel. */
#left-panel .login-info {
    padding-top: 4px;
    padding-bottom: 14px;
}

/* Items de primer nivel */
#left-panel nav > ul > li > a {
    color: #c3cad3;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    /* El acento del activo va como sombra interior y no como borde: un borde
       cambiaria el ancho de la caja y correria el texto. */
    box-shadow: inset 0 0 0 0 transparent;
    transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

#left-panel nav > ul > li > a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .05);
}

/* Sin acento de color en el item activo.

   Todos los items de primer nivel llegan del servidor con class="active open",
   asi que un acento aqui se pinta en TODOS y no distingue nada: solo llena el
   menu de verde. El unico estado que aporta informacion es el hover, que si
   responde a donde esta el cursor. */
#left-panel nav > ul > li.active > a,
#left-panel nav > ul > li.open > a {
    color: #fff;
    background-color: transparent;
    box-shadow: none;
}

#left-panel nav > ul > li > a i {
    color: #8f9aa8;
    transition: color .15s ease;
}

#left-panel nav > ul > li > a:hover i {
    color: #fff;
}

/* Submenu */
#left-panel nav > ul ul > li > a {
    color: #98a2ae;
    font-size: 12.5px;
    transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

#left-panel nav > ul ul > li > a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .04);
}

/* En el submenu la clase active si marca la pagina en la que se esta -- la pone
   el markup comparando con la ruta actual --, asi que aqui el resaltado si
   informa. Se hace con peso y un fondo neutro, sin color. */
#left-panel nav > ul ul > li.active > a {
    color: #fff;
    font-weight: 600;
    background-color: rgba(255, 255, 255, .07);
    box-shadow: none;
}

/* Boton de minimizar */
.minifyme {
    border-radius: 6px;
    transition: background-color .15s ease;
}

.minifyme:hover {
    background: #22a86c;
}

/* ------------------------------------------------------- titulo de la pagina */

/* El encabezado vive sobre el fondo oscuro, fuera de las tarjetas, asi que
   conserva su color claro y solo se le ajusta el peso y el separador. */
#main > div > h1,
#main .page-title,
#main #titulo_pagina {
    font-weight: 300;
    letter-spacing: .01em;
}

#main hr {
    border-top-color: rgba(255, 255, 255, .12);
}

/* ------------------------------------------------------- menu comprimido */

/* Con el menu comprimido solo queda el circulo de las iniciales. El nombre se
   oculta: en 45px de ancho no cabe y se desbordaba sobre el contenido. */
.minified #left-panel .login-nombre {
    display: none;
}

/* El tema esconde todo span que cuelgue de un <a> dentro de .login-info. El
   avatar ya no cuelga de ninguno -- se quito el ancla anidada del markup --
   pero se deja explicito para que ningun cambio futuro lo vuelva a tapar. */
.minified #left-panel .avatar-mini {
    display: inline-block;
    margin-right: 0;
}

.minified #left-panel .login-info {
    padding-top: 6px;
    padding-bottom: 6px;
    text-align: center;
}

/* Todos los items de primer nivel llegan del servidor con class="active open",
   asi que el cursor que el tema pone a los activos aparecia en cada uno: siete
   triangulos blancos en fila que no indicaban nada. */
.minified #left-panel nav > ul > li.active > a::before {
    content: none;
}

/* Por lo mismo, el acento verde del item activo tampoco distingue nada cuando
   estan todos marcados. En la barra comprimida se queda solo el hover. */
.minified #left-panel nav > ul > li.active > a,
.minified #left-panel nav > ul > li.open > a {
    background-color: transparent;
    box-shadow: none;
}

.minified #left-panel nav > ul > li > a {
    border-radius: 8px;
    margin: 2px 5px;
}

.minified #left-panel nav > ul > li > a:hover {
    background-color: rgba(255, 255, 255, .08);
}

/* Iconos algo mas grandes y centrados: en la barra estrecha son la unica pista
   de que hace cada opcion. */
.minified #left-panel nav > ul > li > a > i {
    font-size: 16px;
    color: #aab3bf;
}

.minified #left-panel nav > ul > li > a:hover > i {
    color: #fff;
}

/* Boton de comprimir/expandir */
.minified .minifyme {
    border-radius: 8px;
}