/*
    Created on : Jan 12, 2019, 11:56:39 AM
    Author     : medardo.alvarez
*/

/* =====================================================
   XPS 2023 BRAND PALETTE
   ===================================================== */
:root {
    --xps-navy:        #337ab7;
    --xps-navy-light:  #286090;
    --xps-gold:        #d1b381;
    --xps-gold-dark:   #8c7240;
    /*
     * UI-23 — vuelve el naranja original #febd69. UI-17 lo habia bajado a
     * #EDBE8A para meterlo en la familia pastel de los botones, y a ese valor
     * `.btn_accent` quedaba a un paso del dorado por defecto (#d1b381): el
     * boton que existe justamente para destacar sobre el normal dejaba de
     * distinguirse de el. El acento tiene que separarse del dorado, no
     * acompanarlo.
     *
     * Ademas las dos vistas que pintan un toggle activo con esta variable
     * (`home/index` y `setting/report/.../summary_payment/index`) traen el
     * borde como literal `#febd69`, asi que con este valor vuelven a casar.
     */
    --xps-orange:      #febd69;
    --xps-white:       #ffffff;
    --xps-light-gray:  #e8e8e8;
    --xps-border:      #e5e5e5;
    --xps-hover:       #f0e8d8;
    --xps-bar:         #337ab7;
    --xps-bar-hover:   #286090;
    --xps-bar-text:    #ffffff;
    /*
     * UI-17 — verde petroleo oscuro. Reemplaza el negro puro que UI-16 puso en
     * la barra superior y IM-63/UI-14 en el item activo del sidebar: los dos
     * negros juntos pesaban demasiado. Vive en `:root` porque lo consumen dos
     * bloques distintos y el valor tiene que ser uno solo.
     */
    --xps-ink:         #05282E;
    --xps-ink-hover:   #0a3d46;

    /*
     * UI-24 — altura de la barra inferior fija (`#app-footer`).
     *
     * Es la unica fuente de verdad de ese numero: la consume el CSS de la barra
     * y la lee `layoutFill()` en `views/template/head.php` para descontarla al
     * dimensionar sidebars y tablas. Antes ese valor estaba escrito tres veces
     * y las tres distintas — `height:30px` inline en el div, `min-height:32px`
     * en un `<style>` y un `footerHeight = 35` magico en el JS — que es
     * exactamente como se llega a un scroll que nadie sabe de donde sale.
     */
    --xps-footer-h:    38px;

    /*
     * UI-36 — altura de la barra superior (`#header`), medida.
     *
     * Mismo criterio que `--xps-footer-h`: una sola fuente de verdad para un
     * numero que si no se copia mal en varios lados. Aqui ademas hay precedente
     * concreto — el `calc(100vh - 46px)` de los desplegables `More` y `Report`
     * (arriba en este archivo) trae escrito el alto que el header tenia en la
     * primera version de UI-24, y quedo desfasado en cuanto el padding cambio.
     *
     * El header no declara su altura: se la fija `#header .nav a.button`, el
     * elemento mas alto de la fila — `padding: 10px` + `line-height: 28px` +
     * 1px de borde arriba y abajo = 50px. Verificado en la app corriendo, no
     * calculado: `#header` mide 50.00px, y el `line-height` de UI-24 es lo que
     * garantiza que mida lo mismo en toda la app (antes iba de 59 a 65 segun
     * hubiera o no un item activo en el menu superior).
     *
     * Si algun dia cambia el padding de ese boton, este numero cambia con el.
     */
    --xps-header-h:    50px;

    /* =================================================
       UI-17 — PALETA DE BOTONES

       Cuatro colores, un mismo patron: fondo claro con texto negro, borde un
       paso mas oscuro y hover otro paso mas. El patron no se invento aqui —
       sale del boton de ayuda circular de la skill `add-help` (`.ufh-help-btn`,
       ver setting/user/flag), que ya traia dorado + `#b89968` + `#c5a570` como
       literales. Al pasar de un boton suelto a la regla base de todos, esos
       literales suben a variables y los otros tres colores se derivan con el
       mismo salto.

       Antes de esto los cuatro venian de epocas distintas y no formaban
       familia: azul de Bootstrap, turquesa #26c3a4, naranja #febd69 y `red`
       puro. El turquesa y el rojo eran los colores mas saturados de la app.

       El texto va en negro en los cuatro, contra el blanco de antes: sobre
       fondos claros es lo unico que pasa AA, y de paso hace que el color
       signifique — el que distingue un boton de otro es el fondo, no el texto.
       ================================================= */
    --xps-gold-border:  #b89968;   /* boton por defecto — fondo --xps-gold */
    --xps-gold-hover:   #c5a570;
    /*
     * UI-29 — azul pastel para `.btn_blue`, que UI-17 habia igualado al dorado
     * del boton por defecto.
     *
     * No es el azul de Bootstrap que UI-17 a UI-22 sacaron de la app: `#337ab7`
     * (`--xps-navy`) es un azul fuerte de texto blanco, ajeno a la familia
     * pastel. Este se deriva con el mismo patron que los otros cuatro colores —
     * fondo claro con texto negro, borde ~12% mas oscuro y hover ~6% — asi que
     * entra como un quinto miembro de la paleta de UI-17 y no como una vuelta
     * atras.
     *
     * Negro sobre el fondo da 11:1 y sobre el hover 9.7:1, los dos AAA.
     */
    --xps-blue:         #A8BED6;   /* .btn_blue */
    --xps-blue-border:  #94A7BC;
    --xps-blue-hover:   #9EB3C9;
    --xps-olive:        #9FAE72;   /* .btn_green — reemplaza el turquesa #26c3a4 */
    --xps-olive-border: #7E8D4F;
    --xps-olive-hover:  #8E9D62;
    /*
     * UI-23 — borde y hover re-derivados sobre #febd69 con el mismo salto que
     * el resto de la familia (el del dorado: ~12% mas oscuro el borde, ~6% el
     * hover). Se mantiene el patron de UI-17; lo que cambia es el color del que
     * se derivan. Negro sobre el fondo da 12.7:1 y sobre el hover 10.9:1.
     */
    --xps-orange-border: #E0A255;  /* .btn_accent y .btn_small — fondo --xps-orange */
    --xps-orange-hover: #F0AE5B;
    --xps-red:          #FF8A80;   /* .btn_red — reemplaza `red` puro */
    --xps-red-border:   #E0736A;
    --xps-red-hover:    #F97C72;
}

@media screen and (min-width: 1700px) {
    #nav-more{
        display: none
    }
    .nav-submenu .nav-submenu-link{
        display: inline-block
    }
}
@media screen and (max-width: 1699px) {
    .nav-submenu .nav-submenu-link{
        position: absolute;
        left: 0;
        background-color: var(--xps-bar);
        z-index: 30001;
        display: none;
        min-width: 220px;
        box-shadow: 2px 4px 8px #666;
    }
    .nav-submenu:hover > .nav-submenu-link{
        display: block
    }
    .nav-submenu .nav-submenu-link a.button{
        display: block!important;
        padding: 15px!important
    }
}

.dropdown{
    position: relative;
    display: inline-block;
}
.dropdown .nav-submenu-link{
    position: absolute;
    left: 0;
    background-color: var(--xps-bar);
    z-index: 30001;
    display: none;
    min-width: 220px;
    box-shadow: 2px 4px 8px #666;
}
.dropdown:hover > .nav-submenu-link{
    display: block
}
.dropdown .nav-submenu-link a.button{
    display: block!important;
    padding: 15px!important
}
/*
 * UI-26 — los desplegables del header vuelven a caber en pantalla.
 *
 * **El corte de la lista es viejo, no lo trajo UI-24.** Con `padding:15px` y
 * `line-height:normal` el item ya medía ~49px, o sea 1225px de panel para 25
 * filas contra los ~779px utiles que dejaba el header de 65px de entonces:
 * ~9 reportes por columna caian fuera de la pantalla y **no habia forma de
 * alcanzarlos**, porque el panel no tiene scroll propio y la pagina no scrollea
 * con el abierto. Solo se llegaba a ellos por el sidebar o la portada.
 *
 * Lo que UI-24 hizo fue **agravarlo hasta volverlo visible**. Los items de estos
 * paneles son `a.button` dentro de `#header .nav`, asi que la regla que UI-24
 * escribio para los botones de la barra — `#header .nav a.button{padding:8px
 * 11px; line-height:28px}` — tambien los alcanza. El padding lo seguia ganando
 * el `15px!important` de arriba, pero el `line-height` no: paso de `normal`
 * (~19px) a 28px, el item crecio a 60px y el panel a 1500. De ahi que el
 * sintoma se reportara como "quedo muy espaciado" recien despues de UI-24
 * cuando el defecto de fondo ya estaba.
 *
 * Por eso el arreglo son dos cosas y no una: el alto del item resuelve lo que
 * agrego UI-24, y el `max-height` resuelve lo viejo.
 *
 * Se corrige donde se rompio — en la caja del item, no en la de la barra:
 * padding vertical de 15 a 7, `line-height` fijado en 20 para no depender de la
 * regla de la barra, y 14px de letra (los 16px de la barra estan pensados para
 * cinco palabras, no para cincuenta). El item queda en 36px, casi la mitad de
 * los 60 de antes.
 *
 * Los 7px del padding son un segundo ajuste: la primera version puso 5 y quedo
 * en 32px, que es **el maximo que entra sin scroll** — 25 filas contra los
 * ~798px de un viewport de 844 dan 31.9px por item — y a ese valor el usuario
 * lo leyo apretado. O sea que "que entre entero" y "que respire" no se pueden
 * cumplir los dos a la vez con 25 items por columna, y lo que decide es el
 * `max-height` de abajo: con scroll propio, quedarse corto ya no esconde nada
 * — que era el defecto de fondo —, asi que la legibilidad gana y el panel
 * scrollea las pocas filas que sobren.
 *
 * El `max-height` es entonces la pieza central y no un adorno: es lo que arregla
 * el corte viejo, y sin el, ampliar el espaciado lo devolveria. Ademas la lista
 * la arma `report_setting` y crece sola. El descuento aproxima el alto de la
 * barra, que es justo donde arranca el panel: la fija el padding de
 * `#header .nav a.button` y hoy mide 54px.
 *
 * `More` (`.nav-submenu`) recibe lo mismo, para que los dos desplegables del
 * header sigan siendo el mismo componente — con 10 items no estaba roto, pero
 * dejarlo en 60px al lado de uno de 36 los volvia dos cosas distintas.
 *
 * La diferencia esta en el `@media`: arriba de 1699px `#nav-more` desaparece y
 * `.nav-submenu .nav-submenu-link` pasa a `inline-block`, o sea que esos mismos
 * enlaces se pintan **en linea dentro de la barra** junto a Patient/Schedule/
 * Check In. Sin el media query, esta regla los encogeria a 14px y les cambiaria
 * el padding, dejando la barra con dos tipografias. Por eso `.dropdown` va
 * suelto (Report es desplegable a cualquier ancho) y `.nav-submenu` va dentro.
 *
 * Las dos reglas ganan por especificidad y no por orden: (1,3,1) contra el
 * (1,2,1) de `#header .nav a.button`, que vive ~1000 lineas mas abajo. El
 * prefijo `#header` no es decorativo — sin el son (0,3,1) y pierden el
 * `line-height`, que es exactamente como nacio la regresion.
 */
#header .dropdown .nav-submenu-link a.button{
    padding: 7px 14px!important;
    line-height: 20px;
    font-size: 14px;
}
#header .dropdown .nav-submenu-link{
    /* UI-36 — era `calc(100vh - 46px)`: el 46 es el alto que el header tuvo en la
       primera version de UI-24 y quedo desfasado cuando cambio el padding del
       menu. Ahora sale de la variable, asi que no se puede volver a desfasar. Y
       descuenta tambien la barra inferior, que es fija: con 800px de viewport el
       desplegable de Report medía 754px arrancando en y=50, o sea que sus
       ultimos items caian debajo del footer y no se podian pulsar. */
    max-height: calc(100vh - var(--xps-header-h) - var(--xps-footer-h));
    overflow-y: auto;
}
@media screen and (max-width: 1699px) {
    #header .nav-submenu .nav-submenu-link a.button{
        padding: 7px 14px!important;
        line-height: 20px;
        font-size: 14px;
    }
    #header .nav-submenu .nav-submenu-link{
        max-height: calc(100vh - var(--xps-header-h) - var(--xps-footer-h)); /* UI-36 — ver la regla gemela de `.dropdown` */
        overflow-y: auto;
    }
}

/*reset*/
/*
 * UI-36 — `min-height` y no `height`. Es lo que hace posible el header sticky.
 *
 * El bloque contenedor de un `position: sticky` es su ancestro de bloque, o sea
 * el `body`. Con `height: 100%` el body mide **exactamente un viewport** aunque
 * el contenido desborde, asi que el sticky solo pega mientras esa caja este a la
 * vista: pasada una pantalla de scroll se despega y se va con el resto. Medido
 * en `report` antes del cambio: body 800px contra 1356px de contenido.
 *
 * No es teorico ni nuevo — el banner "Logged in as"
 * (`views/template/login_as_banner.php`) ya es `position: sticky; top: 0` y ya
 * se despegaba. No se noto nunca porque es una franja fina que nadie sigue con
 * la vista.
 *
 * `min-height` conserva lo unico que el `height: 100%` daba de verdad —que una
 * pagina corta pinte el fondo hasta abajo— y deja que la caja crezca con el
 * contenido.
 *
 * Lo que NO rompe, verificado en vivo y no deducido: los dos `min-height: 100%`
 * que cuelgan de esta cadena (`.side` y `.side_widget`) **hoy ya resuelven a 0**,
 * porque `#content`, `.wrap-page` y `.wrap-inline-block-align-top` no declaran
 * altura y cortan la cadena de porcentajes mucho antes de llegar al body. El
 * alto real del sidebar se lo pone `layoutFill()` inline en escritorio, y en
 * tactil no se lo pone nadie — ni antes ni ahora. Aplicado en caliente sobre
 * `report`: `.side` identico (caja 1220px, `min-height: 664px`), body de 800 a
 * 1356.
 */
html,body{
    min-height:100%;
}
html,body,div,span,applet,object,iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, input {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
}
em{
    font-size:14px;
    color: #999
}
a:focus {
    outline:1px dotted invert;
}
a{
    text-decoration:none;
    color: var(--xps-navy)
}
ol, ul {
    list-style:none;
    color:#707070;
}
blockquote, q {
}
blockquote:before, blockquote:after,
q:before, q:after {
    float:left;
}
blockquote{
    margin-bottom:20px;
    color:#666;
    margin:0 30px 15px 30px;
    padding:0 0 0 10px;
    font-size:1.1em;
    border-left:2px solid #ddd;
}
fieldset{
    border:1px solid #ccc;
    padding:10px;
}
/*
 * UI-20 — el `legend` es la cabecera de un grupo de campos, asi que toma el
 * mismo dorado que las otras cabeceras de la app: la de tabla, el tab activo y
 * el item seleccionado del sidebar. Reemplaza al chip gris #ccc, que era del
 * mismo color que el borde del `fieldset` y por eso se leia como parte del
 * marco en vez de como titulo.
 *
 * Conserva la forma de chip y el borde del `fieldset` sigue en #ccc: lo unico
 * que cambia es el color del chip y el de su texto.
 *
 * Negro sobre #d1b381 = 10.5:1.
 *
 * Los `legend` con `style` inline —los de `report/social_media/events`,
 * `report/transaction/logs` y `inventory/invoices/_form`— siguen ganando por
 * ser inline, y ahi el color significa (rojo error, azul respuesta), asi que se
 * quedan como estan.
 */
legend{
    font-size:14px;
    padding:5px 10px;
    background-color: var(--xps-gold);
    color: #000;
    /*
     * Mismo borde y mismo radio que los botones: el chip pasa a ser la version
     * chica de la misma pieza en vez de un rectangulo dorado suelto. No usa las
     * clases de boton porque no es uno — no se hace clic — asi que toma los
     * valores, no el comportamiento.
     */
    border: 1px solid var(--xps-gold-border);
    border-radius: 4px;
}
:focus {
    outline:0;
}
ins {
    text-decoration:none;
}
del{
    text-decoration:line-through;
}
table{
    border-collapse:collapse;
    border-spacing:0;
}
.left{
    float:left;
}
img.left{
    float:left;
    margin-right:10px;
    margin-bottom:10px;
}
.right{
    float:right !important;
}
.clear{
    clear:both;
}
.center{
    text-align:center;
    margin:0 auto;
    display:inline-block;
    width:100%;
}
.algright{
    text-align:right!important;
}
img{
    border:0;
    vertical-align:middle;
}
.relative{
    position:relative;
}
.abs-right{
    right:0;
}
.abs-left{
    left:0;
}
.alignTop{
    vertical-align:top;
}
.alignBottom{
    vertical-align:bottom;
}
.alignMiddle{
    vertical-align:middle;
}
.spt-left{
    margin-left:20px;
}
.spt-right{
    margin-right:20px;
}
.spt-bottom{
    margin-bottom:20px;
}
.spt-top{
    margin-top:20px;
}
.spt-left-mini{
    margin-left: 5px
}
.spt-right-mini{
    margin-right: 5px
}
.spt-bottom-mini{
    margin-bottom: 5px
}
.spt-top-mini{
    margin-top: 5px
}
.spt-bottom-mini{
    margin-bottom: 10px;
}
.reset-margin{
    margin: 0!important
}
.reset-border{
    border: none!important
}
/*colors*/
.red{
    color: red;
}
.blue{
    color: var(--xps-navy)
}
.green{
    color: green
}
.orange{
    color: var(--xps-navy)
}
/* Paleta de texto adicional (aditiva — no toca .orange, usada en 26 vistas como azul). */
.gray{
    color: #777
}
.amber{
    color: #e08600
}
.teal{
    color: #0c8a8a
}
.purple{
    color: #7a3ea0
}
.disable{
    opacity: 0.5;
    cursor: no-drop
}
.white{
    color: #fff
}
.black{
    color: #444;
}
@media screen and (max-width: 599px){
    #header{
        /*        text-align: center*/
    }
}
.tooltip-dark{
    background-color: #000;
    color: #fff;
    border-radius: 4px;
}
/*page*/
#header,#content,#footer{
    min-width: 1024px;
}
body {
    font-size: 14px;
    font-family: "Roboto",Arial, Helvetica, sans-serif;
    color: #666666;
    margin: 0 auto;
    /* UI-36 — la segunda mitad del cambio del bloque `/*reset*/`: esta regla va
       despues y volveria a clampear el body al viewport. Ver el comentario
       largo alli. */
    min-height: 100%;
}
hr{
    width: 100%;
    height: 1px;
    display: block;
    margin: 10px auto;
    background-color: #ddd;
    border: 0
}
.main{
    background: var(--xps-bar);
}
.main-dark {
    background: #76abcc;
    background: -moz-linear-gradient(top, #76abcc 20%, #446786 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#76abcc), color-stop(100%,#446786));
    background: -webkit-linear-gradient(top, #76abcc 20%,#446786 100%);
    background: -o-linear-gradient(top, #76abcc 20%,#446786 100%);
    background: -ms-linear-gradient(top, #76abcc 20%,#446786 100%);
    background: linear-gradient(top, #76abcc 20%,#446786 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76abcc', endColorstr='#446786',GradientType=0 );
}
p{
    font: 14px "Roboto",Arial;
    line-height: 24px;
    color: #666
}
h1,h2,h3,h4,h5{
    font-family: "Roboto",Arial
}
h1,.h1{
    font-size: 32px;
    line-height: 36px
}
h2,.h2{
    font-size: 22px;
    line-height: 26px
}
h3,.h3{
    font-size: 18px;
    line-height: 20px
}
h4,.h4{
    font-size: 16px;
    line-height: 18px
}
/*block*/
.blk-left,.blk-left-width{
    display: inline-block
}
.blk-left-width{
    width: 100%
}
.blk{
    display: block
}
.wrinlineblk {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
}
.wrap-inline-block-align-top {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    width: 100%;
}
.blkleftstr {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.block-left-start-top{
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    overflow: hidden;
}
/*cols*/
.wrap-columns{
    display: inline-block;
    width: 100%;
    margin-bottom: 10px
}
.column-5{
    display: inline-block;
    width: 19%;
    float: left;
    margin-right: 1%
}
.column-4{
    display: inline-block;
    width: 24%;
    float: left;
    margin-right: 1%
}
.column-3{
    display: inline-block;
    width: 32%;
    float: left;
    margin-right: 2%
}
.column-2{
    display: inline-block;
    width: 49%;
    float: left;
    margin-right: 1%
}
.column-1-2{
    display: inline-block;
    width: 29%;
    float: left;
    margin-right: 2%
}
.column-2-1{
    display: inline-block;
    width: 69%;
    float: left;
}
.wrap-columns .column-2:last-child,.wrap-columns .column-3:last-child{
    margin-right: 0;
}
/*login*/
.wrlogin{
    display: inline-block;
    margin: auto;
    background-color: rgba(255,255,255,0.95);
    padding: 25px 2%;
    width: 96%;
    border-radius: 8px;
    max-width: 300px;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
    border-top: 4px solid var(--xps-orange);
}
.wrap-icon-user{
    padding: 30px;
    display: inline-block;
    background-color: var(--xps-navy);
    border-radius: 50%;
    margin-top: 20px
}
#login-content{
    margin:0 auto;
    width: 100%;
    text-align: center;
    display: -moz-box;
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
#btn_login{
    display: inline-block;
    width: 100%
}
/*btn attach*/
.uploadfile{
    display: block;
    background: #eee;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.uploadfile img{
    margin-right: 5px
}
.attach{
    display: inline-block;
    padding: 7px 10px;
    background-color: #666;
    color: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
}
.wrap-attach-item{
    display: inline-block;
    width: 150px;
    max-height: 150px;
    margin:7px;
    position: relative;
    overflow: hidden;
    padding: 5px;
    border: 1px solid #ddd;
}
.wrap-attach-item img{
    width: 100%
}
.remove_attach{
    display: block;
    position: absolute;
    right: 10px;
    top: 10px;
    background: red;
    color: #fff;
    padding: 5px;
    box-shadow: 2px 4px 8px #999;
    border-radius: 4px;
    cursor: pointer
}
/*form*/
input.hasDatepicker{
    background-image: url(../images/icon/ic_calendar.png);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 24px;
}
.input-100{
    max-width: 100px;
}
.input-150{
    max-width: 150px;
}
.input-200{
    max-width: 200px;
}
.input-250{
    max-width: 250px;
}
.label-auto label,.label-auto input[type=text],.label-auto input[type=password],.label-auto input[type=number],.label-auto select {
    width: auto!important;
}
.label-auto label{
    margin-right: 5px
}
.holder{
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
}
input[type="checkbox"]{
    margin-right: 10px;
}
/*
 * UI-30 — checkbox y radio con el dorado de marca y borde negro.
 *
 * Eran lo ultimo que seguia saliendo con el azul del navegador: no tenian
 * ningun color declarado —la unica regla que los tocaba era `width` y
 * `margin`— asi que cada sistema operativo ponia el suyo.
 *
 * **Por que se reconstruye el control y no alcanza `accent-color`.** Esa
 * propiedad pinta la marca pero **no da acceso al borde**, que lo sigue
 * dibujando el navegador. Y el borde es justamente lo que hace viable el dorado
 * de marca aca: `--xps-gold` (#d1b381) sobre blanco da 1.9:1, asi que un
 * control de 15px relleno de dorado claro apenas se separa de la pagina. Con el
 * borde negro el control se ve siempre —17:1, marcado o vacio— y el dorado
 * queda como lo que es en el resto de la app: relleno con negro encima, igual
 * que los botones. Es la misma relacion fondo/texto, a otra escala.
 *
 * `appearance: none` obliga a dibujar los cuatro estados a mano:
 *
 * - **marcado** — fondo dorado y tilde negra.
 * - **indeterminado** — fondo dorado y raya negra. No es decorativo: los
 *   "select all" de `setting/roles` lo usan (UI-05) para decir "hay seleccion
 *   parcial", y sin regla propia se verian **vacios**, que es peor que un color
 *   feo porque miente sobre el estado.
 * - **hover** — dorado un paso mas claro si esta vacio, un paso mas oscuro si
 *   esta marcado.
 * - **foco** — `focus-visible` con outline propio: `appearance: none` tambien
 *   se lleva el anillo de foco del sistema, y sin el se pierde la navegacion por
 *   teclado.
 *
 * Las marcas van como SVG en `data:` y no como pseudo-elemento: `::before`
 * sobre un `<input>` funciona en la practica pero es territorio indefinido por
 * spec (es un elemento reemplazado). El fondo no tiene ese problema.
 *
 * El tamano pasa de `auto` (13px nativo en Chrome) a 15px fijo. Se gana area de
 * click y los controles dejan de medir distinto segun el navegador.
 * `accent-color` queda declarado igual: si algun navegador no aplicara
 * `appearance: none`, colorea el control nativo en vez de dejarlo azul.
 *
 * No alcanza a `document_sign.css`, que declara lo suyo con una paleta aparte
 * (`--navy` #0e2233) y mas especificidad.
 */
input[type="checkbox"], input[type="radio"]{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    accent-color: var(--xps-gold);
    width: 15px!important;
    height: 15px;
    box-sizing: border-box;
    border: 1px solid #1a1a1a;
    background-color: var(--xps-white);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: -2px;
    cursor: pointer;
    transition: background-color .15s ease;
}
input[type="checkbox"]{
    border-radius: 3px;
}
input[type="radio"]{
    border-radius: 50%;
}
input[type="checkbox"]:checked{
    background-color: var(--xps-gold);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231a1a1a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
input[type="checkbox"]:indeterminate{
    background-color: var(--xps-gold);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231a1a1a' stroke-linecap='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
input[type="radio"]:checked{
    background-color: var(--xps-gold);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3ccircle cx='10' cy='10' r='4' fill='%231a1a1a'/%3e%3c/svg%3e");
}
input[type="checkbox"]:not(:checked):not(:indeterminate):hover,
input[type="radio"]:not(:checked):hover{
    background-color: var(--xps-hover);
}
input[type="checkbox"]:checked:hover,
input[type="checkbox"]:indeterminate:hover,
input[type="radio"]:checked:hover{
    background-color: var(--xps-gold-hover);
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible{
    outline: 2px solid var(--xps-gold-dark);
    outline-offset: 1px;
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled{
    opacity: .55;
    cursor: default;
}
input[type=text], input[type=password], input[type=number] {
    background-color: #eee;
    border-bottom: #eee;
    /*border-bottom: 1px solid #D1D2D2;*/
    padding: 10px 2%;
    width: 95%;
    font-size: 13px;
    display: inline-block;
    border-radius: 4px;
}
textarea {
    background: #f1f1f1;
    padding: 10px 2%;
    display: inline-block;
    border: 0;
    width: 96%;
    font: 14px "Roboto";
    resize: none;
    border-radius: 4px;
}
label {
    /*width: 100%;*/
    font-weight: bold;
    text-align: left;
    line-height: 38px;
    color: #909090;
    display: inline-block;
}
.required{
    position: relative;
    padding-left: 10px;
}
.required:before{
    color: red;
    content: '*';
    width: 16px;
    height: 16px;
    position: absolute;
    left: 0;
}
/*
 * UI-17 — el boton por defecto pasa de azul con texto blanco a **dorado con
 * texto negro**, el mismo estilo del boton de ayuda circular que ya existe en
 * varias vistas (`.ufh-help-btn` en setting/user/flag): fondo `--xps-gold`,
 * texto `#000` y borde `--xps-gold-border`.
 *
 * Paso primero por negro con texto dorado y quedaba al reves del boton de
 * ayuda, que es el que ya habia fijado el patron.
 *
 * Es la regla base de **todos** los botones de la app: `<button>`, los tres
 * `input` de tipo boton y `a.btn` (~186 usos en las vistas). No alcanza a los
 * que traen clase de color, que declaran su propio fondo: `.btn_red`,
 * `.btn_green`, `.btn_accent` y `.btn_small` siguen como estaban. `.btn_blue`
 * acompano el cambio en su propia regla mas abajo — es la clase mas usada y en
 * la practica funciona como boton normal, asi que sin ella este cambio casi no
 * se veia. **UI-29 la separo de nuevo**: ahora es azul pastel, y esta regla base
 * dorada es la que queda como boton por defecto para los ~186 usos sin clase.
 *
 * El dorado es `--xps-gold` (#d1b381) y no el `--xps-gold-dark` del icono de
 * modulo: negro sobre el claro da 10.5:1 y sobre el oscuro 4.59:1. El oscuro
 * fue elegido para leerse **como icono sobre el gris claro** de `.header-page`,
 * no como fondo de texto, y ahi sigue.
 *
 * El borde no estaba antes (`border: none`): con fondo azul no hacia falta, con
 * dorado sobre blanco si — es lo que separa el boton del fondo de la pagina. Sin
 * `box-sizing: border-box` global, agregarlo suma 2px a cada lado del boton;
 * son justo los 2px que `.btn_blue` ya tenia por su propio borde, asi que el
 * efecto real es que todos los botones quedan del mismo tamano, el de la clase
 * que llevan la mayoria.
 */
input[type=button], input[type=submit], input[type=reset],button,a.btn {
    padding: 10px 16px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    background-color: var(--xps-gold);
    color: #000;
    border: 1px solid var(--xps-gold-border);
    margin: 10px 0;
    border-radius: 4px;
    /*
     * `inline-block` para que el `scale` del hover tenga efecto: `transform` no
     * aplica a elementos inline no reemplazados, y `a.btn` es un `<a>`. Sobre
     * `<button>` e `<input>` no cambia nada — ya son inline-block por defecto.
     */
    display: inline-block;
    transition: background-color .15s ease, transform .15s ease;
}
/*
 * UI-17 — hover unificado.
 *
 * Antes solo tenian hover los links con aspecto de boton (`.toolbar-nav`, con
 * un `opacity: 0.7`); los botones de verdad no tenian ninguno, asi que la
 * misma accion daba o no daba feedback segun con que etiqueta estuviera
 * escrita. El gesto que se generaliza es el del boton de ayuda: **oscurecer un
 * paso el propio fondo**, cada clase con su color, en vez de un efecto unico
 * que taparia el color de las que significan algo (rojo, olivo, naranja).
 *
 * Cada clase de color necesita su propio `:hover` con `!important`, porque su
 * `background` base ya lo lleva y si no ganaria sobre este.
 *
 * El `transform` es el mismo gesto del boton de ayuda con un salto menor:
 * 1.02 en vez de 1.08. En un circulo de 32px 1.08 son 2px; en un boton de
 * texto de 150px serian 12px, que se lee como un salto y no como un realce.
 * 1.02 da unos 3px, que es el limite por debajo del cual el movimiento deja
 * de percibirse. Como
 * `transform` no aplica a elementos inline no reemplazados, las reglas de
 * `a.btn` y `.btn_small` pasan a `inline-block` — sobre `<button>` e `<input>`
 * eso no cambia nada porque ya lo eran. El `scale` no ocupa espacio en el
 * layout, solo pinta por encima, asi que no empuja a los botones vecinos.
 *
 * Cada `:hover` repite el `transform` en vez de heredarlo: un `.btn_small` o un
 * `.btn_green` sobre un `<a>` **sin** la clase `.btn` no casa con el selector
 * base, y sin repetirlo se quedaria sin el gesto.
 */
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover,
button:hover, a.btn:hover {
    background-color: var(--xps-gold-hover);
    transform: scale(1.02);
}
.btn_red{
    background: var(--xps-red)!important;
    border: 1px solid var(--xps-red-border)!important;
    color: #000!important;
}
.btn_red:hover{
    background: var(--xps-red-hover)!important;
    transform: scale(1.02);
}
/*
 * UI-17 — `.btn_green` deja el turquesa #26c3a4 por el olivo.
 *
 * El turquesa era el color mas saturado de la app y no pertenecia a ninguna
 * familia: convivia con el azul de Bootstrap por herencia, no por decision. El
 * olivo se apoya en el dorado, y como el es claro con texto negro, asi que los
 * dos botones se leen como variantes de lo mismo.
 *
 * Negro sobre #9FAE72 = 9:1, AA y AAA.
 */
.btn_green{
    background: var(--xps-olive)!important;
    border: 1px solid var(--xps-olive-border)!important;
    color: #000!important;
}
.btn_green:hover{
    background: var(--xps-olive-hover)!important;
    transform: scale(1.02);
}
/*
 * UI-29 — `.btn_blue` vuelve a ser azul, ahora en pastel.
 *
 * UI-17 la habia igualado al boton por defecto (dorado) porque es la clase de
 * color mas usada de la app (~93 usos en las vistas) y en la practica funcionaba
 * como "el boton normal": sin ella, el cambio de la regla base casi no se veia.
 * Un ano de uso mostro lo contrario — con el dorado tambien en la regla base, en
 * las cabeceras de tabla y en la barra de los popups, `.btn_blue` dejo de
 * aportar ninguna separacion y el nombre de la clase quedo mintiendo.
 *
 * El azul no es el `#337ab7` de Bootstrap que UI-17 a UI-22 sacaron de la app,
 * sino `--xps-blue`, derivado con el patron de UI-17 (fondo claro, texto negro,
 * borde y hover un paso mas oscuros). Negro sobre el fondo da 11:1.
 *
 * Efecto: los ~93 usos de la clase se separan del boton por defecto, que sigue
 * dorado en la regla base. El nombre de la clase vuelve a decir la verdad, asi
 * que ya no hay motivo para renombrarla.
 */
.btn_blue{
    background: var(--xps-blue)!important;
    border: 1px solid var(--xps-blue-border)!important;
    color: #000!important;
}
.btn_blue:hover{
    background: var(--xps-blue-hover)!important;
    transform: scale(1.02);
}
.btn_accent{
    background: var(--xps-orange)!important;
    border: 1px solid var(--xps-orange-border)!important;
    color: #000!important;
}
.btn_accent:hover{
    background: var(--xps-orange-hover)!important;
    transform: scale(1.02);
}
.btn_small{
    padding: 5px 10px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    font-size: 13px;
    background-color: var(--xps-orange);
    /*
     * UI-17 — borde propio. Antes no tenia ninguno (estaba comentado) y desde
     * que la regla base de botones lleva borde dorado, un `.btn_small` sin
     * borde propio se quedaba con el dorado alrededor del naranja.
     */
    border: 1px solid var(--xps-orange-border);
    color: #000;
    border-radius: 4px;
    /* inline-block por la misma razon que la regla base: `transform` no
       aplica a inline, y `.btn_small` vive casi siempre sobre un <a>. */
    display: inline-block;
    transition: background-color .15s ease, transform .15s ease;
}
/*
 * `.btn_small` no lleva `!important` en su fondo, asi que sin este `:hover`
 * propio se lo comeria el dorado de la regla base: `button:hover` (0,1,1) gana
 * sobre `.btn_small` (0,1,0). Con el, `(0,2,0)` vuelve a ganar y el boton
 * pequeno se oscurece en su propio naranja.
 */
.btn_small:hover{
    background-color: var(--xps-orange-hover);
    transform: scale(1.02);
}
/*
 * IM-69 — boton de solo icono, pensado para acompanar al titulo de un listado
 * (`<h2>`). Va siempre junto a `.btn_small`, que ya trae el tamano de fuente y
 * el `inline-block`; lo que agrega es soltar el `line-height` heredado del
 * titulo (26px), que estiraba el boton muy por encima de su padding.
 */
/*
 * IM-105 — accion que existe pero todavia no aplica: se ve, dice por que en
 * el title, y no navega. El <a> va sin href, asi que no hace falta
 * pointer-events:none, que ademas se llevaria puesto el tooltip.
 */
.is-off{
    opacity: .55;
    cursor: not-allowed;
}

.btn-icon{
    padding: 4px 7px;
    line-height: 1;
    vertical-align: middle;
}
.btn-icon i{
    font-size: 12px;
}
select {
    padding: 10px 2%;
    width: 100%;
    margin: 0;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url(../images/icon/ic_select.png)no-repeat 98% center #eee;
    border: 0;
    border-radius: 4px;
    font-size: 13px;
}
input:focus,textarea:focus,button:focus{
    outline:medium none;
}
/*
 * UI-33 — el auto-zoom de Safari al enfocar un campo.
 *
 * WebKit hace zoom automatico al enfocar un `input`, `select` o `textarea` cuyo
 * `font-size` computado sea menor a **16px**, y al salir del campo NO restaura ni
 * la escala ni la posicion de scroll. Los tres tipos de campo de la app estaban
 * debajo del umbral: `input` y `select` en 13px, `textarea` en 14px.
 *
 * Con `#header,#content,#footer` en `min-width: 1024px`, el telefono se navega con
 * pinch-zoom — asi que ese salto de escala se lleva puesto el zoom que el usuario
 * habia elegido y lo deja sin referencia para volver. Ese es el sintoma reportado.
 *
 * La misma regla ya existia, pero SOLO dentro del popup en iframe
 * (`views/template/iframe.php`); acá se extiende al resto de la app. Es ademas el
 * pendiente que UI-03 dejo escrito y nunca se hizo — ver el bloque comentado en
 * `theme/js/mypopup.js`.
 *
 * **`(pointer: coarse)` y no `max-width`.** Las media queries miden el *layout
 * viewport*, no el `min-width` del contenido, asi que un `max-width: 1023px` falla
 * en las dos direcciones: agranda los campos en un escritorio con la ventana a
 * media pantalla, y deja fuera al iPad en horizontal (1024-1194px), que es WebKit
 * y si tiene el bug. `pointer` describe el dispositivo de entrada principal: da
 * true en cualquier tactil —incluido el telefono en "modo escritorio", que fuerza
 * el ancho a ~1024 pero no cambia el dedo— y false con mouse aunque la ventana
 * este angosta. Es el mismo criterio del guard de `layoutFill()` en
 * `template/head.php`, donde esta documentado con medidas por que el User-Agent y
 * el ancho fallaron antes. Va `pointer` y no `any-pointer` por la razon anotada
 * alli: en un portatil tactil `any-pointer: coarse` da true y dejaria sin cubrir
 * a un escritorio.
 *
 * Sin `!important` a proposito: misma especificidad que las reglas base y va
 * despues en el archivo, asi que gana por orden y una vista puede seguir
 * declarando su propio tamano si lo necesita.
 *
 * Alcance: en Android es neutro para el zoom (Chrome nunca hizo auto-zoom al
 * enfocar), solo mejora la legibilidad. En escritorio no aplica. Lo que NO
 * arregla: Safari sigue haciendo scroll para traer el campo a la vista, y con
 * 1024px de layout ese scroll es tambien horizontal — eso es el `min-width`, o
 * sea UI-25, cerrado sin implementar.
 */
@media (pointer: coarse) {
    input[type=text], input[type=password], input[type=number],
    input[type=email], input[type=tel], input[type=date], input[type=search],
    select, textarea {
        font-size: 16px;
    }
    /*
     * El buscador de select2 va aparte y con `!important`, al reves que los
     * campos de arriba. No es pereza: `head.php` enlaza el CSS de select2 y su
     * tema bootstrap-5 DESPUES de este archivo, asi que para ese selector el
     * orden juega en contra y el tema declara el suyo con tres clases. Es el
     * mismo criterio que FX-77 uso con el CSS que sweetalert2 inyecta en tiempo
     * de ejecucion. El campo se inyecta en `body` al desplegar, fuera del
     * formulario, y es un `input` como cualquier otro: dispara el auto-zoom.
     */
    .select2-search__field {
        font-size: 16px !important;
    }
}
.btn_nice_wh{
    border: 1px solid #fff;
    color: #fff;
    padding: 10px 16px;
    border-radius: 18px;
    display: inline-block
}
.btn_nice_wh:hover,.btn_nice_wh.active{
    background-color: var(--xps-white);
    text-decoration: none;
    color: var(--xps-navy)
}
.label-info{
    display: block;
    width: 94%;
    background: #f1f1f1;
    padding: 5px 3%;
    border-radius: 4px;
    min-height: 16px
}
.label-info-auto{
    display: inline-block;
    background: #f1f1f1;
    padding: 5px;
    border-radius: 4px;
    min-height: 16px
}
.ctrlBtn {
    display: inline-block;
    text-align: center;
    padding: 4px;
    margin: 0 0 0 5px;
    width: 16px;
    height: 16px;
    background-position: center center;
    background-repeat: no-repeat;
}

.form-filter label,.form-filter select{
    width: auto!important;
    display: inline-block!important
}
.form-filter input[type=text]{
    width: 100px!important;
}

/*header*/
/*
 * UI-36 — la barra superior se queda fija al hacer scroll.
 *
 * **`sticky` y no `fixed`, a proposito.** Un `fixed` sale del flujo, o sea que
 * no reserva su espacio: habria que devolverselo con un `padding-top` en
 * `#content` — otro numero de altura escrito a mano, justo lo que UI-24 saco de
 * este layout ("el principio del reemplazo es no tener ningun numero de altura
 * escrito"). `sticky` sigue ocupando su lugar en el flujo, asi que
 * `layoutFill()` (`views/template/head.php`) sigue midiendo el `top` de `.side`
 * y `.fixed-table` exactamente igual que antes y **no hay que tocar una sola
 * linea de ese JS**.
 *
 * Tampoco necesita el `min-width: 1024px` que `#app-footer` si tuvo que
 * repetir: al quedarse en el flujo lo hereda de la regla `#header,#content,
 * #footer` de mas arriba, y por eso no se queda corto al hacer scroll
 * horizontal por debajo de 1024px — que es el caso que importa mientras exista
 * ese `min-width` (ver UI-25, cerrado sin implementar).
 *
 * **Depende de un cambio previo para funcionar**: `html,body` tuvieron que
 * pasar de `height: 100%` a `min-height: 100%` en el bloque `/*reset*\/`. Con
 * `height` el body mide un viewport y el sticky se despega despues de una
 * pantalla de scroll. Los dos cambios son un solo cambio.
 *
 * **z-index 3002.** Un paso por encima de `#app-footer` (3001), que es lo mas
 * alto del layout base. Las dos barras no se tocan entre si —una arriba y otra
 * abajo—, pero los desplegables del header (`More`, `Report`) cuelgan hacia
 * abajo y pueden llegar hasta la barra inferior, y tienen que quedar por
 * encima. Sigue por debajo de los overlays de modal (9999 / 10000), del de
 * IM-93 y de SweetAlert (FX-77): un dialogo tapa el header, como debe ser.
 *
 * Efecto secundario a tener presente: el `z-index` convierte al header en
 * stacking context, asi que el `z-index: 30001` de `.nav-submenu-link` deja de
 * medirse contra la pagina y pasa a medirse dentro del header. En la practica
 * no cambia nada —el header entero ya esta en 3002, por encima de todo lo que
 * esos desplegables tenian que superar— pero explica por que ese 30001 ya no
 * significa lo que dice.
 */
#header{
    display: inline-block;
    width: 100%;
    background-color: var(--xps-bar);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 3002;
}

/*
 * UI-16 — barra superior en negro con texto dorado.
 *
 * El cambio no toca ninguna regla de la barra: redefine las tres variables
 * `--xps-bar*` **sobre `#header`**, y las custom properties heredan, asi que
 * todo descendiente que ya resolvia `var(--xps-bar)` pasa a negro sin editar su
 * selector. Eso cubre de un golpe el fondo de la barra, `.logo`, `.nav
 * a.button`, el hover, el panel de `More` (`.nav-submenu .nav-submenu-link`), el
 * de `Report` (`.dropdown .nav-submenu-link`), la campana `.badge`, el engranaje
 * `.setting`/`.help` y `.header-module`.
 *
 * Por que aqui y no en `:root`: `--xps-bar` lo consumen ~25 reglas mas fuera del
 * header — table headers, `.toolbar-nav`, `.floataction`, el item activo de
 * `.side`, la paginacion, `chat.css` y `report-chat.css`. Cambiarlo global
 * pinta de negro media app; el alcance pedido es la barra. `#header` existe una
 * sola vez en todo el proyecto (`views/template/template.php:17`), asi que el
 * scope es exacto: las plantillas de photo_upload y sign_document tienen su
 * propio markup y su propio CSS, y no entran.
 *
 * Lo que NO cambia aunque este dentro de `#header`: el buscador de pacientes
 * (fondo `--xps-white`, boton `--xps-orange`) y el dropdown de la cuenta
 * (`.submenu`, fondo blanco con `.btn_accent`/`.btn_green`/`.btn_blue`) — esos
 * botones se pintan con `--xps-navy`, no con `--xps-bar`, asi que quedan igual.
 *
 * UI-17 cambia el negro por `--xps-ink` (#05282E) sin tocar la mecanica: el
 * negro puro de la barra mas el del item activo del sidebar leian como
 * demasiado peso. Contraste `#d1b381` sobre #05282E = 7.8:1 y sobre el
 * #0a3d46 del hover = 5.9:1 — el fondo pasa AA y AAA, el hover AA. El hover
 * casi no se ve sobre el fondo oscuro a proposito: quien marca el item bajo el
 * cursor es el borde dorado que `.nav a.button:hover` ya traia (`border: 1px
 * solid var(--xps-bar-text)`), ahora dorado en vez de blanco.
 */
#header{
    --xps-bar:       var(--xps-ink);
    --xps-bar-hover: var(--xps-ink-hover);
    --xps-bar-text:  var(--xps-gold);
}
.logo{
    display: inline-block;
    font: 22px "Roboto";
    font-weight: bold;
    color: var(--xps-bar-text);
    margin-right: 10px;
}
.logo {
    display: flex;
    align-items: center;
    gap: 5px;
}

.logo-img {
    height: 40px;
    width: auto;
}
.logo-text {
    font-weight: 600;
    color: inherit;
    -webkit-text-stroke: 0.2px #000;
}
.form-search {
    background-color: var(--xps-white);
    border-radius: 4px;
}
.form-search input{
    border-bottom: 0!important;
    background: var(--xps-white)
}
.form-search select{
    border-radius: 0;
    border-right: 1px solid #ddd;
    border-bottom: 0;
    border-top: 0;
    border-left: 0;
    width: auto;
    padding: 10px;
}
/*
 * UI-16 — la lupa pasa de naranja con glifo azul a dorado con glifo negro.
 *
 * Se edita la regla en vez de sobreescribirla bajo `#header` porque la clase
 * `.form-search` **solo existe en la barra** (`views/template/header.php`): los
 * demas formularios de busqueda de la app usan `form-search-user`,
 * `form-search-phone`, etc., que son **ids** y no casan con este selector de
 * clase. No hace falta scope adicional.
 *
 * El glifo va en negro y no en `--xps-navy`: sobre el dorado el negro da 10.5:1
 * y el azul daria 2.3:1. De paso arregla algo que ya estaba mal — el azul sobre
 * el naranja anterior daba 2.8:1, tambien por debajo de AA.
 *
 * Los dos `!important` vienen de antes y se conservan tal cual. **No hacen
 * falta**: la regla base de `button` es (0,0,1) y esta es (0,1,1), asi que gana
 * por especificidad sola. Quitarlos es una limpieza aparte y no la de este
 * cambio.
 */
.form-search button{
    background: var(--xps-gold)!important;
    border: 1px solid var(--xps-gold)!important;
    color: #000
}
.nav{
    display: inline-block;
}
.nav a.button{
    padding: 20px 12px;
    color: var(--xps-bar-text);
    font-size: 16px;
    font-weight: 300;
    display: inline-block;
}

/*
 * UI-24 — la barra superior baja de 59-65px a 46px.
 *
 * Quien fijaba la altura del header no era el header: era `.nav a.button` con
 * `padding: 20px 12px`, el elemento mas alto de la fila. Todo lo demas mide
 * entre 33 y 40 — buscador 38, avatar 37, logo 40 — asi que 46px es el minimo
 * que no aprieta nada, y son ~19px que gana el body en cada pantalla.
 *
 * Los dos ajustes van juntos y ninguno sobra:
 *
 * 1. `line-height` fijo + padding reducido. El item **activo** sube a 21px de
 *    fuente (`.nav a.button.active`), asi que su caja media ~6px mas que la de
 *    los inactivos: **el header cambiaba de alto segun la pagina** — 59px en
 *    Inventory, donde ningun item del menu superior esta activo, y 65px en
 *    Reports. Con `line-height` declarado los dos tamanos comparten caja y la
 *    altura pasa a ser la misma en toda la app. Eso es lo que vuelve calculable
 *    el layout: era justo la variacion que el viejo `- 58 - 46` no podia
 *    acertar. La fuente del activo baja de 21 a 19px para que quepa en la caja
 *    sin recortar descendentes; sigue leyendose como el mas grande.
 *
 * 2. `inline-flex` en `.nav`. Con `inline-block` los botones son elementos en
 *    linea y el contenedor reserva el hueco de las descendentes bajo la linea
 *    base — 6px medidos que no pinta nadie. `align-items:center` lo elimina y
 *    de paso centra los botones sin depender del padding.
 *
 * Va bajo `#header` y no en `.nav` a secas porque la clase se reutiliza en
 * `setting/pbx_config` como `nav nav-tabs`, que no tiene nada que ver con esto.
 */
#header .nav{
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
/*
 * El alto de la barra lo sigue fijando este item — es el elemento mas alto de
 * la fila — asi que se ajusta aqui y no en `#header`, que no declara altura.
 * El padding vertical pasa de 8 a 12px: 12 + 28 (`line-height`) + 12 + 2 del
 * borde = **54px**, ocho mas que los 46 de UI-24. El `line-height` no se toca,
 * que es lo que mantiene la caja igual entre el item activo (19px) y los
 * inactivos (16px) y evita que la barra cambie de alto segun la pagina.
 */
#header .nav a.button{
    padding: 10px 10px;
    line-height: 28px;
    /*
     * El borde transparente reserva el pixel que `.nav a.button:hover` agrega,
     * para que la barra no crezca 2px al pasar el mouse. Con las cajas ya
     * igualadas por `line-height` ese salto se veria, antes quedaba tapado por
     * los 20px de padding.
     */
    border: 1px solid transparent;
}
#header .nav a.button:hover{
    line-height: 28px;
}
#header .nav a.button.active{
    font-size: 19px;
}
/*
 * Los tres glifos sueltos de la barra (reloj, campana, engranaje) estaban en
 * 32px, dimensionados para un header de 65px. En 46px la campana medía 38 y su
 * contador rojo — que va en `top:-5px` respecto de ella — quedaba en y=-1, o sea
 * cortado por el borde superior de la ventana. Bajarlos a 26px los devuelve al
 * centro de la barra y deja el contador dentro, sin tocar la regla del contador.
 */
#header .badge,
#header .setting,
#header .help{
    font-size: 26px;
}
/*
 * Solo el tamano de fuente — **sin tocar el `line-height`**. `.setting` y
 * `.help` comparten `line-height: 32px`, que es lo que les da a los dos una caja
 * de 32px; bajarselo solo al engranaje le encogia la caja y lo dejaba 4px mas
 * arriba que la campana y el reloj.
 *
 * Los 2px que quedaban salen de `.menu-sub{height: 36px}`, un alto fijo heredado
 * de cuando el engranaje media 32: la fila centra esa caja de 36 y el `.setting`
 * de 32 se apoya en su borde superior, no en su centro. `auto` la deja del alto
 * de su contenido y los tres iconos caen en la misma linea. Se conserva el
 * `position: relative`, que es lo que ancla el desplegable de la cuenta.
 */
#header .menu-sub{
    height: auto;
}
.nav a.button:hover{
    background-color: var(--xps-bar-hover);
    border: 1px solid var(--xps-bar-text);
    border-radius: 3px;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.nav a.button.active{
    font-size: 21px;
    font-weight: bold;
    -webkit-text-stroke: 0.2px #000;
    /*    border-bottom: 4px solid #a7bad7;*/
}

/*
 * UI-16 — los dos textos "gruesos" de la barra (`.logo-text` arriba y el item
 * activo del menu aqui) llevaban `-webkit-text-stroke: 0.2px #000`, un contorno
 * pensado para letra blanca sobre azul. Con la barra en negro ese contorno es
 * del color del fondo y come el trazo del dorado: el item activo se veria mas
 * apagado que los inactivos, justo al reves de lo que busca. Se conserva el
 * engrosado y solo se cambia el color a `currentColor`, o sea el dorado
 * heredado.
 *
 * Va despues de las dos reglas base para leerse como el override que es — aunque
 * gana por especificidad ((1,1,0) y (1,3,1) contra (0,1,0) y (0,3,1)) y no por
 * posicion. El scope en `#header` es lo que deja intacto cualquier otro uso de
 * esas clases.
 */
#header .logo-text,
#header .nav a.button.active{
    -webkit-text-stroke-color: currentColor;
}

.nav-submenu{
    display: inline-block;
    position: relative;
}

.toolbar{
    display: inline-block;
    width: 100%;
    background: var(--xps-light-gray);
    padding: 5px 0;
    border-bottom: 1px solid #ccc
}
.toolbar span.label{
    display: block;
    font-weight: 700;
    margin: 3px 0
}
.toolbar-nav li{
    display: inline-block;
    float: left;
    margin-left: 1px;
}
/*
 * UI-17 — la barra de acciones del paciente (Send SMS, Call Transfer, Create
 * meeting...) toma el mismo dorado que los botones. Son links con aspecto de
 * boton, asi que no los alcanzaba la regla base: se pintaban con `--xps-bar`,
 * que fuera del `#header` sigue valiendo el azul de Bootstrap.
 *
 * Los items de esta barra que llevan clase de color (`.btn_red` en las pinned
 * notes, `.btn_green` en Phone Call, `.btn_accent` en Start meeting now) ganan
 * con `!important` y siguen distinguiendose, que es justo para lo que estan.
 *
 * `.toolbar-nav` existe en una sola vista (`pages/patient/index.php`), asi que
 * el alcance es esa barra y nada mas.
 */
.toolbar-nav li a{
    display: block;
    padding: 12px 20px;
    background-color: var(--xps-gold);
    color: #000;
    border: 1px solid var(--xps-gold-border);
    border-radius: 4px;
    margin-right: 10px;
    transition: background-color .15s ease, transform .15s ease;
}
/*
 * UI-17 — deja el `opacity: 0.7` por el mismo oscurecido que el resto. La
 * opacidad no era el gesto de la app, era el gesto de esta barra: ademas de
 * aclarar el fondo tambien despinta el texto y el icono. Los items con clase de
 * color de esta barra (rojo, olivo, naranja) traen su propio `:hover` con
 * `!important` y siguen oscureciendo en su color.
 */
.toolbar-nav li a:hover{
    background-color: var(--xps-gold-hover);
    transform: scale(1.02);
}

.remeinder{
    margin-right: 20px;
}
.badge{
    position: relative;
    display: inline-block;
    color: var(--xps-bar-text);
    font-size: 32px
}
.badge .number{
    display: none;
    position: absolute;
    left: -5px;
    top: -5px;
    content: "";
    background-color: red;
    color: #fff;
    font: 16px "Roboto";
    font-weight: 400;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 22px;
    box-shadow: 2px 3px 6px #666;
    border: 2px solid #fff;
}
.setting,.help {
    color: var(--xps-bar-text);
    font-size: 32px;
    line-height: 32px;
    display: block;
}
.header-module{
    color: var(--xps-bar-text);
    font-size: 23px;
    font-weight: bold;
}
.account{
    position: relative;
    display: inline-block;
    padding-right: 17px;
    padding-bottom: 5px;
}
.account .name{
    font: 16px "Roboto";
    font-weight: 300;
    margin-bottom: 10px;
    display: block
}
.account:before{
    position: absolute;
    content: "";
    width: 12px;
    height: 12px;
    right: 0;
    bottom: 8px;
    background-image: url(../images/icon/ic_arrow_dwn.png);
    background-repeat: no-repeat
}
.account:hover > .submenu,.menu-sub:hover > .submenu{
    display: block
}
.account .submenu ul li b {
    display: inline-block;
    max-width: 220px;        /* ajusta según el ancho del menú */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}
/*
 * UI-21 — el menu de la cuenta se ensancha para que sus cuatro botones entren
 * de a dos por fila.
 *
 * Los botones traen `btn_small blk`, y hasta UI-17 el `display: block` de `.blk`
 * mandaba: salian a todo el ancho, uno por fila. UI-17 le dio
 * `display: inline-block` a `.btn_small` —lo necesita el `transform` del
 * hover— y como las dos reglas pesan igual (0,1,0), gana la que va despues en
 * el archivo, que es `.btn_small`. Desde entonces fluyen en linea y caian 1, 2
 * y 1 segun el largo de cada etiqueta.
 *
 * Ensanchar solo no alcanzaba: con ancho automatico el reparto sigue dependiendo
 * del texto, asi que dos botones cortos podrian meterse con un tercero. El ancho
 * fijo de la mitad es lo que garantiza el 2 y 2. Los 340px salen del boton mas
 * largo ("System Changelog", ~150px con icono y padding) por dos, mas los 30px
 * de padding del menu.
 */
.submenu{
    z-index: 2000;
    min-width: 340px;
    display: none;
    position: absolute;
    top: 35px;
    right: -10px;
    padding: 15px;
    background-color: var(--xps-white);
    border-radius: 8px;
    width: 90%;
    box-shadow: 1px 2px 4px #999;
}
/*
 * El margen se uniforma aca. Los botones traen `spt-top-mini` (margin-top 5px)
 * salvo el primero, que en la disposicion vertical anterior era correcto: el
 * primero pegado al `<hr/>` y los demas separados del anterior. Con dos por
 * fila ese margen desalinea a los compañeros de fila — "My Paychecks" quedaba
 * 5px mas abajo que "Change Password" — porque `vertical-align: top` alinea el
 * borde exterior del margen, no el del botón. Darles el mismo margen a los
 * cuatro los deja parejos y conserva la separacion entre filas.
 */
.submenu .btn_small{
    width: calc(50% - 5px);
    box-sizing: border-box;
    vertical-align: top;
    text-align: left;
    margin: 5px 0 0;
}
/*
 * El de Log out queda a todo el ancho: esta separado del grupo por un `<hr/>`,
 * no forma fila con nadie y es la unica accion destructiva del menu.
 */
.submenu .logout{
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
.submenu:before{
    position: absolute;
    top: -5px;
    right: 10px;
    content: "";
    background-image: url(../images/icon/ic_arrow_up.png);
    background-repeat: no-repeat;
    width: 12px;
    height: 12px
}
.menu-sub{
    position: relative;
    height: 36px;
}
.submenu-links a{
    display: block;
    padding: 10px;
    color: #000;
    border-bottom: 1px dotted #ddd;
}
.submenu-links a:hover{
    background-color: #f1f1f1
}

.logout{
    font: 16px "Roboto";
    color: #fff;
    text-align: center;
    display: block;
    background: red;
    padding: 10px 0;
    border-radius: 4px
}
/*content*/
#content{
    display: inline-block;
    width: 100%;
    margin: 0 auto;/*min-height: 100%;*/
}
.wrap-page{
    display: block;
    width: 98%;
    margin: 0 auto;
    padding: 0 1%;
}
.wrap-page-portrait{
    display: block;
    width: 96%;
    padding: 10px 2%;
    max-width: 640px;
    margin: 10px auto;
}
.wrap-content{
    display: inline-block;
    width: 98%;
    padding: 20px 1%;
}
.floataction{
    position: fixed;
    font-size: 24px;
    text-align: center;
    line-height: 58px;
    width: 58px;
    height: 58px;
    bottom: 50px;
    right: 50px;
    background-color: var(--xps-bar);
    border-radius: 50%;
    color: var(--xps-bar-text);
    z-index: 3000;
    box-shadow: 2px 2px 4px #999
}
.bloquet{
    display: inline-block;
    width: 94%;
    background-color: var(--xps-white);
    padding: 20px 3%;
    border-radius: 16px
}
.content{
    display: inline-block;
    width: 100%;/*min-height: 100%*/
}
.side{
    display: inline-block;
    background-color: var(--xps-light-gray);
    border-right: 1px solid #ccc;
    min-width: 200px;
    max-width: 260px;
    min-height:100%;
    border-bottom: 1px solid #ccc
}
.side .side_nav{
    border-top: 1px solid #ccc
}
.side .side_nav li,.side .side_nav li a{
    display: block;
}
.side .side_nav li a{
    padding: 12px 20px;
    border-bottom: 1px solid #ddd;
    display: block;
    font-weight: 500;
    background-color: var(--xps-light-gray)
}
.side_nav li a:hover{
    background-color: var(--xps-hover);
    color: var(--xps-navy);
    border: 1px solid var(--xps-navy);
    border-radius: 5px;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.side .side_nav li a.active{
    background: var(--xps-bar);
    color: var(--xps-bar-text);
    border: 1px solid var(--xps-bar);
    border-radius: 5px;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/*
 * Brand colors on the module sidebar — `.side--xps`.
 *
 * Introduced by IM-63 for Settings and kept inside that view's <style> while it
 * had a single user. UI-14 adds Reports, so the rules move here instead of
 * being copied: `.side` and `.side_nav` are shared by 8 layouts (assigned,
 * campaing, inventory, patient, payroll, pbx, report, setting) and the
 * modifier class is what keeps the other six untouched. Opting a layout in is
 * adding `side--xps` to its `.side`; nothing else moves.
 *
 * What changes is the state that otherwise paints Bootstrap blue — `--xps-bar`
 * and `--xps-navy` are both #337ab7, so a sidebar with no modifier is not
 * "missing brand color", it is painted with a brand-named variable holding
 * blue.
 *
 * Gold is an accent here, never body text. It carries the hover border and the
 * active background; the list itself does not. Gold was tried on the links and
 * rejected on sight in IM-63: with headings also in gold the two tones sat too
 * close and the hierarchy flattened. Near-black reads at 14.2:1 on the gray,
 * against 3.72:1 for the blue it replaces — a blue that was already below AA.
 */
.side.side--xps .side_nav li a {
    color: #1a1a1a;
}
/*
 * The item icons do take the gold: as graphics they answer to a 3:1 threshold
 * and not 4.5:1, and #8c7240 reads at 3.73:1 on the gray of `.side` and 3.75:1
 * on the #f0e8d8 of the hover. As text — which is what the labels are — it did
 * not qualify, which is why the same color goes on the icon and not the label.
 *
 * The active item needs its own icon rule: this one wins over the color the
 * active state inherits from its parent (inherited color carries no
 * specificity), so without it the icon would keep the dark gold — which reads
 * at 2.28:1 on the light gold UI-19 gave the active item, below the 3:1 asked
 * of graphics. It follows the label to black instead.
 */
/*
 * UI-15 — the gap between icon and label belongs to the modifier, not to a
 * utility class in the markup. Settings carried `spt-right-mini` (5px, read as
 * cramped) and Reports carried `spt-right` (20px, read as detached); both were
 * dropped from the two sidebars so this single value is the only source of
 * truth. Any layout that opts into `side--xps` inherits the same gap.
 */
.side.side--xps .side_nav li a i {
    color: var(--xps-gold-dark);
    margin-right: 10px;
}
.side.side--xps .side_nav li a.active i {
    color: #000;
}
/*
 * Hover keeps the pale gold #f0e8d8 it already had, swapping the blue border
 * and blue text for gold and near-black. Gold never becomes text on a light
 * background: on #f0e8d8 it would read at ~1.7:1.
 *
 * Order matters — hover and active weigh the same (0,4,2), so active must stay
 * last to win on a hovered active item.
 */
.side.side--xps .side_nav li a:hover {
    background-color: var(--xps-hover);
    color: #1a1a1a;
    border: 1px solid var(--xps-gold);
    /*
     * UI-17 — esquinas rectas, igual que el activo. Los 5px salen de la regla
     * base `.side_nav li a:hover`, que no lleva el `.side` delante y por eso
     * alcanza a los 8 layouts; se anula aqui para no moverlos.
     */
    border-radius: 0;
}
/*
 * UI-19 — el activo termina en `--xps-gold`, el dorado claro.
 *
 * Historia del relleno: negro puro (IM-63) → `--xps-ink` #05282E (UI-17, 1a) →
 * `--xps-gold-dark` #8c7240 (UI-17, 2a) → este. Los dos primeros eran bloques
 * oscuros y gritaban sobre el gris claro de la lista; el tercero ya no, pero
 * seguia siendo el unico elemento oscuro de la pantalla ahora que los botones y
 * la cabecera de tabla estan en el dorado claro.
 *
 * El valor no es nuevo: es el mismo fondo de los botones y de la cabecera de
 * tabla, con el mismo borde y el mismo texto negro. La seleccion se distingue
 * por su fondo, no por cambiar de color de letra respecto al resto de la lista.
 *
 * Texto e icono en negro. El blanco que llevaba sobre el dorado oscuro aca daria
 * 1.9:1 y desapareceria; negro sobre #d1b381 da 10.5:1.
 *
 * El hover sigue siendo `--xps-hover` #f0e8d8, un dorado bastante mas palido, de
 * modo que hover y activo no se confunden pese a ser los dos claros.
 */
.side.side--xps .side_nav li a.active {
    background: var(--xps-gold);
    color: #000;
    border: 1px solid var(--xps-gold-border);
    /*
     * Esquinas rectas. El `border-radius: 5px` viene de la regla base
     * `.side .side_nav li a.active`, que comparten 8 layouts (assigned,
     * campaing, inventory, patient, payroll, pbx, report, setting), asi que se
     * anula aqui en vez de editarse alla: los otros seis siguen redondeados.
     * Con el relleno a todo el ancho del item, el borde recto hace que la
     * seleccion cierre contra los separadores de la lista en vez de flotar
     * sobre ellos.
     */
    border-radius: 0;
}

.header-page{
    padding: 10px 0;
    display: inline-block;
    width: 100%;
    background-color: var(--xps-light-gray)
}
.header-page *{
    color: var(--xps-navy);
}
/*
 * Brand colors on the module header bar — `.header-page--xps`.
 *
 * `.header-page *` above paints everything inside with --xps-navy, so the
 * module icon and its name are the last blue left once the sidebar is done.
 * Same modifier trick and same reason as `.side--xps`: `.header-page` and
 * `.header-module` are used by 12 views, and only the ones that opt in change.
 *
 * Introduced by IM-63 for Settings, moved here by UI-15 when Reports became a
 * second consumer.
 *
 * Title near-black (14.2:1 on the gray bar) and the icon in dark gold: it is a
 * graphic, not text, so its 3.73:1 clears the 3:1 asked of non-text elements —
 * exactly the ratio that disqualified this same gold for the sidebar links.
 *
 * The `*` matches every descendant *directly*, so it also paints the <i> inside
 * a link, not just the link. That beats any color the child would inherit —
 * including an inline one set on the parent <a>. A child that needs to keep its
 * own color has to declare it on the element that paints (see the AI chat
 * button in views/pages/report/index.php, which sets it on the <i>).
 */
.header-page.header-page--xps * {
    color: #1a1a1a;
}
.header-page.header-page--xps .header-module i {
    color: var(--xps-gold-dark);
}

/*
 * UI-21 — el titulo de cada vista.
 *
 * 74 vistas abren con un `<h2><span style="color: #337ab7">`, o sea el azul de
 * Bootstrap escrito a mano en el markup. El selector ya existia con un
 * `!important` apuntando a `--xps-navy`: era una palanca preparada que no movia
 * nada, porque `--xps-navy` **es** #337ab7. Este cambio le da un valor distinto
 * y le quita el `label >` que pedia antes, porque dos de las 74 —los reports de
 * Payroll— traen el `<h2>` suelto y se habrian quedado azules solas.
 *
 * Los colores son los mismos que `header-page--xps` le dio a la barra de modulo
 * en IM-63: titulo casi negro y icono en dorado oscuro. Asi el titulo de la
 * vista y el del modulo que la contiene se leen igual.
 *
 * El icono necesita su propia regla: el inline esta en el `<span>`, y el `<i>`
 * hereda de el. Una declaracion que matchea al `<i>` gana sobre cualquier color
 * heredado, tenga o no `!important` el padre.
 *
 * Contraste sobre blanco: #1a1a1a **17.4:1**; el dorado oscuro como grafico
 * **4.57:1**, arriba del 3:1 que se les pide. El azul que reemplaza daba 4.5:1
 * para un texto que es el titulo mas grande de la pantalla.
 */
h2 > span[style*="337ab7"] {
    color: #1a1a1a !important;
}
h2 > span[style*="337ab7"] i {
    color: var(--xps-gold-dark);
}

.mgm-box{
    display: block;
    background-color: var(--xps-white);
    padding: 20px;
}
.mgm-box a{
    margin-bottom: 10px
}
/*
 * UI-18 — la caja de acciones del sidebar de Patients.
 *
 * Las 23 acciones de las 8 secciones convivian en cuatro estilos distintos:
 * `blk` a secas (texto plano, 18 de ellas), `btn blk btn_green` en Faxs,
 * `blk-left reset-margin btn_small btn_blue` en Lab Orders y dos links sin
 * ninguna clase. Ahora las 23 son `blk`: el estilo que ya tenian 18.
 *
 * La primera version las paso a botones dorados con icono, siguiendo el patron
 * de Settings, y se revirtio: en Settings esa caja suele tener **una** accion y
 * aca hasta ocho, de modo que ocho botones apilados dejaban de leerse como una
 * lista de acciones y competian con el nav que tienen debajo. Ademas es la
 * pantalla mas transitada de la app, donde un cambio de forma cuesta mas que lo
 * que aporta. Lo que se conserva de aquella pasada es la uniformidad: un solo
 * estilo en vez de cuatro.
 *
 * Lo unico que cambia respecto del original es el color. Estos links tomaban
 * `--xps-navy` de la regla `a{}` global, el azul de Bootstrap; pasan al mismo
 * casi-negro que usan los items del nav justo debajo, que es lo que los integra
 * a la columna en vez de dejarlos como el ultimo azul de la pantalla.
 */
#side-patient .mgm-box a{
    color: #1a1a1a;
}
/*
 * El hover subraya y engrosa. Al no ser botones no tienen fondo que oscurecer,
 * que es como da feedback el resto de la app, asi que el gesto tiene que estar
 * en el texto mismo.
 *
 * No mueve nada: `.blk` es `display: block`, o sea que cada accion ocupa su
 * propia linea a todo el ancho de la caja y el texto en negrita crece hacia
 * adentro. En una fila de links inline el mismo hover empujaria a los vecinos.
 */
#side-patient .mgm-box a:hover{
    text-decoration: underline;
    font-weight: 700;
}

/*tab navigation*/
.tab_navigation{
    display: inline-block;
    width: 98%;
    margin: 10px 1%;
    border:1px solid #ddd;
    background: var(--xps-light-gray)
}
.tab_navigation .tab_items{
    display: inline-block;
    margin: 5px 5px 0 5px
}
.tab_navigation .tab_items li{
    display: inline-block;
}
/*
 * UI-20 — los tabs entran en la paleta sin cambiar de forma.
 *
 * El activo va en `--xps-gold` con texto negro y en negrita, igual que el item
 * seleccionado del sidebar y la cabecera de tabla. Se probo primero dejandolo
 * blanco —que es lo que lo unia visualmente al `.tab_content`— con solo una
 * franja dorada arriba, y se prefirio el fondo lleno: la union con el panel se
 * pierde, pero cual tab esta abierto se ve de un vistazo.
 *
 * La franja de 3px se reserva en transparente sobre **todos** los tabs. Si solo
 * la llevara el activo, al seleccionar uno crecerian 3px y la fila entera se
 * movaria.
 *
 * Negro sobre #d1b381 = 10.5:1.
 */
.tab_navigation .tab_items li a{
    display: inline-block;
    padding: 15px;
    border-radius: 4px 4px 0 0;
    /* deja `--xps-navy`, que heredaba de la regla `a{}` global */
    color: #1a1a1a;
    /*
     * Los cuatro lados se reservan en transparente y el hover solo les cambia
     * el color. Si el borde apareciera recien al pasar el mouse, el tab
     * creceria 2px de ancho y la fila entera se correria bajo el cursor.
     * El de arriba va en 3px —el trazo que marca la fila— y los otros tres en
     * 1px, como el hover del sidebar.
     */
    border: 1px solid transparent;
    border-top-width: 3px;
    transition: background-color .15s ease, border-color .15s ease;
}
/*
 * Hover y activo eran **la misma regla**, asi que un tab bajo el cursor se veia
 * identico al seleccionado y mientras el mouse estaba sobre la barra no habia
 * forma de saber cual era cual. Ahora son estados distintos, y del mismo modo
 * que en el sidebar: fondo `--xps-hover` mas borde dorado. Lo que los separa es
 * que el activo va **relleno** y el hover **delineado**.
 *
 * El `:not(.active)` no es cosmetico: `:hover` cuenta como clase, asi que la
 * regla de hover pesa (0,4,2) contra los (0,3,2) del activo y le ganaria por
 * especificidad sin importar el orden. Excluir el activo del selector es lo que
 * mantiene su dorado cuando pasa el mouse por encima.
 */
.tab_navigation .tab_items li a:not(.active):hover{
    background: var(--xps-hover);
    color: #1a1a1a;
    border-color: var(--xps-gold);
}
.tab_navigation .tab_items li a.active{
    background: var(--xps-gold);
    color: #000;
    font-weight: 700;
    border-top-color: var(--xps-gold-border);
}
/*
 * La linea que separa la fila de tabs del panel. Va en `.tab_content` y no en
 * `.tab_items` porque este ultimo es `inline-block`: mide lo que miden los tabs
 * y la linea llegaria hasta ahi en vez de cruzar todo el ancho.
 *
 * 3px, el mismo grosor que la franja superior de los tabs, para que se lean como
 * el mismo trazo cerrando arriba y abajo de la fila.
 */
.tab_navigation .tab_content{
    display: inline-block;
    width: 98%;
    background: var(--xps-white);
    padding: 10px 1%;
    border-top: 3px solid var(--xps-gold);
}
/*
 * UI-27 — el segmented control (`.segment`) entra en la paleta.
 *
 * Es la fila de destinos que encabeza 38 vistas: los 24 `nav.php` de reportes
 * (`report/patients`, `report/payments`, …) y otros 14 de pbx, holidays,
 * payroll, campaing, call_transfer y schedule. Era lo ultimo que quedaba del
 * gris de 2019 — fondo #eee, texto #909090 y activo #909090 con blanco encima —
 * y estaba sentado en la misma `.wTitle` que los botones dorados, al lado de un
 * sidebar cuyo item seleccionado ya venia en `--xps-gold` desde UI-19.
 *
 * Los dos estados que tenia fallaban AA y por bastante: #909090 sobre #eee da
 * **2.8:1** y el blanco sobre #909090, **3.3:1**. Aca quedan en 16.9:1 el
 * inactivo y 10.5:1 el activo.
 *
 * **Toma el patron del sidebar de Settings (`.side.side--xps`) y no el de los
 * tabs de UI-20.** Los dos comparten el dorado, pero se distinguen en como lo
 * usan: el tab de UI-20 lleva una franja de 3px arriba porque tiene que cerrar
 * contra el `.tab_content` que cuelga debajo; el `.segment` no tiene panel — es
 * una lista de destinos, igual que el sidebar — asi que la franja no cerraba
 * nada y solo agregaba un trazo suelto. Queda entonces el borde completo del
 * sidebar: activo relleno `--xps-gold` con borde `--xps-gold-border`, hover
 * `--xps-hover` delineado en `--xps-gold`. En `report/patients` el tab activo y
 * el item «Patients» del sidebar pasan a ser la misma pieza.
 *
 * Lo unico que se aparta del sidebar es la negrita del activo: a 13px el
 * relleno solo no alcanzaba, y ahi el `.segment` se parece mas al tab de UI-20
 * —que tambien la lleva— que al sidebar, donde el item mide 12px de padding y
 * ocupa la fila entera.
 *
 * Iconos en `--xps-gold-dark` y en negro sobre el activo, con las dos reglas
 * del sidebar y por el mismo motivo: como graficos responden a 3:1 y no a
 * 4.5:1, pero sobre el dorado claro del activo ese mismo color cae a 2.28:1.
 */
/*segment*/
.segment,.segment li{display: inline-block;background-color: var(--xps-white);}
.segment{border: 1px solid var(--xps-border);border-radius: 4px;overflow: hidden;}
/*
 * El `overflow` recorta el relleno del primero y el ultimo contra el radio del
 * contenedor; sin el, el activo en una punta pisa la esquina redondeada.
 */
.segment li{float: left;border: none}
/*
 * El separador entre items se muda del `li` al borde derecho del `a`. En el
 * `li` sobrevivia al hover, asi que el borde dorado del item aparecia **al
 * lado** de la linea gris del vecino: 2px de doble trazo en cada division.
 *
 * Los cuatro lados se reservan en transparente. El sidebar no lo necesita
 * —lista vertical, el ancho no se mueve— pero aca un borde que nace recien en
 * `:hover` corre la fila entera 1px bajo el cursor.
 */
.segment li a{
    display: block;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
    border: 1px solid transparent;
    border-right-color: var(--xps-border);
}
.segment li:last-child a{border-right-color: transparent}
.segment li a i{color: var(--xps-gold-dark)}
/*
 * El orden importa y es el mismo de `.side.side--xps`: hover y activo pesan
 * igual —(0,2,2) los dos— asi que lo unico que mantiene el dorado del activo
 * cuando pasa el mouse por encima es que su regla vaya ultima.
 */
.segment li a:hover{
    background-color: var(--xps-hover);
    color: #1a1a1a;
    border: 1px solid var(--xps-gold);
}
.segment li a.active{
    background: var(--xps-gold);
    color: #000;
    font-weight: 700;
    border: 1px solid var(--xps-gold-border);
}
.segment li a.active i{color: #000}
/*
 * UI-24 — FOOTER
 *
 * Habia dos footers y ninguno hacia de footer. `#footer` era un bloque en el
 * flujo de 32px que solo contiene markup comentado y un `<style>`: ocupaba alto
 * sin pintar nada. Y la barra de accesos (`Price List | Special List | call |
 * chat`) era un boton flotante anclado abajo a la izquierda, `position:fixed`,
 * que no reserva espacio y por lo tanto **tapa** lo que quede debajo — en
 * `report/payments` se comia 22px de la paginacion.
 *
 * Ahora `#footer` deja de ocupar alto (sigue en el DOM porque la vista que
 * renderiza inyecta un `<style>` y varias vistas asumen que el div existe) y la
 * barra pasa a ser el footer real: ancho completo, altura declarada una sola vez
 * en `--xps-footer-h`, y la misma paleta de la barra superior — `--xps-ink` de
 * fondo con `--xps-gold` de texto, 7.8:1.
 *
 * Sigue siendo `position:fixed` a proposito: es lo que la mantiene visible sin
 * depender del scroll de la pagina. Lo que cambia es que ahora su altura es un
 * numero conocido, y `layoutFill()` la descuenta al dimensionar sidebars y
 * tablas en vez de adivinar 35px.
 *
 * Conserva la clase `.price-list-btn` ademas del id porque `pages/video_call`
 * la esconde por selector de clase durante la videollamada.
 *
 * `min-width` replica el de `#header,#content,#footer`: sin el, al hacer scroll
 * horizontal por debajo de 1024px la barra se quedaria corta a la derecha.
 */
/*footer*/
#footer{
    min-height: 0;
    height: 0;
    overflow: hidden;
}
#app-footer{
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 3001;
    box-sizing: border-box;
    width: 100%;
    min-width: 1024px;
    height: var(--xps-footer-h);
    line-height: var(--xps-footer-h);
    padding: 0 20px;
    background-color: var(--xps-ink);
    color: var(--xps-gold);
    border-top: 1px solid var(--xps-gold-dark);
    box-shadow: 0 -2px 8px rgba(0,0,0,.3);
    white-space: nowrap;
    border-radius: 0;
}
/*
 * `.white` (color:#fff) viene en el markup de estos links desde antes y pesa
 * (0,1,0); el id pesa (1,0,0), asi que el dorado gana sin `!important`.
 */
#app-footer a{
    color: var(--xps-gold);
}
#app-footer a:hover{
    color: var(--xps-white);
    text-decoration: underline;
}
#app-footer i{
    color: var(--xps-gold);
}
#app-footer a:hover i{
    color: var(--xps-white);
}
/*sms*/
.load-more{
    color: #000;
    font: 16px "Roboto";
    text-transform: uppercase;
    position: relative;
    margin-bottom: 30px;
    display: block
}
.load-more:before{
    position: absolute;
    bottom: -30px;
    content: "";
    left: 50%;
    margin-left:-16px;
    background: url(../images/icon/arrow_line_dwn.png)no-repeat bottom center;
    width: 32px;
    height: 32px
}

.wrap_tool_tips{
    position: relative;
}
.tool_tips{
    position: absolute;
    background-color: var(--xps-white);
    padding: 7px 18px;
    border-radius: 18px;
    box-shadow: 1px 2px 4px #999;
    display: none;
    width: 200px;
    z-index: 1001;
    font: 12px "Roboto";
    color: #999;
}
.tool_tips.out{
    right: 0;
}
.tool_tips.in{
    left: 0;
}
.wrap_tool_tips:hover > .tool_tips{
    display: block;
}

/*scroll*/
.scroll {
    overflow: auto;
}
.scroll::-webkit-scrollbar {
    width: 12px;
}

.scroll::-webkit-scrollbar-track {
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
    border-radius: 10px;
}

.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);*/
}

/*messages*/
.form_error::before {
    content: "⚠";
    font-weight: bold;
}
.form_error{
    display: inline-block;
    margin-bottom: 3px;
    padding: 3px 3px;
    background-color: #fdecec;          /* rojo muy suave */
    color: #b72020;                     /* rojo texto */
    border: 1px solid #e5a1a1;           /* borde elegante */
    border-radius: 5px;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form_error {
    animation: fadeInError .45s ease-in-out;
}

@keyframes fadeInError {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.error{
    border: #ea9797 1px solid;
    background-color: #ffc8c8;
    background-image: url("../images/box-icons/box-error.png");
    background-repeat: no-repeat;
    background-position: 10px center;
    color: #b72020;
}
.ok{
    background-image: url("../images/box-icons/box-ok.png");
    background-repeat: no-repeat;
    background-position: 10px center;
    border: #9ed47f 1px solid;
    background-color: #e3ffcd;
    color: #268f1d;
}
.warning{
    background-image: url("../images/box-icons/box-cancel.png");
    background-repeat: no-repeat;
    background-position: 10px center;
    border: #eac45c 1px solid;
    background-color: #fff0bc;
    color: #b14e0a;
}
.notify{
    background-image: url("../images/box-icons/box-notify.png");
    background-repeat: no-repeat;
    background-position: 10px center;
    border: #4e99e5 1px solid;
    background-color: #a5cff3;
    color: #0a5db1;
}
.msg_tip{
    display:none;
    position:fixed;
    padding:10px 30px 10px 70px;
    top:10px;
    right:10px;
    z-index: 3000;
    box-shadow: 1px 1px 10px #999999;
    height: 50px;
    font-weight: bold;
}
.msg{
    padding:10px 20px 10px 70px;
    text-align:center;
    box-shadow: 1px 1px 10px #999999;
    min-height: 50px;
    font-weight: bold;
    max-width: 240px;
    display: inline-block;
}
.msg_tip span{
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer
}
.msg_tip p{
    max-width: 250px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
/*table*/
.table{
    width: 100%;
    margin: 20px 0 30px 0;
    border-collapse: collapse;
    background-color: var(--xps-white);
    position: relative;
}
.table:before{
    position: absolute;
    bottom: -11px;
    width: 100%;
    height: 10px;
    background: #f1f1f1;
    content: '';
    border-radius: 0 0 4px 4px;
}
.table thead tr th:first-child{
    border-top-left-radius: 4px;
}
.table thead tr th:last-child{
    border-top-right-radius: 4px;
}

.table-square:before{
    border-radius: 0!important;
}
.table-square thead tr th:first-child{
    border-top-left-radius: 0px!important;
}
.table-square thead tr th:last-child{
    border-top-right-radius: 0px!important;
}

.table thead tr th{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
}

/*
 * UI-36 — la cabecera de tabla y la barra superior.
 *
 * La regla de arriba deja `top: 0`, y ese sigue siendo el valor por defecto
 * correcto: es el que vale dentro de cualquier contenedor con scroll propio
 * —donde el `thead` pega contra ese contenedor y no contra la ventana— y
 * tambien en el template de popup (`views/template/iframe.php`), que carga este
 * mismo CSS pero no tiene barra superior.
 *
 * Queda un solo caso a corregir: la tabla larga **sin** contenedor de scroll
 * propio. Ahi el `thead` pega contra el documento, o sea en `top: 0`, que es
 * justo donde ahora vive el header, y se esconde detras. Verificado con el
 * header sticky puesto y una tabla de 60 filas sin `.fixed-table`:
 * `elementFromPoint()` sobre el `th` pegado devolvia `A.logo`.
 *
 * **Ese caso se resuelve en `views/template/head.php`, no aqui.** Se intento
 * primero con selectores —`#header ~ #content .table thead th` con un reset
 * dentro de `.fixed-table` y `.table-scroll-x`— y no alcanza: los contenedores
 * con scroll no son solo esos dos. Un barrido por las vistas encontro al menos
 * `.side-widget-body` y `.content-schedule` en `schedule` y `#table-payroll` en
 * `payroll`, y no hay motivo para creer que esa lista este completa entre ~170
 * vistas con tabla. Enumerarlos es exactamente el tipo de numero-escrito-a-mano
 * que UI-24 saco de este layout.
 *
 * `layoutFill()` recorre el ancestro de cada tabla y le pregunta al DOM si hay
 * un scroller en el camino. Eso no se puede equivocar y no hay lista que
 * mantener.
 */

/*
 * UI-19 — la cabecera de tabla toma el dorado de los botones, con texto negro.
 *
 * Es el ultimo consumidor grande de `--xps-bar` que seguia en azul de Bootstrap
 * y el que mas superficie ocupa: hay tabla en casi toda la app. `--xps-gold` es
 * el mismo fondo que ya llevan los botones desde UI-17, asi que la cabecera no
 * estrena color, reusa uno.
 *
 * Primero se probo con `--xps-gold-dark` (#8c7240), el del item activo del
 * sidebar, y en pantalla pesaba demasiado: una banda oscura a todo el ancho no
 * es lo mismo que un item de lista. El claro cumple la misma funcion — separar
 * la cabecera del cuerpo — sin competir con los datos.
 *
 * Se editan estas dos reglas y no la variable: `--xps-bar` lo consumen ~25
 * reglas mas (paginacion, `.floataction`, `chat.css`, `report-chat.css`), y el
 * pedido es la cabecera.
 *
 * Negro sobre #d1b381 = 10.5:1, AA y AAA.
 */
.table thead tr th,.table thead tr th a{
    font: 14px "Roboto";
    font-weight: 700;
    padding: 10px;
    background-color: var(--xps-gold);
    text-align: left;
    color: #000;
}
.table tbody tr td{
    font: 14px "Roboto";
    font-weight: 400;
    padding: 10px;
    text-align: left;
    box-shadow: 1px 0 0 #ddd;
}
.table tbody tr td:last-child{
    box-shadow: none!important;
    white-space: nowrap;
}
.table tbody tr:hover td{
    background-color: var(--xps-hover);
    line-height: 1.2;
}

.highlight{
    background-color: var(--xps-hover)!important;
    color: var(--xps-navy) !important;
    font-weight: bold !important;
    border: 1.5px solid var(--xps-navy);
    line-height: 1.4;
}
.table tbody tr.row-dark{
    background: #f1f1f1
}
tbody.allow-select tr td:hover{
    cursor: pointer
}
.table tbody tr td.cancelled{
    text-decoration: line-through;
    color: red
}
.table tbody tr.unread td{
    font-weight: 700;
}
.table tbody tr.line-through td{
    text-decoration: line-through
}
.table tbody tr.relevant td {
    color: red
}
.table tbody tr.held td {
    color: orange
}

/*
 * IM-98 — Notas del paciente: respetar los saltos de linea.
 *
 * `account_note.note` es `text` y siempre acepto `\n`; el problema era el
 * pintado. La nota se echa dentro de un `<td>` y HTML colapsa los saltos, asi
 * que las notas automaticas (la del lead web arma una linea por respuesta del
 * quiz) llegaban a pantalla como un parrafo corrido de "Service: X Procedure
 * Payment Method: Y Procedure date: Z ..." donde no se distingue donde termina
 * un dato y empieza el siguiente. Lo mismo con cualquier nota que un usuario
 * escribio en varias lineas en el textarea: hay ~160.000 con saltos guardados.
 *
 * `pre-line` y no `pre`: preserva los saltos pero sigue colapsando los espacios
 * y ajustando el texto al ancho de la celda. Con `pre` una nota larga de una
 * sola linea estiraria la tabla a lo ancho.
 *
 * Y no `nl2br()` en la vista: hay ~17.000 notas que llevan HTML a proposito
 * (`<i class="fas fa-phone-slash"></i> Missed call from...`), asi que la nota se
 * sigue echando sin escapar y esto resuelve el salto sin tocar el texto.
 *
 * Va en un wrapper propio y no en el `<td>`: la celda tambien contiene los
 * adjuntos y el bloque de "Pinned by", que son divs con saltos y sangria en el
 * HTML generado y aparecerian como lineas en blanco.
 */
.note-text{
    white-space: pre-line;
}

/*
 * UI-37 — las notas del paciente, legibles en el telefono.
 *
 * En escritorio la tabla esta bien: `Date/Time` y `Created By` fijas a la
 * izquierda (150 + 200px) y la nota ocupando el resto. En un telefono esas dos
 * columnas se llevan 350 de los 1024px del layout y la nota — que es lo unico
 * que se viene a leer — queda en una tira estrecha.
 *
 * **Esconder las dos columnas y ya no alcanza**, y conviene dejarlo escrito
 * porque es lo primero que uno intenta: `#header,#content,#footer` siguen con
 * `min-width: 1024px` —UI-25 se cerro sin implementar a proposito, por riesgo—
 * asi que el bloque no se angosta y la nota se estiraria a ~1000px, o sea
 * barrer de izquierda a derecha para leer cada renglon. Peor que la tira.
 *
 * Por eso cada fila pasa a ser una tarjeta anclada al ancho real de la pantalla
 * con `calc(100vw - 24px)`: se escapa de los 1024px del contenedor en vez de
 * pelearlos, y queda pegada al borde izquierdo, que es donde el usuario ya
 * esta. Fecha y autor colapsan a una sola linea gris de 12px arriba, la nota se
 * queda con el ancho entero y las acciones se van a la esquina.
 *
 * **El breakpoint va por ancho y no por `(pointer: coarse)`**, que es el
 * criterio que uso UI-33: una tablet en horizontal es tactil y ahi la tabla se
 * lee perfecto. Lo que rompe la vista es el ancho, no el dedo. Las media
 * queries miden bien pese al `min-width` porque `template/head.php` declara
 * `width=device-width`: el layout viewport es el del dispositivo y el 1024
 * desborda, no reescala.
 *
 * Acotado a `.notes-table`, que solo llevan las dos tablas de
 * `pages/patient/content/notes/index.php` — la misma vista que reusa el tab de
 * notas del quick view (`pages/patient_quick/tab/notes.php` la incluye), asi
 * que el modal queda cubierto por el mismo cambio.
 */
@media screen and (max-width: 767px){
    .notes-table,
    .notes-table tbody,
    .notes-table tbody tr,
    .notes-table tbody tr td{
        display: block;
    }
    .notes-table thead{
        display: none;
    }
    .notes-table{
        margin: 10px 0;
    }
    /* El `:before` de `.table` es la sombra pegada al borde inferior de la
       tabla; con las filas ya separadas entre si no tiene a que pegarse. */
    .notes-table:before{
        display: none;
    }
    .notes-table tbody tr{
        position: relative;
        /*
         * `width: auto` mas un piso, y no un ancho fijo.
         *
         * La primera version clavaba `width: calc(100vw - 24px)` para anclar la
         * tarjeta a la pantalla. En la pagina real la caja salia de ~80px —la
         * fecha wrappeaba en cuatro renglones y la nota de a una palabra— porque
         * la columna de contenido del paciente encoge y ese ancho no sobrevivia.
         *
         * Con `auto` la tarjeta llena la columna, como el resto de la pagina, y el
         * `min-width` le pone piso: nunca menos que el ancho de la pantalla, pase
         * lo que pase con el contenedor.
         */
        width: auto;
        min-width: calc(100vw - 24px);
        box-sizing: border-box;
        margin: 0 0 10px 0;
        /* El padding derecho reserva el hueco de `.note-actions`, que sale del
           flujo: sin el, una nota larga pasaria por debajo de los iconos. */
        padding: 8px 34px 8px 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    /* Las tarjetas van todas del mismo color: el cebreado de `.row-dark`
       separaba filas pegadas y aca ya separan el borde y el margen. */
    .notes-table tbody tr.row-dark{
        background: var(--xps-white);
    }
    .notes-table tbody tr td{
        padding: 0;
        box-shadow: none;
    }
    .notes-table tbody tr td.note-date,
    .notes-table tbody tr td.note-author{
        display: inline;
        font-size: 13px;
        color: #999;
    }
    .notes-table tbody tr td.note-date:after{
        content: " \00b7 ";
    }
    .notes-table tbody tr td.note-body{
        margin-top: 6px;
        /* La nota es lo unico que se viene a leer aca, asi que va por encima de
           los 14px del resto de la app. */
        font-size: 17px;
        line-height: 1.45;
        /* La celda ya no puede ensanchar la fila para acomodar una palabra
           larga —la tarjeta esta clavada al ancho de la pantalla—, asi que una
           URL pegada en la nota se saldria por el borde derecho. */
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
    .notes-table tbody tr td.note-actions{
        position: absolute;
        top: 6px;
        right: 6px;
    }
}

.min-width-100{
    min-width: 100px
}
.min-width-70{
    min-width: 80px;
}

/*pagination*/
.tableFooter{
    display: inline-block;
    margin: 0 0 0 0;
    border-top: 1px solid #eee;
    width: 100%;
}
.dataTables_info {
    color: #707070;
    line-height: 40px;
    padding-left: 15px;
    position: relative;
    text-shadow: 0 1px 0 #FFFFFF;
    float: left;
    display: inline-block;
}
.paginate {
    display: inline-block;
    float: right;
    text-align: right;
    margin: 12px 5px 0 0;
}
.paginate li {
    display: inline-block
}
.paginate li a {
    display: block;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    color: #707070;
    cursor: pointer;
    margin: 0 0 0 4px;
    padding: 4px 8px;
    transition: all 0.15s ease-in-out 0s;
    background: var(--xps-white);
}
/*
 * UI-20 — la paginacion entra en la paleta y separa sus dos estados.
 *
 * Venia con el mismo defecto que los tabs: `.active` y `:hover` eran **una sola
 * regla**, asi que la pagina actual y la que esta bajo el cursor se veian
 * identicas y no habia forma de saber en cual estas parado mientras mueves el
 * mouse por el paginador.
 *
 * Se resuelve con el mismo lenguaje que ya usan tabs y sidebar: el activo va
 * **relleno** y el hover **delineado**, los dos con el dorado. Negro sobre
 * #d1b381 da 10.5:1, contra los 4.5:1 del blanco sobre el azul que tenia — que
 * es por lo que el numero de la pagina actual costaba leerse en un chip tan
 * chico.
 *
 * El `:not(.active)` evita que el hover pise al activo: los dos selectores
 * pesan igual (0,2,2) y ahi decide el orden del archivo, que es una forma
 * fragil de depender.
 */
.paginate li a:not(.active):hover {
    background: var(--xps-hover);
    color: #1a1a1a;
    text-decoration: none;
    border: 1px solid var(--xps-gold);
}
.paginate li a.active {
    background: var(--xps-gold);
    color: #000;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--xps-gold-border);
}
/*
 * UI-30 — `.select-row` deja el sprite y se dibuja en CSS, para tomar el mismo
 * dorado que los checkbox nativos.
 *
 * Es un checkbox falso: un `<a>` vacio de 20x20 con las clases `check` /
 * `uncheck` que renderiza el PHP (no hay JS que las toggle). Sus cuatro estados
 * salian de `images/icon/checkbox1.png`, un sprite gris de 4 celdas — neutro,
 * asi que nunca chillo como azul y sobrevivio a toda la migracion de paleta.
 * Pero con los nativos ya dorados, en la misma tabla convivirian un check
 * dorado y uno gris.
 *
 * Los estados dejan de ser `background-position` y pasan a color de fondo mas
 * un glifo `::before`, que es lo que permite que el color salga de la variable
 * en vez de estar horneado en un PNG. El archivo del sprite **no se borra**: es
 * produccion y no cuesta nada dejarlo huerfano.
 *
 * Los selectores de estado se califican con `.select-row` (antes eran `.check`
 * y `.uncheck` a secas). Sueltas no pintaban nada — sin `background-image` un
 * `background-position` es inerte — pero ahora si declaran color, y `check` es
 * un nombre demasiado comun para dejarlo global.
 *
 * `text-decoration: none` porque es un `<a>`: sin eso el glifo sale subrayado.
 */
.select-row{
    width:20px;
    height:20px;
    float:left;
    margin:0 8px;
    box-sizing:border-box;
    border:1px solid #1a1a1a;
    border-radius:3px;
    background:var(--xps-white);
    text-align:center;
    text-decoration:none;
    transition: background-color .15s ease;
}
.select-row::before{
    content:"\2713";
    display:block;
    font:700 13px/18px "Roboto", Arial, sans-serif;
    color:transparent;
}
.select-row.check{
    background:var(--xps-gold);
}
.select-row.check::before{
    color:#1a1a1a;
}
.select-row.uncheck:hover{
    background:var(--xps-hover);
}
.select-row.check:hover{
    background:var(--xps-gold-hover);
}

/*ajax form*/
.my_loading{
    display: inline-block;
    width: 100%;
    min-width: 32px;
    height: 32px;
    text-align: center;
    margin: 0 auto;
    background-image: url(../images/icon/loading.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 32px 32px;
}
.overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.6);
    left: 0;
    top: 0;
    background-image: url(../images/icon/loading.gif);
    background-size: 100px 100px;
    background-position: center center;
    background-repeat: no-repeat;
}
.overlay.bg32{
    background-size: 32px!important
}
/*popup*/
.wrap-popup{
    background: var(--xps-white);
    border-radius: 0 0 8px;
}
.pp_overlay{
    background-color:rgba(0,0,0,0.7);
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#7c000000', endColorstr='#7c000000');
    display:none;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    height:100%;
    z-index:9999;
    overflow:auto;
}
.appendedContainer{
    position:absolute;
    z-index:10000;
    left:50%;
    top:0;
    display:none;
}
/*
 * UI-34 — el modal a pantalla completa en tactil.
 *
 * La clase la pone `centerOverlay()` (mypopup.js) cuando `(pointer: coarse)`, y en
 * ese caso el JS no escribe ni un px: el tamano es enteramente de acá. Es lo que
 * hace SweetAlert —tamano en CSS relativo al viewport— y por eso entra siempre,
 * mientras que el popup calculado en px inline no.
 *
 * **Anclado al overlay, no al viewport.** `.pp_overlay` ya es `position: fixed`
 * con `width/height: 100%`, asi que es el bloque contenedor: alcanza con
 * `absolute` + los cuatro lados en 0, sin `100vh` ni `100dvh`. Asi hereda lo que
 * mida el overlay sea cual sea el criterio del navegador para la barra de
 * herramientas de Safari, en vez de replicar el alto del viewport a mano.
 */
.pp_overlay.pp-fullscreen{
    overflow: hidden;
}
.pp-fullscreen .appendedContainer{
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: auto;
    margin: 0;
    border-radius: 0;
    /*
     * `!important` porque `fadeIn()` de jQuery escribe `display: block` INLINE al
     * abrir el modal, y un inline gana sobre cualquier regla de este archivo. No
     * se puede resolver por especificidad porque el competidor no esta en una hoja
     * de estilos — mismo caso que FX-77 con el CSS que sweetalert2 inyecta en
     * tiempo de ejecucion.
     *
     * Flex y no un `calc()`: la altura de `.bar-title` es variable (depende del
     * largo del titulo), asi que no hay numero fijo que restarle al cuerpo.
     */
    display: flex !important;
    flex-direction: column;
}
.pp-fullscreen .bar-title{
    flex: 0 0 auto;
    border-radius: 0;
}
/*
 * `.p_description` es tambien contenedor flex para poder **estirar al hijo**.
 * Hace falta por `.img-popup-wrap`, que centra vertical con `height: 100%` y un
 * `::before{height:100%}`: contra un flex item en `height: auto` ese porcentaje
 * queda indefinido y el centrado se pierde. Estirando al hijo el resultado no
 * depende de como cada navegador resuelva porcentajes contra un flex item, y
 * sirve igual para el `<iframe>` y para la imagen.
 */
.pp-fullscreen .p_description{
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
}
/*
 * Los atributos `width="100%" height="100%"` del iframe son presentational hints
 * y pierden contra cualquier regla de autor, asi que no hay que tocarlos.
 */
.pp-fullscreen .p_description > iframe,
.pp-fullscreen .p_description > .img-popup-wrap{
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: auto;
    border: 0;
}
/*
 * UI-21 — la barra de titulo de los popups (`mypopup.js`, el modal que abre
 * todo lo que lleva `name="mypopup"`) pasa de azul con texto blanco a dorado
 * con texto negro, la misma pareja que la cabecera de tabla y el tab activo.
 *
 * Se edita la regla y no `--xps-bar`: esa variable la siguen consumiendo
 * `.floataction`, `chat.css` y `report-chat.css`.
 *
 * Negro sobre #d1b381 = 10.5:1, contra los 4.5:1 del blanco sobre el azul.
 */
.bar-title{
    padding-bottom:8px;
    position:relative;
    display:block;
    background: var(--xps-gold);
    color: #000;
    padding: 10px;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid var(--xps-gold-border)
}
.p_title{
    font:18px Arial;
    display:inline-block;
    max-width: 85%
}
.btn-close{
    display: inline-block;
    float: right
}
.btn-close img{
    display: none;
}
/*
 * UI-21 — la X de cerrar acompana a la barra. Necesita el color explicito y no
 * `currentColor`: `.btn-close` es un `<a>`, asi que hereda el azul de la regla
 * `a{}` global y el glifo saldria azul sobre el dorado.
 */
.btn-close::after{
    content: '\f00d';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 20px;
    color: #000;
    cursor: pointer;
}
/* Image lightbox: center the image (vertically + horizontally) and fit it to the
   window; click toggles .zoomed for actual-size viewing with native scroll. */
.img-popup-wrap{
    width: 100%;
    height: 100%;
    overflow: auto;
    text-align: center;
    white-space: nowrap;
}
.img-popup-wrap::before{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.img-popup{
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    display: inline-block;
    cursor: zoom-in;
}
.img-popup.zoomed{
    max-width: none;
    max-height: none;
    cursor: zoom-out;
}

/*.p_description{-moz-box-shadow:5px 5px 10px #444;-webkit-box-shadow:5px 5px 10px #444;box-shadow:5px 5px 10px #444;}*/
/*auto complete agent*/
.wrap-autocomplete{
    width: 100%;
    position: absolute;
    top: 34px;
    left:0;
    background-color: var(--xps-white);
    box-shadow: 1px 1px 4px #999;
    display: none;
    z-index: 3001
}
.wrap-autocomplete a{
    color: #333;
    padding: 5px 3%;
    width: 94%;
    display: block;
}
.wrap-autocomplete span{
    display: inline-block;
    width: 100%;
    padding: 8px 0;
    border-bottom: 1px solid #ccc;
    font-size: 12px;
    cursor: pointer
}
.wrap-autocomplete span:last-child{
    border: none;
}
.wrap-autocomplete span b{
    color: red
}
.wrap-autocomplete a:hover{
    background: #f1f1f1
}

/*widget*/
.side_widget{
    display: inline-block;
    width: 210px;
    min-height: 100%;
    padding: 10px 5px
}
.widget{
    display: inline-block;
    width: 100%;
    background-color: #f8f8f8
}
.widget h3{
    background-color: #666;
    color: #fff;
    padding: 7px;
    display: block
}
.navigation{
    display: inline-block;
    width: 100%;
}
.navigation li{
    display: block
}
.navigation li a,.navigation li .nav-link{
    /*
     * UI-22 — los cuatro lados se reservan y solo el de abajo lleva el gris que
     * separa un item del siguiente. Asi el hover puede colorear el borde
     * completo sin que el item crezca 2px y sin perder el separador.
     */
    border: 1px solid transparent;
    border-bottom-color: #ddd;
    padding: 10px;
    display: block;
    transition: background-color .15s ease, border-color .15s ease;
}
/*
 * UI-22 — la lista lateral de Emails y Fax, el ultimo estado activo azul de la
 * app. Toma el mismo par que el sidebar, los tabs y la paginacion: activo
 * **relleno** en dorado, hover **delineado** en dorado palido.
 *
 * El hover estaba en un gris #f1f1f1 propio, sin relacion con nada; pasa a
 * `--xps-hover` con borde dorado, que es como se comporta el resto.
 *
 * Los bordes se reservan en transparente sobre el estado base para que el hover
 * no corra el item 2px al aparecer.
 *
 * Negro sobre #d1b381 = 10.5:1, contra los 4.5:1 del blanco sobre el azul.
 */
.navigation li a:not(.active):hover,.navigation li .nav-link:not(.active):hover{
    background-color: var(--xps-hover);
    border-color: var(--xps-gold);
}
.navigation li a.active,.navigation li .nav-link.active{
    background: var(--xps-gold);
    color: #000;
    font-weight: 700;
    border-color: var(--xps-gold-border);
}

/*alert*/
.wrap-alerts{
    min-height: 470px;
    overflow: auto;
    position: fixed;
    z-index: 2001;
    display: block;
    top: 58px;
    right: -330px;
    padding: 15px;
    width: 300px;
    background-color: rgba(205,205,205,1);
    box-shadow: 0px 2px 8px #444;
}
.show-alert{
    right: 0;
    transition: right 300ms ease-in-out;
}
.title-alert{
    font-size: 24px;
    display: block;
    color: #373634;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #999;
}
/* IM-25 — barra superior del dropdown de alertas con boton "Clear all" a la izquierda */
.title-alert-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #999;
}
.title-alert-bar .title-alert{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.clear-all-alerts{
    font-size: 12px;
    color: #b94a48;
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid #b94a48;
    border-radius: 4px;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
    white-space: nowrap;
}
.clear-all-alerts:hover{
    background-color: #b94a48;
    color: #fff;
    text-decoration: none;
}
.clear-all-alerts i{
    margin-right: 4px;
}
/* UI-02 — barra de herramientas del dropdown: select de tipo + boton Clear all */
.alert-toolbar{
    display: flex;
    align-items: center;
    gap: 8px;
}
.alert-toolbar .alert-type-filter{
    height: 28px;
    max-width: 140px;
    font-size: 12px;
    padding: 2px 6px;
    box-sizing: border-box;
}
.wrap-alert-item{
    display: block;
    background-color: rgb(233,233,233);
    border-radius: 8px;
    margin-bottom: 10px
}
.alert-item-title{
    display: block;
    background-color: rgb(224,224,224);
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    padding: 10px 12px;
}
.alert-item-body{
    display: block;
    padding: 12px
}
.alert-item{
    display: block;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd
}

/*tree*/
.tree{
    display: block;
    padding: 10px;
}
.tree-cat{
    display: block;
    margin-bottom: 5px;
    position: relative
}
.tree-cat:before{
    content: '[-] ';
}
.tree-sub{
    display: block;
    margin: 5px 0 10px 30px
}
.tree-sub li{
    color: var(--xps-navy);
    cursor: pointer;
    display: block;
    padding: 5px
}
.tree-sub li.active{
    background-color: var(--xps-hover);
}

/**pictures*/
.wrap-picture{
    display: inline-block;
    width: 100%
}
.wrap-picture a.picture{
    display: inline-block;
    width: 97%;
    border: 1px solid #ddd;
    margin: 1%
}
.wrap-picture .item-picture{
    display: inline-block;
    width: 230px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    padding-bottom: 5px
}
.wrap-picture a img{
    display: block;
    width: 100%
}

/**help icon*/
.help-icon {
    font-size: 0.9em;
    color: var(--xps-navy);
    cursor: pointer;
    font-weight: 900;
    position: relative;
    top: -4px;
}

/** Stack */
x-stack {
    display: flex;
    box-sizing: border-box;
}

/* Gap */
x-stack[gap="0"] {
    gap: 0rem;
}
x-stack[gap="1"] {
    gap: 0.25rem;
}
x-stack[gap="2"] {
    gap: 1rem;
}
x-stack[gap="3"] {
    gap: 1.5rem;
}
x-stack[gap="4"] {
    gap: 2rem;
}
x-stack[gap="5"] {
    gap: 2.5rem;
}

/* Orientaciones */
x-stack[orientation="row"] {
    flex-direction: row;
}
x-stack[orientation="column"] {
    flex-direction: column;
}

/* Reverse */
x-stack[reverse="true"] {
    flex-direction: row-reverse;
}
x-stack[orientation="column"][reverse="true"] {
    flex-direction: column-reverse;
}

/* Justify Content */
x-stack[justifycontent="start"] {
    justify-content: flex-start;
}

x-stack[justifycontent="center"] {
    justify-content: center;
}
x-stack[justifycontent="end"] {
    justify-content: flex-end;
}
x-stack[justifycontent="between"] {
    justify-content: space-between;
}

/* Align Items */
x-stack[alignitems="start"] {
    align-items: flex-start;
}
x-stack[alignitems="center"] {
    align-items: center;
}
x-stack[alignitems="end"] {
    align-items: flex-end;
}
x-stack[alignitems="normal"] {
    align-items: normal;
}

/* Wrap */
x-stack[wrap="true"] {
    flex-wrap: wrap;
}

x-stack[wrap="reverse"] {
    flex-wrap: wrap-reverse;
}

x-stack[wrap="false"] {
    flex-wrap: unset;
}

/** Utiles bootstrap */
/* Margins */
.m-0  {
    margin: 0 !important;
}
.m-1  {
    margin: 0.25rem !important;
}
.m-2  {
    margin: 0.5rem !important;
}
.m-3  {
    margin: 1rem !important;
}
.m-4  {
    margin: 1.5rem !important;
}
.m-5  {
    margin: 3rem !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}
.mb-1 {
    margin-bottom: 0.25rem !important;
}
.ms-1 {
    margin-left: 0.25rem !important;
}
.me-1 {
    margin-right: 0.25rem !important;
}

/* Paddings */
.p-0  {
    padding: 0 !important;
}
.p-1  {
    padding: 0.25rem !important;
}
.p-2  {
    padding: 0.5rem !important;
}
.p-3  {
    padding: 1rem !important;
}
.p-4  {
    padding: 1.5rem !important;
}
.p-5  {
    padding: 3rem !important;
}

.pt-1  {
    padding-top: 0.25rem !important;
}
.pt-2  {
    padding-top: 0.5rem !important;
}
.pt-3  {
    padding-top: 1rem !important;
}
.pt-4  {
    padding-top: 1.5rem !important;
}
.pt-5  {
    padding-top: 3rem !important;
}

.pb-1 {
    padding-bottom: 0.25rem !important;
}
.pb-2  {
    padding-bottom: 0.5rem !important;
}
.pb-3  {
    padding-bottom: 1rem !important;
}
.pb-4  {
    padding-bottom: 1.5rem !important;
}
.pb-5  {
    padding-bottom: 3rem !important;
}

.pl-1 {
    padding-left: 0.25rem !important;
}
.pl-2  {
    padding-left: 0.5rem !important;
}
.pl-3  {
    padding-left: 1rem !important;
}
.pl-4  {
    padding-left: 1.5rem !important;
}
.pl-5  {
    padding-left: 3rem !important;
}

.pr-1 {
    padding-right: 0.25rem !important;
}
.pr-2  {
    padding-right: 0.5rem !important;
}
.pr-3  {
    padding-right: 1rem !important;
}
.pr-4  {
    padding-right: 1.5rem !important;
}
.pr-5  {
    padding-right: 3rem !important;
}

/* Widths */
.w-25  {
    width: 25% !important;
}
.w-50  {
    width: 50% !important;
}
.w-75  {
    width: 75% !important;
}
.w-100 {
    width: 100% !important;
}
.w-auto {
    width: auto !important;
}

/* Heights */
.h-25  {
    height: 25% !important;
}
.h-50  {
    height: 50% !important;
}
.h-75  {
    height: 75% !important;
}
.h-100 {
    height: 100% !important;
}
.h-auto {
    height: auto !important;
}
.d-flex {
    display: flex !important;
}

/* Flexbox helpers */
.flex-row {
    flex-direction: row !important;
}
.flex-column {
    flex-direction: column !important;
}
.justify-start {
    justify-content: flex-start !important;
}
.justify-center {
    justify-content: center !important;
}
.justify-end {
    justify-content: flex-end !important;
}
.justify-between {
    justify-content: space-between !important;
}
.align-start {
    align-items: flex-start !important;
}
.align-center {
    align-items: center !important;
}
.align-end {
    align-items: flex-end !important;
}
.flex-wrap {
    flex-wrap: wrap !important;
}
.gap-1 {
    gap: 0.25rem !important;
}
.gap-2 {
    gap: 0.5rem !important;
}
.gap-3 {
    gap: 1rem !important;
}

/* Display */
.d-block {
    display: block !important;
}
.d-inline {
    display: inline !important;
}
.d-inline-block {
    display: inline-block !important;
}
.d-none {
    display: none !important;
}

/*
 * FX-77 — SweetAlert siempre por delante de los modales.
 *
 * SweetAlert2 monta su contenedor en `z-index: 1060` y el app lo pasa por arriba
 * en varios lados: el modal en iframe (`.appendedContainer`) va en 10000 sobre un
 * fondo en 9999, y los desplegables del nav llegan a 30001. Resultado: cualquier
 * dialogo abierto desde dentro de un modal quedaba DETRAS, y para el usuario
 * parecia que el boton no hacia nada. Alcanza a todo lo que use `Swal.fire`,
 * incluido el aviso de sesion vencida de UI-32 y el confirmCallback de dialog.js.
 *
 * `!important` no es pereza: `sweetalert2.all.min.js` inyecta su CSS en tiempo de
 * ejecucion al final del `<head>`, o sea DESPUES de esta hoja, asi que sin el la
 * regla propia perderia la cascada por orden.
 *
 * Un dialogo es lo mas prioritario que puede haber en pantalla, asi que el valor
 * es el maximo: tambien tiene que quedar por encima del overlay de IM-93
 * (2147483646), que es lo unico mas alto que los modales.
 */
.swal2-container {
    z-index: 2147483647 !important;
}