/* ========================================
   TEMA CATERPILLAR - AMARILLO Y NEGRO
   ======================================== */

:root {
    --cat-yellow: #FFCD00;      /* Amarillo Caterpillar oficial */
    --cat-yellow-dark: #E6B800; /* Amarillo oscuro para hover */
    --cat-black: #000000;       /* Negro */
    --cat-text: #1a1a1a;        /* Negro suave para texto */
    --cat-gray: #f5f5f5;        /* Gris claro para fondos */
}

/* NAVBAR - Amarillo con texto negro */
/* LOGO EN NAVBAR */
.navbar-brand img {
    height: 40px;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));
    transition: transform 0.3s ease;
}

.navbar-brand img:hover {
    transform: scale(1.05);
}
.navbar-dark.bg-primary {
    background: var(--cat-yellow) !important;
    border-bottom: 3px solid var(--cat-black);
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link {
    color: var(--cat-black) !important;
    font-weight: 600;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--cat-text) !important;
    background-color: var(--cat-yellow-dark);
    border-radius: 5px;
}

.navbar-dark .navbar-toggler {
    border-color: var(--cat-black);
}

/* DROPDOWN MENU */
.dropdown-menu {
    border: 2px solid var(--cat-yellow);
}

.dropdown-item:hover {
    background-color: var(--cat-yellow);
    color: var(--cat-black);
}

/* BOTONES PRIMARIOS - Amarillo */
.btn-primary {
    background-color: var(--cat-yellow) !important;
    border-color: var(--cat-black) !important;
    color: var(--cat-black) !important;
    font-weight: 600;
}

.btn-primary:hover {
    background-color: var(--cat-yellow-dark) !important;
    border-color: var(--cat-black) !important;
    color: var(--cat-black) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn-outline-primary {
    border-color: var(--cat-yellow) !important;
    color: var(--cat-yellow) !important;
}

.btn-outline-primary:hover {
    background-color: var(--cat-yellow) !important;
    color: var(--cat-black) !important;
}

.btn-outline-blue {
    border-color: #0d6efd !important;
    color: #0d6efd !important;
    background-color: transparent;
}

.btn-outline-blue:hover {
    background-color: #0d6efd !important;
    color: #ffffff !important;
}

/* BADGES */
.badge.bg-primary {
    background-color: var(--cat-yellow) !important;
    color: var(--cat-black) !important;
}

.badge.bg-warning {
    background-color: var(--cat-yellow) !important;
    color: var(--cat-black) !important;
}

.badge-admin {
    background-color: #000000 !important;
    color: #FFCD00 !important;
    font-weight: 700;
}

/* CARDS - Headers amarillos */
.card-header {
    background-color: var(--cat-yellow) !important;
    color: var(--cat-black) !important;
    font-weight: 600;
    border-bottom: 2px solid var(--cat-black);
}

/* TABLES - Headers amarillos */
.table-light thead th {
    background-color: var(--cat-yellow) !important;
    color: var(--cat-black) !important;
    font-weight: 600;
}

/* LINKS */
a {
    color: var(--cat-black);
}

a:hover {
    color: var(--cat-yellow-dark);
}

/* ALERTAS */
.alert-info {
    background-color: #fff9e6;
    border-color: var(--cat-yellow);
    color: var(--cat-text);
}

/* PROGRESS BAR */
.progress-bar.bg-primary {
    background-color: var(--cat-yellow) !important;
}

/* FORMS - Focus amarillo */
.form-control:focus,
.form-select:focus {
    border-color: var(--cat-yellow);
    box-shadow: 0 0 0 0.25rem rgba(255, 205, 0, 0.25);
}

/* FOOTER */
footer.bg-light {
    border-top: 3px solid var(--cat-yellow);
}

/* LOGIN - Fondo amarillo */
body.login-page {
    background: #000000 !important;
}

/* TEXTO GENERAL - Negro */
body {
    color: var(--cat-text);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--cat-black);
}

/* HOVER EN FILAS DE TABLA */
.table-hover tbody tr:hover {
    background-color: #fff9e6;
}

/* ICONOS */
.bi {
    color: inherit;
}

/* SHADOWS PERSONALIZADOS */
.shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* BORDER RADIUS SUAVE */
.card, .btn {
    border-radius: 8px;
}