html, body {
    height: 100%;
}

img {
    border: 0;
}

* html .bodyContainer {
    height: 100%
}

body, div, form, hr, fieldset {
    margin: 0;
    padding: 0;
}

body {
    color: #616161;
    background-color: #FFFFFF;
    margin: 0;

}

.bodyContainer {
    min-height: 100%;
    min-width: 990px;
    margin: 0 auto -3em;

}

#pageContainer {
    min-height: 100%;
    min-width: 100%;
    /*    height: 100%;
   width: 100%;*/
}

.spacer {
    margin: 0 auto 3em;
    padding: 5px;
}

#footer {
    height: 3em;
    font-family: Verdana, serif;
    bottom: 0;
}

.body {
    padding: 4px 20px 20px 20px;

}

.body3 {
    height: 100px;
    overflow: auto;
}

a:hover {
    color: #000;
}

h1, h2, h3 {
    /*font-family: Verdana, Arial, sans-serif;*/
    color: #578BB8;
    margin-top: 0;
    margin-bottom: 0;
}

ul {
    margin-top: 5px;
    margin-bottom: 0;
}

.message {

    color: green;
    padding: 5px;
    font-weight: bold;
    font-size: 10pt;
}

.messageError {
    padding: 5px;
    color: #600;
    font-weight: bold;
    font-size: 10pt;

}

.messageInfo {
    padding: 5px;
    color: green;
    font-weight: bold;
    font-size: 10pt;
}

.messageWarm {
    padding: 5px;
    color: #C89905;
    font-weight: bold;
    font-size: 10pt;

}

.rich-messages-marker img {
    padding-right: 4px;
    margin-right: 4px;
}

/* Banda reservada para mensajes globales (rich:messages globalOnly del template).
   Objetivo: que un mensaje de 1 renglon aparezca SIN desplazar el contenido hacia
   abajo, reutilizando el espacio que ya existe hoy (no aumentar). Para lograrlo se
   COMPACTA el propio banner (icono 16px, sin padding vertical, 1 linea) para que su
   alto natural sea <= el alto reservado; asi un mensaje normal cabe en la banda y no
   la hace crecer. Solo un mensaje realmente largo (multilinea) la expande (empuja).
   Todo scoped: no modifica .message/.messageInfo/... usadas en otras vistas. */
.app-msgband {
    display: flex;
    align-items: center;
    min-height: 18px;
    box-sizing: border-box;
    line-height: 1.1;
}
/* Colapsa TODA la estructura interna que el skin glassX mete alrededor del
   rich:messages (tabla/spans/caja con padding). Scoped con !important: solo afecta
   dentro de .app-msgband, no a las clases de mensaje usadas en otras vistas. */
.app-msgband * {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-spacing: 0 !important;
    background: transparent !important;
    vertical-align: middle !important;
    line-height: 1.1 !important;
}
/* Solo separacion horizontal del texto del mensaje. */
.app-msgband .message,
.app-msgband .messageInfo,
.app-msgband .messageError,
.app-msgband .messageWarm {
    padding: 0 8px !important;
}
/* Icono en su tamano intrinseco (16px), sin ocupar alto extra. */
.app-msgband img {
    width: 16px !important;
    height: 16px !important;
    margin-right: 4px !important;
}

.errors {
    color: #600;
}

.errors input {
    border: 1px solid #600;
}

.boldErrors {
    background: url("../img/errorIcon.gif") center left no-repeat;
    color: #600;
    width: 100%;
    padding-left: 20pt;
    font-size: 11pt;
    margin: 2pt;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.top {
    vertical-align: top;
}

.column-nowrap {
    white-space: nowrap;
}

.bottom {
    vertical-align: bottom;
}

.buttons {

    text-align: right;
    margin-bottom: 5px;
    margin-top: 5px;
}

.buttonsRight {
    text-align: right;
    margin-bottom: 1px;
    margin-top: 1px;
}

.buttonsLeft {
    text-align: left;
    margin-bottom: 1px;
    margin-top: 1px;
}

.center-buttons {
    text-align: center;
    margin-bottom: 5px;
    margin-top: 5px;
}

/* Forms */

.formRow {
    width: 100%;
    display: table;

}

.entry {
    display: table-row;
    font-size: 9pt;
    width: 100%;
}

.textLabel {
    font-size: 8pt;
}
/** extras **/
.text10{
    font-size: 10pt;
    font-family: Verdana, serif;
}

.text12 {
    font-size: 12pt;
    font-family: Verdana, serif;
}

.text08 {
    font-size: 9pt;
    font-family: Verdana, serif;
}

.text09 {
    font-size: 9pt;
    font-family: Verdana, serif;
}

.textBold12Blue {
    font-size: 12pt;
    font-weight: bold;
    color: blue;
}

.textBold12Green {
    font-size: 12pt;
    font-weight: bold;
    color: darkgreen;
}

.msgText1 {
    color: #600;
    font-weight: bold;
    font-size: 10pt;
}

.margin-t2{
    margin-top: 2px;
}
.margin-t3{
    margin-top: 3px;
}

/** End extras **/
/*
.entry .label {

    padding-top: 8px;
    color: black;
    padding-right: 10px;
    text-align: right;
    height: auto;
    display: table-cell;
    float: left;
    width: 30%;

}
*/
.entry .label {
    /*font-weight: bold;*/
    padding-top: 8px;
    color: black;
    padding-right: 10px;
    text-align: right;
    height: auto;
    display: table-cell;
    float: left;
    width: 22%;

}

.vlabel {
    padding-top: 8px;
    padding-left: 5px;
    color: black;
    text-align: left;
    height: auto;
    display: table-row;
    float: left;
    width: 100%;
}

.labelTop {
    display: block;
    text-align: left;
    float: none;
    white-space: nowrap;
    width: 100%;
}

.validateLabel {
    padding-top: 8px;
    color: black;
    padding-right: 10px;
    text-align: right;
    height: auto;
    display: table-cell;
    float: left;
    width: 100%;
}

.dataBottom {
    display: block;
    float: none;
    width: 100%;
}

.dataPanel {
    vertical-align: middle;
    text-align: center;
    display: block;
    float: none;
    width: 100%;
    height: 100%;
}

.entry .data {
    padding-top: 5px;
    text-align: left;
    display: table-cell;
    float: left;
}

.vdata {
    padding-top: 5px;
    padding-left: 5px;
    text-align: left;
    display: table-row;
    float: left;
    width: 100%;
}

.verticalBottom {
    vertical-align: bottom;
}

.verticalTop {
    vertical-align: top;
}

.required {
    color: red;
}

.formWideLabels {
}

.formWideLabels .entry .label {
    width: 35%;
}

/* Input elements */
input, select, textarea {
    border: 1px solid #C3BBB6;
    text-align: left;
    vertical-align: middle;
    padding: 3px;
}

.formRow1 {
    width: 100%;
}

.input {
    width: 200px;
}

.inputMedium {
    width: 150px;
}

.inputDateNarrow {
    width: 135px;
}

.zonesPanelBody {
    padding-top: 2px !important;
}

.inputSmall {
    width: 75px;
}

.input80 {
    width: 80px;
}

.input100 {
    width:100px;
}

.input110 {
    width:110px;
}

.input200 {
    width:200px;
}

.input250 {
    width:250px;
}

.input260 {
    width:260px;
}

.input105 {
    width:105px;
}

.inputTiny {
    width: 50px;
}

.inputLarge {
    width: 300px;
}

.inputLarge400 {
    width: 400px;
}

.inputLarge500 {
    width: 500px;
}

.inputNumber {
    width: 200px;
    text-align: right;
}

.inputNumberMedium {
    width: 150px;
    text-align: right;
}

.inputNumberSmall {
    width: 75px;
    text-align: right;
}

.inputNumberTiny {
    width: 50px;
    text-align: right;
}

.input1 {
    width: 80px;
}

.textarea {
    height: 100px;
}

.textarea-small {
    height: 46px;
    width: 200px;
}

.textarea-small2 {
    height: 40px;
    width: 230px;
}

.textarea-medium {
    height: 40px;
    width: 380px;
}

.textarea-medium1 {
    height: 60px;
    width: 350px;
}

.textarea-medium2 {
    height: 50px;
    width: 350px;
}

.textarea-largest {
    height: 60px;
    width: 550px;
}

.textarea-largest2 {
    width: 400px;
}

.checkBox {
    border: none;
    background: transparent;
}

.checkBox input {
    border: none;
    background: transparent;
}

.smallInput {
    width: 30px;
}

.tinyQuickSearchInput {
    width: 40px;
}

input.button {
    margin: 3px 3px 3px 3px; /*height: 20px;*/
    padding: 2px 5px 2px 5px;
    overflow: visible;
}

input.bigButton {
    margin: 1px 1px 1px 1px;
    padding: 5px 5px 5px 5px;
    overflow: visible;
    font-size: 15px;
}

input.bigText {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;

}

.labelSelector {
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    float: left;
}

.labelAlarm {
    background-color: #ff8b8e;
}

.labelWarm {
    background-color: #ffffe0;
}

.labelInfo {
    background-color: #ADD8E6;
}

.labelActive {
    background-color: #D6EAF8;
}

.labelNew {
    background-color: #06d518;
}

/** Menu **/

#menu {
    padding: 1px 0 0 0;
}

#shadow {
    background: transparent url(../img/whiteshadow.gif) repeat-x;
    height: 5px;
}

#header {
    height: 20px;
    background-color: #fff;
}

#header #left {
    width: 60%;
    float: left;
}

#header #right {
    width: 30%;
    float: right;
    padding: 5px;
    padding-right: 10px;
    text-align: right;
    font-size: 11px;
    vertical-align: top;
}

/* Ajax requests*/
.startAjax {
    background-color: white;
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid #CC0000;
    color: #CC0000;
    font-weight: bold;
    font-size: 11px;
    padding: 3px;
    vertical-align: middle; /*border-top: 0;*/
    z-index: 5000;
}

.startAjaxCenter {
    background-color: white;
    position: relative;
    border: 1px solid #336699;
    color: #336699;
    font-weight: bold;
    font-size: 11px;
    padding: 3px;
    vertical-align: middle;
    z-index: 5000;
}

.loadingPanel {
    background-color: white;
    position: relative;
    border: 1px solid #336699;
    color: #336699;
    font-weight: bold;
    font-size: 11px;
    padding: 3px;
    margin: 3px;
    display: block;
    width: 100px;
    vertical-align: middle;
    z-index: 5000;
}

.blockPanel {
    display: block;
}

.dr-table-headercell a {
    color: #fff;
}

.tab-cell, .tab-cell:link {
    /*color: #fff;*/
    color: #474747;
    left: 0;
    top: 0;
    padding: 3px 6px 3px 6px;
    /*padding: 2px 5px 2px 5px;*/
    white-space: nowrap;
    width: auto;
    height: auto;
    border: 0 solid transparent;
    font-weight: bold;
    display: block;
}

.tab-cell:visited {
    /*color: #fff;*/
    color: #474747;
    font-weight: bold;
}

.tab-cell:hover, .tab-cell:active {
    background-color: #fff;
    color: #474747;
    font-weight: bold;
    border: 1px solid silver;
    padding: 2px 5px 2px 5px;
}

.tab-separator {
    border-left: 1.5px solid #575757;
    padding-left: 2px;
    padding-right: 2px;
}

.tab-end-separator {
    border-left: 1.5px solid #575757;
    padding-left: 2px;
    padding-right: 2px;
    border-right: 1.5px solid #575757;
}

.mail-toolbar {
    padding: 0;
}

.mail-toolbar-content {
    padding: 3px;
    font-weight: normal;
}

.active-tab {
    color: #000000;
    font-weight: bold;
    border: 1px solid white;
    height: 25px;
    padding: 2px 10px 2px 10px;
}

.default-tab {
    cursor: pointer;
    height: 25px;
    /*font-weight: bold;*/
}

.tab-panel-container {
    border-color: #FFFFFF;
}

.active-row {
    background-color: #EDEADD;
}

.rich-panel-header {
    text-align: left;
}

.rich-stglpanel-header {
    text-align: left;
}

#gradient-style {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 9px;
    margin-top: 45px;
    width: 480px;
    text-align: left;
    border-collapse: collapse;
}

#gradient-style th {
    font-size: 9px;
    font-weight: normal;
    padding: 5px;
    background: #b9c9fe url('../img/gradhead.png') repeat-x;
    border-top: 2px solid #d3ddff;
    border-bottom: 1px solid #fff;
    color: #000;
}

#gradient-style td {
    padding: 5px;
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid #fff;
    background: #e8edff url('../img/gradback.png') repeat-x;
}

#gradient-style tfoot tr td {
    background: #e8edff;
    font-size: 9px;
    color: #99c;
}

#gradient-style tbody tr:hover td {
    background: #d0dafd url('../img/gradhover.png') repeat-x;
    color: #339;
}

.height50percent {
    height: 50%
}

.height60percent {
    height: 60%
}

.height40percent {
    height: 40%
}

.rich-panel-border-round {
    border-radius: 1em;
}

.rich-panel-header-top-border-round {
    border-top-left-radius: 1em 1em;
    border-top-right-radius: 1em 1em;
}

.rich-panel-header-font-agile {
    text-shadow: 0.1em 0.1em #333;
    font-size: 13px;
}

.custom-rich-panel-header-0 {
    background-color: #359145;
    background-image: url('../img/gradients/header.gradient.green.png');
    border-bottom-color: #359145;
    border-left-color: #359145;
    border-right-color: #359145;
    border-top-color: #359145;
}

.custom-rich-panel-header-1 {
    background-color: #F8DE4E;
    background-image: url('../img/gradients/header.gradient.yellow.png');
    border-bottom-color: #F8DE4E;
    border-left-color: #F8DE4E;
    border-right-color: #F8DE4E;
    border-top-color: #F8DE4E;
}

.custom-rich-panel-header-2 {
    background-color: #ED3F3F;
    background-image: url('../img/gradients/header.gradient.red.png');
    border-bottom-color: #ED3F3F;
    border-left-color: #ED3F3F;
    border-right-color: #ED3F3F;
    border-top-color: #ED3F3F;
}

.li-background-color-0 {
    background-image: url('../img/gradients/header.gradient.green.png');
}

.li-background-color-1 {
    background-image: url('../img/gradients/header.gradient.yellow.png');
}

.li-background-color-2 {
    background-image: url('../img/gradients/header.gradient.red.png');
}

.li-agile {
    float: left;
    text-indent: -999em;
}

#hor-minimalist-b {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 10px;
    background: #fff;
    margin: 10px; /*width: 480px;*/
    border-collapse: collapse;
    text-align: left;
}

#hor-minimalist-b th {
    font-size: 10px;
    font-weight: normal;
    color: #039;
    padding: 5px 5px;
    border-bottom: 2px solid #6678b1;
}

#hor-minimalist-b td {
    border-bottom: 1px solid #ccc;
    color: #669;
    padding: 5px 5px;
}

#hor-minimalist-b tbody tr:hover td {
    color: #009;
}

.removeBorderClass {
    border: 0;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.width100percent {
    width: 100%;
    vertical-align: top;
}

.width95percent {
    width: 95%;
    vertical-align: top;
}

.width90percent {
    width: 90%;
    vertical-align: top;
}

.width85percent {
    width: 85%;
    vertical-align: top;
}

.width80percent {
    width: 80%;
    vertical-align: top;
}

.width75percent {
    width: 75%;
    vertical-align: top;
}

.width70percent {
    width: 70%;
    vertical-align: top;
}

.width65percent {
    width: 65%;
    vertical-align: top;
}

.width60percent {
    width: 60%;
    vertical-align: top;
}

.width55percent {
    width: 55%;
    vertical-align: top;
}

.width50percent {
    width: 50%;
    vertical-align: top;
}

.width45percent {
    width: 45%;
    vertical-align: top;
}

.width40percent {
    width: 40%;
    vertical-align: top;
}

.width35percent {
    width: 35%;
    vertical-align: top;
}

.width33percent {
    width: 33%;
    vertical-align: top;
}

.width30percent {
    width: 30%;
    vertical-align: top;
}

.width29percent {
    width: 20%;
    vertical-align: top;
}

.width28percent {
    width: 20%;
    vertical-align: top;
}

.width27percent {
    width: 20%;
    vertical-align: top;
}

.width26percent {
    width: 20%;
    vertical-align: top;
}

.width25percent {
    width: 25%;
    vertical-align: top;
}

.width24percent {
    width: 20%;
    vertical-align: top;
}

.width23percent {
    width: 20%;
    vertical-align: top;
}

.width22percent {
    width: 20%;
    vertical-align: top;
}

.width21percent {
    width: 20%;
    vertical-align: top;
}

.width20percent {
    width: 20%;
    vertical-align: top;
}

.width15percent {
    width: 20%;
    vertical-align: top;
}

.width14percent {
    width: 14%;
    vertical-align: top;
}

.width13percent {
    width: 13%;
    vertical-align: top;
}

.width12percent {
    width: 12%;
    vertical-align: top;
}

.width11percent {
    width: 11%;
    vertical-align: top;
}

.width10percent {
    width: 10%;
    vertical-align: top;
}

.width9percent {
    width: 9%;
    vertical-align: top;
}

.width8percent {
    width: 8%;
    vertical-align: top;
}

.width5percent {
    width: 5%;
    vertical-align: top;
}

.width4percent {
    width: 4%;
    vertical-align: top;
}

.panel-border {
    display: block;
    margin: 5px;
    border: 1px solid #ACBECE;
}

.fieldset-border {
    margin: 5px;
    border: 1px solid #ACBECE;
}

.fieldset-title {
    font-weight: bold;
    margin: 0 10px 0 18px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 8.7pt;
}

.fieldset-container {
    margin: 5px 5px 8px 5px;
}

.rich-table-headercell a {
    color: #000;
}

.rich-table-column-Disabled {
    background-color: lightgray;
}

.rich-table-column-Enabled {
    background-color: white;
}

.main-menu-item {

}

.row-order-cell {
    width: 26px;
    padding: 0 2px !important;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.row-order {
    display: inline-block;
    line-height: 8px;
}

.row-order-link {
    display: block;
    font-size: 9px;
    line-height: 9px;
    color: #9aa0a6;
    text-decoration: none;
    cursor: pointer;
}

a.row-order-link:hover {
    color: #1a73e8;
    text-decoration: none;
}

.row-order-link-disabled {
    color: #dadce0;
    cursor: default;
}

.select-image-middle {
    cursor: pointer;
    border: 0px;
    vertical-align: middle;
    margin: 1px 1px 1px 1px;
}

.select-image {
    cursor: pointer;
    border: 0px;
    vertical-align: middle;
}

/* Resaltado de fila al pasar el mouse (tablas de cuentas y facturas del asiento) */
.hoverable-rows tbody tr:hover td {
    background-color: #eaf2fb;
}

/* Acciones de proveedor por fila. La lupa (relacionar) va flotada a la derecha de la
   celda; la "x" (quitar) va inline, justo despues del proveedor en la descripcion.
   Iconos chicos para un aspecto minimalista. */
.row-provider-search {
    float: right;
    white-space: nowrap;
    margin-left: 8px;
}

.row-provider-clear {
    margin-left: 0;
}

.row-provider-icon {
    cursor: pointer;
    border: 0;
    vertical-align: middle;
    width: 13px;
    height: 13px;
}

/* La "x" de quitar proveedor: al alto de una mayuscula y alineada con el texto. */
.row-provider-x-icon {
    cursor: pointer;
    border: 0;
    vertical-align: middle;
    width: 11px;
    height: 11px;
}

/* Espacio fijo reservado a la derecha del Debe/Haber para el boton "=" (Completar).
   Se reserva en todas las filas (vacio en las que no llevan boton) para que las cajas
   de texto queden alineadas entre si. Se mantiene al minimo para no ensanchar la columna. */
.complete-balance-slot {
    display: inline-block;
    width: 13px;
    text-align: center;
    vertical-align: middle;
}

.complete-balance-icon {
    cursor: pointer;
    border: 0;
    vertical-align: middle;
    width: 12px;
    height: 12px;
}

.panel-tree {
    overflow: scroll;
    width: 400px;
    height: 350px;
    display: block;
}

.panel-select-multiple {
    overflow: scroll;
    background-color: white;
    width: 350px;
    height: 150px;
    display: block;
}

/*progressBar*/

.progressActive {
    background: transparent url(../img/progress_active.gif) repeat-x scroll left top;
    height: 17px;
    margin: 1px;
}

.outProgress {
    margin: 0;
}

.outProgressBg {
    width: 300px;
    height: 17px;
    border: 1px solid #d9d9d9;
    background: #FFF;
}

.progressCompleted {
    background: url('../img/progress_bg.gif') repeat-x top left;
    display: block;
    margin: 1px;
    height: 17px;
}

.outProgressTxt {
    color: #484848;
    font-size: 9pt;
    font-family: Arial, Verdana, sans-serif;
}

.bold {
    font-weight: bold;
}

input[type="text"].disabledInput {
    color: #555252;
    background: #ceced6;
}

/* Campos bloqueados: legibles sin dejar de verse bloqueados.
   Las clases .input* solo definen el ancho, asi que el color de un campo
   deshabilitado lo ponia el navegador: texto al 30% de opacidad, por debajo de
   cualquier minimo legible.
   Chrome ignora `color` en un input disabled y usa -webkit-text-fill-color;
   Safari ademas le baja la opacity. Por eso van las tres declaraciones.
   El !important es por CONTROL_SKINNING, que inyecta sus propias reglas.
   Solo color y fondo: nada de bordes, alto ni fuente, para no repetir el
   flicker que dio el skinning de controles. */
input[disabled],
textarea[disabled],
select[disabled] {
    color: #4a4a4a !important;
    -webkit-text-fill-color: #4a4a4a;
    opacity: 1;
    background-color: #ececec;
}

.tiny-menu-option-list {
    height: 22px;
}

.tiny-menu-cell {
    padding: 0 4px 0 4px;
}

.tiny-menu-cell-border {
    text-decoration: underline;
    cursor: pointer;
}

.tiny-menu-cell-border div {
    font-weight: normal;
}

.no-bullets {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.label-blue {
    color: #0d47a1;
}
/* Bloques de logo de "Preferencias de compania" */
.logoBlock {
    display: inline-block;
    vertical-align: top;
    margin: 6px 24px 12px 0;
    padding: 10px;
    border: 1px solid #dcdcdc;
    background: #fbfbfb;
    min-width: 330px;
}

.logoTitle {
    font-weight: bold;
    margin-bottom: 8px;
}

.logoPreview {
    padding: 8px;
    border: 1px solid #e0e0e0;
    background: #fff;
    display: inline-block;
    margin-bottom: 4px;
}

.logoEmpty {
    color: #888;
    font-style: italic;
    padding: 12px 0;
}

.logoRemove {
    display: block;
    margin-bottom: 8px;
}

.logoUpload {
    margin: 6px 0 4px 0;
}

.logoHint {
    color: #777;
    font-size: 0.85em;
    max-width: 330px;
}

/* Tab con errores de validacion en "Preferencias de compania" */
.tabInError {
    color: #c00 !important;
    font-weight: bold;
}

/* Ancho ampliado para cuentas y URLs en "Preferencias de compania" */
.input350 {
    width: 350px;
}

/*
   Nombre de columna a la derecha del input (texto informativo tecnico).
   Tamano absoluto y no 0.85em a proposito: en em depende de donde cuelgue el nodo
   -- 10,2px dentro de una fila .entry (9pt) pero 9,4px colgando del cuerpo de un
   rich:panel (11px del skin) --, y ahi se veia diminuto. 8pt es el escalon secundario
   que ya usa .textLabel.
*/
.colHint {
    color: #999;
    font-size: 8pt;
    margin-left: 8px;
    white-space: nowrap;
}

/*
   Nota al pie de un formulario. A diferencia de .colHint, que es un apunte corto al
   lado de un input y por eso va con nowrap, esta ocupa su propia linea, respeta el
   ancho del panel y corta el texto en varias lineas.
*/
.formNote {
    display: block;
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid #e3e3e3;
    color: #999;
    font-size: 8pt;
    line-height: 1.5;
    white-space: normal;
}

/* =========================================================================
   UI - componentes reusables (design layer de la app) (barra de filtros / toolbar / iconos)
   Diseno de referencia: view/finances/cashAccountList.xhtml
   Reutilizable en cualquier vista de lista aplicando estas clases.
   ========================================================================= */

/* Tipografia base del sistema (Verdana ~11px) para que no desencaje con el resto. */

/* Barra de filtros: una sola linea, discreta, sin caja pesada. */
.app-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    margin-bottom: 4px;
    background: #fff;
    border: 1px solid #e3e3e0;
    border-radius: 3px;
    font-family: Verdana, Arial, sans-serif;
}

/* Inputs y selects dentro de la barra: compactos, borde del sistema. */
.app-filterbar__input,
.app-filterbar__select {
    height: 26px;
    box-sizing: border-box;
    padding: 2px 6px;
    border: 1px solid #C3BBB6;
    border-radius: 3px;
    background: #fff;
    color: #616161;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

/* Variante centrada de la barra de filtros. row-gap reducido para juntar las dos
   filas (mantiene el column-gap horizontal de 6px de .app-filterbar). */
.app-filterbar--center {
    justify-content: center;
    row-gap: 3px;
}

/* Salto de fila explicito dentro de una barra flex (para controlar que va en cada
   fila en lugar de dejar el wrap automatico). */
.app-filterbar__break {
    flex-basis: 100%;
    height: 0;
    margin: 0;
    padding: 0;
}

/* Proveedor (selectPopUp) como "input con accion adentro": el icono (lupa/goma) se
   superpone al borde derecho del input y alterna segun haya o no seleccion. Scoped:
   solo afecta al contenedor con esta clase, no a otros selectPopUp del sistema.

   OJO: sirve SOLO cuando se muestra UN icono a la vez. Si el selectPopUp renderiza la
   lupa y la goma juntas, las dos se posicionan en el mismo lugar y la segunda tapa a la
   primera -la lupa deja de poder clickearse-. En ese caso NO usar este contenedor: el
   selectPopUp se pone suelto y sus iconos se acomodan en linea. */
.app-provider-inline {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.app-provider-inline .app-filterbar__input {
    padding-right: 26px;
}
.app-provider-inline .select-image-middle {
    position: absolute;
    right: 5px;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
    cursor: pointer;
}

.app-filterbar__input {
    width: 200px;
}

/* Codigo: cabe ~10 digitos, no necesita ancho completo. */
.app-filterbar__input--code {
    width: 110px;
}

/* Campo de fecha (dd/mm/aaaa) compacto (usado por rich:calendar via inputClass). */
.app-filterbar__input--date {
    width: 92px;
}

.app-filterbar__select {
    min-width: 150px;
}

/* Boton "Nuevo" dentro de la barra de filtros: se empuja al extremo derecho.
   !important porque .app-btn-primary fija margin:0 !important (para el skin). */
.app-filterbar .app-btn-primary {
    margin-left: auto !important;
}

/* Combo de filas por pagina (junto al paginador, minimalista). */
.app-pagesize {
    height: 20px;
    box-sizing: border-box;
    padding: 0 4px;
    border: 1px solid #C3BBB6;
    border-radius: 3px;
    background: #fff;
    color: #616161;
    font-family: Verdana, Arial, sans-serif;
    font-size: 9pt;
    vertical-align: middle;
    outline: none;
}
.app-pagesize:focus {
    border-color: #578BB8;
}

.app-filterbar__input:focus,
.app-filterbar__select:focus {
    border-color: #578BB8;
    box-shadow: 0 0 0 2px rgba(87, 139, 184, .15);
}

.app-filterbar__input::-webkit-input-placeholder { color: #a7a29c; }
.app-filterbar__input::-moz-placeholder { color: #a7a29c; }
.app-filterbar__input:-ms-input-placeholder { color: #a7a29c; }

/* Checkbox con su label corto en linea (no admite placeholder). */
.app-filterbar__check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    color: #616161;
    white-space: nowrap;
}

.app-filterbar__check input {
    margin: 0;
    vertical-align: middle;
}

/* Toolbar de acciones sobre la tabla: fila compacta alineada a la derecha. */
.app-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 4px 0;
}

/* Boton icon-only con tooltip (title). Se renderiza como <a> (commandLink). */
.app-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    box-sizing: border-box;
    border: 1px solid #C3BBB6;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
    transition: background .15s, border-color .15s;
}

.app-iconbtn:hover {
    background: #f2f4f7;
    border-color: #a9bccf;
}

.app-iconbtn img {
    display: block;
    width: 14px;
    height: 14px;
    border: 0;
}

.app-iconbtn--excel:hover {
    background: #eef7f0;
    border-color: #8dc4a2;
}

/* Boton primario reutilizable (accion destacada tipo "Nuevo"). Clase NUEVA:
   no toca .button / input.button que usan el resto de las vistas.
   s:button se renderiza como <input type="button">.
   En REPOSO conserva el aspecto ORIGINAL del boton del sistema (skin glassX): no se
   fuerza color; solo se bloquea la GEOMETRIA con !important para que RichFaces
   CONTROL_SKINNING no lo redimensione al cargar (evita el flicker). Al pasar el mouse
   cambia al azul del sistema #578BB8. */
.app-btn-primary {
    display: inline-block !important;
    height: 22px !important;
    line-height: 20px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 3px !important;
    font-family: Verdana, Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: normal !important;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background .15s, border-color .15s, color .15s;
}

.app-btn-primary:hover {
    background: #578BB8 !important;
    background-image: none !important;
    border: 1px solid #578BB8 !important;
    color: #fff !important;
    text-shadow: none !important;
    text-decoration: none;
}

/* -------------------------------------------------------------------------
   Tabs sutiles (capa app-tabs). Se aplican via los hooks de rich:tabPanel
   (tabClass / activeTabClass / inactiveTabClass / contentClass). Se neutraliza
   el gradiente del skin (background-image:none) para un look plano tipo Odoo.
   Scoped a .app-tabs: no afecta a otros rich:tabPanel del sistema.
   ------------------------------------------------------------------------- */
.app-tabs {
    border-collapse: collapse;
    margin-bottom: 6px;
}

/* Se apunta a las clases-hook (app-*) Y a las nativas de RichFaces
   (rich-tab-*, dr-tbpnl-*): las nativas estan SIEMPRE presentes (alta y edicion),
   asi el estilo se aplica de forma consistente en ambos modos. */
.app-tabs td.app-tab,
.app-tabs td.rich-tab-header,
.app-tabs td.dr-tbpnl-tab {
    background: #f4f5f7 !important;
    background-image: none !important;
    border: 1px solid #e3e3e0 !important;
    border-bottom: 0 !important;
    padding: 5px 14px !important;
    font-family: Verdana, Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: normal !important;
    color: #6b6b6b !important;
}

.app-tabs td.app-tab-inactive,
.app-tabs td.rich-tab-inactive,
.app-tabs td.dr-tbpnl-tab-inactive {
    cursor: pointer;
}

.app-tabs td.app-tab-inactive:hover,
.app-tabs td.rich-tab-inactive:hover,
.app-tabs td.dr-tbpnl-tab-inactive:hover {
    background: #eef2f7 !important;
    color: #34617f !important;
}

.app-tabs td.app-tab-active,
.app-tabs td.rich-tab-active,
.app-tabs td.dr-tbpnl-tab-active {
    background: #ffffff !important;
    background-image: none !important;
    color: #34617f !important;
    font-weight: bold !important;
    border-top: 2px solid #578BB8 !important;
    padding-top: 4px !important;
}

/* Linea base del encabezado, alineada con el borde del contenido. */
.app-tabs td.dr-tbpnl-tabline-vis,
.app-tabs td.dr-tbpnl-tabline-hidden,
.app-tabs td.rich-tabhdr-side-cell,
.app-tabs td.rich-tabhdr-side-border {
    border-bottom: 1px solid #e3e3e0 !important;
    background: transparent !important;
    background-image: none !important;
}

.app-tabs td.app-tab-content,
.app-tabs td.rich-tabpanel-content,
.app-tabs td.dr-tbpnl-content {
    border: 1px solid #e3e3e0 !important;
    background: #ffffff !important;
    padding: 14px !important;
}

/* Aviso cuando un tab no aplica todavia (ej. Articulos en alta). */
.app-tab-empty {
    color: #8a8a8a;
    font-style: italic;
    padding: 6px 2px;
}

/* ============================================================
   Pantalla "Cambiar contraseña" (view/admin/userSettings.xhtml)
   Sigue la linea de la app: usa rich:panel + skin nativo. Aqui solo
   se agrega lo propio: panel centrado, ojo mostrar/ocultar, medidor
   de fuerza fino y coincidencia en vivo. Scoped a .usr-pwd.
   ============================================================ */

/* panel centrado */
.usr-pwd { width: 560px; margin: 0 auto; }

/* columna de labels ancha y en una sola linea (si no, "Confirmar nueva
   contraseña" salta a dos lineas con el 22% por defecto) */
.usr-pwd .entry .label { width: 200px !important; white-space: nowrap; }

/* linea de usuario bajo la cabecera del panel (con aire arriba) */
.usr-pwd .pwd-user { margin: 14px 0 16px; font-size: 11px; color: #666; }

/* aire despues del ultimo campo, antes del borde inferior del panel */
.usr-pwd .pwd-space { height: 14px; }

/* input + ojo integrado a la derecha */
.usr-pwd .pwd-wrap { position: relative; display: inline-block; }
.usr-pwd .pwd-wrap .input { padding-right: 26px !important; }
.usr-pwd .pwd-eye {
    position: absolute; top: 50%; right: 5px; margin-top: -9px;
    width: 18px; height: 18px; line-height: 0;
    cursor: pointer; color: #7f8fa4;
}
.usr-pwd .pwd-eye:hover { color: #578BB8; }
.usr-pwd .pwd-eye svg { display: block; }
.usr-pwd .pwd-eye .pwd-eye__off { display: none; }
.usr-pwd .pwd-wrap.is-shown .pwd-eye__on  { display: none; }
.usr-pwd .pwd-wrap.is-shown .pwd-eye__off { display: block; }

/* pista de requisitos */
.usr-pwd .pwd-hint { margin: 3px 0 0; font-size: 10px; color: #999; }

/* medidor de fuerza (fino, discreto) */
.usr-pwd .pwd-strength { margin: 5px 0 0; display: none; }
.usr-pwd .pwd-strength.is-on { display: block; }
.usr-pwd .pwd-strength__track {
    display: inline-block; vertical-align: middle;
    width: 120px; height: 4px; border-radius: 2px; background: #e4e4e4; overflow: hidden;
}
.usr-pwd .pwd-strength__bar { display: block; height: 100%; width: 0; border-radius: 2px; }
.usr-pwd .pwd-strength__label { margin-left: 8px; font-size: 10px; vertical-align: middle; }
.usr-pwd .pwd-strength.lvl-weak   .pwd-strength__bar { width: 33%;  background: #c0504d; }
.usr-pwd .pwd-strength.lvl-medium .pwd-strength__bar { width: 66%;  background: #d9a441; }
.usr-pwd .pwd-strength.lvl-strong .pwd-strength__bar { width: 100%; background: #6a9a5b; }
.usr-pwd .pwd-strength.lvl-weak   .pwd-strength__label { color: #c0504d; }
.usr-pwd .pwd-strength.lvl-medium .pwd-strength__label { color: #b07d1e; }
.usr-pwd .pwd-strength.lvl-strong .pwd-strength__label { color: #567d47; }

/* coincidencia en vivo */
.usr-pwd .pwd-match { margin: 3px 0 0; font-size: 10px; display: none; }
.usr-pwd .pwd-match.is-on { display: block; }
.usr-pwd .pwd-match.ok { color: #567d47; }
.usr-pwd .pwd-match.no { color: #c0504d; }

/* ============================================================================
   .app-tag - resalta el texto de una celda (p.ej. el estado de un acopio corregido).
   Va SIEMPRE en linea y sin margenes verticales: reemplaza al texto en su lugar,
   no se agrega debajo, para no crecer el alto de la fila.
   Se declara con la especificidad de la celda de RichFaces (.rich-table-cell)
   porque el skin fija font-size/color en las celdas y de otro modo la pisa.
   ============================================================================ */
.app-tag,
.rich-table-cell .app-tag {
    display: inline-block;
    padding: 1px 5px;
    border: 1px solid #e3e3e0;
    border-radius: 3px;
    background: #f6f6f4;
    color: #616161;
    font-family: Verdana, Arial, sans-serif;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: .3px;
    white-space: nowrap;
}

/* Variante de atencion: el acopio fue corregido despues de aprobarse. */
.app-tag--warn,
.rich-table-cell .app-tag--warn {
    border-color: #e0c97f;
    background: #fdf6e3;
    color: #8a6d1f;
}

/* ============================================================================
   .app-progress - avance de un proceso lanzado a mano (p.ej. actualizar devengos).
   Deliberadamente SIN animacion: el progressBar de RichFaces se dibuja con un rayado
   que se mueve siempre, este al 0% o al 100%, y da la sensacion de que el proceso
   sigue corriendo cuando ya termino. Esta barra solo se llena y se queda quieta.
   ============================================================================ */
.app-progress {
    display: block;
    height: 14px;
    margin: 8px 0 4px;
    border: 1px solid #d7d7d4;
    border-radius: 3px;
    background: #f2f2f0;
    overflow: hidden;
}

.app-progress__fill {
    display: block;
    height: 100%;
    background: #8aa87b;
}

.app-progress__label {
    display: block;
    font-family: Verdana, Arial, sans-serif;
    font-size: 10px;
    color: #616161;
    margin-bottom: 8px;
}

/* Tooltip de la marca de correccion. */
.app-tooltip {
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    line-height: 16px;
    color: #616161;
    text-align: left;
}

/* Cuadro de impacto del modal de reversion. */
.app-revert-impact td {
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    padding: 2px 8px;
    text-align: right;
}
.app-revert-impact td:first-child {
    text-align: left;
}

/* Marca de auditoria en la columna de acciones: separa el icono del de editar. */
.app-audit-mark {
    margin-left: 4px;
}

/* ============================================================================
   .app-cal - grilla de planificacion del cronograma (grupos x dias).
   Es una planilla: filas de grupo, columnas de dia, una celda por turno. Se pinta
   con un clic, y todo el estilo esta en esta capa app-* para no tocar el skin.
   ============================================================================ */

/* Barra de la semana. */
.app-cal__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: 6px;
    border: 1px solid #d7d7d4;
    border-radius: 3px;
    background: #fbfbfa;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    color: #444;
}

.app-cal__spacer {
    flex: 1 1 auto;
}

.app-cal__nav {
    display: inline-flex;
    gap: 4px;
}

.app-cal__navbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    box-sizing: border-box;
    padding: 0 8px;
    border: 1px solid #C3BBB6;
    border-radius: 3px;
    background: #fff;
    color: #444;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.app-cal__navbtn:hover {
    background: #f2f4f7;
    border-color: #a9bccf;
    text-decoration: none;
}

.app-cal__range {
    font-weight: bold;
    color: #333;
    letter-spacing: .2px;
}

.app-cal__publish {
    text-decoration: none;
}

/* Paleta de turnos. El pincel activo lleva un anillo. */
.app-cal__palette {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    margin-bottom: 6px;
    border: 1px solid #e6e6e3;
    border-radius: 3px;
    background: #fff;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
}

.app-cal__palette-label {
    color: #616161;
    margin-right: 2px;
}

.app-cal__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 3px 9px;
    border: 1px solid #d7d7d4;
    border-radius: 11px;
    background: #f6f6f4;
    color: #444;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s;
}

.app-cal__chip:hover {
    border-color: #a9bccf;
    text-decoration: none;
}

.app-cal__chip--on {
    border-color: #578BB8;
    box-shadow: 0 0 0 2px rgba(87, 139, 184, .25);
}

.app-cal__chip--day {
    background: #fdf3dd;
    border-color: #e2c88a;
    color: #7a5a13;
}

.app-cal__chip--night {
    background: #e8eaf6;
    border-color: #b0b6e0;
    color: #3b4291;
}

.app-cal__chip--rest {
    background: #f4f4f2;
    border-style: dashed;
    color: #757575;
}

.app-cal__chip-name {
    font-weight: bold;
}

.app-cal__chip-hours {
    font-size: 10px;
    opacity: .85;
}

.app-cal__hint {
    color: #8a857f;
    font-size: 10px;
    margin-left: 6px;
}

/* La grilla. */
.app-cal__table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
}

.app-cal__head {
    padding: 5px 4px;
    border-bottom: 1px solid #d7d7d4;
    background: #f6f6f4;
    color: #616161;
    font-weight: normal;
    text-align: center;
}

.app-cal__head--group {
    width: 190px;
    text-align: left;
    padding-left: 8px;
}

.app-cal__head--total {
    width: 74px;
}

.app-cal__dow {
    display: block;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 10px;
}

.app-cal__dom {
    display: block;
    color: #333;
    font-weight: bold;
}

.app-cal__row td {
    border-bottom: 1px solid #efefec;
    vertical-align: middle;
}

.app-cal__group {
    padding: 4px 8px;
}

.app-cal__group-name {
    display: block;
    font-weight: bold;
    color: #333;
}

.app-cal__group-area {
    display: block;
    color: #8a857f;
    font-size: 10px;
}

/* Pintar la fila entera: discreto, aparece al pasar por la fila. */
.app-cal__rowfill {
    display: inline-block;
    margin-top: 2px;
    color: #578BB8;
    font-size: 10px;
    text-decoration: none;
    /* Oculto con visibility y no solo con opacity: invisible pero clickeable seria una
       trampa, y ademas asi no cambia el alto de la fila al aparecer. */
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s;
}

.app-cal__row:hover .app-cal__rowfill {
    visibility: visible;
    opacity: 1;
}

.app-cal__rowfill:hover {
    text-decoration: underline;
}

.app-cal__td {
    padding: 2px;
}

/* La celda ocupa todo el td para que el clic no tenga que ser preciso. */
.app-cal__cell {
    position: relative;
    display: block;
    min-height: 34px;
    box-sizing: border-box;
    padding: 4px 5px;
    border: 1px solid transparent;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.app-cal__cell:hover {
    border-color: #578BB8;
    text-decoration: none;
}

.app-cal__cell--day {
    background: #fdf3dd;
    border-color: #eeddb4;
    color: #7a5a13;
}

.app-cal__cell--night {
    background: #e8eaf6;
    border-color: #ccd0ec;
    color: #3b4291;
}

/* Descanso decidido: hay registro y dice que ese dia no hay jornada. */
.app-cal__cell--rest {
    background: #f4f4f2;
    border-color: #e6e6e3;
}

/* Sin planificar: no hay registro todavia. Casi invisible a proposito. */
.app-cal__cell--empty {
    background: #fff;
    border-color: #f0f0ed;
}

/* Borrador: punto ambar en la esquina. El motor todavia no ve este dia. */
.app-cal__cell--draft:after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d9a441;
}

.app-cal__cell--today {
    box-shadow: inset 0 0 0 1px #578BB8;
}

.app-cal__cell-name {
    display: block;
    font-weight: bold;
    line-height: 14px;
}

.app-cal__cell-hours {
    display: block;
    font-size: 10px;
    opacity: .8;
    line-height: 13px;
}

.app-cal__total {
    padding: 4px;
    text-align: center;
    font-weight: bold;
    color: #333;
    background: #fbfbfa;
}

.app-cal__empty {
    padding: 18px 10px;
    border: 1px dashed #d7d7d4;
    border-radius: 3px;
    background: #fbfbfa;
    color: #757575;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    text-align: center;
}

/* Variante verde de .app-tag: la semana esta publicada. */
.app-tag--published,
.rich-table-cell .app-tag--published {
    border-color: #a8c9a0;
    background: #eef7ea;
    color: #3f6b32;
}

/* Total del mes: mismo peso visual que el de la semana pero mas apagado, para que el
   numero que se vigila mientras se pinta siga siendo el de la semana. */
.app-cal__total--month {
    color: #757575;
    font-weight: normal;
}

/* Etiqueta de un campo dentro de la barra: mismo gris que el resto de la barra. */
.app-cal__label {
    color: #616161;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
}

/* Lista larga dentro de un modal: se desplaza sola en vez de estirar el dialogo mas
   alla de la pantalla. */
.app-cal__scroll {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #e6e6e3;
    border-radius: 3px;
}

/* ============================================================================
   .app-check - verificacion del control de asistencia, dia por dia.
   El objetivo es que un renglon se lea de un vistazo: que le tocaba, que marco y
   como cierra. El color va SOLO en el resultado; el resto queda neutro para que
   la vista salte a las filas con novedad.
   ============================================================================ */

.app-check__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    padding: 10px 14px;
    margin-bottom: 6px;
    border: 1px solid #d7d7d4;
    border-radius: 3px;
    background: #fbfbfa;
}

.app-check__stat {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.25;
}

.app-check__stat-value {
    font-family: Verdana, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.app-check__stat-label {
    font-family: Verdana, Arial, sans-serif;
    font-size: 10px;
    color: #8a857f;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.app-check__stat--absent .app-check__stat-value {
    color: #a33a3a;
}

.app-check__stat--warn .app-check__stat-value {
    color: #8a6d1f;
}

.app-check__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
}

.app-check__head {
    padding: 5px 8px;
    border-bottom: 1px solid #d7d7d4;
    background: #f6f6f4;
    color: #616161;
    font-weight: normal;
    text-align: left;
}

.app-check__head--time {
    width: 120px;
}

.app-check__row td {
    padding: 4px 8px;
    border-bottom: 1px solid #efefec;
    vertical-align: middle;
}

/* Al pasar el mouse se marcan las dos lineas de la fila, arriba y abajo.
   El fondo NO se toca: el color de cada fila ya dice algo -atraso, feriado, falta, dia sin
   jornada- y pisarlo con un gris de hover borraria ese dato justo cuando se lo esta mirando.
   Las lineas van por box-shadow interior y no por borde: el borde cambiaria el alto de la fila
   y la tabla saltaria un pixel al pasar el mouse. El borde propio se vuelve transparente para
   que no queden dos rayas juntas. */
.app-check__table tbody tr:hover td {
    border-bottom-color: transparent;
    box-shadow: inset 0 1px 0 #b0bac4, inset 0 -1px 0 #b0bac4;
}

/* Los dias sin jornada se apagan: no son novedad, son la mayoria del mes. */
.app-check__row--rest td {
    color: #a7a29c;
    background: #fcfcfb;
}

.app-check__row--warn td {
    background: #fdf9ee;
}

.app-check__row--absent td {
    background: #fdf0f0;
}

/* El pie de totales: la linea gruesa arriba es la que dice "esto ya no es una fila mas". */
.app-check__total td {
    padding: 6px 8px;
    border-top: 2px solid #d7d7d4;
    font-weight: bold;
}

.app-check__day {
    white-space: nowrap;
}

.app-check__dow {
    display: inline-block;
    width: 34px;
    color: #8a857f;
    text-transform: uppercase;
    font-size: 10px;
}

.app-check__time {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.app-check__marks {
    color: #757575;
}

/* Cada marca del biometrico, tal cual vino. */
.app-check__mark {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 4px;
    border: 1px solid #e6e6e3;
    border-radius: 3px;
    background: #fff;
    font-size: 10px;
}

.app-tag--ok,
.rich-table-cell .app-tag--ok {
    border-color: #a8c9a0;
    background: #eef7ea;
    color: #3f6b32;
}

.app-tag--absent,
.rich-table-cell .app-tag--absent {
    border-color: #dda8a8;
    background: #fbeaea;
    color: #a33a3a;
}

/* Feriado: violeta.
   El rojo y el ambar de esta pantalla son una escala de GRAVEDAD -falta, atraso-, y un
   feriado no es un problema de ninguna gravedad: es un dia de otra naturaleza. Meterlo en
   esa escala lo hacia competir con la falta, del que ademas quedaba casi indistinguible.
   El violeta sale de esa escala, y a diferencia del naranja se sigue distinguiendo del rojo
   con daltonismo rojo-verde. */
.app-check__row--holiday td {
    background: #f6f3fb;
}

.app-tag--holiday,
.rich-table-cell .app-tag--holiday {
    border-color: #c9bce4;
    background: #f0eafa;
    color: #5a3f96;
}


/* La etiqueta del feriado va junto a la fecha: es un hecho del calendario y tiene que
   verse siempre, tanto si suspendio la jornada como si la persona igual trabajo. */
.app-check__holiday {
    margin-left: 6px;
}

/* Aclaracion de un campo, en su propia linea.
   Dentro del campo se ponia al lado del calendario y empujaba el renglon. Y NO usa .formNote
   a proposito: esa clase lleva un border-top que dibuja una linea divisoria en medio del
   formulario. La alineacion de las etiquetas queda como la del resto del sistema. */
.app-fieldnote {
    clear: both;
    margin: 2px 0 10px 2px;
    color: #8a857f;
    font-family: Verdana, Arial, sans-serif;
    font-size: 10px;
    line-height: 1.4;
}

/* Entrada y salida en casillas de ancho fijo: se alinean entre filas, y cuando falta una
   marca el hueco queda en su lugar en vez de correr todo el renglon. */
.app-check__in {
    display: inline-block;
    width: 38px;
    text-align: right;
}

.app-check__sep {
    display: inline-block;
    width: 16px;
    text-align: center;
    color: #a7a29c;
}

.app-check__out {
    display: inline-block;
    width: 38px;
    text-align: left;
}

/* Marca que falta: se ve el hueco, sin competir con las horas reales. */
.app-check__nomark {
    color: #c4bfb9;
}

/* Varios botones de icono en una celda de acciones: separacion pareja y centrada. */
.rich-table-cell .app-iconbtn + .app-iconbtn {
    margin-left: 4px;
}

/* Accion destructiva o de cierre: se tine al pasar el mouse, no en reposo, para que la
   fila no se lea como un error. */
.app-iconbtn--danger:hover {
    background: #fbeaea;
    border-color: #dda8a8;
}

/* ============================================================================
   .app-ico - iconos como MASCARA, no como imagen.
   Un <img> no se puede recolorear desde CSS: el color queda quemado dentro del
   archivo. Por eso habia seis colores distintos entre los iconos y un tacho que
   se veia rojo hasta en reposo. Usados como mascara, del archivo solo importa la
   FORMA y el color lo pone el contexto con `currentColor`.
   Los .svg no cambian: los mismos archivos sirven para las dos formas de uso.
   ============================================================================ */
.app-ico {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
}

.app-ico--edit      { -webkit-mask-image: url(../img/edit-line.svg);        mask-image: url(../img/edit-line.svg); }
.app-ico--trash     { -webkit-mask-image: url(../img/trash-line.svg);       mask-image: url(../img/trash-line.svg); }
.app-ico--search    { -webkit-mask-image: url(../img/search-line.svg);      mask-image: url(../img/search-line.svg); }
.app-ico--filterOff { -webkit-mask-image: url(../img/filter-off-line.svg);  mask-image: url(../img/filter-off-line.svg); }
.app-ico--excel     { -webkit-mask-image: url(../img/excel-line.svg);       mask-image: url(../img/excel-line.svg); }
.app-ico--pdf       { -webkit-mask-image: url(../img/pdf-line.svg);         mask-image: url(../img/pdf-line.svg); }
.app-ico--eye       { -webkit-mask-image: url(../img/eye-line.svg);         mask-image: url(../img/eye-line.svg); }
.app-ico--journal   { -webkit-mask-image: url(../img/journal-line.svg);     mask-image: url(../img/journal-line.svg); }
.app-ico--levels    { -webkit-mask-image: url(../img/levels-line.svg);      mask-image: url(../img/levels-line.svg); }
.app-ico--equals    { -webkit-mask-image: url(../img/equals-line.svg);      mask-image: url(../img/equals-line.svg); }
.app-ico--user      { -webkit-mask-image: url(../img/user-line.svg);        mask-image: url(../img/user-line.svg); }
.app-ico--userSearch{ -webkit-mask-image: url(../img/user-search-line.svg); mask-image: url(../img/user-search-line.svg); }
.app-ico--userMinus { -webkit-mask-image: url(../img/user-minus-line.svg);  mask-image: url(../img/user-minus-line.svg); }
.app-ico--exchange  { -webkit-mask-image: url(../img/exchange-line.svg);    mask-image: url(../img/exchange-line.svg); }
.app-ico--check     { -webkit-mask-image: url(../img/check-line.svg);       mask-image: url(../img/check-line.svg); }
.app-ico--close     { -webkit-mask-image: url(../img/x-line.svg);           mask-image: url(../img/x-line.svg); }
.app-ico--expand    { -webkit-mask-image: url(../img/chevron-right-line.svg); mask-image: url(../img/chevron-right-line.svg); }
.app-ico--collapse  { -webkit-mask-image: url(../img/chevron-down-line.svg); mask-image: url(../img/chevron-down-line.svg); }
.app-ico--alert     { -webkit-mask-image: url(../img/alert-line.svg);       mask-image: url(../img/alert-line.svg); }

/* El color lo decide el estado del boton, no el archivo. */
.app-iconbtn {
    color: #34617f;
}

.app-iconbtn:hover {
    color: #1f4a66;
}

.app-iconbtn--danger:hover {
    color: #a33a3a;
}

/* Condicion actual del contrato, arriba del formulario de cambio: sin esto no se sabe
   desde que se esta cambiando, y para una simple ampliacion hay que ir a mirar el listado. */
.app-cond__current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 6px 0 10px;
    padding: 6px 8px;
    border: 1px solid #e6e6e3;
    border-radius: 3px;
    background: #fbfbfa;
}

.app-cond__label {
    color: #8a857f;
    font-family: Verdana, Arial, sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.app-cond__history {
    display: block;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #efefec;
}

/* Una hora entra en 80px. La clase .input de 200px dejaba la caja tres veces mas ancha
   que su contenido y desalineaba el formulario del turno. */
.app-input--hour {
    width: 80px;
}

/* Campos de una barra de formulario (capa app-form).
   Cada campo es una UNIDAD en columna: arriba la etiqueta con su control, abajo una linea chica
   para lo que se calcula o para el error. Dos consecuencias buscadas:
   - la barra solo puede cortarse ENTRE campos, nunca entre una etiqueta y su campo;
   - mostrar un dato calculado o un error NO corre nada de lugar, porque crece hacia abajo en un
     alto que ya estaba reservado. */
.app-form {
    align-items: flex-start;
}

.app-form__field {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.app-form__row {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.app-form__label {
    color: #8a8a85;
}

/* La linea de abajo existe siempre, aunque este vacia: es lo que evita el salto. */
.app-form__hint {
    display: block;
    min-height: 13px;
    font-size: 10px;
    line-height: 13px;
    color: #8a8a85;
    white-space: nowrap;
}

.app-form__value {
    font-weight: bold;
}

/* Las ruedas de hora y minutos: angostas, para que el reloj se lea como un reloj. */
.app-form__spin {
    width: 26px;
    text-align: center;
}

/* El detalle cede lugar: se encoge si falta, pero no crece. */
.app-form__field--detail {
    flex: 0 1 220px;
    min-width: 90px;
}

.app-form__field--detail input {
    width: 100%;
    box-sizing: border-box;
}

/* Contra el borde derecho: lo que se muestre aca no empuja ningun campo. */
.app-form__field--end {
    margin-left: auto;
}

/* Aire entre un campo y su aclaracion. Va por hermano adyacente y no en .app-tag: esa clase
   tambien se usa dentro de celdas de tabla, donde un margen a la izquierda desalinearia. */
input + .app-tag,
select + .app-tag,
textarea + .app-tag {
    margin-left: 6px;
}


/* Planilla de sueldos: nombre y puesto en UNA linea.
   La tabla tiene veintitantas columnas de numeros y el navegador reparte el ancho a ojo, asi
   que las dos columnas de texto largo se parten en tres renglones y la fila queda del alto de
   un parrafo. Se les fija un minimo y se les prohibe el corte; las de numeros no lo necesitan
   porque su contenido es corto y de ancho previsible. */
.app-payroll__name,
.app-payroll__charge {
    white-space: nowrap;
}

.app-payroll__name {
    min-width: 220px;
}

.app-payroll__charge {
    min-width: 230px;
}

/* Cargo en la planilla de administrativos: una linea, letra un punto mas chica y ancho fijo;
   lo que no entra se corta con '...' y el title muestra el texto completo. */
.app-payroll__job-text {
    display: block;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 92%;
}

/* Cargo en Condicion de contratos: misma idea que en la planilla, ancho fijo y una sola linea.
   Lo que no entra se corta con '...' y el title muestra el nombre completo. */
.app-contract__charge-text {
    display: block;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 92%;
}

/* Contrato cerrado: la fila entera en gris medio para separarla de las vigentes sin esconderla.
   No se toca el fondo, que pelearia con el resaltado del mouse y con la fila alternada. Es el
   mismo gris que ya usan las etiquetas atenuadas del sistema: 4:1 de contraste, un escalon por
   debajo del minimo accesible pero todavia comodo de leer en pantalla.
   Va celda por celda porque el dataTable de RichFaces 3.3 no admite clase de fila condicional. */
.app-contract__row--dim,
.rich-table-cell.app-contract__row--dim {
    color: #8a857f;
}

/* Sueldo en Condicion de contratos: a la derecha, para que los decimales queden en columna, pero
   despegado del borde. Va padding y no margin: en un <td> el margin no se aplica. */
.app-contract__salary {
    padding-right: 20px;
}

/* La modalidad en una letra dentro de una etiqueta: L laboral, E eventual. El nombre completo y
   si es el contrato principal van en el tooltip. El ancho minimo es para que la E y la L, que no
   miden lo mismo, dejen todos los recuadros de la columna del mismo tamanio. */
.app-contract__mode,
.rich-table-cell .app-contract__mode {
    min-width: 10px;
    white-space: nowrap;
    text-align: center;
    font-weight: bold;
}

/* En una fila de contrato cerrado la etiqueta se atenua con el resto: el color propio de
   .app-tag le ganaria al gris de la fila y el recuadro quedaria mas oscuro que su texto. */
.rich-table-cell.app-contract__row--dim .app-tag {
    color: #8a857f;
}

/* Cabecera de dos filas (grupos + columnas): los titulos de uno y dos renglones centrados. */
.app-payroll th {
    vertical-align: middle !important;
}