/* ═══════════════════════════════════════════════════════════════════════════
   yz-app-skin.css — La piel de la app YUZIOT para los mockups (2026-09-13)
   ═══════════════════════════════════════════════════════════════════════════
   QUÉ ES
   Los módulos de contabilidad, defensa fiscal y auditoría todavía no tienen
   pantalla que capturar, así que su promesa se dibuja en HTML. Hasta hoy esos
   tres mockups usaban una ventana genérica (tres puntos de colores y un
   título), que se veía ajena a las capturas reales del producto que ya viven
   en la misma página. Esta hoja les da la piel del producto: el mismo header
   blanco con el isotipo, el mismo fondo cálido del área de trabajo, las mismas
   tarjetas blancas, los mismos KPIs y la misma tabla que `<yz-data-table>`.

   DE DÓNDE SALEN LOS VALORES
   Del tema **Industria 3** de la app (`app/components/tokens.css`, bloque
   `[data-theme="industria-3"]`), copiados como literales. NO se enlaza nada de
   `app/`: la landing es un sitio estático independiente y no debe depender de
   los archivos del producto. Si el tema de la app cambia, esta hoja se
   actualiza a mano — es una foto, no un espejo.

   POR QUÉ INDUSTRIA 3 (2026-09-13)
   Las capturas reales de los módulos se retomaron ese día en `industria-3` —
   el tema de header BLANCO— al estilo del deck v9. El mockup vive al lado de
   esas capturas en la misma página: si conservara el header oscuro del tema
   Claro, las dos piezas se leerían como dos productos distintos. Por eso el
   header pasó a blanco con el texto neutro cálido, el sujeto en el azul de
   marca `#0776aa` (gana 5,0:1 contra el blanco, el mismo piso de 4,5:1 que la
   app le exige al color del cliente antes de dejarlo pintar texto) y el área
   de trabajo al `#e2dedd` cálido de `--bg-app`.

   Los literales viven TODOS en las variables de `.yz-app` de acá abajo, así
   que refrescar la piel es tocar ese bloque y nada más.

   DÓNDE SE USA
   · `servicios.html` — los tres paneles, tamaño completo, dentro de una
     laptop `.yz-device--laptop` (como las capturas reales de los módulos).
   · `index.html` `#recorrido` — pasos 4 y 5, variante `.yz-app--mini`, en la
     misma caja y con el mismo marco que las miniaturas reales de los pasos
     1-3, para que las cinco se vean de la misma familia.

   ACCESIBILIDAD
   El panel entero es una ILUSTRACIÓN: lleva `role="img"` con un `aria-label`
   que resume la pantalla, y todo su interior va con `aria-hidden="true"`.
   Ningún texto de acá adentro es contenido real que un lector de pantalla
   deba recorrer pieza por pieza.

   REVERSIBILIDAD
   Hoja nueva y autocontenida: se quita el `<link>` y el markup y no queda
   nada colgando en las otras hojas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La pantalla ──────────────────────────────────────────────────────────── */
.yz-app {
    /* Paleta del tema Industria 3 de la app (tokens.css) — header BLANCO */
    --yzapp-header-bg: #ffffff;
    --yzapp-header-fg: #1b1613;
    --yzapp-header-dim: #5a514c;
    --yzapp-header-accent: #0776aa;
    --yzapp-header-border: rgba(40, 22, 18, .16);

    --yzapp-bg: #e2dedd;
    --yzapp-surface: #ffffff;
    --yzapp-surface-2: #f2efee;
    --yzapp-border: rgba(40, 22, 18, .14);
    --yzapp-border-soft: rgba(40, 22, 18, .08);
    --yzapp-shadow: 0 1px 2px rgba(30, 18, 14, .10);
    /* Riel y círculo apagado del stepper: gris de la misma familia cálida. */
    --yzapp-rail: #c9c3c1;

    --yzapp-text: #1b1613;
    --yzapp-text-2: #453d39;
    --yzapp-text-3: #5a514c;

    --yzapp-ok: #006e37;
    --yzapp-warn: #8f6000;
    --yzapp-err: #cd243f;
    --yzapp-info: #006e81;

    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--yzapp-bg);
    color: var(--yzapp-text);
    font-family: var(--font-body);
}

/* ── Header del módulo ────────────────────────────────────────────────────────
   En `industria-3` el header es BLANCO y el color de marca no entra como fondo:
   entra por el ISOTIPO (que lleva sus propios colores) y por el sujeto. Es la
   misma franja que traen las capturas reales que viven en la misma página, así
   que el panel se reconoce como una pantalla de YUZIOT sin repintar nada.
   ───────────────────────────────────────────────────────────────────────────── */
.yz-app-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 12px;
    background: var(--yzapp-header-bg);
    border-bottom: 1px solid var(--yzapp-header-border);
}

/* El isotipo va en SUS colores (#252e37 + #0995d7), no por máscara: sobre el
   header blanco se lee tal cual y es lo que muestran las capturas reales. La
   máscara monocroma era necesaria cuando el header era oscuro; acá aplanarlo a
   un solo tono le quitaría el acento cian que lo identifica. */
.yz-app-logo {
    flex: 0 0 auto;
    width: 31px;
    height: 28px;
    background: url("../images/yuziot-isotipo.svg?v=20260913-7") no-repeat center / contain;
}

.yz-app-id {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Rótulo del módulo. La app lo escribe chico, gris y con las letras separadas;
   se copia esa anatomía tal cual (sin mayúsculas forzadas: la app tampoco las
   usa acá, ver assets/images/modules/desktop/monitor-planta.jpg). */
.yz-app-eyebrow {
    font-size: 11px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--yzapp-header-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yz-app-subject {
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--yzapp-header-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yz-app-ctx {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: .02em;
    color: var(--yzapp-header-dim);
}

.yz-app-ctx span {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yz-app-gear {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--yzapp-header-dim);
}

/* ── Cuerpo y tarjetas ────────────────────────────────────────────────────── */
.yz-app-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px;
    overflow: hidden;
}

/* `flex: 0 0 auto` a propósito: sin eso, un panel con una tarjeta de más se
   COMPRIME en silencio (la tabla perdía dos de sus tres filas y nadie veía un
   error). Con el encogimiento apagado, lo que no entra se nota y se corrige. */
.yz-app-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: var(--yzapp-surface);
    border: 1px solid var(--yzapp-border);
    border-radius: 12px;
    box-shadow: var(--yzapp-shadow);
}

.yz-app-card--table {
    padding: 0;
    overflow: hidden;
}

/* Tarjeta de una sola línea: el rótulo a la izquierda y las cifras al lado. La
   usa el balance, donde apilar título y cifras costaba 24 px de alto que el
   panel no tiene. */
.yz-app-card--row {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.yz-app-card--row .yz-app-card-title {
    flex: 0 0 auto;
}

.yz-app-card--row .yz-app-figs {
    flex: 1 1 auto;
}

.yz-app-card-title {
    font-size: 12px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--yzapp-text-2);
}

.yz-app-card--table .yz-app-card-title {
    padding: 8px 10px 0;
}

/* ── KPIs ─────────────────────────────────────────────────────────────────────
   La rejilla se acomoda sola: con `auto-fit` los tres KPIs van en una fila
   cuando hay ancho y se reparten en dos cuando el panel se angosta, sin un
   media query por cada caja donde se usa el panel.
   ───────────────────────────────────────────────────────────────────────────── */
.yz-app-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
}

.yz-app-kpis--money {
    grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
}

.yz-app-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.yz-app-kpi-value {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--yzapp-text);
    white-space: nowrap;
}

/* El dinero necesita 14 caracteres; a 22 px no entra ni en la laptop. */
.yz-app-kpis--money .yz-app-kpi-value {
    font-size: 14px;
    line-height: 1.25;
}

.yz-app-kpi-label {
    font-size: 11px;
    line-height: 1.3;
    color: var(--yzapp-text-2);
}

.yz-app-kpi-meta {
    font-size: 10px;
    line-height: 1.3;
    color: var(--yzapp-text-3);
}

.yz-app-delta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 600;
    white-space: nowrap;
}

.yz-app-delta--up {
    background: rgba(0, 110, 55, .12);
    color: var(--yzapp-ok);
}

.yz-app-delta--down {
    background: rgba(205, 36, 63, .12);
    color: var(--yzapp-err);
}

/* ── Cifras enfrentadas (el balance) ──────────────────────────────────────── */
.yz-app-figs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.yz-app-fig {
    flex: 1 1 38%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.yz-app-fig i {
    font-style: normal;
    font-size: 11px;
    line-height: 1.3;
    color: var(--yzapp-text-2);
}

.yz-app-fig b {
    font-family: var(--font-display);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--yzapp-text);
    white-space: nowrap;
}

/* ── Chips de estado ──────────────────────────────────────────────────────── */
.yz-app-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.45;
    font-weight: 600;
    white-space: nowrap;
}

.yz-app-chip--ok {
    background: rgba(0, 110, 55, .12);
    color: var(--yzapp-ok);
}

.yz-app-chip--warn {
    background: rgba(143, 96, 0, .12);
    color: var(--yzapp-warn);
}

.yz-app-chip--err {
    background: rgba(205, 36, 63, .12);
    color: var(--yzapp-err);
}

.yz-app-chip--info {
    background: rgba(0, 110, 129, .12);
    color: var(--yzapp-info);
}

.yz-app-chip--right {
    margin-left: auto;
}

/* Chip suelto dentro de una tarjeta (la miniatura): mide lo que dice. Sin esto
   el flex de columna lo estira de borde a borde y deja de parecer una píldora. */
.yz-app-card > .yz-app-chip {
    align-self: flex-start;
}

/* ── Tabla (imita <yz-data-table>) ────────────────────────────────
   La rejilla vive en la TABLA y las filas son `display: contents`: si cada fila
   fuera su propia rejilla, cada una mediría sus columnas por su cuenta y los
   rótulos de la cabecera no caerían sobre sus datos (pasaba: «Recibido» quedaba
   a la derecha de los 03/09). Sin `gap`: la separación la da el padding de cada
   celda, para que la banda de la cabecera y las líneas divisorias sean
   continuas y no queden interrumpidas por el blanco de la tarjeta.
   La numeración va a la izquierda, como en la app, y su columna mide 26 px: con
   18 px, descontados los 10 de sangría y los 4 del otro lado, al dígito le
   quedaban 4 px y la elipsis del recorte se leía como un punto («2.», «3.»).
   ─────────────────────────────────────────────────────────────────────── */
/* Las celdas se ESTIRAN al alto de su fila (sin `align-items: center`): cada
   una dibuja su propia línea divisoria, y centrando el contenido cada celda
   arrancaba a una altura distinta — la línea de la columna de estado quedaba
   un par de píxeles más arriba que la del resto. */
.yz-app-table {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    min-width: 0;
}

.yz-app-table--3 {
    grid-template-columns: 26px minmax(0, 1fr) auto auto;
}

.yz-app-table--4 {
    grid-template-columns: 26px minmax(0, 1fr) auto auto auto;
}

.yz-app-tr {
    display: contents;
}

.yz-app-tr > * {
    min-width: 0;
    padding: 4px;
    border-top: 1px solid var(--yzapp-border-soft);
    font-size: 11px;
    line-height: 1.35;
    color: var(--yzapp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yz-app-tr > *:first-child {
    padding-left: 10px;
}

.yz-app-tr > *:last-child {
    padding-right: 10px;
}

.yz-app-th > * {
    padding-top: 6px;
    padding-bottom: 6px;
    background: var(--yzapp-surface-2);
    border-top: 0;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--yzapp-text-2);
}

.yz-app-td-num {
    color: var(--yzapp-text-3);
    font-variant-numeric: tabular-nums;
}

.yz-app-tr > .yz-app-td-dim {
    color: var(--yzapp-text-2);
}

/* El chip va DENTRO de una celda, no ES la celda: la celda pone la línea
   divisoria y el padding, el chip pone la píldora. `overflow: visible` también
   es lo que evita que la rejilla apriete la columna de estado: con overflow
   oculto el aporte mínimo de una celda es CERO y la píldora se cortaría al
   medio en un panel angosto; lo que cede es la columna de texto, que elipsiza. */
.yz-app-tr > .yz-app-td-chip {
    display: flex;
    align-items: center;
    overflow: visible;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* ── Pasos (stepper) ──────────────────────────────────────────────────────── */
.yz-app-steps {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.yz-app-step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 10px;
    line-height: 1.3;
    color: var(--yzapp-text-3);
}

/* La línea que une los pasos: el círculo del estado a la izquierda y el riel
   hacia el paso siguiente. */
.yz-app-step-dot {
    position: relative;
    display: flex;
    align-items: center;
    height: 10px;
}

.yz-app-step-dot::before {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--yzapp-rail);
    background: var(--yzapp-surface);
    z-index: 1;
}

.yz-app-step-dot::after {
    content: "";
    flex: 1 1 auto;
    height: 2px;
    margin-left: -1px;
    background: var(--yzapp-rail);
}

.yz-app-step:last-child .yz-app-step-dot::after {
    background: transparent;
}

.yz-app-step--done .yz-app-step-dot::before {
    border-color: var(--yzapp-ok);
    background: var(--yzapp-ok);
}

.yz-app-step--done .yz-app-step-dot::after {
    background: var(--yzapp-ok);
}

.yz-app-step--now .yz-app-step-dot::before {
    border-color: var(--yzapp-info);
    background: var(--yzapp-info);
}

/* El rótulo va envuelto en un elemento propio: en un flex de columna cada
   texto suelto sería un item distinto y el paso se partiría en varias líneas. */
.yz-app-step i {
    font-style: normal;
    display: block;
    min-width: 0;
}

.yz-app-step--done i {
    color: var(--yzapp-ok);
}

.yz-app-step--now i {
    color: var(--yzapp-text);
    font-weight: 600;
}

/* ── Barra apilada ────────────────────────────────────────────────────────── */
.yz-app-stack {
    display: flex;
    gap: 2px;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--yzapp-surface-2);
}

.yz-app-stack i {
    display: block;
}

.yz-app-seg--alto {
    flex: 2;
    background: var(--yzapp-err);
}

.yz-app-seg--medio {
    flex: 3;
    background: var(--yzapp-warn);
}

.yz-app-seg--bajo {
    flex: 1;
    background: var(--yzapp-info);
}

.yz-app-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 10px;
    line-height: 1.3;
    color: var(--yzapp-text-2);
}

.yz-app-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.yz-app-legend span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--yzapp-text-3);
}

.yz-app-legend .yz-app-k--alto::before {
    background: var(--yzapp-err);
}

.yz-app-legend .yz-app-k--medio::before {
    background: var(--yzapp-warn);
}

.yz-app-legend .yz-app-k--bajo::before {
    background: var(--yzapp-info);
}

/* ── Lista de adjuntos ────────────────────────────────────────────────────── */
.yz-app-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--yzapp-text-2);
}

.yz-app-list span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.yz-app-list span::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--yzapp-info);
}

/* ── Pie de la pantalla ───────────────────────────────────────────────────── */
.yz-app-foot {
    font-size: 10px;
    line-height: 1.35;
    color: var(--yzapp-text-3);
}

/* ── Franja de estado (fila con chip a la izquierda y dato al otro lado) ───── */
.yz-app-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.yz-app-strip .yz-app-foot {
    margin-left: auto;
}

/* ═══ Dentro de una laptop (servicios.html) ═══════════════════════════════════
   La pantalla de `.yz-device--laptop` es 16/10 y recorta lo que se salga, así
   que el panel se ancla a los cuatro bordes y su contenido está calibrado para
   entrar a ese alto. `--app` es el opt-in: los aparatos con captura real
   siguen funcionando igual.
   ───────────────────────────────────────────────────────────────────────────── */
/* La pantalla va en 3/2 y no en el 16/10 del resto de las laptops: con 16/10 el
   panel de defensa fiscal (tres tarjetas) se quedaba corto en el corte más
   angosto donde el chasis sigue encendido. 3/2 es proporción de laptop real
   (las Surface, por ejemplo) y da ese aire sin que el aparato se note raro. El
   1,45 final deja 12-20 px de respiro sobre el panel más cargado: con 1,5 justo
   el cierre entraba al milímetro y cualquier diferencia de render lo recortaba. */
.yz-device--app .yz-device-screen {
    aspect-ratio: 1.45;
    background: var(--yzapp-bg, #e2dedd);
}

.yz-device--app .yz-app {
    position: absolute;
    inset: 0;
}

/* Debajo de 769 px el chasis se apaga y el panel se muestra solo, con su propio
   marco, como estaba antes de entrar a la laptop. Es el mismo corte en el que
   `.svc-visual` suelta su tope de 640 px: arriba de él la pantalla mide siempre
   540x360 y el contenido está calibrado para ese alto; abajo, el ancho lo manda
   el teléfono y una laptop de 280 px de pantalla dejaría el panel con letra de
   lupa. */
@media (max-width: 768px) {
    .yz-device--app .yz-device-frame {
        width: 100%;
        padding: 0;
        border-radius: 12px;
        background: transparent;
        box-shadow: 0 8px 20px rgba(30, 18, 14, .14);
    }

    .yz-device--app .yz-device-screen {
        aspect-ratio: auto;
        border-radius: 12px;
        border: 1px solid var(--yzapp-border, rgba(40, 22, 18, .14));
    }

    .yz-device--app .yz-app {
        position: static;
    }

    .yz-device--app .yz-device-cam,
    .yz-device--app .yz-device-base {
        display: none;
    }
}

/* Panel angosto (teléfono): «Recibido» sale de la tabla de requerimientos. La
   rejilla baja a cuatro columnas en el mismo corte; esconder la celda sin bajar
   la columna dejaría un espacio muerto al final de cada fila. */
@media (max-width: 560px) {
    .yz-app-table--4 {
        grid-template-columns: 26px minmax(0, 1fr) auto auto;
    }

    .yz-app-hide-narrow {
        display: none;
    }

    /* En un panel de ~300 px la línea de contexto le comía el ancho al sujeto
       («Informe 202…»). Queda el engranaje, que es lo que ancla la franja. */
    .yz-app-ctx span {
        display: none;
    }

    /* La tarjeta de una línea se apila: con el rótulo al lado, a las dos cifras
       del balance les quedaban ~100 px cada una y se montaban una sobre otra
       (las cifras no parten en dos líneas, a propósito). */
    .yz-app-card--row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .yz-app-chip--right,
    .yz-app-strip .yz-app-foot {
        margin-left: 0;
    }
}

/* ═══ Miniatura del recorrido (index.html) ════════════════════════════════════
   La caja de un paso del recorrido mide entre 143 y 205 px de ancho: ahí no
   entra una pantalla completa. La miniatura suelta la tabla, el pie y la línea
   de contexto, y deja lo que se lee de un vistazo: el header y el titular.
   Criterio: se suelta información, NUNCA se baja la tipografía del piso
   legible (10 px).
   ───────────────────────────────────────────────────────────────────────────── */
.yz-mock-frame--thumb .yz-app {
    height: 100%;
}

.yz-app--mini .yz-app-sec {
    display: none;
}

.yz-app--mini .yz-app-header {
    height: 36px;
    gap: 8px;
    padding: 0 9px;
}

.yz-app--mini .yz-app-logo {
    width: 22px;
    height: 20px;
}

.yz-app--mini .yz-app-eyebrow {
    font-size: 10px;
    letter-spacing: .06em;
}

.yz-app--mini .yz-app-subject {
    font-size: 11px;
}

.yz-app--mini .yz-app-body {
    justify-content: center;
    gap: 6px;
    padding: 7px 9px;
}

.yz-app--mini .yz-app-card {
    gap: 5px;
    padding: 7px 8px;
    border-radius: 10px;
}

.yz-app--mini .yz-app-kpi-value {
    font-size: 15px;
}

.yz-app--mini .yz-app-kpis--money .yz-app-kpi-value {
    font-size: 13px;
}

.yz-app--mini .yz-app-kpi-label,
.yz-app--mini .yz-app-chip,
.yz-app--mini .yz-app-fig i {
    font-size: 10px;
}

.yz-app--mini .yz-app-step {
    font-size: 10px;
}

/* De 1025 a 1365 px el recorrido ya está en cinco columnas y la caja mide entre
   174x109 y 206x128 px (medido con motor real): ahí el header tiene que quedarse
   sólo con el isotipo y el sujeto, y el cuerpo con una sola cifra. Arriba de
   1366 px la caja da 128 px o más de alto y la miniatura entra completa. */
@media (min-width: 1025px) and (max-width: 1365px) {
    .yz-mock-frame--thumb .yz-app--mini .yz-app-eyebrow,
    .yz-mock-frame--thumb .yz-app--mini .yz-app-tight {
        display: none;
    }

    .yz-mock-frame--thumb .yz-app--mini .yz-app-header {
        height: 30px;
        gap: 6px;
        padding: 0 7px;
    }

    .yz-mock-frame--thumb .yz-app--mini .yz-app-logo {
        width: 18px;
        height: 16px;
    }

    .yz-mock-frame--thumb .yz-app--mini .yz-app-subject {
        font-size: 10px;
    }

    .yz-mock-frame--thumb .yz-app--mini .yz-app-body {
        gap: 5px;
        padding: 6px 7px;
    }

    .yz-mock-frame--thumb .yz-app--mini .yz-app-card {
        padding: 6px 7px;
    }

    .yz-mock-frame--thumb .yz-app--mini .yz-app-kpi-value {
        font-size: 13px;
    }
}