/* ==================================================================
   La barra lateral

   En pantalla ancha el menú deja de ser una tira arriba y pasa a una
   columna a la izquierda, con la persona al pie. Se hace desde acá y no
   tocando cada vista: el menú se saca del flujo y el contenedor le deja
   el lugar con un padding.

   Sacarlo del flujo no es capricho: como columna de una grilla, su alto
   estiraba la primera fila y el contenido arrancaba a media pantalla.
   ================================================================== */
.raver-nav-caja {
    display: contents;
}

.raver-nav-lista {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.raver-nav-usuario {
    display: none;
}

@media (min-width: 1040px) {
    .raver-portal-container {
        position: relative;
        max-width: 1340px;
        padding-left: 278px;
    }

    .raver-portal-container > .raver-admin-nav {
        position: absolute;
        left: 16px;
        top: 0;
        bottom: 0;
        width: 246px;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        display: block;
    }

    .raver-admin-nav .raver-nav-caja {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 24px;
        /* Alta como la ventana, pero nunca más que la página: si no, en
           una vista corta el pie de la barra quedaba abajo del todo, fuera
           de la pantalla. */
        height: calc(100vh - 150px);
        max-height: 100%;
        min-height: 0;
        background: var(--tinta-hundido);
        border: 1px solid var(--tinta-borde);
        border-radius: 6px;
        padding: 12px;
    }

    .raver-admin-nav .raver-nav-lista {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
        overflow-y: auto;
    }

    .raver-admin-nav .raver-nav-item {
        padding: 10px 12px;
        border-radius: 4px;
        font-weight: 500;
    }

    .raver-admin-nav .raver-nav-nombre {
        flex: 1;
    }

    .raver-admin-nav .raver-nav-icono {
        display: inline-flex;
        width: 18px;
        justify-content: center;
        opacity: 0.85;
    }

    /* La persona, al pie: separada por una línea y empujada abajo. */
    .raver-nav-usuario {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-top: auto;
        padding-top: 12px;
        border-top: 1px solid var(--tinta-borde);
    }

    .raver-nav-avatar {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--tinta-acento);
        color: var(--tinta-sobre-acento);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .raver-nav-quien {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.25;
    }

    .raver-nav-quien strong {
        font-size: 12.5px;
        color: var(--tinta-texto);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .raver-nav-quien small {
        font-size: 11px;
        color: var(--tinta-apagado);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .raver-nav-salir {
        margin-left: auto;
        color: var(--tinta-apagado) !important;
        text-decoration: none !important;
        padding: 4px;
        border-radius: 3px;
    }

    .raver-nav-salir:hover {
        color: var(--tinta-texto) !important;
        background: rgb(var(--tinta-rejilla-rgb) / 0.06);
    }
}

/* Con la barra al costado, el ancho del tema (1140) dejaba las tablas muy
   apretadas. El panel se ensancha saliéndose de su contenedor con márgenes
   negativos —no con transform, que rompería los emergentes de posición
   fija que viven adentro. El contenedor del tema está centrado, así que
   repartir el sobrante a los dos lados lo deja centrado igual. */
@media (min-width: 1240px) {
    .raver-portal-container {
        width: min(1420px, calc(100vw - 40px));
        max-width: none;
        margin-left: calc((100% - min(1420px, 100vw - 40px)) / 2);
        margin-right: calc((100% - min(1420px, 100vw - 40px)) / 2);
    }
}

/* ==================================================================
   El panel como aplicación

   En la página del portal, y solo ahí, la barra lateral va del borde de
   arriba al de abajo y el contenido ocupa todo el resto, como el editor
   de presupuestos. El encabezado del sitio no se dibuja: lo que tenía
   —la marca, el ingreso, salir— vive ahora en la barra.

   Todo cuelga de body.raver-panel-app, que pone `clase_panel()`.
   ================================================================== */
@media (min-width: 1040px) {
    body.raver-panel-app #site-header.site-header,
    body.raver-panel-app header.site-header,
    body.raver-panel-app .raver-standalone-topbar {
        display: none !important;
    }

    /* El contenido: todo el ancho menos la barra, con su propio aire. */
    /* El contenedor del tema mide 1140 y está centrado; el panel se sale
       de ese ancho para ocupar la ventana entera. El margen izquierdo es
       lo que falta para arrancar justo al lado de la barra: 264 menos lo
       que el tema ya dejó de aire a la izquierda. */
    body.raver-panel-app .raver-portal-container {
        position: static;
        width: calc(100vw - 282px);
        max-width: none;
        margin-left: calc(264px - ((100vw - 100%) / 2));
        margin-right: 0;
        padding: 26px 22px 40px 18px;
    }

    body.raver-panel-app .raver-portal-container > .raver-admin-nav {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 264px;
        z-index: 9998;
        background: var(--tinta-hundido);
        border-right: 1px solid var(--tinta-borde);
        padding: 0;
    }

    /* Con la barra de WordPress arriba, la lateral arranca debajo. */
    body.raver-panel-app.admin-bar .raver-portal-container > .raver-admin-nav {
        top: 32px;
    }

    body.raver-panel-app .raver-admin-nav .raver-nav-caja {
        position: static;
        height: 100%;
        max-height: none;
        border: 0;
        border-radius: 0;
        padding: 16px 14px;
        background: transparent;
    }

    /* La marca, al tope. */
    body.raver-panel-app .raver-nav-marca {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 2px 4px 16px;
        color: var(--tinta-texto) !important;
        font-family: var(--raver-display);
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-decoration: none !important;
    }

    body.raver-panel-app .raver-nav-lobo {
        width: 26px !important;
        height: 26px !important;
    }
}

/* Fuera del modo panel —y en pantalla angosta— la marca no va: el
   encabezado del sitio ya la muestra. */
.raver-nav-marca {
    display: none;
}

/* ==================================================================
   El área de trabajo: barra de arriba y lista en la barra lateral

   Entrar a una sección cambia la barra: en vez de las ocho secciones
   muestra lo que hay adentro, y al elegir uno se abre a la derecha en
   vez de taparlo todo con una ventana emergente.
   ================================================================== */
.raver-app-top {
    display: none;
}

.raver-nav-seccion {
    display: none;
}

@media (min-width: 1040px) {
    body.raver-panel-app .raver-app-top {
        display: flex;
        align-items: center;
        gap: 18px;
        position: fixed;
        top: 0;
        left: 264px;
        right: 0;
        height: 52px;
        z-index: 9997;
        padding: 0 20px;
        background: var(--tinta-sup);
        border-bottom: 1px solid var(--tinta-borde);
    }

    body.raver-panel-app.admin-bar .raver-app-top {
        top: 32px;
    }

    /* Con barra de arriba, el contenido arranca más abajo. */
    body.raver-panel-app .raver-portal-container:has(.raver-app-top) {
        padding-top: 78px;
    }

    .raver-app-top-que {
        display: flex;
        align-items: baseline;
        gap: 12px;
        min-width: 0;
        flex: 1 1 auto;
        white-space: nowrap;
        overflow: hidden;
    }

    .raver-app-top-que strong {
        color: var(--tinta-texto);
        font-size: 14.5px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .raver-app-top-rotulo {
        color: var(--tinta-suave);
        font-family: var(--raver-mono);
        font-size: 10.5px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .raver-app-top-meta {
        color: var(--tinta-apagado);
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .raver-app-top-acciones {
        display: flex;
        gap: 8px;
        flex: 0 0 auto;
    }

    /* La barra lateral, en modo lista. */
    body.raver-panel-app .raver-nav-seccion {
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1 1 auto;
    }

    body.raver-panel-app .raver-nav-lista-guardada {
        display: none;
    }

    .raver-nav-volver-secciones {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        align-self: flex-start;
        margin: 0 0 10px;
        padding: 4px 6px !important;
        background: transparent !important;
        border: 0 !important;
        color: var(--tinta-suave) !important;
        font-size: 11.5px !important;
        font-weight: 500 !important;
        cursor: pointer;
    }

    .raver-nav-volver-secciones:hover {
        color: var(--tinta-texto) !important;
    }

    .raver-nav-seccion-titulo {
        font-family: var(--raver-mono);
        font-size: 10.5px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--tinta-suave);
        padding: 0 6px 8px;
    }

    .raver-nav-todos {
        font-size: 11.5px;
        color: var(--tinta-acento-claro) !important;
        text-decoration: none !important;
        padding: 0 6px 10px;
    }

    .raver-nav-items {
        display: flex;
        flex-direction: column;
        gap: 2px;
        overflow-y: auto;
        min-height: 0;
    }

    .raver-nav-elem {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 9px 10px;
        border-radius: 4px;
        color: var(--tinta-texto) !important;
        text-decoration: none !important;
    }

    .raver-nav-elem:hover {
        background: var(--tinta-sup);
    }

    .raver-nav-elem-activo,
    .raver-nav-elem-activo:hover {
        background: var(--tinta-acento);
    }

    .raver-nav-elem .raver-nav-punto {
        flex: 0 0 7px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin-top: 6px;
    }

    .raver-nav-elem-activo .raver-nav-punto {
        background: #ffffff !important;
    }

    .raver-nav-elem-texto {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.3;
    }

    .raver-nav-elem-texto strong {
        font-size: 12.5px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .raver-nav-elem-texto small {
        font-size: 11px;
        color: var(--tinta-apagado);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .raver-nav-elem-activo .raver-nav-elem-texto small {
        color: rgb(var(--tinta-vela-rgb) / 0.75);
    }

    .raver-nav-vacio {
        color: var(--tinta-apagado);
        font-size: 12px;
        padding: 6px;
        margin: 0;
    }

    /* El presupuesto abierto ocupa su área, sin ancho de ventana emergente. */
    .raver-pres-trabajo .raver-pres-detalle {
        max-width: 960px;
    }
}

/* El menú de secciones y la lista se turnan; `hidden` no alcanza porque la
   regla de la barra ya fija `display: flex`. */
@media (min-width: 1040px) {
    body.raver-panel-app .raver-nav-seccion.raver-nav-oculto {
        display: none;
    }

    .raver-nav-volver-al-reves svg {
        transform: rotate(180deg);
    }
}

@media (min-width: 1040px) {
    .raver-nav-nuevo {
        display: block;
        margin: 0 0 8px;
        padding: 8px 10px;
        border: 1px dashed var(--tinta-borde);
        border-radius: 4px;
        color: var(--tinta-acento-claro) !important;
        font-size: 12px;
        text-align: center;
        text-decoration: none !important;
    }

    .raver-nav-nuevo:hover {
        border-color: var(--tinta-acento);
        color: var(--tinta-texto) !important;
    }
}

/* ------------------------------------------------------------------
   La barra de arriba manda: va de lado a lado, con la marca, y la
   lateral arranca debajo. Es la forma del editor de presupuestos.
   ------------------------------------------------------------------ */
@media (min-width: 1040px) {
    body.raver-panel-app .raver-app-top {
        left: 0;
        z-index: 9999;
        padding-left: 16px;
    }

    .raver-app-top-marca {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        width: 248px;
        color: var(--tinta-texto) !important;
        font-family: var(--raver-display);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-decoration: none !important;
    }

    .raver-app-top-que {
        padding-left: 18px;
        border-left: 1px solid var(--tinta-borde);
    }

    /* La lateral, desde abajo de la barra hasta el piso. */
    body.raver-panel-app .raver-portal-container > .raver-admin-nav {
        top: 52px;
    }

    body.raver-panel-app.admin-bar .raver-portal-container > .raver-admin-nav {
        top: 84px;
    }

    body.raver-panel-app .raver-admin-nav .raver-nav-caja {
        padding-top: 14px;
    }

    /* Y el contenido, siempre debajo de la barra. */
    body.raver-panel-app .raver-portal-container {
        padding-top: 78px;
    }
}

/* El aviso de "estás viendo el panel como…" vive fuera del contenedor, así
   que la barra fija se le montaba encima. */
@media (min-width: 1040px) {
    body.raver-panel-app .raver-previsualizando {
        margin: 70px 24px 0 288px;
    }

    body.raver-panel-app .raver-previsualizando + .raver-portal-container {
        padding-top: 18px;
    }
}

/* Las secciones se quedan arriba y la lista de la sección va debajo, con una
   línea de por medio y su propio scroll: entrar a una sección no tiene por
   qué dejarte sin las otras. */
@media (min-width: 1040px) {
    body.raver-panel-app .raver-admin-nav .raver-nav-lista {
        flex: 0 0 auto;
        overflow: visible;
    }

    body.raver-panel-app .raver-nav-seccion {
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1 1 auto;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid var(--tinta-borde);
    }

    .raver-nav-todos {
        padding: 8px 6px 0;
    }
}

/* ------------------------------------------------------------------
   Dos paneles: la lista y lo elegido

   La mitad izquierda es la lista de la sección; la derecha, el ítem
   abierto. Cada una con su propio scroll, para que elegir el siguiente
   no obligue a subir toda la página.
   ------------------------------------------------------------------ */
.raver-dos-paneles {
    display: grid;
    gap: 20px;
}

.raver-panel-lista-cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.raver-panel-nuevo {
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px dashed var(--tinta-borde);
    border-radius: 4px;
    color: var(--tinta-acento-claro) !important;
    font-size: 12.5px;
    text-align: center;
    text-decoration: none !important;
}

.raver-panel-nuevo:hover {
    border-color: var(--tinta-acento);
    color: var(--tinta-texto) !important;
}

.raver-panel-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--tinta-borde);
    border-radius: 4px;
    margin-bottom: 8px;
    background: var(--tinta-sup);
    color: var(--tinta-texto) !important;
    text-decoration: none !important;
}

.raver-panel-item:hover {
    border-color: var(--tinta-borde-fuerte);
    background: var(--tinta-campo);
}

.raver-panel-item-activo,
.raver-panel-item-activo:hover {
    border-color: var(--tinta-acento);
    background: rgb(var(--tinta-acento-rgb) / 0.10);
}

.raver-panel-item-punto {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.raver-panel-item-abrir .raver-panel-item-punto,
.raver-panel-item > .raver-panel-item-punto {
    margin-top: 6px;
}

.raver-panel-item-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.raver-panel-item-texto strong {
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.raver-panel-item-texto small,
.raver-panel-item-apertura {
    font-size: 11.5px;
    color: var(--tinta-apagado);
}

.raver-panel-item-lado {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: 0 0 auto;
    text-align: right;
}

.raver-panel-item-monto {
    font-family: var(--raver-mono);
    font-size: 12px;
    color: var(--tinta-texto);
}

.raver-panel-item-estado {
    font-family: var(--raver-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.raver-panel-vacio {
    border: 1px dashed var(--tinta-borde);
    border-radius: 6px;
    padding: 40px 24px;
    text-align: center;
    color: var(--tinta-apagado);
    font-size: 13px;
}

.raver-panel-vacio p {
    margin: 0;
}

/* Mitad y mitad desde que hay ancho para las dos; antes, una debajo de
   la otra, que es como se lee en una pantalla angosta. */
@media (min-width: 1100px) {
    .raver-dos-paneles {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    body.raver-panel-app .raver-panel-lista,
    body.raver-panel-app .raver-panel-trabajo {
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        padding-right: 4px;
    }

    body.raver-panel-app .raver-panel-trabajo {
        position: sticky;
        top: 0;
    }
}

/* Los atajos de cada ítem: los mismos de la tabla, en chico y sin peso.
   Aparecen siempre, porque son los que se usan sin abrir el presupuesto. */
.raver-panel-item {
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.raver-panel-item-abrir {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px 10px;
    color: var(--tinta-texto) !important;
    text-decoration: none !important;
}

.raver-panel-item-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 0 14px 10px 31px;
}

.raver-panel-atajo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--tinta-apagado) !important;
    font-family: var(--raver-fuente) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    cursor: pointer;
}

.raver-panel-atajo:hover {
    color: var(--tinta-acento-claro) !important;
}

.raver-panel-atajo-form {
    display: inline;
    margin: 0;
}

/* ------------------------------------------------------------------
   Vidrio

   La barra lateral y la de arriba se apoyan en el fondo con retícula en
   vez de taparlo: el mismo recurso del encabezado del sitio.
   ------------------------------------------------------------------ */
@media (min-width: 1040px) {
    body.raver-panel-app .raver-portal-container > .raver-admin-nav {
        background: rgb(var(--tinta-fondo-rgb) / 0.62);
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        border-right-color: rgb(var(--tinta-rejilla-rgb) / 0.10);
    }

    body.raver-panel-app .raver-app-top {
        background: rgb(var(--tinta-fondo-rgb) / 0.62);
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        border-bottom-color: rgb(var(--tinta-rejilla-rgb) / 0.10);
    }

    /* Los ítems de la lista, apenas translúcidos para que el vidrio se note. */
    body.raver-panel-app .raver-panel-item {
        background: rgb(var(--tinta-sup-rgb) / 0.72);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}

/* El monto y el estado, siempre contra el borde derecho de la fila. */
.raver-panel-item-lado {
    margin-left: auto;
    padding-left: 14px;
}

/* La fila es una columna: sus dos bloques ocupan todo el ancho. Sin esto
   heredaban el align-items de cuando la fila era horizontal y el monto
   quedaba flotando a media fila. */
.raver-panel-item {
    align-items: stretch;
}

/* La lista no necesita la mitad: con el ancho justo para leer el título,
   el cliente y el estado alcanza, y el presupuesto abierto gana lugar. */
@media (min-width: 1100px) {
    .raver-dos-paneles {
        grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    }
}

/* En una columna angosta, la línea del cliente se corta con puntos en vez
   de partirse en dos y desalinear la fila. */
.raver-panel-item-texto small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La barra izquierda: sin esquinas redondeadas —va pegada al borde, no es
   una tarjeta— y más transparente, con menos desenfoque, para que la
   retícula del fondo se alcance a ver por detrás. */
@media (min-width: 1040px) {
    body.raver-panel-app .raver-portal-container > .raver-admin-nav {
        border-radius: 0;
        border: 0;
        border-right: 1px solid rgb(var(--tinta-rejilla-rgb) / 0.10);
        background: rgb(var(--tinta-fondo-rgb) / 0.26);
        backdrop-filter: blur(4px) saturate(125%);
        -webkit-backdrop-filter: blur(4px) saturate(125%);
    }

    body.raver-panel-app .raver-admin-nav .raver-nav-caja {
        border-radius: 0;
    }
}

/* Un solo scroll: el de la página. Las dos columnas crecen lo que haga falta
   y se desplazan juntas. Antes la lista quedaba pegada arriba con su propio
   scroll y aparecían dos barras, lo que hacía incómodo usar la lista. */
@media (min-width: 1100px) {
    body.raver-panel-app .raver-panel-trabajo,
    body.raver-panel-app .raver-panel-lista {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}

/* La barra de desplazamiento de la lista y del menú, fina y discreta: la
   del sistema venía clara y cortaba el panel al medio. */
.raver-panel-lista,
.raver-nav-items,
.raver-admin-nav .raver-nav-lista {
    scrollbar-width: thin;
    scrollbar-color: var(--tinta-borde-fuerte) transparent;
}

.raver-panel-lista::-webkit-scrollbar,
.raver-nav-items::-webkit-scrollbar,
.raver-admin-nav .raver-nav-lista::-webkit-scrollbar {
    width: 8px;
}

.raver-panel-lista::-webkit-scrollbar-track,
.raver-nav-items::-webkit-scrollbar-track,
.raver-admin-nav .raver-nav-lista::-webkit-scrollbar-track {
    background: transparent;
}

.raver-panel-lista::-webkit-scrollbar-thumb,
.raver-nav-items::-webkit-scrollbar-thumb,
.raver-admin-nav .raver-nav-lista::-webkit-scrollbar-thumb {
    background: var(--tinta-borde-fuerte);
    border-radius: 99px;
}

.raver-panel-lista::-webkit-scrollbar-thumb:hover,
.raver-nav-items::-webkit-scrollbar-thumb:hover {
    background: var(--tinta-borde-marcado);
}

/* El aire de arriba: el contenedor traía un margen de cuando el panel
   vivía dentro de la página. Con la barra fija sobra, y el contenido
   arrancaba dos dedos más abajo de lo que debía. */
@media (min-width: 1040px) {
    body.raver-panel-app .raver-portal-container {
        margin-top: 0;
        padding-top: 66px;
    }

    body.raver-panel-app .raver-barra-filtros {
        margin-top: 0;
    }
}

/* Y el primer bloque de cada panel no suma su propio margen: el aire lo
   pone el contenedor, una sola vez. */
@media (min-width: 1040px) {
    body.raver-panel-app .raver-panel-lista > :first-child,
    body.raver-panel-app .raver-panel-trabajo > :first-child {
        margin-top: 0 !important;
    }
}