/*
    Programador: Salvador Sifre Molina.
    Fecha: 11 de junio de 2016.

    Ultima revisión: 30 de noviembre de 2020.

 * *****************************************************************/

/*
    Reset and HTML 5.
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}


/* HTML 5 display-role reset */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

img {
    width: 100%;
}

h1 {
    font-size: 1.8em;
    padding: 0.4em 0.3em 0.2em 0.6em;
}

h2 {
    font-size: 1.4em;
    padding: 0.3em 1.6em;
    color: gray;
}

h3 {
    font-size: 1.1em;
    padding: 0.3em 1.6em;
}

header, nav, section, article, footer, div, input {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


::-webkit-input-placeholder {
    color: #ccc !important;
}

::-moz-placeholder {
    color: #ccc !important;
}

:-ms-input-placeholder {
    color: #ccc !important;
}



/* Styles for basic forms
 * *****************************************************************/
fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 75px;
}

.editor-label {
    margin: 1em 0 0 0;
}

.editor-field {
    margin: 0.5em 0 0 0;
}



/* Styles for validation helpers
 * *****************************************************************/
.field-validation-error {
    display: inline-block;
    font-size: 0.8em;
    font-style: oblique;
    color: #f00;
    padding-left: 0.5em;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #f00;
    margin: 1em;
}

    .validation-summary-errors ul {
        margin: 2em;
    }

        .validation-summary-errors ul li {
            margin: 0.25em 0.125em;
            list-style: none;
        }


.validation-summary-valid {
    display: none;
}



/*
    Estilos para las hojas de:
    - Privacidad.
    - Aviso Legal.
    - Condiciones Uso.
    - Política Cookies.
 * *****************************************************************/

section.privacidad h3,
section.aviso-legal h3,
section.condiciones-uso h3,
section.cookies h3 {
    margin-top: 2.5em;
    margin-bottom: 1.25em;
}

section.condiciones-uso ul {
    margin-left: 3em;
}

    section.condiciones-uso ul li {
        margin-bottom: 0.5em;
    }



/*
    Estilos para el marco de información sobre Cookies.
 * *****************************************************************/

div.marco-cookies-info {
    position: fixed;
    top: inherit;
    bottom: .5em;
    left: .5em;
    right: .5em;
    min-width: 280px;
    height: 16em;
    display: none;
    border: 1px solid #000;
    background-color: #ddd;
    color: darkblue;
    padding: 6px 6px 42px 6px;
    z-index: 200;
    box-shadow: 6px 4px #ddd;
    -moz-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}

div.marco-cookies-info-hide {
    visibility: hidden;
    opacity: 0;
    -moz-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}

div.marco-cookies-texto {
    position: absolute;
    left: 3px;
    top: 3px;
    right: 32px;
    bottom: 5em;
    padding: 0.5em 1em;
    overflow-y: scroll;
    border: 1px solid white;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.50);
}

ul.cookies {
    margin-left: 3em;
    margin-top: 1em;
}

    ul.cookies li {
        margin: 1em 0em;
    }

.cookies th {
    padding: 3px 3px;
    background-color: whitesmoke;
    border: 1px outset silver;
}

.cookies td {
    border-bottom: 1px solid silver;
    padding: 6px 9px;
    text-align: left;
}

table.cookies td.first {
    width: auto;
}

table.cookies td:last-child {
    text-align: left;
}


@media (min-width: 480px) {
    div.marco-cookies-info {
        height: 20em;
        -moz-transition: 1s;
        -o-transition: 1s;
        -webkit-transition: 1s;
        transition: 1s;
    }
}

@media (min-width: 768px) {
    div.marco-cookies-info {
        height: 28em;
        -moz-transition: 1s;
        -o-transition: 1s;
        -webkit-transition: 1s;
        transition: 1s;
    }

    div.marco-cookies-texto {
        overflow-y: hidden;
    }

    table.cookies td.first {
        width: 30%;
    }
}

@media (min-width: 1024px) {
    div.marco-cookies-info {
        height: 26em;
        -moz-transition: 1s;
        -o-transition: 1s;
        -webkit-transition: 1s;
        transition: 1s;
    }

    table.cookies td.first {
        width: 35%;
    }
}

@media (min-width: 1200px) {
    div.marco-cookies-info {
        height: 24em;
        -moz-transition: 1s;
        -o-transition: 1s;
        -webkit-transition: 1s;
        transition: 1s;
    }
}

/*  
    Botones ventana Cookies
 * *****************************************************************/
.marco-cookies-info .ui-st-button {
    padding: 1em;
}

.marco-cookies-info .ui-st-button:active {
    padding: 0.95em;
}

.marco-cookies-info .button-cookies-aceptar {
    position: absolute;
    right: 2em;
    bottom: 6px;
    color: white;
    background-color: rgb(39, 132, 191);
}

.marco-cookies-info .button-cookies-configurar {
    position: absolute;
    left: 1em;
    bottom: 6px;
    background-color: white;
}

.marco-cookies-info .button-cookies-cerrar {
    position: absolute;
    top: 6px;
    right: 6px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: gray;
    cursor: pointer;
}

    .marco-cookies-info .button-cookies-cerrar:hover {
        color: black;
    }


/*
    Botones progreso
 * *****************************************************************/
p.progreso-icono {
    margin: 1em 3em;
    line-height: 4em;
}

    p.progreso-icono img {
        width: 21px;
        margin: 0.5em;
        vertical-align: middle;
    }

    p.progreso-icono span {
        vertical-align: middle;
    }

p.progreso-barra {
    margin: 0.125em 0.5em;
    /*line-height: 2em;*/
}

    p.progreso-barra img {
        width: 60px;
        height: 9px;
    }

/* Estilos para información de ISSM */
p.ui-developed {
    font-size: 12px;
    margin-top: 1em;
    color: #aaa;
}

    p.ui-developed a {
        color: #aaa;
        text-decoration: none;
    }

        p.ui-developed a:hover {
            color: #333;
        }


/*  Marcos para los listados y formularios  */

section.ui-list,
div.ui-list {
    background-color: #f2f2f2;
    border: 1px solid silver;
    margin: 0.5em auto 1em auto;
    width: 98.6%;
    float: none;
    padding-top: 0.5em;
    min-height: 65vh;
}

    section.ui-list[class~='gray'],
    div.ui-list[class~='gray'],
    section.ui-list[class~='red'],
    div.ui-list[class~='red'],
    section.ui-list[class~='bgblue'],
    div.ui-list[class~='bgblue'],
    section.ui-list[class~='blue'],
    div.ui-list[class~='blue'] {
        padding-top: 0;
        padding-left: 0px;
        padding-right: 0px;
    }


section.ui-form,
div.ui-form,
section.ui-sub-form,
div.ui-sub-form {
    background-color: #f2f2f2;
    border: 1px solid silver;
    margin: 0.5em auto 1em auto;
    float: none;
    padding-top: 0.5em;
}

section.ui-form,
div.ui-form {
    width: 98.6%;
    min-height: 65vh;
}

section.ui-sub-form,
div.ui-sub-form {
    display: block;
    max-width: 1024px;
    min-height: 55vh;
}

section.ui-form > h2,
div.ui-form > h2 {
    color: gray;
    border-bottom: 1px solid #999;
    margin-bottom: 12px;
}

section.ui-form[class~='pd-bottom'],
div.ui-form[class~='pd-bottom'] {
    padding-bottom: 8em;
}

section.ui-form[class~='gray'],
div.ui-form[class~='gray'],
section.ui-form[class~='red'],
div.ui-form[class~='red'],
section.ui-form[class~='bgblue'],
div.ui-form[class~='bgblue'],
section.ui-form[class~='blue'],
div.ui-form[class~='blue'] {
    padding-top: 0;
    padding-left: 0px;
    padding-right: 0px;
}

.ui-form > .ui-frame-bottom,
.ui-form > form > .ui-frame-bottom {
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    height: auto;
}

.ui-form > footer,
.ui-form > form > footer {
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    height: auto;
}


@media (min-width: 768px) {

    section.ui-list,
    div.ui-list {
        width: 97.6%;
    }

        section.ui-list[class~='sb'],
        div.ui-list[class~='sb'] {
            box-shadow: 6px 9px 12px #ccc;
        }

    section.ui-form,
    div.ui-form {
        width: 97.6%;
    }

        section.ui-form[class~='pd-bottom'],
        div.ui-form[class~='pd-bottom'] {
            padding-bottom: 3em;
        }

        section.ui-form[class~='sb'],
        div.ui-form[class*='sb'] {
            box-shadow: 6px 9px 12px #ccc;
        }
}

/* 
    Titulo para listados y formulario 
*/

.ui-list > header,
.ui-form > header {
    position: relative;
    width: 100%;
    margin: 0px 0px 1em 0px;
    padding: 0.25em 1em;
    font-family: Verdana, sans-serif;
    font-weight: 400;
    font-size: 1.2em;
    font-variant: small-caps;
    border-bottom: 1px solid #ccc;
}


.ui-list[class~='bgblue'] > header,
.ui-form[class~='bgblue'] > header {
    color: #fff;
    font-weight: 600;
    background-color: #5176a9;
    border-bottom: 1px solid #fff;
}

.ui-list[class~='blue'] > header,
.ui-form[class~='blue'] > header {
    color: #235b90;
    font-weight: 600;
    background-color: rgb(169, 218, 251);
    border-bottom: 1px solid #235b90;
}

.ui-list[class~='red'] > header,
.ui-form[class~='red'] > header {
    color: #980505;
    font-weight: 600;
    background-color: #fac0c0;
    border-bottom: 1px solid #980505;
}

.ui-list[class~='gray'] > header,
.ui-form[class~='gray'] > header {
    color: #333;
    font-weight: 600;
    background-color: #ddd;
    border-bottom: 1px solid #333;
}


/* Marco dentro de un formulario */
section.ui-form .ui-marco,
div.ui-form .ui-marco {
    margin-top: 1em;
    padding-bottom: 0.5em;
    /*border-bottom: 1px solid #ccc;*/
}

    section.ui-form .ui-marco > header,
    div.ui-form .ui-marco > header {
        padding: 0.25em 0.5em;
        color: rgb(39, 132, 191);
        background-color: rgb(228, 240, 248);
        border-bottom: 1px solid rgb(39, 132, 191);
    }

    section.ui-form .ui-marco > table,
    div.ui-form .ui-marco > table {
        width: 100%;
        margin: 0.125em auto 0.5em auto;
    }

        section.ui-form .ui-marco > table th,
        div.ui-form .ui-marco > table th {
            font-size: 0.8em;
            color: rgb(119, 187, 230);
            border-bottom: 1px solid rgb(132, 195, 234);
            padding: 0.25em 6px 0.125em 6px;
        }

        section.ui-form .ui-marco > table tbody tr:nth-child(2n),
        div.ui-form .ui-marco > table tbody tr:nth-child(2n) {
            background-color: rgb(233, 233, 233);
        }



/* Estilos para la ficha */

section.ui-ficha > header,
div.ui-ficha > header {
    color: #666;
    font-size: 1.2rem;
    border-bottom: 1px solid #000;
    padding: 0.5em 0 0.25em 0.5em;
}



/* Marco para el formulario de Inicio Sesión */
section.fr-login {
    background-color: #f2f2f2;
    border: 1px solid #6cc2ff;
    margin: 1.5em auto 1em auto;
    padding: 0;
    width: 94%;
    max-width: 480px;
    float: none;
}

    section.fr-login > h4 {
        padding: 12px 12px 6px 12px;
        margin-bottom: 1em;
        color: #fff;
        background-color: #0094ff;
        border-bottom: 1px solid #333;
    }



/* Estilos de bordes */
.brdr-bttm[class~='gray'] {
    border-bottom: 1px solid #ccc;
}

.brdr-full {
    border: 1px solid #ccc;
}

.brdr-full-rds {
    border: 1px solid #ccc;
    /*border-radius: 1px;*/
}

    .brdr-full[class~='blue'],
    .brdr-full-rds[class~='blue'] {
        border: 1px solid rgb(39, 132, 191);
    }

    .brdr-full[class~='red'],
    .brdr-full-rds[class~='red'] {
        border: 1px solid #980505;
    }

    .brdr-full[class~='green'],
    .brdr-full-rds[class~='green'] {
        border: 1px solid #0fae0f;
    }