/* =========================================================
   Base global app / kiosk
   ========================================================= */

@font-face {
    font-family: "Roboto";
    src: url("/fonts/roboto/Roboto-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("/fonts/roboto/Roboto-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Oswald";
    src: url("/fonts/oswald/Oswald-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("/fonts/montserrat/Montserrat-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* Box sizing consistente para toda la app */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Evita scrollbars accidentales por focos o animaciones */
:focus {
    outline: none;
}

/* =========================================================
   Root app
   ========================================================= */

.z-app-root {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.z-app-loader {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* =========================================================
   Contenedores base reutilizables para layouts
   ========================================================= */

.z-screen {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.z-layout-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.z-layout-col {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Hijo que ocupa todo el espacio restante */
.z-fill {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Hijo de tamaño fijo (px, %, etc. definidos aparte) */
.z-fixed {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* =========================================================
   Utilidades para divisiones porcentuales o en píxeles
   ========================================================= */

/* Anchuras */
.z-w-10  { width: 10%; }
.z-w-20  { width: 20%; }
.z-w-25  { width: 25%; }
.z-w-30  { width: 30%; }
.z-w-33  { width: 33.333333%; }
.z-w-40  { width: 40%; }
.z-w-50  { width: 50%; }
.z-w-60  { width: 60%; }
.z-w-66  { width: 66.666667%; }
.z-w-70  { width: 70%; }
.z-w-75  { width: 75%; }
.z-w-80  { width: 80%; }
.z-w-90  { width: 90%; }
.z-w-100 { width: 100%; }

/* Alturas */
.z-h-10  { height: 10%; }
.z-h-20  { height: 20%; }
.z-h-25  { height: 25%; }
.z-h-30  { height: 30%; }
.z-h-33  { height: 33.333333%; }
.z-h-40  { height: 40%; }
.z-h-50  { height: 50%; }
.z-h-60  { height: 60%; }
.z-h-66  { height: 66.666667%; }
.z-h-70  { height: 70%; }
.z-h-75  { height: 75%; }
.z-h-80  { height: 80%; }
.z-h-90  { height: 90%; }
.z-h-100 { height: 100%; }

/* =========================================================
   Utilidades de flex grow proporcionales
   ========================================================= */

.z-flex-1 { flex: 1 1 0; min-width: 0; min-height: 0; }
.z-flex-2 { flex: 2 1 0; min-width: 0; min-height: 0; }
.z-flex-3 { flex: 3 1 0; min-width: 0; min-height: 0; }
.z-flex-4 { flex: 4 1 0; min-width: 0; min-height: 0; }
.z-flex-5 { flex: 5 1 0; min-width: 0; min-height: 0; }

/* =========================================================
   Scroll interno opcional
   Usar sólo cuando algún componente realmente lo necesite
   ========================================================= */

.z-scroll-y {
    overflow-x: hidden;
    overflow-y: auto;
    min-width: 0;
    min-height: 0;
}

.z-scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;
    min-height: 0;
}

.z-scroll {
    overflow: auto;
    min-width: 0;
    min-height: 0;
}

/* =========================================================
   Helpers visuales mínimos
   ========================================================= */

.z-bg-transparent {
    background: transparent;
}

.z-overflow-hidden {
    overflow: hidden;
}

.z-text-nowrap {
    white-space: nowrap;
}

.z-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.z-elemento-seleccionado {
    border: 1px solid red;
}

.z-layout-row-2 {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
}

.z-layout-cell {
    position: relative;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.z-layout-cell-auto {
    flex: 0 0 auto;
    width: auto;
}

.z-layout-cell-content {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.z-layout-col-2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
}

.z-marquee {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.z-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    white-space: nowrap;
    will-change: transform;
    animation-name: z-marquee-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 12s;
}

.z-marquee-text {
    flex: 0 0 auto;
    white-space: nowrap;
    display: inline-block;
    line-height: 1;
    padding-right: 3rem;
}

@keyframes z-marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-1 * var(--marquee-shift, 0px)));
    }
}

.z-texto-multilinea {
    width: 100%;
    height: 100%;
}

.z-texto-multilinea-texto {
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

.z-subpanel {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.z-subpanel-cell {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.z-subpanel-content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.z-fecha-hora {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.z-fecha-hora-texto {
    width: 100%;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}