/**
 * MAM Custom Theme - Professional Red
 *
 * Diseño minimalista con rojo como acento de marca
 * El rojo aparece SOLO en: header, botones primarios, y hovers
 * Todo lo demás es neutro (grises)
 */

:root {
    /* === COLOR DE MARCA === */
    --brand: rgb(220, 50, 50);
    --brand-dark: rgb(180, 40, 40);

    /* === NEUTROS === */
    --text-dark: #333333;
    --text-medium: #555555;
    --text-light: #777777;
    --bg-light: #f5f5f5;
    --bg-white: #ffffff;
}

/* ============================================================================
 * HEADER - El único elemento grande en rojo
 * ============================================================================ */

#header .navbar {
    background-color: var(--brand) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

#header .navbar-brand {
    color: #ffffff !important;
    font-weight: 600;
}

#header .navbar-brand:hover {
    color: #ffffff !important;
}

#header .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

#header .navbar-nav .nav-link:hover,
#header .navbar-nav .nav-link:focus {
    color: #ffffff !important;
}

#header .dropdown-menu {
    background-color: var(--bg-white);
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#header .dropdown-item {
    color: var(--text-dark);
}

#header .dropdown-item:hover {
    background-color: var(--bg-light);
    color: var(--brand);
}

#header .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
}

#header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

#header .btn.logout {
    color: rgba(255, 255, 255, 0.9) !important;
}

#header .btn.logout:hover {
    color: #ffffff !important;
}

/* ============================================================================
 * FOOTER - Neutro, claro, no compite con el header
 * ============================================================================ */

#footer {
    background-color: var(--bg-light) !important;
    border-top: 1px solid #e0e0e0;
}

#footer,
#footer .text-muted {
    color: var(--text-medium) !important;
}

#footer a {
    color: var(--brand);
}

#footer a:hover {
    color: var(--brand-dark);
}

#footer .fab,
#footer .fa-brands {
    color: var(--brand);
}

#footer a:hover .fab,
#footer a:hover .fa-brands {
    color: var(--brand-dark);
}

#footer .form-select {
    background-color: var(--bg-white);
    border-color: #d0d0d0;
    color: var(--text-dark);
}

/* ============================================================================
 * ENLACES - Grises, rojo solo en hover
 * ============================================================================ */

a {
    color: var(--text-medium);
}

a:hover {
    color: var(--brand);
}

/* ============================================================================
 * BOTONES - Mantener azul de Bootstrap por defecto
 * ============================================================================ */

/* btn-primary y btn-outline-primary usan el azul de Bootstrap */

/* ============================================================================
 * FORMULARIOS - Focus sutil en rojo
 * ============================================================================ */

.form-control:focus,
.form-select:focus {
    border-color: rgba(220, 50, 50, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(220, 50, 50, 0.1);
}

/* ============================================================================
 * TABLAS Y GRIDS
 * ============================================================================ */

.table > thead {
    background-color: var(--bg-light);
    color: var(--text-dark);
}

/* table-info neutro pero destacado */
.table-info {
    --bs-table-bg: #e8e8e8;
    --bs-table-border-color: #d0d0d0;
    color: var(--text-dark);
}

.table-info > td,
.table-info > th {
    background-color: #e8e8e8;
}

/* Iconos de acciones - rojos para destacar */
.grid-view table tbody td a[title],
.grid-view table tbody td a[data-method] {
    color: var(--brand);
}

.grid-view table tbody td a[title]:hover,
.grid-view table tbody td a[data-method]:hover {
    color: var(--brand-dark);
}

/* Sorting icons */
a.asc:after {
    border-bottom-color: var(--text-dark);
}

a.desc:after {
    border-top-color: var(--text-dark);
}

/* ============================================================================
 * PAGINACIÓN
 * ============================================================================ */

.page-link {
    color: var(--text-medium);
}

.page-link:hover {
    color: var(--brand);
    background-color: var(--bg-light);
}

.page-item.active .page-link {
    background-color: var(--brand);
    border-color: var(--brand);
}

/* ============================================================================
 * BREADCRUMBS
 * ============================================================================ */

.breadcrumb-item a {
    color: var(--text-medium);
}

.breadcrumb-item a:hover {
    color: var(--brand);
}