/* ============================================================
   CRM Terrenos — Rediseño de la sidebar (Material Dashboard)
   ------------------------------------------------------------
   Overrides sobre material-dashboard.css. Se carga DESPUÉS de él
   (desde template/header.php) para ganar la cascada. No edita el
   vendor. Acento dorado del sistema en lugar del azul.
   Colores: navy #143860, dorado #96843D / #aea16e.
   ============================================================ */

/* ---------- Acento dorado del item activo ----------
   La sidebar usa data-active-color="gold" (ver template/sidebar.php).
   Material solo define blue/green/orange/red/rose, así que el tema
   dorado se declara aquí siguiendo el mismo patrón. */
.sidebar[data-active-color="gold"] li.active > a,
.off-canvas-sidebar[data-active-color="gold"] li.active > a {
    background-color: #96843D;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14),
                0 7px 10px -5px rgba(150, 132, 61, 0.55);
}

/* Texto e icono del item activo en blanco (sobre el dorado) */
.sidebar[data-active-color="gold"] .nav .collapse .nav li.active > a,
.sidebar[data-active-color="gold"] .nav .collapse .nav li.active > a i,
.sidebar[data-active-color="gold"] .nav .collapse .nav li.active > a p {
    color: #ffffff !important;
    font-weight: 600;
}

/* Hover sutil dorado en items no activos */
.sidebar .nav li > a:hover {
    background-color: rgba(150, 132, 61, 0.10);
}
.sidebar .nav li > a:hover i {
    color: #96843D;
}

/* Submenús desplegables: item activo e hover en dorado */
.sidebar[data-active-color="gold"] .nav .collapse .nav li.active > a {
    color: #ffffff !important;
    font-weight: 600;
}
.sidebar .nav .collapse .nav li > a:hover {
    color: #96843D !important;
}

/* Caret del padre abierto en dorado */
.sidebar .nav li.active > [data-toggle="collapse"] i,
.sidebar .nav li.active > [data-toggle="collapse"] .caret {
    color: #96843D;
}

/* ---------- Logo: más abajo, menos hueco hasta el primer item ----------
   El gran espacio venía de un <br> en el markup (ya retirado) más el
   margin-top de .nav. El logo baja un poco y el menú sube. */
.sidebar .logo,
.off-canvas-sidebar .logo {
    margin-top: 10px;
}
.sidebar .nav,
.off-canvas-sidebar .nav {
    margin-top: 4px;
}

/* ---------- Sin scroll horizontal ----------
   Doble causa: (1) el proyecto usa una versión ANTIGUA de
   perfect-scrollbar (plugin jQuery .perfectScrollbar en
   material-dashboard.js) cuyas clases son .ps-scrollbar-x-rail /
   .ps-scrollbar-x — NO las .ps__rail-x de la versión nueva; por eso
   ocultar aquellas no hacía nada. (2) los nombres largos del menú
   llevan white-space:nowrap y desbordan los 260px, que es lo que
   dispara el riel horizontal. Se atacan las dos. */
.sidebar .sidebar-wrapper,
.off-canvas-sidebar .sidebar-wrapper {
    overflow-x: hidden !important;
}

/* Riel/thumb horizontal del perfect-scrollbar viejo (y por si acaso el nuevo) */
.sidebar .ps-scrollbar-x-rail,
.sidebar .ps-scrollbar-x,
.sidebar .ps__rail-x,
.sidebar .ps__thumb-x {
    display: none !important;
    opacity: 0 !important;
}

/* Origen del desbordamiento: texto largo del menú recortado con elipsis
   en vez de empujar el ancho y generar scroll lateral. */
.sidebar .nav p,
.off-canvas-sidebar .nav p {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* El lockup de marca tampoco debe exceder el ancho de la sidebar */
.sidebar .logo,
.sidebar .logo .simple-text,
.sidebar .logo .brand {
    max-width: 100%;
    overflow: hidden;
}

/* ---------- Fondo: cristal esmerilado sobre la imagen ----------
   El overlay original de Material es blanco plano al 93% (background:#fff;
   opacity:.93) y prácticamente oculta la foto. Se sustituye por un cristal
   translúcido con blur: la imagen queda como textura suave y difuminada
   detrás, mientras el logo y el menú (z-index 4, por encima del overlay
   z-index 3) siguen nítidos y legibles. El degradado añade un leve tinte
   navy arriba y una calidez dorada al pie para integrar la marca.
   Misma especificidad que la regla de Material y carga después: gana. */
.sidebar .sidebar-background:after,
.off-canvas-sidebar .sidebar-background:after {
    background: linear-gradient(
        180deg,
        rgba(244, 247, 250, 0.90) 0%,
        rgba(245, 246, 248, 0.85) 45%,
        rgba(246, 242, 232, 0.83) 100%
    );
    opacity: 1;   /* la translucidez ya vive en los rgba del degradado */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Refuerzo de legibilidad sobre el fondo texturizado:
   texto del menú un punto más oscuro y con leve realce. */
.sidebar .nav li > a,
.off-canvas-sidebar .nav li > a {
    color: #2b3a4d;
}
.sidebar .nav li > a p,
.off-canvas-sidebar .nav li > a p {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.sidebar:before,
.sidebar:after,
.off-canvas-sidebar:before,
.off-canvas-sidebar:after {
    background: linear-gradient(
        180deg,
        rgba(244, 247, 250, 0.90) 0%,
        rgba(245, 246, 248, 0.85) 45%,
        rgba(246, 242, 232, 0.83) 100%
    );
    opacity: 1;   /* la translucidez ya vive en los rgba del degradado */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Filete dorado sutil que separa el logo del menú */
.sidebar .logo:after,
.off-canvas-sidebar .logo:after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(150, 132, 61, 0.55), transparent);
    z-index: 5;
}