/* ========================================================
   Tema Personalizado: Crear Medicina Reproductiva
   ======================================================== */

:root {
    --brand-purple-dark: #3B1E54;
    --brand-purple-main: #4A2C60;
    --brand-purple-light: #7E57C2;
    --brand-teal-main: #459A9E;
    --brand-teal-light: #5299A0;
    --text-dark: #111827;
}

/* Sidebar Violeta Oscuro Institucional */
.main-sidebar,
.aside-dark-primary,
.sidebar-dark-primary {
    background-color: var(--brand-purple-dark) !important;
    border-right: 4px solid var(--brand-teal-main) !important;
}

.brand-link {
    background-color: #FFFFFF !important;
    border-bottom: 3px solid var(--brand-teal-main) !important;
    color: #4A2C60 !important;
    text-align: center !important;
    padding: 1rem 0.5rem !important;
    display: block !important;
}

.brand-link .brand-image {
    float: none !important;
    max-height: 60px !important;
    width: auto !important;
    margin: 0 auto 0.5rem auto !important;
    display: block !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.brand-link .brand-text {
    color: #4A2C60 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    display: block !important;
    margin-left: 0 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
}

/* Menú Navegación Sidebar */
.main-sidebar .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active:hover {
    background-color: rgba(69, 154, 158, 0.25) !important;
    border-left: 4px solid var(--brand-teal-main) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
}

.nav-header {
    color: #C4B5FD !important;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Card Header Institucional */
.card-header {
    background: linear-gradient(135deg, var(--brand-purple-main) 0%, var(--brand-purple-light) 100%) !important;
    color: #FFFFFF !important;
    border-bottom: none !important;
    padding: 0.85rem 1.25rem;
}

.card-title {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 1.15rem;
    margin-bottom: 0;
}

/* Navbar Principal Superior */
.main-header {
    border-bottom: 2px solid var(--brand-teal-main) !important;
}

/* ========================================================
   Botones de Acción en Tonos Pasteles con Texto Negro
   ======================================================== */

/* Botón Primario (Violeta Pastel) */
.btn-primary {
    background-color: #D8B4FE !important;
    border-color: #C084FC !important;
    color: var(--text-dark) !important;
    font-weight: 600 !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #C084FC !important;
    border-color: #A855F7 !important;
    color: var(--text-dark) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Botón Secundario (Gris Pastel) */
.btn-secondary {
    background-color: #E2E8F0 !important;
    border-color: #CBD5E1 !important;
    color: var(--text-dark) !important;
    font-weight: 600 !important;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background-color: #CBD5E1 !important;
    border-color: #94A3B8 !important;
    color: var(--text-dark) !important;
}

/* Botón Éxito / Guardar / Activar (Verde Menta Pastel) */
.btn-success {
    background-color: #A7F3D0 !important;
    border-color: #6EE7B7 !important;
    color: var(--text-dark) !important;
    font-weight: 600 !important;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
    background-color: #6EE7B7 !important;
    border-color: #34D399 !important;
    color: var(--text-dark) !important;
}

/* Botón Editar / Advertencia (Amarillo Pastel) */
.btn-warning {
    background-color: #FDE68A !important;
    border-color: #FCD34D !important;
    color: var(--text-dark) !important;
    font-weight: 600 !important;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
    background-color: #FCD34D !important;
    border-color: #FBBF24 !important;
    color: var(--text-dark) !important;
}

/* Botón Ver / Información (Celeste/Turquesa Pastel) */
.btn-info {
    background-color: #BAE6FD !important;
    border-color: #7DD3FC !important;
    color: var(--text-dark) !important;
    font-weight: 600 !important;
}
.btn-info:hover, .btn-info:focus, .btn-info:active {
    background-color: #7DD3FC !important;
    border-color: #38BDF8 !important;
    color: var(--text-dark) !important;
}

/* Botón Eliminar / Peligro (Rosa Pastel) */
.btn-danger {
    background-color: #FECDD3 !important;
    border-color: #FCA5A5 !important;
    color: var(--text-dark) !important;
    font-weight: 600 !important;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background-color: #FCA5A5 !important;
    border-color: #F87171 !important;
    color: var(--text-dark) !important;
}

/* Botón Outline Mostrar Filtros */
.btn-outline-secondary {
    background-color: #F3E8FF !important;
    border-color: var(--brand-purple-main) !important;
    color: var(--brand-purple-main) !important;
    font-weight: 600 !important;
}
.btn-outline-secondary:hover {
    background-color: var(--brand-purple-main) !important;
    color: #FFFFFF !important;
}

/* Badges en tablas */
.badge.bg-success {
    background-color: #A7F3D0 !important;
    color: #064E3B !important;
    font-weight: 600;
}
.badge.bg-secondary {
    background-color: #E2E8F0 !important;
    color: #1E293B !important;
    font-weight: 600;
}
.badge.bg-info {
    background-color: #BAE6FD !important;
    color: #0C4A6E !important;
    font-weight: 600;
}
.badge.bg-warning {
    background-color: #FDE68A !important;
    color: #78350F !important;
    font-weight: 600;
}

/* ========================================================
   Pantalla de Login: Crear Medicina Reproductiva
   ======================================================== */
body.login-page {
    background: linear-gradient(135deg, #2D1642 0%, #4A2C60 50%, #3B7A7D 100%) !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-box {
    width: 420px !important;
}

.login-box .card {
    border-radius: 16px !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35) !important;
}

.login-box .card-header {
    background: #FFFFFF !important;
    padding: 1.5rem 1rem !important;
    border-bottom: 3px solid #459A9E !important;
}

.login-box .login-box-msg {
    color: #4B5563 !important;
    font-weight: 500;
}

.login-box .input-group-text {
    background-color: #F3E8FF !important;
    border-color: #D8B4FE !important;
    color: #4A2C60 !important;
}

.login-box .form-control:focus {
    border-color: #7E57C2 !important;
    box-shadow: 0 0 0 0.2rem rgba(126, 87, 194, 0.25) !important;
}

/* ========================================================
   Dashboard
   ======================================================== */

.bg-purple { background-color: var(--brand-purple-light) !important; color: #fff !important; }
.bg-teal { background-color: var(--brand-teal-main) !important; color: #fff !important; }

.info-box {
    min-height: 100px;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.info-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}
.info-box .info-box-icon {
    border-radius: 12px 0 0 12px;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}
.info-box .info-box-content {
    padding: 0.75rem 1rem;
}
.info-box .info-box-text {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.info-box .info-box-number {
    font-size: 1.5rem;
    font-weight: 700;
}

.small-box {
    border-radius: 12px;
    min-height: 110px;
    transition: transform 0.2s ease;
}
.small-box:hover {
    transform: translateY(-3px);
}
.small-box .icon {
    font-size: 3.5rem;
    top: 5px;
    right: 15px;
    opacity: 0.2;
}

.dashboard-card {
    border-radius: 12px;
}
.dashboard-card .card-header {
    border-radius: 12px 12px 0 0;
}

#chartIngresosMensuales, #chartEstadoCobranza, #chartPrestacionesTipo,
#chartIngresosEgresos, #chartCajas {
    width: 100% !important;
}