/* 
    Created on : 11/02/2021, 18:20:39
    Author     : diegocueva.com
*/

/* PrimeIcons de PrimeFaces 8 (mismo aspecto que el sitio Java 8). @import debe ir antes de cualquier regla. */
@import url("/resources/primeicons-pf8/primeicons-pf8.css");


.ui-g-1, .ui-g-2, .ui-g-3, .ui-g-4, .ui-g-5, .ui-g-6, .ui-g-7, .ui-g-8, .ui-g-9, .ui-g-10, .ui-g-11, .ui-g-12 {
    padding: 4px;
}

.ui-sm-1, .ui-sm-2, .ui-sm-3, .ui-sm-4, .ui-sm-5, .ui-sm-6, .ui-sm-7, .ui-sm-8, .ui-sm-9, .ui-sm-10, .ui-sm-11, .ui-sm-12 {
    padding: 4px;
}

.ui-md-1, .ui-md-2, .ui-md-3, .ui-md-4, .ui-md-5, .ui-md-6, .ui-md-7, .ui-md-8, .ui-md-9, .ui-md-10, .ui-md-11, .ui-md-12 {
    padding: 4px;
}

.ui-lg-1, .ui-lg-2, .ui-lg-3, .ui-lg-4, .ui-lg-5, .ui-lg-6, .ui-lg-7, .ui-lg-8, .ui-lg-9, .ui-lg-10, .ui-lg-11, .ui-lg-12 {
    padding: 4px;
}

.ui-datatable .ui-datatable-header,.ui-datatable .ui-datatable-footer{padding:1px; }

.header{
    position: relative;
    max-width: 480px; 
    margin: 0 auto;       
    z-index: 100;
}  

.footer{
    margin-top: 30px;
    font-size: small;
}

.titleMain {
    text-align: center;
    padding: 12px;
    font-size: x-large !IMPORTANT;
    font-weight: bolder;
}

.txLeft {
    text-align: left;
}

.txRight {
    text-align: right;
}

.txCenter {
    text-align: center;
}

.tblB90{
    border: solid 4px #FF2D2D;
    border-radius: 20px !IMPORTANT;
    width: 100%;
    border-collapse: collapse;
}
.trB90{

}
.tdB90{
    border: solid 4px #FF2D2D;
    text-align: center;
    vertical-align: middle;
    padding: 0px;
}
.numB90{
    font-size:3.5vw;
    font-weight: bolder;
    text-decoration: none;
}

.video-container{
    position: relative;
    width: 80%;
    padding-bottom: 56.25%; 
    height: 0;
    text-align: center;
    margin: auto;
}

.video-container iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.smallMono{
    font-size: smaller; 
    font-family: monospace;    
}

.formBox{
    border: 1px solid #EEFFEE;
    padding-top: 20px;
    padding-bottom: 20px;
}

/*
    Reemplazo de <p:layout fullPage="true"> + <p:layoutUnit position="center"> (PrimeFaces 15 ya no tiene p:layout).
    <div id="layoutMain"> ocupa toda la ventana (fijo, ignora el margin del body) y
    <div class="layoutUnitCenter ui-widget ui-widget-content ui-corner-all"> hace scroll dentro. Fondo, borde,
    fuente y color los pone el tema afterdark (resources/primefaces-afterdark/theme.css), como en PrimeFaces 8.
*/
#layoutMain {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#layoutMain > .layoutUnitCenter {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    box-sizing: border-box;
    /* PF 8: padding .2em del layoutUnit + .2em 0 de su .ui-layout-unit-content */
    padding: 0.4em 0.2em;
}

/*
    PrimeFaces 15 ya no pone la clase ui-corner-all en estos componentes (PF 8 sí, y afterdark la redondea a 3px).
    :where() = especificidad 0: cualquier border-radius propio de la página (login 20px, index 10px...) sigue ganando.
*/
/*
    p:inputSwitch (PF 8) -> p:toggleSwitch (PF 15). afterdark no tiene estilos para ui-toggleswitch (sin esto el
    interruptor es invisible). Mismo aspecto que el inputSwitch de producción: 53x26, fondo del panel
    (ui-widget-content), parte encendida con ui-state-active y texto "on"/"off", perilla con ui-state-default.
*/
.ui-toggleswitch {
    width: 4em;
    height: 2em;
}
.ui-toggleswitch .ui-toggleswitch-slider {
    border: 1px solid #262626;
    border-radius: 3px;
    background: radial-gradient(circle at 50% 75%, #676767, #343434);
    color: #ddd;
    font-size: 1em;
}
.ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider {
    background: linear-gradient(#6a5c6a, #8b798b);
    border-color: #000;
}
.ui-toggleswitch .ui-toggleswitch-slider::before {
    content: "off";
    position: absolute;
    top: 0;
    bottom: 0;
    right: .4em;
    display: flex;
    align-items: center;
}
.ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider::before {
    content: "on";
    right: auto;
    left: .4em;
    font-weight: bold;
}
.ui-toggleswitch .ui-toggleswitch-handler {
    top: 0;
    bottom: 0;
    left: 0;
    width: 1.8em;
    height: auto;
    border: 1px solid #262626;
    border-radius: 0;
    background: linear-gradient(#868686, #666);
}
.ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-handler {
    transform: translateX(2.05em);
}

/*
    p:dataTable paginator: PrimeFaces 15 renders the first/prev/next/last buttons empty and expects the theme to draw the
    icon with ::before. afterdark 1.1.0 has no such rule (the buttons show as small empty boxes), so the arrows come from
    the PrimeIcons PF8 font, same size as the page number buttons.
*/
.ui-paginator .ui-paginator-first,
.ui-paginator .ui-paginator-prev,
.ui-paginator .ui-paginator-next,
.ui-paginator .ui-paginator-last {
    min-width: 2em;
    font-size: 13px;
    line-height: 19px;
    vertical-align: middle;
    cursor: pointer;
}
.ui-paginator .ui-paginator-first::before,
.ui-paginator .ui-paginator-prev::before,
.ui-paginator .ui-paginator-next::before,
.ui-paginator .ui-paginator-last::before {
    font-family: 'primeicons-pf8';
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}
.ui-paginator .ui-paginator-first::before { content: "\e92d"; } /* pi-angle-double-left */
.ui-paginator .ui-paginator-prev::before  { content: "\e931"; } /* pi-angle-left */
.ui-paginator .ui-paginator-next::before  { content: "\e932"; } /* pi-angle-right */
.ui-paginator .ui-paginator-last::before  { content: "\e92e"; } /* pi-angle-double-right */
.ui-paginator .ui-state-disabled {
    cursor: default;
}

:where(.ui-button, .ui-inputfield, .ui-selectonemenu, .ui-autocomplete-input, .ui-panel, .ui-fieldset, .ui-fieldset-legend,
       .ui-toolbar, .ui-dialog, .ui-tabs, .ui-messages > div, .ui-growl-item-container) {
    border-radius: 3px;
}