/* Es mejor manejar el estilo en CSS que en línea (inline) */
    .custom-select-highlight {
        background-color: rgba(255, 87, 34, 0.3);
        color: #333;
    }


/* Encabezado con estilo moderno */
.table-custom thead tr {
    background-color: #1e466a; /* Un azul un poco más sobrio */
    border-radius: 8px 8px 0 0;
}

.table-customx thead tr {
    background-color: #1e466a; /* Un azul un poco más sobrio */
    border-radius: 8px 8px 0 0;
}

.table-custom thead th {
    color: #ffffff;
    text-align: center;
    padding: 15px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    border: none; /* Quitamos bordes internos para un look más flat */
}

.table-customx thead th {
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    border: none; /* Quitamos bordes internos para un look más flat */
}


/* Ajuste para que los iconos o texto en las celdas se vean bien */
.table-custom tbody td {
    text-align: center;
    vertical-align: middle;
}


.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #121212d6;
}

/* 1. Eliminamos el borde de enfoque (focus-visible) */
.img-clickable:focus-visible,
.img-clickable:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* 2. Definimos el estado normal de la imagen */
.img-clickable {
    transition: all 0.3s ease; /* Transición suave de 0.3 segundos */
    cursor: pointer;
}

/* 3. Efecto visual al pasar el mouse o enfocar */
.img-clickable:hover,
.img-clickable:focus {
    filter: brightness(85%); /* Oscurece un poco la imagen */
    transform: scale(1.02);   /* Crece un 2% (opcional, da profundidad) */
}


/* Quita el borde solo cuando se hace clic, pero lo mantiene para teclado */
img:focus:not(:focus-visible) {
  outline: none;
}

/* Esto elimina cualquier borde o sombra en imágenes al recibir foco */
img, img:focus, img:focus-visible, img:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Ataca específicamente el borde negro del navegador al hacer clic */
img:focus, 
img:active, 
a:focus img, 
button:focus img {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent; /* Quita el destello en móviles */
}

* :focus {
    outline: 0 !important;
}

/* Sobrescritura directa al User Agent Stylesheet */
html img:focus,
html img:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* En navegadores modernos (Chrome/Edge), el borde negro suele ser este selector: */
:focus:not(:focus-visible) {
    outline: 0 !important;
    box-shadow: none !important;
}


.titulo_principal{
    text-align: center;
    color: #036;
    font-size: 1.5rem;
    font-weight: bold;
}