/* Estilos para los encabezados */
.header-bg {
    background-color: #388e3c; /* Fondo verde oscuro */
    color: black; /* Texto negro */
    font-weight: bold; /* Texto en negritas */
    border-bottom: 2px solid #d1d1d1; /* Línea de separación más visible */
}

/* Alternar colores en las filas */
#mascotasTable tbody tr:nth-child(odd) {
    background-color: #ffffff; /* Blanco */
}

#mascotasTable tbody tr:nth-child(even) {
    background-color: #fae3b4; /* Beige claro */
}

/* Bordes más definidos */
.table-bordered td,
.table-bordered th {
    border: 1px solid #d1d1d1; /* Borde gris suave */
}

/* Efectos hover para los botones de acciones */
.btn-warning:hover,
.btn-info:hover {
    opacity: 0.8; /* Efecto hover */
}

/* Iconos en lugar de texto en "Acciones" */
.btn-warning .fa-pencil-alt,
.btn-info .fa-check,
.btn-info .fa-times {
    margin-right: 0; /* Sin margen a la derecha */
}

/* Redondear bordes de botones y fotos */
.btn {
    border-radius: 5px; /* Bordes redondeados para botones */
}

.img-thumbnail {
    border-radius: 8px; /* Bordes redondeados para fotos */
    transition: transform 0.3s; /* Efecto de transición para zoom */
    width: 100px; /* Ancho fijo */
    height: 100px; /* Alto fijo */
}

.img-thumbnail:hover {
    transform: scale(1.5); /* Efecto de zoom al pasar el cursor */
}

/* Resaltar el botón "Agregar Adopción" */
.add-adoption-btn {
    background-color: #2e7d32; /* Verde esmeralda */
    font-size: 1.1rem; /* Aumentar tamaño del texto */
    padding: 0.5rem 1rem; /* Aumentar tamaño del botón */
}

/* Forzar color blanco en íconos de redes sociales del footer */
.footer-social-icon i {
    color: #fff !important;
}
.footer-social-icon img {
    filter: brightness(0) invert(1) !important;
}

/* Títulos principales de secciones */
.main-section-title {
    font-size: 2.5rem;
    font-family: "Nunito", sans-serif;
    font-weight: 900;
    color: #800020;
    background: #fff;
    padding: 22px 48px 22px 48px;
    border-radius: 32px;
    box-shadow: 0 8px 32px #80002033, 0 2px 8px #ffd70055;
    display: block;
    letter-spacing: 1.5px;
    margin: 0 auto 32px auto;
    border: 4px double #ffd700;
    border-bottom: 8px solid #800020;
    text-shadow: 0 2px 12px #ffd70044, 0 1px 0 #fff;
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 700px;
    transition: box-shadow 0.3s, transform 0.3s;
    animation: wowTitle 1.2s cubic-bezier(0.5, 1.5, 0.5, 1) both;
}
.main-section-title:hover {
    box-shadow: 0 16px 48px #80002066, 0 4px 16px #ffd70099;
    transform: scale(1.03) rotate(-1deg);
}
@keyframes wowTitle {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.95);
    }
    60% {
        opacity: 1;
        transform: translateY(-10px) scale(1.04);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.main-section-title .icon {
    font-size: 2.5rem;
    margin-right: 18px;
    vertical-align: middle;
    color: #ffd700;
    filter: drop-shadow(0 2px 8px #80002044);
    text-shadow: 0 2px 8px #ffd70099;
    transition: color 0.3s, filter 0.3s;
}
.main-section-title .icon-lost {
    color: #00e1ff;
    filter: drop-shadow(0 2px 8px #00e1ff99);
}
.main-section-title .icon {
    font-size: 2.2rem;
    margin-right: 18px;
    vertical-align: middle;
    color: #ffd700;
    filter: drop-shadow(0 2px 4px #0006);
}
.main-section-title .icon-lost {
    color: #00e1ff;
}