/* ==========================================================================
   La barra superior va de lado a lado, con la marca a la izquierda, y la
   barra lateral arranca debajo. Es la forma que tenía el panel antes de la
   etapa 1 del sistema westudio (que la había recortado a la derecha de la
   lateral y puesto la marca dentro de ella). Va después de 16-westudio.css
   para corregirla.
   ========================================================================== */

@media (min-width: 1040px) {
    body.raver-panel-app .raver-app-top {
        left: 0;
        z-index: 9999;
        padding: 0 24px 0 0;
        gap: 0;
    }

    /* La marca ocupa el ancho de la lateral, para que la raya quede alineada. */
    body.raver-panel-app .raver-app-top .raver-app-top-marca {
        display: flex;
        align-items: center;
        flex: 0 0 232px;
        width: 232px;
        height: 100%;
        padding: 0 16px;
        box-sizing: border-box;
        border-right: 1px solid var(--tinta-borde);
        color: var(--tinta-texto) !important;
        text-decoration: none !important;
        overflow: hidden;
    }
    .raver-app-top-marca img.raver-marca-logo {
        width: auto;
        height: auto;
        max-width: 200px;
        max-height: 30px;
        object-fit: contain;
        object-position: left center;
    }
    .raver-app-top-marca .raver-marca-texto { font-size: 17px; }

    body.raver-panel-app .raver-app-top .ws-miga { padding-left: 24px; }

    /* La lateral, desde abajo de la barra hasta el piso, y sin marca propia. */
    .ws-lat-marca { display: none !important; }
    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: 12px; }
}

/* ==========================================================================
   Las portadas de proyecto van sobre una foto con un velo oscuro: sea cual sea
   el modo del portal, lo que está encima tiene que leerse como en oscuro.
   Se fijan acá las variables de texto y velo con sus valores oscuros, así el
   título, el enlace "Mis proyectos" y los datos no dependen del tema.
   ========================================================================== */
.raver-proy-cover,
.raver-proy-card-cover {
    --tinta-texto-fuerte: #ffffff;
    --tinta-texto: #eef1f6;
    --tinta-texto-2: #dde1e8;
    --tinta-texto-3: #b4bac6;
    --tinta-suave: #aab1c0;
    --tinta-apagado: #8b93a3;
    --tinta-acento-claro: #8cabff;
    --tinta-acento-claro-rgb: 140 171 255;
    --tinta-sobre-acento: #ffffff;
    --tinta-vela-rgb: 255 255 255;
    --tinta-fondo-rgb: 5 6 10;
    --tinta-ok: #3ddc97;
    --tinta-alerta: #ffb020;
    --tinta-mal: #ff5c5c;
    --tinta-ok-rgb: 61 220 151;
    --tinta-alerta-rgb: 255 176 32;
    --tinta-mal-rgb: 255 92 92;
    color: #eef1f6;
}