.t-TreeNav {
    background-color: rgba(68,10,204,0.76) !important; /* morado del logo */
}

.t-TreeNav .a-TreeView-content {
    background-color: rgba(68,10,204,0.76) !important; /* morado del logo */
    color: white !important;
}

.t-TreeNav .a-TreeView-content:hover {
    background-color: #ff6a00 !important;
    color: white !important;
}

.t-TreeNav .a-TreeView-node.is-expanded > .a-TreeView-content {
    background-color: rgba(68,10,204,0.76) !important; /* Morado sólido */
    color: white !important;
}

.t-TreeNav .a-TreeView-content.is-current,
.t-TreeNav .a-TreeView-node.is-active > .a-TreeView-content {
    background-color: rgba(68,10,204,0.76) !important;
    color: white !important;
}

.t-TreeNav .a-TreeView-children {
    background-color: rgba(68,10,204,0.76) !important;
}

.t-TreeNav .a-TreeView-children .a-TreeView-content {
    background-color: rgba(68,10,204,0.76) !important;
    color: white !important;
}

.t-TreeNav .a-TreeView-children .a-TreeView-content:hover {
    background-color: rgba(68,10,204,0.76) !important; /* morado del logo */
    color: white !important;
}

.t-TreeNav .a-TreeView-node.is-leaf > .a-TreeView-content {
    background-color: rgba(68,10,204,0.76) !important;
    color: white !important;
}

.t-TreeNav .a-TreeView-node.is-current > .a-TreeView-content {
    background-color: rgba(68,10,204,0.76) !important; /* Naranja o tu color de marca */
    color: white !important;
    font-weight: bold;
}

.t-TreeNav .a-TreeView-node {
    background-color: rgba(68,10,204,0.76) !important; /* morado del logo */
}

.t-TreeNav .a-TreeView-toggle {
    background-color: rgba(68,10,204,0.76) !important; /* morado del logo */
}

.t-TreeNav .a-TreeView-row {
    background-color: rgba(68,10,204,0.76) !important;  /* Morado del logo */
    color: white !important;
}

/* nuevo */
/* Suavizar las tarjetas de los gráficos */
.t-Region {
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    border: none !important;
    overflow: hidden;
}

/* Ajustar el degradado del encabezado de la región 
.t-Region-header {
    background: linear-gradient(90deg, #4a148c 0%, #ff5722 100%) !important;
    color: white !important;
}
*/

.t-Region-header {
    /* El degradado fluye del morado profundo a un tono coral/rosado suave */
    background: linear-gradient(90deg, 
        #4a148c 0%, 
        #7b1fa2 60%, 
        #ff8a80 100%) !important;
    color: white !important;
}



/* Color de fondo de la página para que las tarjetas resalten */
.t-Body-content {
    background-color: #f4f7f6 !important;
}

#t_TreeNav {
    background-color: rgba(68,10,204,0.76) !important;
    border: none !important;
}

/* nuevo 1 */
 1. Estilizamos el contenedor del botón 
#t_Button_navControl {
    background-color: transparent !important; */ Para que se vea el morado del menú */
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 52px !important;
    min-height: 52px !important;
    background-color: rgba(68,10,204,0.76) !important;
    cursor: pointer !important;
    padding: 0 !important;
} 

/* 3. Insertamos tu imagen de Shared Components */
#t_Button_navControl::before {
    content: "" !important;
    display: block !important;
    width: 42px !important;  /* Ajusta el tamaño según tu imagen */
    height: 42px !important;
 /*   background-image: url("#WORKSPACE_IMAGES#menu_icon_orange.ico") !important; REEMPLAZA CON TU NOMBRE DE ARCHIVO */
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: transform 0.3s ease !important;
}

.t-Body-nav {
  background-color: rgba(68,10,204,0.76) !important; /* morado del logo */
}

.t-Header-branding {
  background-color: white !important;
}

/* ORIGINAL */
/*
.t-NavigationBar {
  background: linear-gradient(135deg, #4A00E0, #8E2DE2, #ff7c37) !important;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  margin-left: 21px; 
  margin-right: 20px;
  margin-top: 0px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
*/

.t-NavigationBar {
  /* 0% - 40%: Transición del morado oscuro al morado vibrante.
     40% - 85%: Mantenemos el morado vibrante para que domine la barra.
     85% - 100%: Transición rápida al naranja suave (solo el 15% final).
  */
  background: linear-gradient(135deg, 
    #4A00E0 0%, 
    #8E2DE2 40%, 
    #8E2DE2 85%, 
    #ff7c37 100%) !important;
  
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  margin-left: 21px; 
  margin-right: 20px;
  margin-top: 0px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}


.t-NavigationBar a:hover {
  color: #FFFACD; !important;
  text-decoration: underline;
}

/* Para asegurar que los elementos del menú no hereden fondos raros */
.t-NavigationBar .t-Button--header,
.t-NavigationBar .t-Button--navBar {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
}

/*
.t-Region .t-Region-header {
    background-color: rgba(68,10,204,0.76) !important;
    color: white !important;
}
*/

.t-Cards .t-Card {
  border-radius: 14px;
  border: 1px solid #ddd;
  background-color: #ffffff;
}

.t-Cards .t-Card:hover {
  border-color: #4B1B86;
  box-shadow: 0 6px 20px rgba(75,27,134,0.25);
}

/* Fondo blanco para contraste */
#cards-ainnova .t-Cards {
  margin-top: 10px;
}

/* Las tarjetas mantienen fondo blanco */
#cards-ainnova .t-Cards .t-Card {
  background-color: #ffffff !important;
  border-radius: 12px;
}

/* --- TÍTULO y SUBTÍTULO EN BOLD --- */
.t-Cards .t-Card-title {
  font-weight: 700 !important;
  color: #003a70 !important;
  font-size: 1rem;
  letter-spacing: .01em;
}

.t-Cards .t-Card-subtitle {
  font-weight: 600 !important;
  color: #4c5a67;
  font-size: 0.88rem;
  opacity: 0.9;
}

.t-Cards .t-Card {
  transition: all .25s ease;
}

.t-Cards .t-Card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(75, 27, 134, 0.35);
}

