#body-content {
    /* 18/10/2026: misma imagen mejorada (sin artefactos de compresion, 2880x1646). Anterior: ../images/bg-inicio-dalle-1.jpg */
    background-image: url("../images/bg-inicio-hd.jpg");
    /*background-image: url("../images/negro_y_amarillo-minimalista-extended.jpg");*/
    background-size: cover; /* Cover the entire container */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    width: 100%;
    animation: fadeIn 1s ease-in-out forwards;
    overflow: hidden;
    padding-top: 0;
}

.overlay {
    position: absolute;
    top: var(--navbar-height);
    left: 0;
    width: 100vw;
    height: calc(100vh - var(--navbar-height));
    background-color: rgba(0, 0, 0, 0.4);
    z-index: -1;
}

.box-container-titles {
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-shadow: 10px 0 30px black;
}

    .box-container-titles h1 {
        font-size: 4.5rem;
    }

    .box-container-titles h2 {
        font-size: 3rem;
    }

@media (min-width: 992px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 100vw;
    }
}

@media (min-width: 768px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 100vw;
    }
}

@media (min-width: 576px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 100vw;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =====================================================================
   18/10/2026: velo en degrade (deja ver la imagen a la izquierda y oscurece donde esta el menu)
   + saludo debajo del titulo. Para volver atras: borrar este bloque.
   ===================================================================== */
.overlay {
    background: linear-gradient(90deg, rgba(12, 14, 20, .18) 0%, rgba(12, 14, 20, .30) 40%, rgba(12, 14, 20, .62) 72%, rgba(12, 14, 20, .72) 100%) !important;
}
.box-container-titles { text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
    .box-container-titles h1 { font-weight: 700; letter-spacing: -.01em; margin-bottom: .35rem; }
    .box-container-titles h2.subtitle {
        font-size: 1.05rem !important; font-weight: 400; letter-spacing: .02em; opacity: .88; margin: 0;
        text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
    }
    .box-container-titles h2.subtitle:empty { display: none; }

/* =====================================================================
   26/10/2026 - Inicio: la foto sigue por detras de la barra de arriba (opcion C).
   La barra queda transparente con un sombreado negro que baja desde arriba; letras y logo en blanco.
   Solo en esta pantalla (este CSS se carga unicamente en el inicio) y en pantallas anchas.
   Para volver atras: respaldo en _respaldos_claude/2026-10-26_barra_foto
   ===================================================================== */
@media only screen and (min-width: 1151px) {
    .tico-nav { position: relative; z-index: 20; background: transparent !important; }
    .tico-nav .navegador-contenedor { position: relative; z-index: 1; background: transparent !important; box-shadow: none !important; }
    /* linea de vidrio: filo blanco muy tenue, un poco por debajo de la franja de colores, que se desvanece hacia los costados */
    .tico-nav .navegador-contenedor::after {
        content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 1px); height: 1px; pointer-events: none;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, .17) 30%, rgba(255, 255, 255, .17) 70%, rgba(255, 255, 255, 0) 94%);
    }
    .tico-nav::before {
        content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 0; pointer-events: none;
        /* 26/10/2026 (2): el sombreado sigue la luz de la foto: mas oscuro a la izquierda (lado en sombra), mas claro y calido
           a la derecha, donde entra la luz por la ventana, con dos rayos de luz muy suaves en diagonal. Antes: degrade negro parejo. */
        height: calc(var(--navbar-height) + 190px);
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, rgba(0, 0, 0, .55) 65%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 35%, rgba(0, 0, 0, .55) 65%, transparent 100%);
        background:
            radial-gradient(ellipse 34% 140% at 96% -10%, rgba(255, 224, 178, .26) 0%, rgba(255, 210, 150, .10) 38%, rgba(255, 210, 150, 0) 70%),
            linear-gradient(116deg, rgba(255, 230, 190, 0) 56%, rgba(255, 230, 190, .08) 63%, rgba(255, 230, 190, 0) 70%),
            linear-gradient(116deg, rgba(255, 230, 190, 0) 70%, rgba(255, 230, 190, .05) 74%, rgba(255, 230, 190, 0) 78%),
            linear-gradient(to right, rgba(8, 6, 4, .62) 0%, rgba(8, 6, 4, .44) 40%, rgba(8, 6, 4, .22) 75%, rgba(8, 6, 4, .32) 100%);
    }
    /* la foto (y su velo oscuro) empiezan arriba de todo, por detras de la barra */
    #body-content { margin-top: calc(-1 * var(--navbar-height)); padding-top: var(--navbar-height); }
    .overlay { top: 0; height: 100vh; }
    /* logo, menu y boton de usuario en claro */
    .tico-nav .navegador-imagen img { filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0, 0, 0, .35)); }
    .tico-nav .menu > li.menu-li { color: #f5f1ec !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
    .tico-nav .menu > li.menu-li:hover { color: #fff !important; }
    .tico-nav .menu > li.menu-li.menu-bloqueado,
    .tico-nav .menu > li.menu-li.menu-grupo-bloqueado { color: rgba(255, 255, 255, .45) !important; }
    .tico-nav .menu > li.menu-li ul { text-shadow: none; }
    .tico-nav .tico-usuario-btn .tico-av { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
    .tico-nav .tico-usuario-btn .tico-av:hover, .tico-nav .tico-usuario-btn[aria-expanded="true"] .tico-av { box-shadow: 0 0 0 2px #fff; }
    .tico-nav .tico-usuario-btn .tico-av::after { border-color: #1d1712; }
    .tico-nav .tico-saludo b { color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
    .tico-nav .tico-saludo small { color: rgba(255, 255, 255, .72); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
}

/* 26/10/2026: en Inicio, el espacio reservado para la barra de desplazamiento toma un tono oscuro como el borde de la foto (si no, se veria una franja blanca) */
html { background: #1d1915; }
/* 26/10/2026 (2): en Inicio no se reserva el espacio de la barra de desplazamiento (la pagina no baja), asi la foto llega hasta
   el borde derecho sin franja. Para que la barra de arriba no se corra respecto de las demas pantallas, se le deja a la
   derecha el mismo espacio que ocupa la barra de desplazamiento (lo mide el script de _AdminHomeLinks: --tico-sbw). */
html { scrollbar-gutter: auto !important; }
@media only screen and (min-width: 1151px) {
    .tico-nav { padding-right: var(--tico-sbw, 0px); }
}

/* 26/10/2026: la foto de Inicio aparece con un fundido (fadeIn). Ahora arranca desde oscuro en vez de blanco (asi no hay destello
   y el menu blanco se lee desde el primer momento) y dura la mitad. Para sacarlo del todo: animation: none en #body-content. */
body { background-color: #1d1915 !important; }
#body-content { animation-duration: .5s; }

/* 26/10/2026: sobre la foto, los menus desplegables son mas "vidrio" (se intuye la imagen detras) */
@media only screen and (min-width: 1151px) {
    .tico-nav .menu > li.menu-li > ul { background: rgba(30, 33, 56, .72) !important; }
}

/* 26/10/2026 (2): sobre la foto, todavia mas vidrio */
@media only screen and (min-width: 1151px) {
    .tico-nav .menu > li.menu-li > ul, .tico-nav .menu ul ul { background: rgba(26, 28, 46, .52) !important; }
}

/* 26/10/2026: el segundo nivel tambien mas vidrio sobre la foto */
@media only screen and (min-width: 1151px) { .tico-nav .menu li ul li:hover > ul, .tico-nav .menu ul ul { background: rgba(26, 28, 46, .52) !important; } }   /* 26/10 (3): mismo vidrio que el primer nivel */

/* =====================================================================
   26/10/2026 - Inicio como "indice editorial" (opcion B): los informes como el indice de un libro, numerados 01, 02...
   en letra serif, separados por lineas finas; al pasar el mouse aparece su descripcion con una flecha.
   Las secciones (Gestion SMBO / Tendencias) se pliegan suave y se recuerda como las dejaste (en este navegador).
   El armado (numeros, descripciones, plegado) lo hace el script de Views/Home/_AdminHomeLinks.cshtml.
   Para volver a los botones de vidrio: respaldo en _respaldos_claude/2026-10-26_inicio_indice
   ===================================================================== */
.box-container-titles h1 { font-family: Georgia, "Times New Roman", serif !important; font-weight: 400 !important; letter-spacing: 0 !important; }
#links-container-box { text-align: left; }
#links-container-box .links-container { width: min(540px, 94%); margin: 0 auto; padding-bottom: 26px; }
#links-container-box button.link-btn.toggle-links {
    display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 6px 2px 8px;
    background: none !important; border: 0; border-radius: 0; text-decoration: none !important; text-align: left; cursor: pointer;
    font: 600 11px "Segoe UI", Arial, sans-serif !important; letter-spacing: .2em; text-transform: uppercase;
    color: rgba(255, 255, 255, .72); text-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: color .2s; line-height: 1.4;
}
    #links-container-box button.link-btn.toggle-links:hover { color: #fff; font-weight: 600; }
    #links-container-box .toggle-links .cant { font: 400 11.5px "Segoe UI", Arial, sans-serif; letter-spacing: .02em; text-transform: none; margin-left: -4px; opacity: .65; }
    #links-container-box .toggle-links .chev { margin-left: auto; font-size: 14px; letter-spacing: 0; transition: transform .3s ease; }
    #links-container-box .links-container.cerrado .toggle-links .chev { transform: rotate(-90deg); }
#links-container-box .tico-idx { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s ease, opacity .3s ease; }
#links-container-box .links-container.cerrado .tico-idx { grid-template-rows: 0fr; opacity: 0; }
#links-container-box .tico-idx-in { overflow: hidden; min-height: 0; }
#links-container-box a.link-btn {
    display: flex !important; align-items: baseline; gap: 20px; width: 100%; margin: 0 !important; padding: 10px 2px !important;
    background: none !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 0 !important;
    box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none !important;
    color: #fff !important; text-decoration: none !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); line-height: 1.3;
    transition: border-color .25s !important;
}
    #links-container-box a.link-btn .nro { flex: 0 0 24px; font: italic 13.5px Georgia, "Times New Roman", serif; opacity: .55; transition: opacity .25s; }
    #links-container-box a.link-btn .tx { font: 400 19px Georgia, "Times New Roman", serif; transition: transform .25s ease; }
    #links-container-box a.link-btn .ds { margin-left: auto; font: 12px "Segoe UI", Arial, sans-serif; white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; }
        #links-container-box a.link-btn .ds::after { content: " \2192"; }
    #links-container-box a.link-btn:hover, #links-container-box a.link-btn:focus-visible { border-bottom-color: rgba(255, 255, 255, .75) !important; outline: none; }
        #links-container-box a.link-btn:hover .nro, #links-container-box a.link-btn:focus-visible .nro { opacity: 1; }
        #links-container-box a.link-btn:hover .tx, #links-container-box a.link-btn:focus-visible .tx { transform: translateX(4px); }
        #links-container-box a.link-btn:hover .ds, #links-container-box a.link-btn:focus-visible .ds { opacity: .85; transform: none; }
@media (max-width: 1299px) { #links-container-box a.link-btn .ds { display: none; } #links-container-box a.link-btn .tx { font-size: 17px; } }

/* 26/10/2026 (3): el vidrio del primer nivel ahora es una capa (::after, ver navegador.css); en Inicio, mas transparente */
@media only screen and (min-width: 1151px) { .tico-nav .menu > li.menu-li > ul { --vidrio: rgba(26, 28, 46, .52); background: transparent !important; } }

/* 26/10/2026: en Inicio no va el fundido gris debajo de la barra (la barra es transparente sobre la foto) */
.tico-nav .navegador-contenedor::before { display: none; }
/* 26/10/2026: en Inicio tampoco va la linea fina debajo de la barra (queda solo el sombreado sobre la foto) */
@media only screen and (min-width: 1151px) { .tico-nav .navegador-contenedor::after { display: none !important; } }