/* =========================================
   1. CAMBIO DE LOGOTIPO (Solo en barra principal)
========================================= */
span#title {
    /* Ocultamos el texto original "Tryton" */
    color: transparent !important; 
    
    /* Agregamos el logotipo como imagen de fondo */
    background-image: url('images/cruz_roja-logo.png'); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    
    /* TRUCO CLAVE: Al ser una etiqueta <span>, por defecto no acepta ancho ni alto. 
       Debemos forzarla a comportarse como un bloque en línea. */
    display: inline-block !important; 
    
    /* Ajusta estas medidas. Al estar junto al menú, 
       es posible que necesites una altura menor a 50px para no deformar la barra */
    width: 130px; 
    height: 30px; 
    vertical-align: middle;
}

/* =========================================
   2. CAMBIO DE PALETA DE COLORES
========================================= */
/* Cambiar el color de la barra superior */
.navbar, .navbar-default, .bg-primary {
    background-color: #ffffff !important; /* Reemplaza por tu color principal HEX */
    border-color: #e10613 !important;     /* Un tono más oscuro para bordes */
}

/* Cambiar el color de los botones principales */
.btn-primary {
    background-color: #e10613;
    border-color: #e10613;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #1a252f; /* Color al pasar el cursor */
    border-color: #0d1318;
}

/* Color del texto de la barra superior (iconos, menús) */
.navbar-default .navbar-nav > li > a {
    color: #1d1d1b !important; 
}
/* Forzar color rojo al pasar el mouse sobre un elemento seleccionado en listas/tablas */
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr.active:hover > th,
.table-hover > tbody > tr.selected:hover > td,
.table-hover > tbody > tr.selected:hover > th,
.slick-row.selected:hover .slick-cell,
.list-group-item.active:hover {
    background-color: #e3c1c1 !important; 
    color: #ffffff !important;
}
/* =========================================
   3. CAMBIO DE COLOR EN ÍCONOS SVG
========================================= */
/* Cambia el color principal de los íconos */
.icon, 
.icon svg,
button svg,
a svg {
    color: #a01c29 !important; /* Cambia esto por tu tono deseado */
    fill: #a01c29 !important;  /* Cambia esto por tu tono deseado */
}

/* Cambia el color de los íconos al pasar el mouse por encima (opcional) */
.icon:hover,
.icon:hover svg,
button:hover svg,
a:hover svg {
    color: #a01c29 !important; /* Un tono más oscuro para el hover */
    fill: #a01c29 !important;
}
/* =========================================
   4. CAMBIO DE COLOR EN ÍCONOS DE IMAGEN (BLOBS)
========================================= */

/* Paso 1: Convertimos la imagen img.icon a nuestro color rojo principal */
img.icon {
    /* La magia: Primero lo vuelve negro (brightness 0) y luego lo tiñe al rojo exacto (#c82333) */
/*    filter: brightness(0) saturate(100%) invert(20%) sepia(91%) saturate(3088%) hue-rotate(341deg) brightness(91%) contrast(98%) !important;  */
    filter: brightness(0) saturate(100%) invert(14%) sepia(57%) saturate(4649%) hue-rotate(343deg) brightness(90%) contrast(94%) !important;
}

/* Paso 2: Efecto Hover (al pasar el mouse por el botón, el ícono se vuelve un rojo más oscuro) */
button:hover img.icon,
a:hover img.icon,
.btn:hover img.icon {
    /* Filtro generado para el color rojo oscuro (#a01c29) */
    filter: brightness(0) saturate(100%) invert(14%) sepia(57%) saturate(4649%) hue-rotate(343deg) brightness(90%) contrast(94%) !important;
}

/* Opcional: Si el botón está "deshabilitado" (disabled), hacemos que el ícono se vea gris/pálido */
button[disabled] img.icon,
.btn[disabled] img.icon {
    filter: grayscale(100%) opacity(50%) !important;
}
/* =========================================
   5. ÍCONOS DEL MENÚ LATERAL (MÚLTIPLES TONOS)
========================================= */
/* Usamos hue-rotate para cambiar el verde por rojo, 
   dejando intactos los colores negros, blancos y grises */
.expander img,
img.column-affix {
    filter: hue-rotate(175deg) !important;
}

/* Efecto al pasar el cursor (hover) por la fila de la tabla */
tr:hover .expander img,
tr:hover img.column-affix {
    /* Mantenemos el tono rojo, pero lo hacemos ligeramente más oscuro */
    filter: hue-rotate(175deg) brightness(85%) !important;
}