/*
   CSS styling examples for the Vaadin app.

   Visit https://vaadin.com/docs/styling/application-theme/ for more information.
*/

/* Example: CSS class name to center align the content */
.centered-content {
  margin: 0 auto;
  max-width: 250px;
}

/* Example: the style is applied only to the textfields which have the `bordered` class name. */
vaadin-text-field.bordered::part(input-field) {
  box-shadow: inset 0 0 0 1px var(--lumo-contrast-30pct);
  background-color: var(--lumo-base-color);
}

/*
 * mis estilos - coment en Tracking-v1.1
 */

/*
 * media queries: que se puede pedir?
 * no son solo los tamanyos; es posible usar (orientation: landscape)
 * es posible usar operadores logicos: and/or y parentesis... ajem!
 */

:root {
  font-family: "Segoe UI", Roboto, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%; /* coge del tamanyo en curso del navegador */
  background-color: #f0f0f0;
}

/* probar url("ini.css") para prod builds - ACT no funciona */
@import "ini.css";
@import "gen.css";

/* eof */
/*
 * CSS de la primera pagina
 *
 * comentarios principales en query.css
 */

*, *::before, *::after {
    box-sizing: border-box;
}

/*
 * variables para pantallitas de mierda - coment en Tracking-v1.1
 *
 * meto v-ini solo para --comp-hdr-height porque es especifico para
 * la primera pagina
 */
body {
    /* base */
    --comp-v-ini-hdr-height-ini: 120px;
    --comp-v-ini-font-size-hdr-ini: 1.6rem;

    --comp-hdr-height-ini: 80px;
    --comp-ftr-height-ini: 50px;
    --comp-padding-ini: 2rem;
    --comp-font-size-hdr-ini: 1.2rem;
    --comp-font-size-ftr-ini: 0.8rem;
    --comp-font-size-m-ini: 1rem;
    /* deriv */
    --comp-v-ini-hdr-height: var(--comp-v-ini-hdr-height-ini);
    --comp-v-ini-font-size-hdr: var(--comp-v-ini-font-size-hdr-ini);
    --comp-hdr-height: var(--comp-hdr-height-ini);
    --comp-ftr-height: var(--comp-ftr-height-ini);
    --comp-padding: var(--comp-padding-ini);
    --comp-font-size-hdr: var(--comp-font-size-hdr-ini);
    --comp-font-size-ftr: var(--comp-font-size-ftr-ini);
    --comp-font-size-s: var(--comp-font-size-m-ini * 0.9);
    --comp-font-size-m: var(--comp-font-size-m-ini);
    --comp-font-size-l: calc(var(--comp-font-size-m-ini) * 1.1);
}

div {
    font-size: var(--comp-font-size-m);
}

.v-ini {
    @media (max-width: 400px) or (max-height: 400px) {
        --comp-v-ini-hdr-height: calc(var(--comp-v-ini-hdr-height-ini) / 2);
        --comp-v-ini-font-size-hdr: calc(var(--comp-v-ini-font-size-hdr-ini) / 2);
        --comp-padding: calc(var(--comp-padding-ini) / 2);
        --comp-ftr-height: calc(var(--comp-ftr-height-ini) / 2);
        --comp-font-size-ftr: calc(var(--comp-font-size-ftr-ini) / 1.5);
    }

    vaadin-vertical-layout {
        &.mid {
            /* transform lo mueve de sitio sin sacarlo del flexbox */
            transform: translateY(var(--comp-v-ini-hdr-height)); /* altura de hdr-pod */
            /*background: url("images/belt.jpg");*/
            background: #ffffff;
            background-size: cover;
            background-position: center;
            /* se ha de especificar; background no asigna tamanyo al contenedor */
            height: calc(100vh - var(--comp-v-ini-hdr-height) - var(--comp-ftr-height));
            overflow-y: auto;
            /*justify-content: center !important;*/
            justify-content: flex-start !important;
        }
        padding: 0px;
        /* propiedades que vaadin inyecta en vert-layout; aqui fuerzo valores diferentes */
        align-items: center !important;
    }

    vaadin-horizontal-layout {
        &.hdr-pod {
            position: fixed;
            top: 0;
            left: 0;
            background-color: #000000;
            height: var(--comp-v-ini-hdr-height);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            width: 100%;
            display: flex;
            /* propiedades que vaadin inyecta en horiz-layout; aqui fuerzo valores diferentes */
            /* no hay nada mas que hacer en el programa en kotlin */
            justify-content: space-between !important;
            align-items: center !important;
        }
        .hdr-left {
            gap: 0px;
            .cia-img {
                /* 120: resta 20px; 60: resta 10px; lo dejo en una formula */
                height: calc(var(--comp-v-ini-hdr-height) - (var(--comp-v-ini-hdr-height) / 6)); /* (1) */
                padding-left: var(--comp-padding);
            }
            .cia-txt {
                padding: var(--comp-padding);
                font-weight: light;
                font-size: var(--comp-v-ini-font-size-hdr);
                color: white;
            }
            justify-content: flex-start !important;
            align-items: center !important;
        }
        .hdr-right {
            gap: 0px;
            .svc-txt {
                padding: var(--comp-padding);
                font-weight: bold;
                font-size: var(--comp-v-ini-font-size-hdr);
                color: white;
            }
            /* coment en Tracking-v1.1 */
            /* no uso label pero esto funciona; lo dejo como documentacion */
            .cb-lang::part(label) {
                color: white;
            }
            .cb-lang::part(input-field) {
                background: white;
                margin: 1rem; /* esto no hace nada; no hay propiedad margin en todo el cb */
                /*font-size: .2rem;*/ /* tamanyo en el cb cerrado (no muy interesante) */
                /* width aqui se pone como cb-lang->width */
            }
            .cb-lang {
                width: 6em; /* ni fit-content ni auto funcionan asi que fijo y atps */
                .cb-item {
                    display: flex;
                    flex-direction: row;
                    gap: 0 var(--vaadin-gap-s);
                    align-items: flex-end;
                    font-size: 1rem; /* tamanyo del texto en el cb abierto (mas interesante) */
                    > img {
                        width: 16px;
                        height: 16px;
                        object-fit: contain;
                    }
                }
            }
            @media (max-width: 400px) or (max-height: 400px) {
                .svc-txt {
                    display: none;
                }
            }
            justify-content: flex-end !important;
            align-items: center !important;
        }
        &.fld-pod {
            width: 60%;
            justify-content: flex-start !important;
            align-items: center !important;
        }
        &.int-pod {
            width: 60%;
            justify-content: flex-start !important;
            align-items: center !important;
        }
        &.html-pod {
            width: 60%;
            justify-content: flex-start !important;
            align-items: center !important;
            .html-item::first-line {
                color: darkblue;
                font-size: var(--comp-font-size-l);
                font-weight: bold;
            }
        }
        &.img-pod {
            width: 60%;
            justify-content: center !important;
            align-items: center !important;
            .w50pc {
                width: 50%;
            }
            .w100pc {
                width: 100%;
            }
        }
        &.multiline-pod {
            width: 60%;
            justify-content: flex-start !important;
            align-items: center !important;
        }
        &.radio-pod {
            width: 60%;
            justify-content: flex-start !important;
            align-items: center !important;
        }
        &.btn-pod {
            width: 60%;
            justify-content: flex-end !important;
            align-items: center !important;
        }
        &.upl-pod {
            width: 60%;
            justify-content: flex-start !important;
            align-items: center !important;
            .upl {
                &.error-border {
                    border: 2px solid red;
                    border-radius: 4px;
                }
            }
        }
        .vspacer-1rem {
            min-height: 1rem;
        }
        &.ftr-pod {
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: #000000;
            height: var(--comp-ftr-height);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            width: 100%;
            display: flex;
            /* propiedades que vaadin inyecta en horiz-layout; aqui fuerzo valores diferentes */
            /* no hay nada mas que hacer en el programa en kotlin */
            .copy {
                padding: var(--comp-padding);
                font-weight: light;
                font-size: var(--comp-font-size-ftr);
                color: white;
            }
            justify-content: center !important;
            align-items: center !important;
        }
    }
}

/*
 * notas
 *
 * (1)
 * divertidas mierdas de CSS: var(--v-ini-hdr-height) - 20px ni da error ni
 * calcula bien (!!??!11) WTPUTOFUCK el valor es 128 !!??
 * empezando con 120px y leyendo "- 20px" luego no se como conyos puede
 * . no dar error en el inspector de ff
 * . devolver 128... sic
 * ya esta; tenia que decirlo dos veces
 */

/* eof */
/*
 * mas coments, ver proys anteriores
 *
 * sintaxis estandar CSS, espacio vs junto
 * . vaadin-horizontal-layout .hdr-pod significa "clase hdr-pod dentro de horiz layout"
 * . vaadin-horizontal-layout.hdr-pod significa "elem horiz layout *AND* clase hdr-pod"
 * . vaadin-horizontal-layout, .hdr-pod significa "elem horiz layout *OR* clase hdr-pod" (, = or)
 *
 */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    /* base */
    --comp-hdr-height-ini: 80px;
    --comp-ftr-height-ini: 50px;
    --comp-padding-ini: 2rem;
    --comp-font-size-hdr-ini: 1.2rem;
    --comp-font-size-ftr-ini: 0.8rem;
    --comp-font-size-m-ini: 1rem;
    /* deriv */
    --comp-hdr-height: var(--comp-hdr-height-ini);
    --comp-ftr-height: var(--comp-ftr-height-ini);
    --comp-padding: var(--comp-padding-ini);
    --comp-font-size-hdr: var(--comp-font-size-hdr-ini);
    --comp-font-size-ftr: var(--comp-font-size-ftr-ini);
    --comp-font-size-s: var(--comp-font-size-m-ini * 0.9);
    --comp-font-size-m: var(--comp-font-size-m-ini);
    --comp-font-size-l: calc(var(--comp-font-size-m-ini) * 1.1);
}

div {
    font-size: var(--comp-font-size-m);
}

.v-a-days, .v-a-1, .v-a-2, .v-a-2idbag, .v-a-2mat, .v-a-2sec, .v-a-2idoth, .v-a-51, .v-d-1, .v-d-2, .v-dly, .v-fin {
    @media (max-width: 400px) or (max-height: 400px) {
        --comp-hdr-height: calc(var(--comp-hdr-height-ini) / 2);
        --comp-ftr-height: calc(var(--comp-ftr-height-ini) / 2);
        --comp-padding: calc(var(--comp-padding-ini) / 2);
        --comp-font-size-hdr: calc(var(--comp-font-size-hdr-ini) / 2);
        --comp-font-size-ftr: calc(var(--comp-font-size-ftr-ini) / 1.5);
    }

    vaadin-vertical-layout {
        /*gap: var(--lumo-space-s);*/
        gap: 0px;
        &.mid {
            /* transform lo mueve de sitio sin sacarlo del flexbox */
            transform: translateY(var(--comp-hdr-height)); /* altura de hdr-pod */
            /*background: url("images/belt.jpg");*/
            background: #ffffff;
            background-size: cover;
            background-position: center;
            /* se ha de especificar; background no asigna tamanyo al contenedor */
            height: calc(100vh - var(--comp-hdr-height) - var(--comp-ftr-height));
            overflow-y: auto;
            /*justify-content: center !important;*/
            justify-content: flex-start !important;
        }
        padding: 0px;
        /*justify-content: center !important;*/
        align-items: center !important;
    }

    vaadin-horizontal-layout {
        &.hdr-pod {
            position: fixed;
            top: 0;
            left: 0;
            background-color: #000000;
            height: var(--comp-hdr-height);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            width: 100%;
            display: flex;
            z-index: 50;
            /* propiedades que vaadin inyecta en horiz-layout; aqui fuerzo valores diferentes */
            /* no hay nada mas que hacer en el programa en kotlin */
            justify-content: space-between !important;
            align-items: center !important;
        }
        .hdr-left {
            gap: 0px;
            .cia-img {
                height: calc(var(--comp-hdr-height) - 10px);
                padding-left: var(--comp-padding);
            }
            .cia-txt {
                padding: var(--comp-padding);
                font-weight: light;
                font-size: var(--comp-font-size-hdr);
                color: white;
            }
            justify-content: flex-start !important;
            align-items: center !important;
        }
        .hdr-right {
            gap: 0px;
            .svc-txt {
                padding: var(--comp-padding);
                font-weight: bold;
                font-size: var(--comp-font-size-hdr);
                color: white;
            }
            justify-content: flex-end !important;
            align-items: center !important;
        }
        &.fld-pod {
            width: 60%;
            justify-content: flex-start !important;
            align-items: center !important;
        }
        &.int-pod {
            width: 60%;
            justify-content: flex-start !important;
            align-items: center !important;
        }
        &.html-pod {
            width: 60%;
            justify-content: flex-start !important;
            align-items: center !important;
            .html-item {
            }
            .html-itemb {
                font-weight: bold;
            }
            .html-itemc {
                text-align: center;
            }
            .html-item-1bl::first-line {
                color: darkblue;
                font-size: var(--comp-font-size-l);
                font-weight: bold;
            }
        }
        &.html-pod-center {
            width: 60%;
            justify-content: center !important;
            align-items: center !important;
            .html-item {
            }
            .html-itemb {
                font-weight: bold;
            }
            .html-itemc {
                text-align: center;
            }
            .html-item-1bl::first-line {
                color: darkblue;
                font-size: var(--comp-font-size-l);
                font-weight: bold;
            }
        }
        &.img-pod {
            width: 60%;
            justify-content: center !important;
            align-items: center !important;
            .w15pc {
                width: 15%;
            }
            .w30pc {
                width: 30%;
            }
            .w50pc {
                width: 50%;
            }
            .w75pc {
                width: 75%;
            }
            .w100pc {
                width: 100%;
            }
        }
        &.multiline-pod {
            width: 60%;
            justify-content: flex-start !important;
            align-items: center !important;
        }
        &.radio-pod {
            width: 60%;
            justify-content: flex-start !important;
            align-items: center !important;
            .radio-items {
                /* nada (todavia) */
            }
            .radio-items-2col {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
            }
        }
        &.combo-pod {
            width: 60%;
            justify-content: flex-start !important;
            align-items: center !important;
        }
        &.btn-pod {
            width: 60%;
            justify-content: flex-end !important;
            align-items: center !important;
        }
        &.btn-pod-center {
            width: 60%;
            justify-content: center !important;
            align-items: center !important;
        }
        &.upl-pod {
            width: 60%;
            justify-content: flex-start !important;
            align-items: center !important;
            .upl {
                &.error-border {
                    border: 2px solid red;
                    border-radius: 4px;
                }
            }
        }
        /* no confundir este con multiline-pod; este es para combinar diferentes controles
         * en el mismo horizontal layout y el baseline este es como magico; las cosas quedan
         * visualmente alineadas */
        &.multi-pod-base {
            width: 60%;
            justify-content: flex-start !important;
            align-items: baseline !important;
            .upl {
                &.error-border {
                    border: 2px solid red;
                    border-radius: 4px;
                }
            }
        }
        &.multi-pod-center {
            width: 60%;
            justify-content: flex-start !important;
            align-items: center !important;
        }
        /*
         * 0rem: sin tamanyo; solo es para separar las definiciones de componentes cuando quiero
         * tener dos horizontal layout multi-pod juntos
         */
        .vspacer-0rem {
            min-height: 0rem;
        }
        .vspacer-1rem {
            min-height: 1rem;
        }
        .vspacer-2rem {
            min-height: 2rem;
        }
        .vspacer-4rem {
            min-height: 4rem;
        }
        .hspacer-5pc {
            width: 5%;
        }
        .hspacer-10pc {
            width: 10%;
        }
        &.ftr-pod {
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: #000000;
            height: var(--comp-ftr-height);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            width: 100%;
            display: flex;
            z-index: 50;
            /* propiedades que vaadin inyecta en horiz-layout; aqui fuerzo valores diferentes */
            /* no hay nada mas que hacer en el programa en kotlin */
            justify-content: center !important;
            align-items: center !important;
            .copy {
                padding: var(--comp-padding);
                font-weight: light;
                font-size: var(--comp-font-size-ftr);
                color: white;
            }
        }
    }
}

/* eof */